Socket
Socket
Sign inDemoInstall

jquery-listnav

Package Overview
Dependencies
0
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

jquery-listnav

Add a slick "letter-based" navigation bar to all of your lists. Click a letter to quicky filter the list to items that match that letter. Updated for better compatibility with future jQuery versions.


Version published
Weekly downloads
324
decreased by-26.03%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

jQuery ListNav Travis Build Built with GruntJS

jQuery ListNav will add a slick "letter-based" navigation bar to all of your lists. Click a letter to quickly filter the list to show items that match that letter.

View the ListNav Demo

Install using Bower

bower install jquery-listnav

Manual Install

Insert into <Head>:
<link rel="stylesheet" href="listnav.css">
Code up your list:
<ul id="myList">...</ul>
Insert before </body>:
<script src="jquery-listnav.min.js"></script>
<script>
	$("#myList").listnav();
</script>
Navigation:

The navigation defaults to being placed directly above your list element. You can place the navigation in a place of your choice by adding to your markup.

<div id="{myList}-nav"></div>

Options

$("myList").listnav({
    initLetter: '',        // filter the list to a specific letter on init ('a'-'z', '-' [numbers 0-9], '_' [other])
    includeAll: true,      // Include the ALL button
    includeOther: false,    // Include a '...' option to filter non-english characters by
    includeNums: true,     // Include a '0-9' option to filter by
    flagDisabled: true,    // Add a class of 'ln-disabled' to nav items with no content to show
    removeDisabled: false, // Remove those 'ln-disabled' nav items (flagDisabled must be set to true for this to function)
    allText: 'All',        // set custom text in navbar to ALL button
    noMatchText: 'No matching entries', // set custom text for nav items with no content to show
    showCounts: true,      // Show the number of list items that match that letter above the mouse
    dontCount: ''          // A comma separated list of selectors you want to exclude from the count function (numbers on top of navigation)
    cookieName: null,      // Set this to a string to remember the last clicked navigation item requires jQuery Cookie Plugin ('myCookieName')
    onClick: null,         // Set a function that fires when you click a nav item. see Demo 5
    prefixes: [],          // Set an array of prefixes that should be counted for the prefix and the first word after the prefix ex: ['the', 'a', 'my']
    filterSelector: ''     // Set the filter to a CSS selector rather than the first text letter for each item
});

Showcase

The following websites are currently using ListNav to filter their lists:

Santa Fe College

FAQs

Last updated on 28 Aug 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc