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


Posted in Javascript onJuly 10, 2011
效果图如下所示:
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
基于jquery的使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://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
Javascript 相关文章推荐
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
详解Javascript继承的实现
Mar 25 Javascript
几种tab切换详解
Feb 03 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
原生JS实现不断变化的标签
May 22 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
js实现简单页面全屏
2019/09/17 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
python Django批量导入数据
2016/03/25 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
机器学习python实战之决策树
2017/11/01 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
初中数学教学反思
2014/01/16 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
大学生应聘求职信
2014/05/26 职场文书
保护环境的标语
2014/06/09 职场文书
公共场所禁烟标语
2014/06/25 职场文书
个人向公司借款协议书
2016/03/19 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL