字母排序插件：ListNav

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

yue2008

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

阅读量398

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/yue2008/article/details/84172773

版权

jquery 专栏收录该内容

13 篇文章

订阅专栏

源码：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jquery.listnav-2.1.js"></script>
	<style type="text/css">
		.listNav { margin:0 0 10px; }
		.ln-letters { overflow:hidden; }
		.ln-letters a { font-size:0.9em; display:block; float:left; padding:2px 6px; border:1px solid silver; border-right:none; text-decoration:none; }
		.ln-letters a.ln-last { border-right:1px solid silver; }
		.ln-letters a:hover,
		.ln-letters a.ln-selected { background-color:#eaeaea; }
		.ln-letters a.ln-disabled { color:#ccc; }
		.ln-letter-count { text-align:center; font-size:0.8em; line-height:1; margin-bottom:3px; color:#336699; }
	</style>
</head>

<body leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0>
	<script language="javascript">
		jQuery(document).ready(function(){
			jQuery("#mylist").listnav({
				includeAll: true,
				includeNums: true,
				includeOther: true,
				initLetter: "c",
				noMatchText: "",
				prefixes: ["the", "a"],
				showCounts: true,
				flagDisabled: true,
				onClick: function(letter){
					//alert(letter);
				}
			});
		});
	</script>
	
	<div id="mylist-nav"></div>

	<ul id="mylist" style="clear:both;">
		<li>absolute</li>
		<li>solution</li>
		<li>append</li>
		<li>boy</li>
		<li>head</li>
		<li>content</li>
		<li>html</li>
		<li>screen</li>
		<li>charset</li>
		<li>apple</li>
		<li>before</li>
	</ul>

</body>
</html>