基于jquery的使ListNav兼容中文首字拼音排序的实现代码

更新时间：2011年07月10日 22:46:45 作者：

jQuery的字母排序插件ListNav不支持中文，比较头疼，最后找到一个取中文首字母的JS函数，再配合ListNav，可以完善支持中文按首字母进行排序。

效果图如下所示：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>中文首字母排序</title> 
<link rel="stylesheet" href="css/listnav.css" type="text/css" media="screen" charset="utf-8" /> 
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> 
<!--获取中文首字母的函数，需要jQuery支持--> 
<script src="js/jquery.charfirst.pinyin.js" type="text/javascript"></script> 
<!--ListNav是一个用于创建按字母顺序分类导航的jQuery插件。--> 
<script src="js/jquery.listnav.min-2.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$('#myList').listnav({ 
includeOther: true, 
noMatchText: '没有内容', 
prefixes: ['the', 'a'] 
}); 
}) 
</script> 
</head> 
<body> 
<div id="noticeMSG"> 
<label>中文字母序：</label> 
</div> 
<br /> 
<!--显示字母序的层。注：此层id必需是ul的id+"-nav"--> 
<div id="myList-nav"> 
</div> 
<!-- 兼容IE6 加clear:both;--> 
<ul id="myList" style="clear:both;"> 
<li><a href="https://www.jb51.net" target="_blank">123</a></li> 
<li><a href="https://www.jb51.net" target="_blank">aaaaaa</a></li> 
<li><a href="https://www.jb51.net" target="_blank">四川大学</a> </li> 
<li><a href="https://www.jb51.net" target="_blank">四川师范大学</a></li> 
<li><a href="https://www.jb51.net" target="_blank">成都大学</a> </li> 
<li><a href="https://www.jb51.net" target="_blank">成都理工</a> </li> 
<li><a href="https://www.jb51.net" target="_blank">电子科大</a> </li> 
<li><a href="https://www.jb51.net" target="_blank">西南科大</a> </li> 
<li><a href="https://www.jb51.net" target="_blank">西南财大</a> </li> 
<li><a href="https://www.jb51.net" target="_blank">四川音乐学院</a></li> 
<li><a href="https://www.jb51.net" target="_blank">中国</a> </li> 
<li><a href="https://www.jb51.net" target="_blank">你可以动态加载这些内容</a></li> 
<li><a href="https://www.jb51.net" target="_blank">Renner整理</a></li> 
<li><a href="https://www.jb51.net" target="_blank">jb51.net</a></li> 
</ul> 
</body> 
</html> 

P.S:
jQuery ListNav Plugin
ListNav是一个用于创建按字母顺序分类导航的jQuery插件。
官方网址：http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
在线Demo： http://demo.jb51.net/js/2011/listnav-jquery/index.html
打包下载地址 https://www.jb51.net/jiaoben/37213.html

您可能感兴趣的文章:

深入了解query和params的使用区别
这篇文章主要介绍了深入了解query和params的使用区别，路由传参的时候，有俩兄弟，一个叫query，一个叫parmas，你说他们俩长得也不像吧，可这用法实在是太类似了，下面就让我们分别从vue路由和Node接收两个角度讲他们的区别,需要的朋友可以参考下
2019-06-06
jquery实现点击浏览器返回上一页按钮并能直接刷新
这篇文章主要介绍了jquery实现点击浏览器返回上一页按钮并能直接刷新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
JQuery搜索框自动补全(模糊匹配)功能实现示例
这篇文章主要介绍了JQuery搜索框自动补全(模糊匹配)功能实现示例没使用JQuery UI的autocomplete插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-01-01
jquery操作cookie插件分享
在网页客户端，我们经常会遇到读取或者设置cookie的情况，如果用纯生的js我们可能会遇到一些兼容性带来的麻烦，这里给大家介绍一个比较实用jquery操作cookie的插件
2014-01-01
jquery二级导航内容均分的原理及实现
头部导航二级导航有些内容太长，一列的话太过难看，就要分成两列，要做到按块尽量均分，排列顺序没有限制
2013-08-08
SuperSlide标签切换、焦点图多种组合插件
SuperSlide 是致力于实现网站统一特效调用的函数，能解决大部分标签切换、焦点图切换等效果，还能多个slide组合创造更多的效果。（兼容ie内核(包括无敌的 ie6)、webkit内核、ff、opera等主流浏览器）。
2015-03-03
jQuery实现响应鼠标背景变化的动态菜单效果代码
这篇文章主要介绍了jQuery实现响应鼠标背景变化的动态菜单效果代码,涉及jquery鼠标mouseover事件操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件Echarts实现的双轴图效果,结合完整实例形式分析了Echarts插件制作双轴图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-03-03
jquery.mobile 共同布局遇到的问题小结
这篇文章主要介绍了jquery.mobile 共同布局遇到的问题小结,需要的朋友可以参考下
2015-02-02
jQuery常用数据处理方法小结
这篇文章主要介绍了jQuery常用数据处理方法,实例总结了trim、param、isArray、isFunction、each等jQuery常用的数据处理方法,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02