- 时间：2022-08-13 17:01 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：基于jquery的使ListNav兼容中文首字拼音排序的实现代码
效果图如下所示：
[img]http://files.jb51.net/upload/201107/20110710224641319.jpg[/img]
[img]http://files.jb51.net/upload/201107/20110710224641357.png[/img]
[url=css/listnav.css]<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.1sucai.cn" target="_blank">123</a></li>
<li><a href="https://www.1sucai.cn" target="_blank">aaaaaa</a></li>
<li><a href="https://www.1sucai.cn" target="_blank">四川大学</a> </li>
<li><a href="https://www.1sucai.cn" target="_blank">四川师范大学</a></li>
<li><a href="https://www.1sucai.cn" target="_blank">成都大学</a> </li>
<li><a href="https://www.1sucai.cn" target="_blank">成都理工</a> </li>
<li><a href="https://www.1sucai.cn" target="_blank">电子科大</a> </li>
<li><a href="https://www.1sucai.cn" target="_blank">西南科大</a> </li>
<li><a href="https://www.1sucai.cn" target="_blank">西南财大</a> </li>
<li><a href="https://www.1sucai.cn" target="_blank">四川音乐学院</a></li>
<li><a href="https://www.1sucai.cn" target="_blank">中国</a> </li>
<li><a href="https://www.1sucai.cn" target="_blank">你可以动态加载这些内容</a></li>
<li><a href="https://www.1sucai.cn" target="_blank">Renner整理</a></li>
<li><a href="https://www.1sucai.cn" 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[/url]
打包下载地址 [url=http://www.1sucai.cn/jiaoben/37213.html]http://www.1sucai.cn/jiaoben/37213.html[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
