基于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 相关文章推荐
javascript FormatNumber函数实现方法
Dec 30 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
javascript单张多张图无缝滚动实例代码
May 10 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
PHP关联数组的10个操作技巧
2013/01/21 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
村班子对照检查材料
2014/08/18 职场文书
老人节标语大全
2014/10/08 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python
MySQL派生表联表查询实战过程
2022/03/20 MySQL
Redis入门基础常用操作命令整理
2022/06/01 Redis