jquery listnav分类插件按英文字母顺序图片分类和文字列表分类



174 695 232



特效描述:jquery listnav 分类插件 英文字母顺序 图片分类 文字列表分类,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/listnav.css">

2. 引入JS

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery-listnav.js"></script>
<script src="js/vendor.js"></script>

3. HTML代码

<div id="main_content_wrap" class="outer">
  <section id="main_content" class="inner">
    <ul class="tabs">
      <li><a href="#tabpage_1">Demo 1</a></li>
      <li><a href="#tabpage_2">Demo 2</a></li>
      <li><a href="#tabpage_3">Demo 3</a></li>
      <li><a href="#tabpage_4">Demo 4</a></li>
      <li><a href="#tabpage_5">Demo 5</a></li>
      <li><a href="#tabpage_6">Demo 6</a></li>
      <li><a href="#tabpage_7">Demo 7</a></li>
      <li><a href="#tabpage_8">Demo 8</a></li>
    </ul>
    <div id="tabpage_1" class="tabContainer">
      <h3>The default configuration</h3>
      <pre><code data-language="javascript">$('#demoOne').listnav();</code></pre>
      <p>This is the easiest way to use the plugin. None of the default options are overridden and a jQuery ID selector is used to bind the plugin to a single list.</p>
      <ul id="demoOne" class="demo">
        <li><a href="#">411 Services</a></li>
        <li><a href="#">Accountants</a></li>
        <li><a href="#">Accounting &amp; Bookkeeping - General Service</a></li>
        <li><a href="#">Acupuncture</a></li>
        <li><a href="#">Advertising</a></li>
        <li><a href="#">Advertising - Agencies &amp; Counselors</a></li>
        <li><a href="#">Advertising - Computer</a></li>
        <li><a href="#">Advertising - Promotional</a></li>
        <li><a href="#">Attorneys - Service Bureaus</a></li>
        <li><a href="#">Auctioneers</a></li>
        <li><a href="#">Audio Visual Consultants</a></li>
        <li><a href="#">Audio Visual Production Service</a></li>
        <li><a href="#">Automobile - Renting</a></li>
        <li><a href="#">Automobile - Repair &amp; Service</a></li>
        <li><a href="#">Banks</a></li>
        <li><a href="#">Banquet Rooms</a></li>
        <li><a href="#">Barber Shops</a></li>
        <li><a href="#">Baseball Clubs</a></li>
        <li><a href="#">Book Dealers - Used &amp; Rare</a></li>
        <li><a href="#">Bookbinders</a></li>
        <li><a href="#">Brake Service</a></li>
        <li><a href="#">Business - Management Consultants</a></li>
        <li><a href="#">Business - Services</a></li>
        <li><a href="#">Cabinet Makers</a></li>
        <li><a href="#">Cabinets</a></li>
        <li><a href="#">Cafeterias</a></li>
        <li><a href="#">Calligraphers</a></li>
        <li><a href="#">Campgrounds</a></li>
        <li><a href="#">Cemeteries &amp; Crematories</a></li>
        <li><a href="#">Ceramic Products - Decorative</a></li>
        <li><a href="#">Chambers of Commerce</a></li>
        <li><a href="#">Crane Service</a></li>
        <li><a href="#">Cruises</a></li>
        <li><a href="#">Dancing Instruction</a></li>
        <li><a href="#">Data Communications Equipment &amp; Systems - Networks</a></li>
        <li><a href="#">Deck Builders</a></li>
        <li><a href="#">Delivery Service</a></li>
        <li><a href="#">Dentists</a></li>
        <li><a href="#">Department Stores</a></li>
        <li><a href="#">Draperies &amp; Curtains - Retail &amp; Custom Made</a></li>
        <li><a href="#">Drilling - Companies</a></li>
        <li><a href="#">Driving - Instruction</a></li>
        <li><a href="#">Drug - Abuse &amp; Addiction Info &amp; Treatment</a></li>
        <li><a href="#">Drywall &amp; Insulation Contractors</a></li>
        <li><a href="#">Earthquake Products &amp; Services</a></li>
        <li><a href="#">E-Commerce</a></li>
        <li><a href="#">Education Centers</a></li>
        <li><a href="#">Educational Consultants</a></li>
        <li><a href="#">Educational Service - Business</a></li>
        <li><a href="#">Electric Contractors</a></li>
        <li><a href="#">Electric Transmission Equipment (Manufacturers)</a></li>
        <li><a href="#">Electrolysis</a></li>
        <li><a href="#">Erosion Control</a></li>
        <li><a href="#">Excavating Contractors</a></li>
        <li><a href="#">Executive Search Consultants</a></li>
        <li><a href="#">Exercise &amp; Physical Fitness Programs</a></li>
        <li><a href="#">Exterminating &amp; Pest Control Services</a></li>
        <li><a href="#">Fabric Shops</a></li>
        <li><a href="#">Fabrics (Wholesale)</a></li>
        <li><a href="#">Facilities Management</a></li>
        <li><a href="#">Farms</a></li>
        <li><a href="#">Foundation - Educational Philanthropic Research</a></li>
        <li><a href="#">Fraternities &amp; Sororities</a></li>
        <li><a href="#">Games &amp; Game Supplies</a></li>
        <li><a href="#">Garbage Collection</a></li>
        <li><a href="#">Garden Centers</a></li>
        <li><a href="#">Gas - Liquefied Petroleum - Bottled &amp; Bulk (Wholesale)</a></li>
        <li><a href="#">Guide Service</a></li>
        <li><a href="#">Gymnastic Instruction</a></li>
        <li><a href="#">Halls &amp; Auditoriums</a></li>
        <li><a href="#">Handyman Services</a></li>
        <li><a href="#">Hardware - Retail</a></li>
        <li><a href="#">Hardwood</a></li>
        <li><a href="#">Health &amp; Diet Foods - Retail</a></li>
        <li><a href="#">House &amp; Building Movers</a></li>
        <li><a href="#">House Cleaning</a></li>
        <li><a href="#">Human Factors - Research &amp; Development</a></li>
        <li><a href="#">Human Resource Consultants</a></li>
        <li><a href="#">Importers</a></li>
        <li><a href="#">Industrial - Equipment &amp; Supplies (Wholesale)</a></li>
        <li><a href="#">Internet - Services</a></li>
        <li><a href="#">Inventors</a></li>
        <li><a href="#">Investigators</a></li>
        <li><a href="#">Investment - Management</a></li>
        <li><a href="#">Investments</a></li>
        <li><a href="#">Janitor Service</a></li>
        <li><a href="#">Jewelers (Wholesale)</a></li>
        <li><a href="#">Jewelers - Retail</a></li>
        <li><a href="#">Jewelry - Designers</a></li>
        <li><a href="#">Laboratories</a></li>
        <li><a href="#">Laboratories - Research &amp; Development</a></li>
        <li><a href="#">Land Companies</a></li>
        <li><a href="#">Landfills - Sanitary</a></li>
        <li><a href="#">Lumber (Manufacturers)</a></li>
        <li><a href="#">Lumber - Retail</a></li>
        <li><a href="#">Machine Shops</a></li>
        <li><a href="#">Machinery - Rebuilding &amp; Repairing (Wholesale)</a></li>
        <li><a href="#">Machinery - Specially Designed &amp; Built</a></li>
        <li><a href="#">Magicians</a></li>
        <li><a href="#">Maid &amp; Butler Service</a></li>
        <li><a href="#">Motorcycles - Supplies &amp; Parts (Manufacturers)</a></li>
        <li><a href="#">Multimedia (Manufacturers)</a></li>
        <li><a href="#">Museums</a></li>
        <li><a href="#">Newspaper - Publishers</a></li>
        <li><a href="#">Nonclassifiable Establishments</a></li>
        <li><a href="#">Non-Profit Organizations</a></li>
        <li><a href="#">Nurseries - Plants &amp; Trees (Wholesale)</a></li>
        <li><a href="#">Nurserymen</a></li>
        <li><a href="#">Nutritionists</a></li>
        <li><a href="#">Paint - Retail</a></li>
        <li><a href="#">Painters</a></li>
        <li><a href="#">Parking Area &amp; Lots Maintenance &amp; Marking</a></li>
        <li><a href="#">Parks</a></li>
        <li><a href="#">Party Supplies</a></li>
        <li><a href="#">Patio &amp; Deck Cleaning &amp; Restoration</a></li>
        <li><a href="#">Paving Contractors</a></li>
        <li><a href="#">Pumps (Wholesale)</a></li>
        <li><a href="#">Quilting - Materials &amp; Supplies</a></li>
        <li><a href="#">Radio Stations &amp; Broadcasting Companies</a></li>
        <li><a href="#">Railroads</a></li>
        <li><a href="#">Ranches</a></li>
        <li><a href="#">Reading Improvement Instruction</a></li>
        <li><a href="#">Reading Rooms</a></li>
        <li><a href="#">Real Estate</a></li>
        <li><a href="#">Real Estate - Appraisers</a></li>
        <li><a href="#">Real Estate - Consultants</a></li>
        <li><a href="#">Restaurants</a></li>
        <li><a href="#">Restaurants - American</a></li>
        <li><a href="#">Restaurants - Bakeries</a></li>
        <li><a href="#">Restaurants - Barbecue</a></li>
        <li><a href="#">Roofing - Materials</a></li>
        <li><a href="#">Roofing - Service Consultants</a></li>
        <li><a href="#">Sand &amp; Gravel (Wholesale)</a></li>
        <li><a href="#">School Supplies (Wholesale)</a></li>
        <li><a href="#">Schools &amp; Educational Services</a></li>
        <li><a href="#">Schools - Nursery &amp; Kindergarten Academic</a></li>
        <li><a href="#">Schools - Universities &amp; Colleges Academic</a></li>
        <li><a href="#">Shoe &amp; Boot Repairing</a></li>
        <li><a href="#">Shoes - Retail</a></li>
        <li><a href="#">Shopping Centers &amp; Malls</a></li>
        <li><a href="#">Shower Doors &amp; Enclosures</a></li>
        <li><a href="#">Sunglasses &amp; Sun Goggles (Wholesale)</a></li>
        <li><a href="#">Surveyors - Land</a></li>
        <li><a href="#">Tanning Salons</a></li>
        <li><a href="#">Tattooing</a></li>
        <li><a href="#">Tax Consultants</a></li>
        <li><a href="#">Tax Return Preparation &amp; Filing</a></li>
        <li><a href="#">Technical Manual Preparation</a></li>
        <li><a href="#">Tools - Electric - Repairing &amp; Parts</a></li>
        <li><a href="#">Tours - Operators &amp; Promoters</a></li>
        <li><a href="#">Tutoring</a></li>
        <li><a href="#">Ultrasonic Equipment &amp; Supplies (Wholesale)</a></li>
        <li><a href="#">Upholsterers</a></li>
        <li><a href="#">Utilities - Underground - Cable Locating Service</a></li>
        <li><a href="#">Vacuum Cleaners - Household - Dealers</a></li>
        <li><a href="#">Vending Machines</a></li>
        <li><a href="#">Ventilating Systems - Cleaning</a></li>
        <li><a href="#">Venture Capital Companies</a></li>
        <li><a href="#">Vineyards</a></li>
        <li><a href="#">Vitamin Products (Manufacturers)</a></li>
        <li><a href="#">Vitamins</a></li>
        <li><a href="#">Wallpapers &amp; Wallcoverings - Installation</a></li>
        <li><a href="#">Windows - Repairing</a></li>
        <li><a href="#">Wineries</a></li>
        <li><a href="#">Wines - Consultants</a></li>
        <li><a href="#">Wines - Retail</a></li>
        <li><a href="#">Woodworkers</a></li>
        <li><a href="#">Writers</a></li>
        <li><a href="#">X-Ray - Apparatus &amp; Supplies (Manufacturers)</a></li>
        <li><a href="#">Yarn - Retail</a></li>
        <li><a href="#">Yoga Instruction</a></li>
        <li><a href="#">Youth Organizations &amp; Centers</a></li>
      </ul>
    </div>
    <div id="tabpage_2" class="tabContainer">
      <h3>Override defaults and binding to multiple lists</h3>
      <pre><code data-language="javascript">$('.demoTwo').listnav({
    includeAll: false,
    noMatchText: 'There are no matching entries.'
});</code></pre>
      <p>A jQuery class selector is used to bind to two lists. The <code>includeAll</code> default option is overridden, which causes the <strong>ALL</strong> link to be hidden and the first letter with matches to get pre-selected. The <code>noMatchText</code> default is overridden, providing a custom message for letters with no matching results.</p>
      <ul id="listTwo" class="demoTwo demo">
        <li><a href="#">Accountants</a></li>
        <li><a href="#">Accounting &amp; Bookkeeping - General Service</a></li>
        <li><a href="#">Acupuncture</a></li>
        <li><a href="#">Advertising</a></li>
        <li><a href="#">Banks</a></li>
        <li><a href="#">Banquet Rooms</a></li>
        <li><a href="#">Business - Services</a></li>
        <li><a href="#">Cabinet Makers</a></li>
        <li><a href="#">Cabinets</a></li>
        <li><a href="#">Cafeterias</a></li>
        <li><a href="#">Calligraphers</a></li>
        <li><a href="#">Campgrounds</a></li>
        <li><a href="#">Dancing Instruction</a></li>
        <li><a href="#">Data Communications Equipment &amp; Systems - Networks</a></li>
        <li><a href="#">Deck Builders</a></li>
        <li><a href="#">Drywall &amp; Insulation Contractors</a></li>
        <li><a href="#">Earthquake Products &amp; Services</a></li>
        <li><a href="#">E-Commerce</a></li>
        <li><a href="#">Education Centers</a></li>
        <li><a href="#">Educational Consultants</a></li>
        <li><a href="#">Educational Service - Business</a></li>
        <li><a href="#">Electric Contractors</a></li>
        <li><a href="#">Electric Transmission Equipment (Manufacturers)</a></li>
        <li><a href="#">Electrolysis</a></li>
        <li><a href="#">Erosion Control</a></li>
        <li><a href="#">Gas - Liquefied Petroleum - Bottled &amp; Bulk (Wholesale)</a></li>
        <li><a href="#">Guide Service</a></li>
        <li><a href="#">Gymnastic Instruction</a></li>
        <li><a href="#">Halls &amp; Auditoriums</a></li>
        <li><a href="#">Handyman Services</a></li>
        <li><a href="#">Hardware - Retail</a></li>
        <li><a href="#">Hardwood</a></li>
        <li><a href="#">Jewelers - Retail</a></li>
        <li><a href="#">Jewelry - Designers</a></li>
        <li><a href="#">Laboratories</a></li>
        <li><a href="#">Laboratories - Research &amp; Development</a></li>
        <li><a href="#">Land Companies</a></li>
        <li><a href="#">Landfills - Sanitary</a></li>
        <li><a href="#">Lumber (Manufacturers)</a></li>
        <li><a href="#">Lumber - Retail</a></li>
        <li><a href="#">Machine Shops</a></li>
        <li><a href="#">Parking Area &amp; Lots Maintenance &amp; Marking</a></li>
        <li><a href="#">Parks</a></li>
        <li><a href="#">Party Supplies</a></li>
        <li><a href="#">Patio &amp; Deck Cleaning &amp; Restoration</a></li>
        <li><a href="#">Paving Contractors</a></li>
        <li><a href="#">Pumps (Wholesale)</a></li>
        <li><a href="#">Roofing - Service Consultants</a></li>
        <li><a href="#">Sand &amp; Gravel (Wholesale)</a></li>
        <li><a href="#">School Supplies (Wholesale)</a></li>
        <li><a href="#">Schools &amp; Educational Services</a></li>
        <li><a href="#">Schools - Nursery &amp; Kindergarten Academic</a></li>
        <li><a href="#">Schools - Universities &amp; Colleges Academic</a></li>
        <li><a href="#">Shoe &amp; Boot Repairing</a></li>
        <li><a href="#">Shoes - Retail</a></li>
        <li><a href="#">Shopping Centers &amp; Malls</a></li>
        <li><a href="#">Shower Doors &amp; Enclosures</a></li>
        <li><a href="#">Tutoring</a></li>
        <li><a href="#">Ultrasonic Equipment &amp; Supplies (Wholesale)</a></li>
        <li><a href="#">Upholsterers</a></li>
        <li><a href="#">Windows - Repairing</a></li>
        <li><a href="#">Wineries</a></li>
        <li><a href="#">Wines - Consultants</a></li>
        <li><a href="#">Wines - Retail</a></li>
        <li><a href="#">Woodworkers</a></li>
      </ul>
      <br>
      <br>
      <ul id="listThree" class="demoTwo demo">
        <li><a href="#">Cabinet Makers</a></li>
        <li><a href="#">Cabinets</a></li>
        <li><a href="#">Cafeterias</a></li>
        <li><a href="#">Calligraphers</a></li>
        <li><a href="#">Campgrounds</a></li>
        <li><a href="#">Dancing Instruction</a></li>
        <li><a href="#">Data Communications Equipment &amp; Systems - Networks</a></li>
        <li><a href="#">Deck Builders</a></li>
        <li><a href="#">Drywall &amp; Insulation Contractors</a></li>
        <li><a href="#">Earthquake Products &amp; Services</a></li>
        <li><a href="#">E-Commerce</a></li>
        <li><a href="#">Education Centers</a></li>
        <li><a href="#">Educational Consultants</a></li>
        <li><a href="#">Educational Service - Business</a></li>
        <li><a href="#">Electric Contractors</a></li>
        <li><a href="#">Electric Transmission Equipment (Manufacturers)</a></li>
        <li><a href="#">Electrolysis</a></li>
        <li><a href="#">Erosion Control</a></li>
        <li><a href="#">Gas - Liquefied Petroleum - Bottled &amp; Bulk (Wholesale)</a></li>
        <li><a href="#">Guide Service</a></li>
        <li><a href="#">Gymnastic Instruction</a></li>
        <li><a href="#">Halls &amp; Auditoriums</a></li>
        <li><a href="#">Handyman Services</a></li>
        <li><a href="#">Hardware - Retail</a></li>
        <li><a href="#">Hardwood</a></li>
        <li><a href="#">Jewelers - Retail</a></li>
        <li><a href="#">Jewelry - Designers</a></li>
        <li><a href="#">Laboratories</a></li>
        <li><a href="#">Laboratories - Research &amp; Development</a></li>
        <li><a href="#">Land Companies</a></li>
        <li><a href="#">Landfills - Sanitary</a></li>
        <li><a href="#">Lumber (Manufacturers)</a></li>
        <li><a href="#">Lumber - Retail</a></li>
        <li><a href="#">Machine Shops</a></li>
        <li><a href="#">Parking Area &amp; Lots Maintenance &amp; Marking</a></li>
        <li><a href="#">Parks</a></li>
        <li><a href="#">Party Supplies</a></li>
        <li><a href="#">Patio &amp; Deck Cleaning &amp; Restoration</a></li>
        <li><a href="#">Paving Contractors</a></li>
        <li><a href="#">Pumps (Wholesale)</a></li>
        <li><a href="#">Roofing - Service Consultants</a></li>
        <li><a href="#">Sand &amp; Gravel (Wholesale)</a></li>
        <li><a href="#">School Supplies (Wholesale)</a></li>
        <li><a href="#">Schools &amp; Educational Services</a></li>
        <li><a href="#">Schools - Nursery &amp; Kindergarten Academic</a></li>
        <li><a href="#">Schools - Universities &amp; Colleges Academic</a></li>
        <li><a href="#">Shoe &amp; Boot Repairing</a></li>
        <li><a href="#">Shoes - Retail</a></li>
        <li><a href="#">Shopping Centers &amp; Malls</a></li>
        <li><a href="#">Shower Doors &amp; Enclosures</a></li>
        <li><a href="#">Tutoring</a></li>
        <li><a href="#">Ultrasonic Equipment &amp; Supplies (Wholesale)</a></li>
        <li><a href="#">Upholsterers</a></li>
        <li><a href="#">Windows - Repairing</a></li>
        <li><a href="#">Wineries</a></li>
        <li><a href="#">Wines - Consultants</a></li>
        <li><a href="#">Wines - Retail</a></li>
        <li><a href="#">Woodworkers</a></li>
      </ul>
    </div>
    <div id="tabpage_3" class="tabContainer">
      <h3>Using an OL, setting an <code>initLetter</code> and customizing the CSS</h3>
      <pre><code data-language="javascript">$('#demoThree').listnav({
    initLetter: 'c'
});</code></pre>
      <p>The <code>initLetter</code> option is set to letter 'c', which forces the list to load with that letter selected. The list is an OL (ordered list) and the numbers restart at 1 under each letter. The default styling is overridden to give the navigation and list a different look.</p>
      <ol id="demoThree" class="indented demo">
        <li><a href="#">411 Services</a></li>
        <li><a href="#">Accountants</a></li>
        <li><a href="#">Accounting &amp; Bookkeeping - General Service</a></li>
        <li><a href="#">Acupuncture</a></li>
        <li><a href="#">Advertising</a></li>
        <li><a href="#">Advertising - Agencies &amp; Counselors</a></li>
        <li><a href="#">Advertising - Computer</a></li>
        <li><a href="#">Advertising - Promotional</a></li>
        <li><a href="#">Attorneys - Service Bureaus</a></li>
        <li><a href="#">Auctioneers</a></li>
        <li><a href="#">Audio Visual Consultants</a></li>
        <li><a href="#">Audio Visual Production Service</a></li>
        <li><a href="#">Automobile - Renting</a></li>
        <li><a href="#">Automobile - Repair &amp; Service</a></li>
        <li><a href="#">Cabinet Makers</a></li>
        <li><a href="#">Cabinets</a></li>
        <li><a href="#">Cafeterias</a></li>
        <li><a href="#">Calligraphers</a></li>
        <li><a href="#">Campgrounds</a></li>
        <li><a href="#">Dancing Instruction</a></li>
        <li><a href="#">Data Communications Equipment &amp; Systems - Networks</a></li>
        <li><a href="#">Deck Builders</a></li>
        <li><a href="#">Drywall &amp; Insulation Contractors</a></li>
        <li><a href="#">Earthquake Products &amp; Services</a></li>
        <li><a href="#">E-Commerce</a></li>
        <li><a href="#">Education Centers</a></li>
        <li><a href="#">Educational Consultants</a></li>
        <li><a href="#">Educational Service - Business</a></li>
        <li><a href="#">Electric Contractors</a></li>
        <li><a href="#">Electric Transmission Equipment (Manufacturers)</a></li>
        <li><a href="#">Electrolysis</a></li>
        <li><a href="#">Erosion Control</a></li>
        <li><a href="#">Gas - Liquefied Petroleum - Bottled &amp; Bulk (Wholesale)</a></li>
        <li><a href="#">Guide Service</a></li>
        <li><a href="#">Gymnastic Instruction</a></li>
        <li><a href="#">Halls &amp; Auditoriums</a></li>
        <li><a href="#">Handyman Services</a></li>
        <li><a href="#">Hardware - Retail</a></li>
        <li><a href="#">Hardwood</a></li>
        <li><a href="#">Jewelers - Retail</a></li>
        <li><a href="#">Jewelry - Designers</a></li>
        <li><a href="#">Laboratories</a></li>
        <li><a href="#">Laboratories - Research &amp; Development</a></li>
        <li><a href="#">Land Companies</a></li>
        <li><a href="#">Landfills - Sanitary</a></li>
        <li><a href="#">Lumber (Manufacturers)</a></li>
        <li><a href="#">Lumber - Retail</a></li>
        <li><a href="#">Machine Shops</a></li>
        <li><a href="#">Parking Area &amp; Lots Maintenance &amp; Marking</a></li>
        <li><a href="#">Parks</a></li>
        <li><a href="#">Party Supplies</a></li>
        <li><a href="#">Patio &amp; Deck Cleaning &amp; Restoration</a></li>
        <li><a href="#">Paving Contractors</a></li>
        <li><a href="#">Pumps (Wholesale)</a></li>
        <li><a href="#">Roofing - Service Consultants</a></li>
        <li><a href="#">Sand &amp; Gravel (Wholesale)</a></li>
        <li><a href="#">School Supplies (Wholesale)</a></li>
        <li><a href="#">Schools &amp; Educational Services</a></li>
        <li><a href="#">Schools - Nursery &amp; Kindergarten Academic</a></li>
        <li><a href="#">Schools - Universities &amp; Colleges Academic</a></li>
        <li><a href="#">Shoe &amp; Boot Repairing</a></li>
        <li><a href="#">Shoes - Retail</a></li>
        <li><a href="#">Shopping Centers &amp; Malls</a></li>
        <li><a href="#">Shower Doors &amp; Enclosures</a></li>
        <li><a href="#">Tutoring</a></li>
        <li><a href="#">Ultrasonic Equipment &amp; Supplies (Wholesale)</a></li>
        <li><a href="#">Upholsterers</a></li>
        <li><a href="#">Windows - Repairing</a></li>
        <li><a href="#">Wineries</a></li>
        <li><a href="#">Wines - Consultants</a></li>
        <li><a href="#">Wines - Retail</a></li>
        <li><a href="#">Woodworkers</a></li>
      </ol>
    </div>
    <div id="tabpage_4" class="tabContainer">
      <h3>Style your lists however you want!</h3>
      <pre><code data-language="javascript">$('#demoFour').listnav({
    includeNums: false
});</code></pre>
      <p>Anchor (A) tags in the list items are styled to look like boxes and the LI's are floated left so that they will dynamically wrap from left to right and down. The 0-9 number navigation item is hidden by the <code>includeNums:false</code> option.</p>
      <div class="listWrapper">
        <ul id="demoFour" class="demo">
          <li><a href="#">Agizzy</a></li>
          <li><a href="#">Aiboo</a></li>
          <li><a href="#">Avazu</a></li>
          <li><a href="#">Babbletype</a></li>
          <li><a href="#">BrowseZ</a></li>
          <li><a href="#">Camiba</a></li>
          <li><a href="#">Centilia</a></li>
          <li><a href="#">Centixo</a></li>
          <li><a href="#">Chatterbean</a></li>
          <li><a href="#">Chatvine</a></li>
          <li><a href="#">Dabster</a></li>
          <li><a href="#">Dazzleblab</a></li>
          <li><a href="#">Dazzleclub</a></li>
          <li><a href="#">Demivee</a></li>
          <li><a href="#">Devopia</a></li>
          <li><a href="#">Eaxo</a></li>
          <li><a href="#">Edgedrive</a></li>
          <li><a href="#">Edgenation</a></li>
          <li><a href="#">Fadeo</a></li>
          <li><a href="#">Feedbird</a></li>
          <li><a href="#">Fivecat</a></li>
          <li><a href="#">Flipspot</a></li>
          <li><a href="#">Innobird</a></li>
          <li><a href="#">Inte</a></li>
          <li><a href="#">Jabberspot</a></li>
          <li><a href="#">Jabberverse</a></li>
          <li><a href="#">Jumplist</a></li>
          <li><a href="#">Kaype</a></li>
          <li><a href="#">Meendo</a></li>
          <li><a href="#">Meente</a></li>
          <li><a href="#">Meetz</a></li>
          <li><a href="#">Muba</a></li>
          <li><a href="#">Ombee</a></li>
          <li><a href="#">Oope</a></li>
          <li><a href="#">Podtune</a></li>
          <li><a href="#">Quiyo</a></li>
          <li><a href="#">Rifffire</a></li>
          <li><a href="#">Riffmix</a></li>
          <li><a href="#">Tagtube</a></li>
          <li><a href="#">Tandu</a></li>
          <li><a href="#">Tekpad</a></li>
          <li><a href="#">Tekware</a></li>
          <li><a href="#">Topbug</a></li>
          <li><a href="#">Trunti</a></li>
          <li><a href="#">Twitterspot</a></li>
          <li><a href="#">Voonte</a></li>
          <li><a href="#">Wikible</a></li>
          <li><a href="#">Wikidel</a></li>
          <li><a href="#">Wikindo</a></li>
          <li><a href="#">Yondo</a></li>
          <li><a href="#">Yotz</a></li>
          <li><a href="#">Zoomworks</a></li>
        </ul>
      </div>
    </div>
    <div id="tabpage_5" class="tabContainer">
      <h3>Using <code>cookieName</code> to save last click and utilizing an <code>onClick</code> callback</h3>
      <pre><code data-language="javascript">$('#demoFive').listnav({
    cookieName: 'ln-demo5',
    onClick: function(letter) {
        $(".myLastClicked").text(letter.toUpperCase());
    }
});</code></pre>
      <p>If you include the <a href="https://github.com/carhartl/jquery-cookie">jquery.cookie</a> js file in your page before the listnav js file, you can set the <code>cookieName</code> option to have the listnav control remember your user's last clicked navigation item (the cookie value will be 'all', '_' for numbers 0-9 or a lowercase letter 'a' - 'z'). You can also use the <code>onClick</code> callback to fire a custom function when a letter gets clicked. Click a letter to see the onClick function, then reload the page and come back to Demo 5 and you'll see that the list loads your last clicked letter (obtained from the cookie value).</p>
      <p>You Just Clicked: <span class="myLastClicked" style="font-size:1.5em; color:#FE51A1">?</span></p>
      <ul id="demoFive" class="demo">
        <li><a href="#">411 Services</a></li>
        <li><a href="#">Accountants</a></li>
        <li><a href="#">Accounting &amp; Bookkeeping - General Service</a></li>
        <li><a href="#">Acupuncture</a></li>
        <li><a href="#">Advertising</a></li>
        <li><a href="#">Advertising - Agencies &amp; Counselors</a></li>
        <li><a href="#">Advertising - Computer</a></li>
        <li><a href="#">Advertising - Promotional</a></li>
        <li><a href="#">Attorneys - Service Bureaus</a></li>
        <li><a href="#">Auctioneers</a></li>
        <li><a href="#">Audio Visual Consultants</a></li>
        <li><a href="#">Audio Visual Production Service</a></li>
        <li><a href="#">Automobile - Renting</a></li>
        <li><a href="#">Automobile - Repair &amp; Service</a></li>
        <li><a href="#">Cabinet Makers</a></li>
        <li><a href="#">Cabinets</a></li>
        <li><a href="#">Cafeterias</a></li>
        <li><a href="#">Calligraphers</a></li>
        <li><a href="#">Campgrounds</a></li>
        <li><a href="#">Dancing Instruction</a></li>
        <li><a href="#">Data Communications Equipment &amp; Systems - Networks</a></li>
        <li><a href="#">Deck Builders</a></li>
        <li><a href="#">Drywall &amp; Insulation Contractors</a></li>
        <li><a href="#">Earthquake Products &amp; Services</a></li>
        <li><a href="#">E-Commerce</a></li>
        <li><a href="#">Education Centers</a></li>
        <li><a href="#">Educational Consultants</a></li>
        <li><a href="#">Educational Service - Business</a></li>
        <li><a href="#">Electric Contractors</a></li>
        <li><a href="#">Electric Transmission Equipment (Manufacturers)</a></li>
        <li><a href="#">Electrolysis</a></li>
        <li><a href="#">Erosion Control</a></li>
        <li><a href="#">Gas - Liquefied Petroleum - Bottled &amp; Bulk (Wholesale)</a></li>
        <li><a href="#">Guide Service</a></li>
        <li><a href="#">Gymnastic Instruction</a></li>
        <li><a href="#">Halls &amp; Auditoriums</a></li>
        <li><a href="#">Handyman Services</a></li>
        <li><a href="#">Hardware - Retail</a></li>
        <li><a href="#">Hardwood</a></li>
        <li><a href="#">Jewelers - Retail</a></li>
        <li><a href="#">Jewelry - Designers</a></li>
        <li><a href="#">Laboratories</a></li>
        <li><a href="#">Laboratories - Research &amp; Development</a></li>
        <li><a href="#">Land Companies</a></li>
        <li><a href="#">Landfills - Sanitary</a></li>
        <li><a href="#">Lumber (Manufacturers)</a></li>
        <li><a href="#">Lumber - Retail</a></li>
        <li><a href="#">Machine Shops</a></li>
        <li><a href="#">Parking Area &amp; Lots Maintenance &amp; Marking</a></li>
        <li><a href="#">Parks</a></li>
        <li><a href="#">Party Supplies</a></li>
        <li><a href="#">Patio &amp; Deck Cleaning &amp; Restoration</a></li>
        <li><a href="#">Paving Contractors</a></li>
        <li><a href="#">Pumps (Wholesale)</a></li>
        <li><a href="#">Roofing - Service Consultants</a></li>
        <li><a href="#">Sand &amp; Gravel (Wholesale)</a></li>
        <li><a href="#">School Supplies (Wholesale)</a></li>
        <li><a href="#">Schools &amp; Educational Services</a></li>
        <li><a href="#">Schools - Nursery &amp; Kindergarten Academic</a></li>
        <li><a href="#">Schools - Universities &amp; Colleges Academic</a></li>
        <li><a href="#">Shoe &amp; Boot Repairing</a></li>
        <li><a href="#">Shoes - Retail</a></li>
        <li><a href="#">Shopping Centers &amp; Malls</a></li>
        <li><a href="#">Shower Doors &amp; Enclosures</a></li>
        <li><a href="#">Tutoring</a></li>
        <li><a href="#">Ultrasonic Equipment &amp; Supplies (Wholesale)</a></li>
        <li><a href="#">Upholsterers</a></li>
        <li><a href="#">Windows - Repairing</a></li>
        <li><a href="#">Wineries</a></li>
        <li><a href="#">Wines - Consultants</a></li>
        <li><a href="#">Wines - Retail</a></li>
        <li><a href="#">Woodworkers</a></li>
      </ul>
    </div>
    <div id="tabpage_6" class="tabContainer">
      <h3>Using the <code>includeOther</code> and <code>prefixes</code> options</h3>
      <pre><code data-language="javascript">$('#demoSix').listnav({
    includeOther: true,
    prefixes: ['the','a']
});</code></pre>
      <p>Use the <code>includeOther</code> option to show a [...] navigation item for access to list items that start with something other than A-Z and 0-9 (such as Ä and Ü). If you'd like something like "The Valley News" or "The Willows Journal" to appear under V and W as well as under T, supply an array of prefixes using the <code>prefixes</code> option.</p>
      <p><strong>Note:</strong> <code>prefixes</code> will not iterate the "ALL" count twice.</p>
      <ul id="demoSix" class="demo">
        <li><a href="#">Äpfel</a></li>
        <li><a href="#">Über alle</a></li>
        <li><a href="#">Alameda Sun</a></li>
        <li><a href="#">Alameda Times-Star</a></li>
        <li><a href="#">Almanac</a></li>
        <li><a href="#">American Canyon Eagle</a></li>
        <li><a href="#">American River Messenger</a></li>
        <li><a href="#">Antelope Valley Press</a></li>
        <li><a href="#">Antioch Press</a></li>
        <li><a href="#">Appeal-Democrat</a></li>
        <li><a href="#">Arcata Eye</a></li>
        <li><a href="#">Argonaut</a></li>
        <li><a href="#">Argus Online</a></li>
        <li><a href="#">Atascadero News</a></li>
        <li><a href="#">Auburn Journal</a></li>
        <li><a href="#">Bakersfield Californian</a></li>
        <li><a href="#">Baypoint Press</a></li>
        <li><a href="#">Business Journal</a></li>
        <li><a href="#">Business Times</a></li>
        <li><a href="#">Calaveras Enterprise</a></li>
        <li><a href="#">Californian</a></li>
        <li><a href="#">Carmel Pine Cone</a></li>
        <li><a href="#">Chico Enterprise-Record</a></li>
        <li><a href="#">Clovis Independent</a></li>
        <li><a href="#">Coast News</a></li>
        <li><a href="#">Coastal View News</a></li>
        <li><a href="#">Coastline Pilot</a></li>
        <li><a href="#">Community Newspaper Group</a></li>
        <li><a href="#">Community Voice</a></li>
        <li><a href="#">Compton Bulletin</a></li>
        <li><a href="#">Contra Costa Times</a></li>
        <li><a href="#">Coronado Eagle &amp; Journal</a></li>
        <li><a href="#">Crestline Courier-News</a></li>
        <li><a href="#">Cronicas</a></li>
        <li><a href="#">Culver City Observer</a></li>
        <li><a href="#">Daily Breeze</a></li>
        <li><a href="#">Daily Independent</a></li>
        <li><a href="#">Daily News</a></li>
        <li><a href="#">Daily Republic</a></li>
        <li><a href="#">Daily Republican</a></li>
        <li><a href="#">Daily Triplicate</a></li>
        <li><a href="#">Davis Enterprise</a></li>
        <li><a href="#">Desert Dispatch</a></li>
        <li><a href="#">Desert Sun</a></li>
        <li><a href="#">Eagle and Times</a></li>
        <li><a href="#">East Bay Express</a></li>
        <li><a href="#">East Bay Express</a></li>
        <li><a href="#">El Dorado Hills Telegraph</a></li>
        <li><a href="#">El Mensajero</a></li>
        <li><a href="#">El Observador</a></li>
        <li><a href="#">Elk Grove Citizen</a></li>
        <li><a href="#">Feather River Bulletin</a></li>
        <li><a href="#">Fillmore Gazette</a></li>
        <li><a href="#">Folsom Telegraph</a></li>
        <li><a href="#">Fontana Herald News</a></li>
        <li><a href="#">Fort Bragg Advocate-News</a></li>
        <li><a href="#">Free Lance</a></li>
        <li><a href="#">Fresno Bee</a></li>
        <li><a href="#">Galt Herald</a></li>
        <li><a href="#">Glendale News Press</a></li>
        <li><a href="#">Gold Country Times</a></li>
        <li><a href="#">Goleta Valley Voice</a></li>
        <li><a href="#">Gonzales Tribune</a></li>
        <li><a href="#">Good Times</a></li>
        <li><a href="#">Greenfield News</a></li>
        <li><a href="#">Gridley Herald</a></li>
        <li><a href="#">Grunion Gazette</a></li>
        <li><a href="#">Half Moon Bay Review</a></li>
        <li><a href="#">Hesperia Star</a></li>
        <li><a href="#">Hi-Desert Star</a></li>
        <li><a href="#">Holtville Tribune</a></li>
        <li><a href="#">Humboldt Beacon</a></li>
        <li><a href="#">Idyllwild Town Crier</a></li>
        <li><a href="#">Imperial Valley Press Online</a></li>
        <li><a href="#">Independent</a></li>
        <li><a href="#">Independent</a></li>
        <li><a href="#">Independent Voice</a></li>
        <li><a href="#">Inland Valley Daily Bulletin</a></li>
        <li><a href="#">Inter Mountain News</a></li>
        <li><a href="#">Investor's Business Daily</a></li>
        <li><a href="#">Jackson Ledger-Dispatch</a></li>
        <li><a href="#">Jewish Observer</a></li>
        <li><a href="#">Kern Valley Sun</a></li>
        <li><a href="#">King City Rustler</a></li>
        <li><a href="#">Kingsburg Recorder</a></li>
        <li><a href="#">L.A. Weekly</a></li>
        <li><a href="#">La Canada Valley Sun</a></li>
        <li><a href="#">La Opinion</a></li>
        <li><a href="#">La Quinta Sun</a></li>
        <li><a href="#">Laguna Beach Independent</a></li>
        <li><a href="#">Lake County Record-Bee</a></li>
        <li><a href="#">Lamorinda Weekly</a></li>
        <li><a href="#">Lassen County Times</a></li>
        <li><a href="#">Lemoore Advance</a></li>
        <li><a href="#">Lincoln News Messenger</a></li>
        <li><a href="#">Lodi News-Sentinel</a></li>
        <li><a href="#">Lompoc Record</a></li>
        <li><a href="#">Long Beach Business Journal</a></li>
        <li><a href="#">Loomis News</a></li>
        <li><a href="#">Los Altos Town Crier</a></li>
        <li><a href="#">Los Angeles Daily News</a></li>
        <li><a href="#">Los Angeles Downtown News</a></li>
        <li><a href="#">Los Angeles Times</a></li>
        <li><a href="#">Los Banos Enterprise</a></li>
        <li><a href="#">Los Gatos Observer</a></li>
        <li><a href="#">Madera Tribune</a></li>
        <li><a href="#">Malibu Times</a></li>
        <li><a href="#">Mammoth Times</a></li>
        <li><a href="#">Manteca Bulletin</a></li>
        <li><a href="#">Marin Independent Journal</a></li>
        <li><a href="#">Mariposa Gazette</a></li>
        <li><a href="#">McKinleyville Press</a></li>
        <li><a href="#">Mendocino Beacon</a></li>
        <li><a href="#">Merced Sun-Star</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">MidValley News</a></li>
        <li><a href="#">Midway Driller</a></li>
        <li><a href="#">Milpitas Post</a></li>
        <li><a href="#">Modesto Bee</a></li>
        <li><a href="#">Modoc County Record</a></li>
        <li><a href="#">Monterey County Herald</a></li>
        <li><a href="#">Monterey County Weekly</a></li>
        <li><a href="#">Moorpark Acorn</a></li>
        <li><a href="#">Moorpark Acorn</a></li>
        <li><a href="#">Mount Shasta Herald</a></li>
        <li><a href="#">Mountain Democrat</a></li>
        <li><a href="#">Mountain Enterprise</a></li>
        <li><a href="#">Mountain News</a></li>
        <li><a href="#">Mountain View Voice</a></li>
        <li><a href="#">Napa Valley Register</a></li>
        <li><a href="#">New Times Weekly</a></li>
        <li><a href="#">News &amp; Review</a></li>
        <li><a href="#">North Bay Business Journal</a></li>
        <li><a href="#">North County Times</a></li>
        <li><a href="#">North County Times</a></li>
        <li><a href="#">Novato Advance</a></li>
        <li><a href="#">Oakdale Leader</a></li>
        <li><a href="#">Oakland Tribune</a></li>
        <li><a href="#">Oakley Press</a></li>
        <li><a href="#">OC Business Journal</a></li>
        <li><a href="#">Ojai Valley News</a></li>
        <li><a href="#">Orange County Register</a></li>
        <li><a href="#">Orange County Weekly</a></li>
        <li><a href="#">Orland Press Register</a></li>
        <li><a href="#">Oroville Mercury-Register</a></li>
        <li><a href="#">Pacific Sun</a></li>
        <li><a href="#">Pacifica Tribune</a></li>
        <li><a href="#">Palo Alto Online</a></li>
        <li><a href="#">Palo Verde Valley Times</a></li>
        <li><a href="#">Palo Verde Valley Times</a></li>
        <li><a href="#">Paradise Post</a></li>
        <li><a href="#">Pasadena Star-News</a></li>
        <li><a href="#">Paso Robles Press Online</a></li>
        <li><a href="#">Peninsula News</a></li>
        <li><a href="#">Pinnacle News</a></li>
        <li><a href="#">Pittsburg Press</a></li>
        <li><a href="#">Placer Herald</a></li>
        <li><a href="#">Point Reyes Light</a></li>
        <li><a href="#">Pomerado Newspaper</a></li>
        <li><a href="#">Porterville Recorder</a></li>
        <li><a href="#">Portola Reporter</a></li>
        <li><a href="#">Press Banner</a></li>
        <li><a href="#">Press Democrat</a></li>
        <li><a href="#">Press Telegram</a></li>
        <li><a href="#">Press Tribune</a></li>
        <li><a href="#">Press-Enterprise</a></li>
        <li><a href="#">Ramona Journal</a></li>
        <li><a href="#">Ramona Sentinel</a></li>
        <li><a href="#">Record Searchlight</a></li>
        <li><a href="#">Red Bluff Daily News</a></li>
        <li><a href="#">Redlands Daily Facts</a></li>
        <li><a href="#">Reedley Exponent</a></li>
        <li><a href="#">Register-Pajaronian</a></li>
        <li><a href="#">Ripon Record</a></li>
        <li><a href="#">Riverside County Record News</a></li>
        <li><a href="#">Rocklin &amp; Roseville Today</a></li>
        <li><a href="#">Sacramento Bee</a></li>
        <li><a href="#">Sacramento News &amp; Review</a></li>
        <li><a href="#">Saint Helena Star</a></li>
        <li><a href="#">San Bernardino Sun</a></li>
        <li><a href="#">San Diego Daily Transcript</a></li>
        <li><a href="#">San Diego Reader</a></li>
        <li><a href="#">San Diego Union-Tribune</a></li>
        <li><a href="#">San Francisco Examiner</a></li>
        <li><a href="#">San Francisco Guardian</a></li>
        <li><a href="#">San Francisco Weekly</a></li>
        <li><a href="#">San Gabriel Valley Tribune</a></li>
        <li><a href="#">San Jose Mercury News</a></li>
        <li><a href="#">San Mateo Daily Journal</a></li>
        <li><a href="#">Santa Barbara Daily Sound</a></li>
        <li><a href="#">Santa Barbara Independent</a></li>
        <li><a href="#">Santa Barbara News Press</a></li>
        <li><a href="#">Santa Cruz Sentinel</a></li>
        <li><a href="#">Santa Maria Sun</a></li>
        <li><a href="#">Santa Maria Times</a></li>
        <li><a href="#">Santa Monica Mirror</a></li>
        <li><a href="#">Santa Monica Observer</a></li>
        <li><a href="#">Santa Paula Times</a></li>
        <li><a href="#">Santa Ynez Valley News</a></li>
        <li><a href="#">Selma Enterprise</a></li>
        <li><a href="#">Sentinel</a></li>
        <li><a href="#">Sierra Star</a></li>
        <li><a href="#">Sierra Sun</a></li>
        <li><a href="#">Signal</a></li>
        <li><a href="#">Simi Valley Acorn</a></li>
        <li><a href="#">Siskiyou Daily News</a></li>
        <li><a href="#">Soledad Bee</a></li>
        <li><a href="#">Sonoma Index-Tribune</a></li>
        <li><a href="#">Sonoma Valley Sun</a></li>
        <li><a href="#">Studio City Sun</a></li>
        <li><a href="#">Tahoe Daily Tribune</a></li>
        <li><a href="#">Tehachapi News</a></li>
        <li><a href="#">The Acorn</a></li>
        <li><a href="#">The Adobe Press</a></li>
        <li><a href="#">The Alpine Sun</a></li>
        <li><a href="#">The Ark</a></li>
        <li><a href="#">The Camarillo Acorn</a></li>
        <li><a href="#">The Ceres Courier</a></li>
        <li><a href="#">The Chino Champion</a></li>
        <li><a href="#">The Claremont Courier</a></li>
        <li><a href="#">The Coast News</a></li>
        <li><a href="#">The Daily Democrat</a></li>
        <li><a href="#">The Daily Press</a></li>
        <li><a href="#">The Delhi Express</a></li>
        <li><a href="#">The Desert Trail</a></li>
        <li><a href="#">The Dispatch</a></li>
        <li><a href="#">The Escalon Times</a></li>
        <li><a href="#">The Foothills Paper</a></li>
        <li><a href="#">The Foothills Sun Gazette</a></li>
        <li><a href="#">The Gilroy Dispatch</a></li>
        <li><a href="#">The Inyo Register</a></li>
        <li><a href="#">The Mid-County Post</a></li>
        <li><a href="#">The Record</a></li>
        <li><a href="#">The Reporter</a></li>
        <li><a href="#">The River Valley Times</a></li>
        <li><a href="#">The Valley News</a></li>
        <li><a href="#">The Valley Post</a></li>
        <li><a href="#">The Village News</a></li>
        <li><a href="#">The Willows Journal</a></li>
        <li><a href="#">Thousand Oaks Acorn</a></li>
        <li><a href="#">Times and News</a></li>
        <li><a href="#">Times Press Recorder</a></li>
        <li><a href="#">Times-Standard</a></li>
        <li><a href="#">Tracy Press</a></li>
        <li><a href="#">Trinity Journal</a></li>
        <li><a href="#">Tri-Valley Herald</a></li>
        <li><a href="#">Tulare Advance-Register</a></li>
        <li><a href="#">Turlock Journal</a></li>
        <li><a href="#">Ukiah Daily Journal</a></li>
        <li><a href="#">Union</a></li>
        <li><a href="#">Union Democrat</a></li>
        <li><a href="#">Vallejo Times-Herald</a></li>
        <li><a href="#">Valley Business Journal</a></li>
        <li><a href="#">Valley Chronicle</a></li>
        <li><a href="#">Valley Journal</a></li>
        <li><a href="#">Valley Roadrunner</a></li>
        <li><a href="#">Valley Springs News</a></li>
        <li><a href="#">Ventura County Reporter</a></li>
        <li><a href="#">Ventura County Star</a></li>
        <li><a href="#">Village News</a></li>
        <li><a href="#">Visalia Times-Delta</a></li>
        <li><a href="#">Weekly</a></li>
        <li><a href="#">Weekly Calistogan</a></li>
        <li><a href="#">Westside Connect</a></li>
        <li><a href="#">Whittier Daily News</a></li>
        <li><a href="#">Willits News</a></li>
        <li><a href="#">Winters Express</a></li>
      </ul>
    </div>
    <div id="tabpage_7" class="tabContainer">
      <h3>Specify a <code>filterSelector</code> and removing links with <code>removeDisabled</code></h3>
      <pre><code data-language="javascript">$('#demoSeven').listnav({
    filterSelector: '.last-name',
    includeNums: false,
    removeDisabled: true
});</code></pre>
      <p>Below you'll find a list of the Star Trek TNG Cast "generated" by a CMS. While you wanted to filter by last name it generated the first name fields first...</p>
      <p><strong>New in 2.2</strong>, using <code>filterSelector</code> you can specify a css selector for your navigation to filter by! You can also remove letters that have no content by setting <code>removeDisabled: true</code></p>
      <p>In this demo, each LI contains a hidden div with <code>class="last-name"</code> <br>
        So setting <code>filterSelector: '.last-name'</code> lets us filter the list using that CSS selector.</p>
      <p><strong>NOTE:</strong> <code>filterSelector</code> will accept any valid CSS selector.</p>
      <ul id="demoSeven" class="demo imageList">
        <li> <img src="images/crusher.png" width="120" height="90">
          <h2><a href="#">Beverly Crusher</a></h2>
          <p class="last-name">Crusher</p>
          <p><span><strong>Rank:</strong>&nbsp;</span><span>Commander<span></p>
          <p><span><strong>Date of Birth:</strong>&nbsp;</span><span>Oct. 13, 2324<span></p>
          <p><span><strong>Place of Birth:</strong>&nbsp;</span><span>Copernicus City, Luna<span></p>
        </li>
        <li> <img src="images/crusher-w.png" width="120" height="90">
          <h2><a href="#">Wesley Crusher</a></h2>
          <p class="last-name">Crusher</p>
          <p><span><strong>Rank:</strong>&nbsp;</span><span>Ensign<span></p>
          <p><span><strong>Date of Birth:</strong>&nbsp;</span><span>July 29, 2349<span></p>
          <p><span><strong>Place of Birth:</strong>&nbsp;</span><span>Earth<span></p>
        </li>
        <li> <img src="images/data.png" width="120" height="90">
          <h2><a href="#">Data</a></h2>
          <p class="last-name">Data</p>
          <p><span><strong>Rank:</strong>&nbsp;</span><span>Lieutenant Commander<span></p>
          <p><span><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 2, 2338<span></p>
          <p><span><strong>Place of Birth:</strong>&nbsp;</span><span>Omicron Theta science colony<span></p>
        </li>
        <li> <img src="images/geordi.png" width="120" height="90">
          <h2><a href="#">Geordi La Forge</a></h2>
          <p class="last-name">La Forge</p>
          <p><span><strong>Rank:</strong>&nbsp;</span><span>Commander<span></p>
          <p><span><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 16, 2335<span></p>
          <p><span><strong>Place of Birth:</strong>&nbsp;</span><span>African Confederation, Earth<span></p>
        </li>
        <li> <img src="images/picard.png" width="120" height="90">
          <h2><a href="#">Jean Luc Picard</a></h2>
          <p class="last-name">Picard</p>
          <p><span><strong>Rank:</strong>&nbsp;</span><span>Captain<span></p>
          <p><span><strong>Date of Birth:</strong>&nbsp;</span><span>July 13, 2305<span></p>
          <p><span><strong>Place of Birth:</strong>&nbsp;</span><span>Labarre, France, Earth<span></p>
        </li>
        <li> <img src="images/riker.png" width="120" height="90">
          <h2><a href="#">William Riker</a></h2>
          <p class="last-name">Riker</p>
          <p><span><strong>Rank:</strong>&nbsp;</span><span>Captain<span></p>
          <p><span><strong>Date of Birth:</strong>&nbsp;</span><span>August 19, 2335<span></p>
          <p><span><strong>Place of Birth:</strong>&nbsp;</span><span>Valdez, Alaska, Earth<span></p>
        </li>
        <li> <img src="images/troi.png" width="120" height="90">
          <h2><a href="#">Deanna Troi</a></h2>
          <p class="last-name">Troi</p>
          <p><span><strong>Rank:</strong>&nbsp;</span><span>Commander<span></p>
          <p><span><strong>Date of Birth:</strong>&nbsp;</span><span>March 29, 2336 (Terran equivalent)<span></p>
          <p><span><strong>Place of Birth:</strong>&nbsp;</span><span>Near Lake El-Nar, Betazed<span></p>
        </li>
        <li> <img src="images/worf.png" width="120" height="90">
          <h2><a href="#">Worf</a></h2>
          <p class="last-name">Worf</p>
          <p><span><strong>Rank:</strong>&nbsp;</span><span>Lieutenant Commander<span></p>
          <p><span><strong>Date of Birth:</strong>&nbsp;</span><span>December 9, 2340 (Terran equivalent)<span></p>
          <p><span><strong>Place of Birth:</strong>&nbsp;</span><span>Qo'noS, Klingon Empire<span></p>
        </li>
      </ul>
    </div>
    <div id="tabpage_8" class="tabContainer">
      <h3>Ignore multi word prefixes to titles with <code>prefixes</code></h3>
      <pre><code data-language="javascript">$('#demoEight').listnav({
    prefixes: ['The Complete Works of', 'A']
});</code></pre>
      <ul id="demoEight" class="demo">
        <li>The Complete Works of Shakespeare</li>
        <li>The Complete Works of Joe Blogs</li>
        <li>A Story About Something</li>
        <li>Macbeth</li>
        <li>Hamlet</li>
        <li>A Play on Words</li>
      </ul>
    </div>
  </section>
</div>
<!-- FOOTER  -->
<script>
$(function(){
	$('#demoOne').listnav();
	$('.demoTwo').listnav({
		includeAll: false,
		noMatchText: 'There are no matching entries.'
	});
	$('#demoThree').listnav({
		initLetter: 'c'
	});
	$('#demoFour').listnav({
		includeNums: false
	});
	$('#demoFive').listnav({
		cookieName: 'ln-demo5',
		onClick: function(letter) {
			$(".myLastClicked").text(letter.toUpperCase());
		}
	});
	$('#demoSix').listnav({
		includeOther: true,
		prefixes: ['the', 'a']
	});
	$('#demoSeven').listnav({
		filterSelector: '.last-name',
		includeNums: false,
		removeDisabled: true
	});
	$('#demoEight').listnav({
		prefixes: ['The Complete Works of', 'A']
	});
	$('.demo a').click(function(e) {
		e.preventDefault();
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 文字层叠 文字提示框 提示文字 文字收缩展开 文字收缩 文字展开 文字放大缩小 文字缩放 文字大小 文字放大 文字缩小 文字变大 文字变小 flash焦点图 flash幻灯片 flashbanner flash图片轮播 文字翻转 文字旋转 文字淡出淡进 文字淡出 文字淡进 文字全屏 文字延迟加载 文字延迟 文字加载 文字拖动 文字拖拽 滑动选项卡 滑动切换 滚动切换 滚动条切换 h5文字动画 h5文字边框动画 html5文字动画 html5文字边框动画 360全景 360度全景 文字切换 文字选项卡 文字滑动 文字滑块 文字滚动 文字无缝滚动 文字间歇滚动 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 图片文字 文字导航菜单 文字导航 文字菜单 焦点图 幻灯片 轮播图 bar焦点图 文字 文字插件 其他 文字标签 文字标签云 标签云 带简介的焦点图 文字列表 选项卡自动切换 分页 翻页 分页插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到