以下是 jquery按字母顺序过滤列表代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery按字母顺序过滤列表</title>
<!--可无视-->
<link rel="stylesheet" href="css/style.css">
<!--主要样式-->
<link rel="stylesheet" href="css/listnav.css">
</head>
<body>
<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 & Bookkeeping - General Service</a></li>
<li><a href="#">Acupuncture</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Advertising - Agencies & 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 & 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 & 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 & 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 & 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 & Curtains - Retail & Custom Made</a></li>
<li><a href="#">Drilling - Companies</a></li>
<li><a href="#">Driving - Instruction</a></li>
<li><a href="#">Drug - Abuse & Addiction Info & Treatment</a></li>
<li><a href="#">Drywall & Insulation Contractors</a></li>
<li><a href="#">Earthquake Products & 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 & Physical Fitness Programs</a></li>
<li><a href="#">Exterminating & 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 & Sororities</a></li>
<li><a href="#">Games & 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 & Bulk (Wholesale)</a></li>
<li><a href="#">Guide Service</a></li>
<li><a href="#">Gymnastic Instruction</a></li>
<li><a href="#">Halls & 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 & Diet Foods - Retail</a></li>
<li><a href="#">House & Building Movers</a></li>
<li><a href="#">House Cleaning</a></li>
<li><a href="#">Human Factors - Research & Development</a></li>
<li><a href="#">Human Resource Consultants</a></li>
<li><a href="#">Importers</a></li>
<li><a href="#">Industrial - Equipment & 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 & 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 & Repairing (Wholesale)</a></li>
<li><a href="#">Machinery - Specially Designed & Built</a></li>
<li><a href="#">Magicians</a></li>
<li><a href="#">Maid & Butler Service</a></li>
<li><a href="#">Motorcycles - Supplies & 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 & 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 & Lots Maintenance & Marking</a></li>
<li><a href="#">Parks</a></li>
<li><a href="#">Party Supplies</a></li>
<li><a href="#">Patio & Deck Cleaning & Restoration</a></li>
<li><a href="#">Paving Contractors</a></li>
<li><a href="#">Pumps (Wholesale)</a></li>
<li><a href="#">Quilting - Materials & Supplies</a></li>
<li><a href="#">Radio Stations & 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 & Gravel (Wholesale)</a></li>
<li><a href="#">School Supplies (Wholesale)</a></li>
<li><a href="#">Schools & Educational Services</a></li>
<li><a href="#">Schools - Nursery & Kindergarten Academic</a></li>
<li><a href="#">Schools - Universities & Colleges Academic</a></li>
<li><a href="#">Shoe & Boot Repairing</a></li>
<li><a href="#">Shoes - Retail</a></li>
<li><a href="#">Shopping Centers & Malls</a></li>
<li><a href="#">Shower Doors & Enclosures</a></li>
<li><a href="#">Sunglasses & 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 & Filing</a></li>
<li><a href="#">Technical Manual Preparation</a></li>
<li><a href="#">Tools - Electric - Repairing & Parts</a></li>
<li><a href="#">Tours - Operators & Promoters</a></li>
<li><a href="#">Tutoring</a></li>
<li><a href="#">Ultrasonic Equipment & 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 & 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 & Supplies (Manufacturers)</a></li>
<li><a href="#">Yarn - Retail</a></li>
<li><a href="#">Yoga Instruction</a></li>
<li><a href="#">Youth Organizations & 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 & 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 & Systems - Networks</a></li>
<li><a href="#">Deck Builders</a></li>
<li><a href="#">Drywall & Insulation Contractors</a></li>
<li><a href="#">Earthquake Products & 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 & Bulk (Wholesale)</a></li>
<li><a href="#">Guide Service</a></li>
<li><a href="#">Gymnastic Instruction</a></li>
<li><a href="#">Halls & 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 & 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 & Lots Maintenance & Marking</a></li>
<li><a href="#">Parks</a></li>
<li><a href="#">Party Supplies</a></li>
<li><a href="#">Patio & Deck Cleaning & 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 & Gravel (Wholesale)</a></li>
<li><a href="#">School Supplies (Wholesale)</a></li>
<li><a href="#">Schools & Educational Services</a></li>
<li><a href="#">Schools - Nursery & Kindergarten Academic</a></li>
<li><a href="#">Schools - Universities & Colleges Academic</a></li>
<li><a href="#">Shoe & Boot Repairing</a></li>
<li><a href="#">Shoes - Retail</a></li>
<li><a href="#">Shopping Centers & Malls</a></li>
<li><a href="#">Shower Doors & Enclosures</a></li>
<li><a href="#">Tutoring</a></li>
<li><a href="#">Ultrasonic Equipment & 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 & Systems - Networks</a></li>
<li><a href="#">Deck Builders</a></li>
<li><a href="#">Drywall & Insulation Contractors</a></li>
<li><a href="#">Earthquake Products & 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 & Bulk (Wholesale)</a></li>
<li><a href="#">Guide Service</a></li>
<li><a href="#">Gymnastic Instruction</a></li>
<li><a href="#">Halls & 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 & 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 & Lots Maintenance & Marking</a></li>
<li><a href="#">Parks</a></li>
<li><a href="#">Party Supplies</a></li>
<li><a href="#">Patio & Deck Cleaning & 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 & Gravel (Wholesale)</a></li>
<li><a href="#">School Supplies (Wholesale)</a></li>
<li><a href="#">Schools & Educational Services</a></li>
<li><a href="#">Schools - Nursery & Kindergarten Academic</a></li>
<li><a href="#">Schools - Universities & Colleges Academic</a></li>
<li><a href="#">Shoe & Boot Repairing</a></li>
<li><a href="#">Shoes - Retail</a></li>
<li><a href="#">Shopping Centers & Malls</a></li>
<li><a href="#">Shower Doors & Enclosures</a></li>
<li><a href="#">Tutoring</a></li>
<li><a href="#">Ultrasonic Equipment & 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 & Bookkeeping - General Service</a></li>
<li><a href="#">Acupuncture</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Advertising - Agencies & 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 & 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 & Systems - Networks</a></li>
<li><a href="#">Deck Builders</a></li>
<li><a href="#">Drywall & Insulation Contractors</a></li>
<li><a href="#">Earthquake Products & 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 & Bulk (Wholesale)</a></li>
<li><a href="#">Guide Service</a></li>
<li><a href="#">Gymnastic Instruction</a></li>
<li><a href="#">Halls & 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 & 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 & Lots Maintenance & Marking</a></li>
<li><a href="#">Parks</a></li>
<li><a href="#">Party Supplies</a></li>
<li><a href="#">Patio & Deck Cleaning & 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 & Gravel (Wholesale)</a></li>
<li><a href="#">School Supplies (Wholesale)</a></li>
<li><a href="#">Schools & Educational Services</a></li>
<li><a href="#">Schools - Nursery & Kindergarten Academic</a></li>
<li><a href="#">Schools - Universities & Colleges Academic</a></li>
<li><a href="#">Shoe & Boot Repairing</a></li>
<li><a href="#">Shoes - Retail</a></li>
<li><a href="#">Shopping Centers & Malls</a></li>
<li><a href="#">Shower Doors & Enclosures</a></li>
<li><a href="#">Tutoring</a></li>
<li><a href="#">Ultrasonic Equipment & 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 & Bookkeeping - General Service</a></li>
<li><a href="#">Acupuncture</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Advertising - Agencies & 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 & 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 & Systems - Networks</a></li>
<li><a href="#">Deck Builders</a></li>
<li><a href="#">Drywall & Insulation Contractors</a></li>
<li><a href="#">Earthquake Products & 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 & Bulk (Wholesale)</a></li>
<li><a href="#">Guide Service</a></li>
<li><a href="#">Gymnastic Instruction</a></li>
<li><a href="#">Halls & 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 & 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 & Lots Maintenance & Marking</a></li>
<li><a href="#">Parks</a></li>
<li><a href="#">Party Supplies</a></li>
<li><a href="#">Patio & Deck Cleaning & 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 & Gravel (Wholesale)</a></li>
<li><a href="#">School Supplies (Wholesale)</a></li>
<li><a href="#">Schools & Educational Services</a></li>
<li><a href="#">Schools - Nursery & Kindergarten Academic</a></li>
<li><a href="#">Schools - Universities & Colleges Academic</a></li>
<li><a href="#">Shoe & Boot Repairing</a></li>
<li><a href="#">Shoes - Retail</a></li>
<li><a href="#">Shopping Centers & Malls</a></li>
<li><a href="#">Shower Doors & Enclosures</a></li>
<li><a href="#">Tutoring</a></li>
<li><a href="#">Ultrasonic Equipment & 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 & 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 & 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 & Roseville Today</a></li>
<li><a href="#">Sacramento Bee</a></li>
<li><a href="#">Sacramento News & 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> </span><span>Commander<span></p>
<p><span><strong>Date of Birth:</strong> </span><span>Oct. 13, 2324<span></p>
<p><span><strong>Place of Birth:</strong> </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> </span><span>Ensign<span></p>
<p><span><strong>Date of Birth:</strong> </span><span>July 29, 2349<span></p>
<p><span><strong>Place of Birth:</strong> </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> </span><span>Lieutenant Commander<span></p>
<p><span><strong>Date of Birth:</strong> </span><span>Feb. 2, 2338<span></p>
<p><span><strong>Place of Birth:</strong> </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> </span><span>Commander<span></p>
<p><span><strong>Date of Birth:</strong> </span><span>Feb. 16, 2335<span></p>
<p><span><strong>Place of Birth:</strong> </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> </span><span>Captain<span></p>
<p><span><strong>Date of Birth:</strong> </span><span>July 13, 2305<span></p>
<p><span><strong>Place of Birth:</strong> </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> </span><span>Captain<span></p>
<p><span><strong>Date of Birth:</strong> </span><span>August 19, 2335<span></p>
<p><span><strong>Place of Birth:</strong> </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> </span><span>Commander<span></p>
<p><span><strong>Date of Birth:</strong> </span><span>March 29, 2336 (Terran equivalent)<span></p>
<p><span><strong>Place of Birth:</strong> </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> </span><span>Lieutenant Commander<span></p>
<p><span><strong>Date of Birth:</strong> </span><span>December 9, 2340 (Terran equivalent)<span></p>
<p><span><strong>Place of Birth:</strong> </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 src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-listnav.js"></script>
<script src="js/vendor.js"></script>
<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>
</body>
</html>
JS代码(vendor.js):
!function(a,b,c){
function d(a){
return a}
function e(a){
return decodeURIComponent(a.replace(f," "))}
var f=/\+/g,g=a.cookie=function(f,h,i){
if(h!==c){
if(i=a.extend({
}
,g.defaults,i),null===h&&(i.expires=-1),"number"==typeof i.expires){
var j=i.expires,k=i.expires=new Date;
k.setDate(k.getDate()+j)}
return h=g.json?JSON.stringify(h):String(h),b.cookie=[encodeURIComponent(f),"=",g.raw?h:encodeURIComponent(h),i.expires?";
expires="+i.expires.toUTCString():"",i.path?";
path="+i.path:"",i.domain?";
domain="+i.domain:"",i.secure?";
secure":""].join("")}
for(var l=g.raw?d:e,m=b.cookie.split(";
"),n=0,o=m.length;
o>n;
n++){
var p=m[n].split("=");
if(l(p.shift())===f){
var q=l(p.join("="));
return g.json?JSON.parse(q):q}
}
return null}
;
g.defaults={
}
,a.removeCookie=function(b,c){
return null!==a.cookie(b)?(a.cookie(b,null,c),!0):!1}
}
(jQuery,document),$("ul.tabs").each(function(){
var a,b,c=$(this).find("a");
a=$(c.filter('[href="'+location.hash+'"]')[0]||c[0]),a.parent("li").addClass("active"),b=$(a.attr("href")),c.not(a).each(function(){
$($(this).attr("href")).hide()}
),$("a",this).click(function(c){
a.parent("li").removeClass("active"),b.hide(),a=$(this),b=$($(this).attr("href")),a.parent("li").addClass("active"),b.show(),c.preventDefault()}
)}
),window.Rainbow=function(){
function a(a){
var b,c=a.getAttribute&&a.getAttribute("data-language")||0;
if(!c)for(a=a.attributes,b=0;
b<a.length;
++b)if("data-language"===a[b].nodeName)return a[b].nodeValue;
return c}
function b(b){
var c=a(b)||a(b.parentNode);
if(!c){
var d=/\blang(?:uage)?-(\w+)/;
(b=b.className.match(d)||b.parentNode.className.match(d))&&(c=b[1])}
return c}
function c(a,b){
for(var c in o[r])if(c=parseInt(c,10),(a==c&&b==o[r][c]?0:c>=a&&b>=o[r][c])&&(delete o[r][c],delete n[r][c]),a>=c&&a<o[r][c]||b>c&&b<o[r][c])return!0;
return!1}
function d(a,b){
return'<span class="'+a.replace(/\./g," ")+(l?" "+l:"")+'">'+b+"</span>"}
function e(a,b,h,j){
var k=a.exec(h);
if(k){
++t,!b.name&&"string"==typeof b.matches[0]&&(b.name=b.matches[0],delete b.matches[0]);
var l=k[0],m=k.index,p=k[0].length+m,q=function(){
function c(){
e(a,b,h,j)}
t%100>0?c():setTimeout(c,0)}
;
if(c(m,p))q();
else{
var s=f(b.matches),u=function(a,c,e){
if(a>=c.length)e(l);
else{
var f=k[c[a]];
if(f){
var h=b.matches[c[a]],j=h.language,m=h.name&&h.matches?h.matches:h,n=function(b,f,g){
var h;
h=0;
var i;
for(i=1;
i<c[a];
++i)k[i]&&(h+=k[i].length);
f=g?d(g,f):f,l=l.substr(0,h)+l.substr(h).replace(b,f),u(++a,c,e)}
;
j?i(f,j,function(a){
n(f,a)}
):"string"==typeof h?n(f,f,h):g(f,m.length?m:[m],function(a){
n(f,a,h.matches?h.name:0)}
)}
else u(++a,c,e)}
}
;
u(0,s,function(a){
b.name&&(a=d(b.name,a)),n[r]||(n[r]={
}
,o[r]={
}
),n[r][m]={
replace:k[0],"with":a}
,o[r][m]=p,q()}
)}
}
else j()}
function f(a){
var b,c=[];
for(b in a)a.hasOwnProperty(b)&&c.push(b);
return c.sort(function(a,b){
return b-a}
)}
function g(a,b,c){
function d(b,f){
f<b.length?e(b[f].pattern,b[f],a,function(){
d(b,++f)}
):h(a,function(a){
delete n[r],delete o[r],--r,c(a)}
)}
++r,d(b,0)}
function h(a,b){
function c(a,b,d,e){
if(d<b.length){
++u;
var f=b[d],g=n[r][f],a=a.substr(0,f)+a.substr(f).replace(g.replace,g["with"]),f=function(){
c(a,b,++d,e)}
;
u%250>0?f():setTimeout(f,0)}
else e(a)}
var d=f(n[r]);
c(a,d,0,b)}
function i(a,b,c){
var d=p[b]||[],e=p[s]||[],b=q[b]?d:d.concat(e);
g(a.replace(/</g,"<
").replace(/>/g,">
").replace(/&(?![\w\#]+;
)/g,"&
"),b,c)}
function j(a,c,d){
if(c<a.length){
var e=a[c],f=b(e);
return-1<(" "+e.className+" ").indexOf(" rainbow ")||!f?j(a,++c,d):(f=f.toLowerCase(),e.className+=e.className?" rainbow":"rainbow",i(e.innerHTML,f,function(b){
e.innerHTML=b,n={
}
,o={
}
,m&&m(e,f),setTimeout(function(){
j(a,++c,d)}
,0)}
))}
d&&d()}
function k(a,b){
var c,a=a&&"function"==typeof a.getElementsByTagName?a:document,d=a.getElementsByTagName("pre"),e=a.getElementsByTagName("code"),f=[];
for(c=0;
c<e.length;
++c)f.push(e[c]);
for(c=0;
c<d.length;
++c)d[c].getElementsByTagName("code").length||f.push(d[c]);
j(f,0,b)}
var l,m,n={
}
,o={
}
,p={
}
,q={
}
,r=0,s=0,t=0,u=0;
return{
extend:function(a,b,c){
1==arguments.length&&(b=a,a=s),q[a]=c,p[a]=b.concat(p[a]||[])}
,b:function(a){
m=a}
,a:function(a){
l=a}
,color:function(a,b,c){
return"string"==typeof a?i(a,b,c):"function"==typeof a?k(0,a):void k(a,b)}
}
}
(),window.addEventListener?window.addEventListener("load",Rainbow.color,!1):window.attachEvent("onload",Rainbow.color),Rainbow.onHighlight=Rainbow.b,Rainbow.addClass=Rainbow.a,Rainbow.extend([{
matches:{
1:{
name:"keyword.operator",pattern:/\=/g}
,2:{
name:"string",matches:{
name:"constant.character.escape",pattern:/\\('|"){
1}
/g}
}
}
,pattern:/(\(|\s|\[|\=|:)(('|")([^\\\1]|\\.)*?(\3))/gm}
,{
name:"comment",pattern:/\/\*[\s\S]*?\*\/|(\/\/|\#)[\s\S]*?$/gm}
,{
name:"constant.numeric",pattern:/\b(\d+(\.\d+)?(e(\+|\-)?\d+)?(f|d)?|0x[\da-f]+)\b/gi}
,{
matches:{
1:"keyword"}
,pattern:/\b(and|array|as|bool(ean)?|c(atch|har|lass|onst)|d(ef|elete|o(uble)?)|e(cho|lse(if)?|xit|xtends|xcept)|f(inally|loat|or(each)?|unction)|global|if|import|int(eger)?|long|new|object|or|pr(int|ivate|otected)|public|return|self|st(ring|ruct|atic)|switch|th(en|is|row)|try|(un)?signed|var|void|while)(?=\(|\b)/gi}
,{
name:"constant.language",pattern:/true|false|null/g}
,{
name:"keyword.operator",pattern:/\+|\!|\-|&(gt|lt|amp);
|\||\*|\=/g}
,{
matches:{
1:"function.call"}
,pattern:/(\w+?)(?=\()/g}
,{
matches:{
1:"storage.function",2:"entity.name.function"}
,pattern:/(function)\s(.*?)(?=\()/g}
]),Rainbow.extend("javascript",[{
name:"selector",pattern:/(\s|^)\$(?=\.|\()/g}
,{
name:"support",pattern:/\b(window|document)\b/g}
,{
matches:{
1:"support.property"}
,pattern:/\.(length|node(Name|Value))\b/g}
,{
matches:{
1:"support.function"}
,pattern:/(setTimeout|setInterval)(?=\()/g}
,{
matches:{
1:"support.method"}
,pattern:/\.(getAttribute|push|getElementById|getElementsByClassName|log|setTimeout|setInterval)(?=\()/g}
,{
matches:{
1:"support.tag.script",2:[{
name:"string",pattern:/('|")(.*?)(\1)/g}
,{
name:"entity.tag.script",pattern:/(\w+)/g}
],3:"support.tag.script"}
,pattern:/(<
\/?)(script.*?)(>
)/g}
,{
name:"string.regexp",matches:{
1:"string.regexp.open",2:{
name:"constant.regexp.escape",pattern:/\\(.){
1}
/g}
,3:"string.regexp.close",4:"string.regexp.modifier"}
,pattern:/(\/)(?!\*)(.+)(\/)([igm]{
0,3}
)/g}
,{
matches:{
1:"storage",3:"entity.function"}
,pattern:/(var)?(\s|^)(.*)(?=\s?=\s?function\()/g}
,{
matches:{
1:"keyword",2:"entity.function"}
,pattern:/(new)\s+(.*)(?=\()/g}
,{
name:"entity.function",pattern:/(\w+)(?=:\s{
0,}
function)/g}
]),Rainbow.extend("html",[{
name:"source.php.embedded",matches:{
2:{
language:"php"}
}
,pattern:/<
\?=?(?!xml)(php)?([\s\S]*?)(\?>
)/gm}
,{
name:"source.css.embedded",matches:{
0:{
language:"css"}
}
,pattern:/<
style(.*?)>
([\s\S]*?)<
\/style>
/gm}
,{
name:"source.js.embedded",matches:{
0:{
language:"javascript"}
}
,pattern:/<
script(?! src)(.*?)>
([\s\S]*?)<
\/script>
/gm}
,{
name:"comment.html",pattern:/<
\!--[\S\s]*?-->
/g}
,{
matches:{
1:"support.tag.open",2:"support.tag.close"}
,pattern:/(<
)|(\/?\??>
)/g}
,{
name:"support.tag",matches:{
1:"support.tag",2:"support.tag.special",3:"support.tag-name"}
,pattern:/(<
\??)(\/|\!?)(\w+)/g}
,{
matches:{
1:"support.attribute"}
,pattern:/([a-z-]+)(?=\=)/gi}
,{
matches:{
1:"support.operator",2:"string.quote",3:"string.value",4:"string.quote"}
,pattern:/(=)('|")(.*?)(\2)/g}
,{
matches:{
1:"support.operator",2:"support.value"}
,pattern:/(=)([a-zA-Z\-0-9]*)\b/g}
,{
matches:{
1:"support.attribute"}
,pattern:/\s(\w+)(?=\s|>
)(?![\s\S]*<
)/g}
],!0);
CSS代码(listnav.css):
@charset "utf-8";.listNav,.ln-letters{overflow:hidden;}
.listNavHide{display:none;}
.listNavShow{display:list-item;}
.letterCountShow{display:block;}
.ln-letters a{font-size:0.9em;display:block;float:left;padding:2px 6px;border:1px solid silver;border-right:none;text-decoration:none;}
.ln-letters .ln-last{border-right:1px solid silver;}
.ln-letters a:hover,.ln-letters .ln-selected{background-color:#eaeaea;}
.ln-letters .ln-disabled{color:#ccc;}
.ln-letter-count{position:absolute;top:0;left:0;width:20px;text-align:center;font-size:0.8em;line-height:1.35;color:#336699;}
CSS代码(style.css):
/* �������������֮�� www.lanrenzhijia.com */
.highlight .hll{background-color:#ffffcc;}
.highlight{background:#f0f3f3;}
.highlight .c{color:#0099FF;font-style:italic;}
.highlight .err{color:#AA0000;background-color:#FFAAAA;}
.highlight .k{color:#006699;font-weight:bold;}
.highlight .o{color:#555555;}
.highlight .cm{color:#0099FF;font-style:italic;}
.highlight .cp{color:#009999;}
.highlight .c1{color:#0099FF;font-style:italic;}
.highlight .cs{color:#0099FF;font-weight:bold;font-style:italic;}
.highlight .gd{background-color:#FFCCCC;border:1px solid #CC0000;}
.highlight .ge{font-style:italic;}
.highlight .gr{color:#FF0000;}
.highlight .gh{color:#003300;font-weight:bold;}
.highlight .gi{background-color:#CCFFCC;border:1px solid #00CC00;}
.highlight .go{color:#AAAAAA;}
.highlight .gp{color:#000099;font-weight:bold;}
.highlight .gs{font-weight:bold;}
.highlight .gu{color:#003300;font-weight:bold;}
.highlight .gt{color:#99CC66;}
.highlight .kc{color:#006699;font-weight:bold;}
.highlight .kd{color:#006699;font-weight:bold;}
.highlight .kn{color:#006699;font-weight:bold;}
.highlight .kp{color:#006699;}
.highlight .kr{color:#006699;font-weight:bold;}
.highlight .kt{color:#007788;font-weight:bold;}
.highlight .m{color:#FF6600;}
.highlight .s{color:#CC3300;}
.highlight .na{color:#330099;}
.highlight .nb{color:#336666;}
.highlight .nc{color:#00AA88;font-weight:bold;}
.highlight .no{color:#336600;}
.highlight .nd{color:#9999FF;}
.highlight .ni{color:#999999;font-weight:bold;}
.highlight .ne{color:#CC0000;font-weight:bold;}
.highlight .nf{color:#CC00FF;}
.highlight .nl{color:#9999FF;}
.highlight .nn{color:#00CCFF;font-weight:bold;}
.highlight .nt{color:#330099;font-weight:bold;}
.highlight .nv{color:#003333;}
.highlight .ow{color:#000000;font-weight:bold;}
.highlight .w{color:#bbbbbb;}
.highlight .mf{color:#FF6600;}
.highlight .mh{color:#FF6600;}
.highlight .mi{color:#FF6600;}
.highlight .mo{color:#FF6600;}
.highlight .sb{color:#CC3300;}
.highlight .sc{color:#CC3300;}
.highlight .sd{color:#CC3300;font-style:italic;}
.highlight .s2{color:#CC3300;}
.highlight .se{color:#CC3300;font-weight:bold;}
.highlight .sh{color:#CC3300;}
.highlight .si{color:#AA0000;}
.highlight .sx{color:#CC3300;}
.highlight .sr{color:#33AAAA;}
.highlight .s1{color:#CC3300;}
.highlight .ss{color:#FFCC33;}
.highlight .bp{color:#336666;}
.highlight .vc{color:#003333;}
.highlight .vg{color:#003333;}
.highlight .vi{color:#003333;}
.highlight .il{color:#FF6600;}
.type-csharp .highlight .k{color:#0000FF;}
.type-csharp .highlight .kt{color:#0000FF;}
.type-csharp .highlight .nf{color:#000000;font-weight:normal;}
.type-csharp .highlight .nc{color:#2B91AF;}
.type-csharp .highlight .nn{color:#000000;}
.type-csharp .highlight .s{color:#A31515;}
.type-csharp .highlight .sc{color:#A31515;}
#demoThree-nav .ln-letters a{border:none;border-top:2px solid pink;color:red;}
#demoThree-nav .ln-letters a.ln-last{border-right:none;}
#demoThree-nav .ln-letters a:hover,#demoThree-nav .ln-letters a.ln-selected{border-top:2px solid red;background-color:pink;color:White !important;}
#demoThree-nav .ln-letters a.ln-disabled{color:pink;}
#demoThree-nav .ln-letters a.ln-disabled:hover{color:white;}
#demoThree-nav .ln-letter-count{color:red;}
#demoThree li{color:pink;}
#demoThree li a{color:red;text-decoration:none;}
#demoThree li a:hover{text-decoration:underline;}
#demoFour,.listWrapper{width:650px;overflow:hidden;}
#demoFour li{float:left;list-style:none;}
#demoFour a{display:block;text-align:center;width:85px;border:1px solid silver;padding:10px;margin:0 10px 10px 0;text-decoration:none;}
#demoFour a:hover{background-color:#eee;color:pink;}
.imageList{width:550px;}
.imageList img,.imageList h2,.imageList p{float:left;}
.imageList img{text-align:right;margin-right:20px;margin-top:15px;}
.imageList p,.imageList h2{width:360px;}
.imageList li{list-style-type:none;overflow:hidden;padding:1em 0 1em 1em;-webkit-border-radius:4px;border-radius:4px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;}
.imageList li:hover{background-color:#eff1f9;cursor:pointer;-webkit-box-shadow:0px 0px 2px 0px #bababa;box-shadow:0px 0px 5px 0px #BBB;}
.imageList h2,.imageList p{background:none;padding-bottom:0;margin:0;}
.imageList a{text-decoration:none;color:#039;}
.last-name{display:none;}
.clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden;}
pre{border:1px solid #ccc;word-wrap:break-word;padding:6px 10px;line-height:19px;margin-bottom:20px;}
code{border:1px solid #eaeaea;margin:0px 2px;padding:0px 5px;font-size:12px;}
pre code{border:0px;padding:0px;margin:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
pre,code{font-family:Consolas,'Liberation Mono',Courier,monospace;color:#333;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
pre,pre code{font-size:14px;}
pre .comment{color:#998;}
pre .support{color:#0086B3;}
pre .tag,pre .tag-name{color:navy;}
pre .keyword,pre .css-property,pre .vendor-prefix,pre .sass,pre .class,pre .id,pre .css-value,pre .entity.function,pre .storage.function{font-weight:bold;}
pre .css-property,pre .css-value,pre .vendor-prefix,pre .support.namespace{color:#333;}
pre .constant.numeric,pre .keyword.unit,pre .hex-color{font-weight:normal;color:#099;}
pre .entity.class{color:#458;}
pre .entity.id,pre .entity.function{color:#900;}
pre .attribute,pre .variable{color:teal;}
pre .string,pre .support.value{font-weight:normal;color:#d14;}
pre .regexp{color:#009926;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
body{box-sizing:border-box;color:#373737;background:#212121;font-size:17px;font-family:'Calibri',Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,h6{margin:10px 0;font-weight:500;color:#222222;font-family:'Calibri',Helvetica,Arial,sans-serif;letter-spacing:-1px;}
h1{font-size:36px;}
h2{padding-bottom:10px;font-size:32px;background:url('../images/bg_hr.png') repeat-x bottom;}
h3{font-size:24px;}
h4{font-size:21px;}
h5{font-size:18px;}
h6{font-size:16px;}
p{margin:10px 0 15px 0;}
footer p{color:#f2f2f2;}
a{text-decoration:none;color:#007edf;text-shadow:none;}
#main_content a:hover{color:#0069ba;text-shadow:#0090ff 0px 0px 1px;}
footer a:hover{color:#43adff;text-shadow:#0090ff 0px 0px 2px;}
em{font-style:italic;}
strong{font-weight:bold;}
img{position:relative;margin:0 auto;max-width:739px;padding:5px;margin:10px 0 10px 0;border:1px solid #ebebeb;box-shadow:0 0 5px #ebebeb;-webkit-box-shadow:0 0 5px #ebebeb;-moz-box-shadow:0 0 5px #ebebeb;-o-box-shadow:0 0 5px #ebebeb;-ms-box-shadow:0 0 5px #ebebeb;}
pre,code{width:100%;color:#222;background-color:#fff;font-family:Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;font-size:0.8em;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}
pre{width:96%;padding:2%;box-shadow:0 0 10px rgba(0,0,0,0.1);overflow:auto;}
code{padding:3px;margin:0 3px;box-shadow:0 0 10px rgba(0,0,0,0.1);}
pre code{display:block;box-shadow:none;}
blockquote{color:#666;margin-bottom:20px;padding:0 0 0 20px;border-left:3px solid #bbb;}
ul,ol,dl{margin-bottom:15px;}
ul li{list-style:inside;padding-left:20px;}
ol li{list-style:decimal inside;padding-left:20px;}
dl dt{font-weight:bold;}
dl dd{padding-left:20px;font-style:italic;}
dl p{padding-left:20px;font-style:italic;}
hr{height:1px;margin-bottom:5px;border:none;background:url('../images/bg_hr.png') repeat-x center;}
table{border:1px solid #373737;margin-bottom:20px;text-align:left;}
th{font-family:'Lucida Grande','Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;background:#373737;color:#fff;}
td{padding:10px;border:1px solid #373737;}
form{background:#f2f2f2;padding:20px;}
img{xwidth:100%;max-width:100%;}
.outer{width:100%;}
.inner{position:relative;max-width:800px;padding:20px 10px;margin:0 auto;}
#forkme_banner{position:absolute;top:0;left:0;width:138px;height:138px;display:block;background:transparent url(../images/fork-sprite.png) 0 0 no-repeat;text-indent:-9000px;z-index:3;}
#forkme_banner:hover{background-position:0 -138px;}
#header_wrap{background:#212121;background:-moz-linear-gradient(top,#373737,#212121);background:-webkit-linear-gradient(top,#373737,#212121);background:-ms-linear-gradient(top,#373737,#212121);background:-o-linear-gradient(top,#373737,#212121);background:linear-gradient(top,#373737,#212121);}
#header_wrap .inner{padding:10px;}
#project_title{margin:0;color:#fff;font-size:42px;font-weight:700;text-shadow:#111 0px 0px 10px;}
#project_tagline{color:#fff;font-size:24px;font-weight:300;background:none;text-shadow:#111 0px 0px 10px;}
#downloads{position:absolute;width:210px;z-index:10;bottom:-40px;right:0;height:70px;background:url('../images/icon_download.png') no-repeat 0% 90%;}
.zip_download_link{display:block;float:right;width:90px;height:70px;text-indent:-5000px;overflow:hidden;background:url(../images/sprite_download.png) no-repeat bottom left;}
.tar_download_link{display:block;float:right;width:90px;height:70px;text-indent:-5000px;overflow:hidden;background:url(../images/sprite_download.png) no-repeat bottom right;margin-left:10px;}
.zip_download_link:hover{background:url(../images/sprite_download.png) no-repeat top left;}
.tar_download_link:hover{background:url(../images/sprite_download.png) no-repeat top right;}
#main_content_wrap{background:#f2f2f2;border-top:1px solid #111;border-bottom:1px solid #111;}
#main_content{padding-top:40px;}
#footer_wrap{background:#212121;}
.tabs{margin:0;padding:0;font:1em;list-style:none;overflow:hidden;}
.tabs a{color:#FFF;display:block;padding:7px 10px;}
.tabs>li{margin:0 2px 0 0;padding:0;display:block;float:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background:#257AB6;background:-moz-linear-gradient(top,#0C91EC 0%,#257AB6 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#0C91EC),color-stop(100%,#257AB6));}
.tabs>li:hover{background:#FFFFFF;background:-moz-linear-gradient(top,#FFFFFF 0%,#F3F3F3 10%,#F3F3F3 50%,#FFFFFF 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFFFFF),color-stop(10%,#F3F3F3),color-stop(50%,#F3F3F3),color-stop(100%,#FFFFFF));cursor:pointer;color:#333;}
.tabs>li.active{background:#FFFFFF;cursor:pointer;color:#333;}
.tabs>li.active a{color:#333;}
.tabContainer{-moz-border-radius-topleft:0px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-top-left-radius:0px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;padding:1em 1.5em;background:#FFFFFF;margin:0;color:#333;}
@media screen and (max-width:480px){body{font-size:14px;}
#downloads{display:none;}
.inner{min-width:320px;max-width:480px;}
#project_title{font-size:32px;}
h1{font-size:28px;}
h2{font-size:24px;}
h3{font-size:21px;}
h4{font-size:18px;}
h5{font-size:14px;}
h6{font-size:12px;}
code,pre{min-width:320px;max-width:480px;font-size:11px;}
}
/* �������������֮�� www.lanrenzhijia.com */
分享到QQ
分享到微博
微信扫一扫
