源码：
<!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>
- 大小: 11.2 KB
分享到：
相关推荐
**jQuery筛选排序插件Listnav详解** jQuery筛选排序插件Listnav是一款强大的JavaScript工具，它专为提升用户体验而设计，特别是在处理大型数据列表时。通过在网页上动态添加一个筛选导航栏，用户可以轻松地过滤出...
2. **数字筛选**：除了按字母排序外，Listnav 还支持按数字进行筛选。这意味着在含有编号的列表中，用户可以快速找到特定编号的条目。 3. **自定义设置**：Listnav 允许开发者定制其行为，例如设置隐藏不常用的字母...
3. 初始化ListNav：在jQuery的$(document).ready()函数内，通过调用$("#yourList").listnav()方法，为指定的列表添加筛选排序功能。可以设置各种选项来自定义行为，例如是否显示无结果提示、是否开启搜索功能等。 4....
摘要:脚本资源,jQuery,字母排序 jQuery按照汉语字母首字母排序来检索对应的中文汉字，因为固有的jQuery字母排序插件ListNav不支持中文，比较头疼，最后找到一个取中文首字母的JS函数，再配合ListNav，很好的解决了...
3. 初始化listnav：在文档加载完成后，使用jQuery的$(document).ready()函数来初始化listnav，设置必要的参数，如是否包括数字、是否显示全选/全不选按钮等。 4. 自定义样式：根据需要，可以通过CSS调整字母导航栏的...
本文将详细介绍如何通过添加中文首字拼音处理函数，使ListNav能够兼容中文首字母排序。 首先，ListNav是一个jQuery插件，它能帮助开发者快速地为无序列表（`<ul>`）创建一个按字母顺序的导航菜单，方便用户通过点击...
6. **ListNav**：ListNav是用于创建基于字母的导航的jQuery插件，适合长列表的过滤，支持UL或OL列表，可显示每个字母下的条目数量，适用于提高长列表的可浏览性。 7. **jQuery Grid**：Query Grid 3.1提供了一种...
7. **列表导航插件**：`jquery.listnav-2.1.js`和`jquery.listnav.min-2.1.js`可能用于实现对大型列表的高效导航，例如在博客文章列表或产品目录中，用户可以通过字母快速跳转到相应位置。 8. **右键菜单插件**：`...
5. 多种实用的jQuery插件：例如Card、Slick、FlyLabel、Remodal、ListNav、SlidingMenu、Flip-Quote、DarkTooltip、Switchery等，这些插件可以实现各种页面元素的增强交互，如表单验证、数据展示、菜单引导、工具...
ListNav 是个 jQuery 插件，添加了平滑的基于字母的导航条，只要点击某个字母 ，就会安装开头字母筛选，跳到相应的列表位置。在线演示 标签：jQuery
首先，jQuery ListNav是一款插件，它专门用于对HTML列表（`<ul>`或`<ol>`）进行字母导航，让用户可以轻松地按字母顺序浏览和筛选列表项。这个插件特别适用于大型的图片分类列表或文字列表，提高用户体验，使用户能够...
jQuery ListNav Plugin **概述**：此插件允许用户根据关键词过滤列表中的项目。 **特点**： - 动态过滤列表。 - 支持多级过滤。 - 易于集成，文档完善。 **应用场景**：适合于拥有大量列表项的网站或应用。 #### 8...
在提供的压缩包文件`jquery-listnav-master`中，可能包含了名为`listnav`的jQuery插件，这是一个用于实现列表导航的功能。这个插件可以创建一个可搜索的导航菜单，对于大型分类列表尤其有用。用户可以通过输入关键词...
例如，模板部分可能通过 `vue-template-compiler` 编译为渲染函数，JavaScript 部分可能通过 Babel 转换为 ES5 代码，而样式部分则可能通过 CSS Loader 和 PostCSS 插件进行处理。最终，这些处理后的代码会被合并并...
{ path: '/listnav', name: 'listnav', component: () => import('@/components/listnav') }, { path: '/adminav', name: 'adminav', component: () => import('@/components/adminav') } ] }) ``` 这段代码定义...
在`listnav_button.css`文件中，我们对导航菜单进行了以下样式设置： 1. 设置字体大小：`font-size: 90%;` 2. 移除列表样式：`list-style: none;` 3. 清除默认外边距和内边距：`margin: 0; padding: 0;` 4. 为列表...
单页滚屏模板 滚屏支持 支持AMD和普通全局对象访问 鼠标滚轮 键盘上下方向键 ...使用 ...组件监听浏览器窗口高度, 并设置传入的pages高度为浏览器... * data.actionType {string} 页面更换的动作类型,有`keydown`,`listNav`,