编程 Javascript

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

Posted in Javascript onJuly 10, 2011

效果图如下所示：

<!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://3water.com" target="_blank">123</a></li> 
<li><a href="https://3water.com" target="_blank">aaaaaa</a></li> 
<li><a href="https://3water.com" target="_blank">四川大学</a> </li> 
<li><a href="https://3water.com" target="_blank">四川师范大学</a></li> 
<li><a href="https://3water.com" target="_blank">成都大学</a> </li> 
<li><a href="https://3water.com" target="_blank">成都理工</a> </li> 
<li><a href="https://3water.com" target="_blank">电子科大</a> </li> 
<li><a href="https://3water.com" target="_blank">西南科大</a> </li> 
<li><a href="https://3water.com" target="_blank">西南财大</a> </li> 
<li><a href="https://3water.com" target="_blank">四川音乐学院</a></li> 
<li><a href="https://3water.com" target="_blank">中国</a> </li> 
<li><a href="https://3water.com" target="_blank">你可以动态加载这些内容</a></li> 
<li><a href="https://3water.com" target="_blank">Renner整理</a></li> 
<li><a href="https://3water.com" target="_blank">3water.com</a></li> 
</ul> 
</body> 
</html>

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript事件模型代码

Jul 01 Javascript

Javascript中的相等与不等运算

Apr 25 Javascript

JS输入用户名自动显示邮箱后缀列表的方法

Jan 27 Javascript

JS onkeypress兼容性写法详解

Apr 27 Javascript

JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用

Sep 19 Javascript

vue 2.0路由之路由嵌套示例详解

May 08 Javascript

详解JS获取HTML DOM元素的8种方法

Jun 17 Javascript

简单谈谈require模块化jquery和angular的问题

Jun 23 jQuery

Vue单文件组件基础模板小结

Aug 10 Javascript

微信小程序新手教程之页面打开数量限制

Mar 03 Javascript

微信小程序实现Swiper轮播图效果

Nov 22 Javascript

用Golang运行JavaScript的实现示例

Nov 25 Javascript

使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）

Jul 10 #Javascript

JQuery 自定义CircleAnimation，Animate方法学习笔记

Jul 10 #Javascript

关于jQuery中的end()使用方法

Jul 10 #Javascript

动感效果的TAB选项卡jquery 插件

Jul 09 #Javascript

使用Jquery打造最佳用户体验的登录页面的实现代码

Jul 08 #Javascript

33个优秀的jQuery 教程分享(幻灯片、动画菜单)

Jul 08 #Javascript

jquery 选项卡效果新手代码

Jul 08 #Javascript