Implementation code based on jquery to make ListNav compatible with Chinese pinyin sorting

Home

Web Front-end

JS Tutorial

Implementation code based on jquery to make ListNav compatible with Chinese pinyin sorting_jquery

May 15, 2018 pm 04:44 PM

Pinyin sorting

The rendering is as follows:

Copy the code The code is as follows:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head&gt; 
&lt;title&gt;中文首字母排序&lt;/title&gt; 
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/listnav.css?7.1.34&quot; type=&quot;text/css&quot; media=&quot;screen&quot; charset=&quot;utf-8&quot; /&gt; 
&lt;script src=&quot;js/jquery-1.4.4.min.js?7.1.34&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
&lt;!--获取中文首字母的函数，需要jQuery支持--&gt; 
&lt;script src=&quot;js/jquery.charfirst.pinyin.js?7.1.34&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
&lt;!--ListNav是一个用于创建按字母顺序分类导航的jQuery插件。--&gt; 
&lt;script src=&quot;js/jquery.listnav.min-2.1.js?7.1.34&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot;&gt; 
$(function() { 
$(&#39;#myList&#39;).listnav({ 
includeOther: true, 
noMatchText: &#39;没有内容&#39;, 
prefixes: [&#39;the&#39;, &#39;a&#39;] 
}); 
}) 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;p id=&quot;noticeMSG&quot;&gt; 
&lt;label&gt;中文字母序：&lt;/label&gt; 
&lt;/p&gt; 
&lt;br /&gt; 
&lt;!--显示字母序的层。注：此层id必需是ul的id+&quot;-nav&quot;--&gt; 
&lt;p id=&quot;myList-nav&quot;&gt; 
&lt;/p&gt; 
&lt;!-- 兼容IE6 加clear:both;--&gt; 
&lt;ul id=&quot;myList&quot; style=&quot;clear:both;&quot;&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;123&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;aaaaaa&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;四川大学&lt;/a&gt; &lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;四川师范大学&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;成都大学&lt;/a&gt; &lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;成都理工&lt;/a&gt; &lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;电子科大&lt;/a&gt; &lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;西南科大&lt;/a&gt; &lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;西南财大&lt;/a&gt; &lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;四川音乐学院&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;中国&lt;/a&gt; &lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;你可以动态加载这些内容&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;Renner整理&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a href=&quot;https://www.jb51.net&quot; target=&quot;_blank&quot;&gt;jb51.net&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Copy after login

P.S:
jQuery ListNav Plugin
ListNav is a jQuery plug-in for creating alphabetical navigation.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn