基于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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
深入理解javascript中的this
Feb 08 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
我的论坛源代码(五)
2006/10/09 PHP
php 购物车的例子
2009/05/04 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
javascript时间函数大全
2014/06/30 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python实现命令行通讯录实例教程
2016/08/18 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Python 复平面绘图实例
2019/11/21 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
产品调价通知函
2015/04/20 职场文书
认识实习感想
2015/08/10 职场文书
如何做好工作总结!
2019/04/10 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers