基于jquery實現按字母順序過濾列表特效



32 125 42



特效描述:基于jquery實現 按字母順序 過濾列表,基于jquery實現按字母順序過濾列表特效

代碼結構

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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 彈出層拖動 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 其他 導航切換 菜單切換 文字提示框 提示文字 文字切換 文字選項卡 鼠標滑過 鼠標懸停 跟隨鼠標移動 分頁 翻頁 分頁插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子