JQuery 使用listnav和pinyin插件实现中文首字母导航排序

最新推荐文章于 2024-06-01 10:04:40 发布

写bug断了电

最新推荐文章于 2024-06-01 10:04:40 发布

阅读量622

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/fyydashen/article/details/109203416

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

参考网站：https://www.jb51.net/article/27643.htm

截图如下：

<!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>京剧猫</li>
			<li>白糖</li>
			<li>武崧</li>
			<li>小青</li>
			<li>大飞</li>
			<li>班主婆婆</li>
			<li>唐明师傅</li>
			<li>荣光师兄</li>
			<li>明月</li>
			<li>海王星</li>
			<li>冥王星</li>
			<li>小黑</li>
			<li>黯</li>
		</ul>
	</body>
</html>

用到的两个JS插件地址：https://www.ihwy.com/Labs/jquery-listnav-plugin/ 和 https://www.npmjs.com/package/js-pinyin

附Gitee地址：https://gitee.com/xiuerjava/sort-chinese

写bug断了电

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery 使用listnav和pinyin插件实现中文首字母导航排序

参考网站：https://www.jb51.net/article/27643.htm截图如下：a.b.<!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&g..
复制链接

扫一扫