敬启者，
我试图像在第一个选项卡中那样创建一个列表导航菜单：
http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx
当我单击每个字母时，它不会显示演示中可用的选项数量。同样，我的列表不断显示，直到像演示中一样单击后才隐藏。
您能帮我告诉我哪里错了吗？
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.listnav.pack-2.1.js"></script>
<link rel="stylesheet" href="listnav.css" type="text/css" media="screen" />
<link rel="stylesheet" href="reset-min.css" type="text/css" media="screen" />
<script>
$('#demoOne').listnav();
</script>
</head>
<body>
<h4>Testing jqList:</h4>
<div id="demoOne-nav" class="listNav">
<div class="ln-letters">
<a class="all" href="#">ALL </a>
<a class="_" href="#">0-9 </a>
<a class="a" href="#">A </a>
<a class="b" href="#">B </a>
<a class="c" href="#">C </a>
<a class="d" href="#">D </a>
<a class="e" href="#">E </a>
<a class="f" href="#">F </a>
<a class="g" href="#">G </a>
<a class="h" href="#">H </a>
<a class="i" href="#">I </a>
<a class="j" href="#">J </a>
<a class="k" href="#">K </a>
<a class="l" href="#">L </a>
<a class="m" href="#">M </a>
<a class="n" href="#">N </a>
<a class="o" href="#">O </a>
<a class="p" href="#">P </a>
<a class="q" href="#">Q </a>
<a class="r" href="#">R </a>
<a class="s" href="#">S </a>
<a class="u" href="#">U </a>
<a class="v" href="#">V </a>
<a class="w" href="#">W </a>
<a class="x" href="#">X </a>
<a class="y ln-selected" href="#">Y </a>
<a class="z ln-disabled ln-last" href="#">Z </a>
</div>
<div class="ln-letter-count" style="top: 293px; left: 102px; width: 21px; position: absolute; display: none;" >13 </div>
</div>
<ul id="demoOne" class="demo">
<li class="ln-_" style= "display: none;"> <a href="#"> 411 Services </a> <li>
<li class="ln-a;"> <a href="#"> Adams </a> <li>
<li class="ln-z;"> <a href="#"> fake </a> <li>
</ul>
</div>
</body>
</html>
CSS文件是：
.listNav { margin:0 0 10px; }
.ln-letters { overflow:hidden; }
.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 a.ln-last { border-right:1px solid silver; }
.ln-letters a:hover,
.ln-letters a.ln-selected { background-color:#eaeaea; }
.ln-letters a.ln-disabled { color:#ccc; }
.ln-letter-count { text-align:center; font-size:0.8em; line-height:1; margin-bottom:3px; color:#336699; }
和JS文件是：
/*
*
* jQuery listnav plugin
* Copyright (c) 2009 iHwy, Inc.
* Author: Jack Killpatrick
*
* Version 2.1 (08/09/2009)
* Requires jQuery 1.3.2, jquery 1.2.6 or jquery 1.2.x plus the jquery dimensions plugin
*
* Visit http://www.ihwy.com/labs/jquery-listnav-plugin.aspx for more information.
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($) {
$.fn.listnav = function(options) {
var opts = $.extend({}, $.fn.listnav.defaults, options);
var letters = ['_', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '-'];
var firstClick = false;
opts.prefixes = $.map(opts.prefixes, function(n) { return n.toLowerCase(); });
return this.each(function() {
var $wrapper, list, $list, $letters, $letterCount, id;
id = this.id;
$wrapper = $('#' + id + '-nav'); // user must abide by the convention: <ul id="myList"> for list and <div id="myList-nav"> for nav wrapper
$list = $(this);
var counts = {}, allCount = 0, isAll = true, numCount = 0, prevLetter = '';
function init() {
$wrapper.append(createLettersHtml());
$letters = $('.ln-letters', $wrapper).slice(0, 1); // will always be a single item
if (opts.showCounts) $letterCount = $('.ln-letter-count', $wrapper).slice(0, 1); // will always be a single item
addClasses();
addNoMatchLI();
if (opts.flagDisabled) addDisabledClass();
bindHandlers();
if (!opts.includeAll) $list.show(); // show the list in case the recommendation for includeAll=false was taken
// remove nav items we don't need
//
if (!opts.includeAll) $('.all', $letters).remove();
if (!opts.includeNums) $('._', $letters).remove();
if (!opts.includeOther) $('.-', $letters).remove();
$(':last', $letters).addClass('ln-last'); // allows for styling a case where last item needs right border set (because items before that only have top, left and bottom so that border between items isn't doubled)
if ($.cookie && (opts.cookieName != null)) {
var cookieLetter = $.cookie(opts.cookieName);
if (cookieLetter != null) opts.initLetter = cookieLetter;
}
// decide what to show first
//
if (opts.initLetter != '') {
firstClick = true;
$('.' + opts.initLetter.toLowerCase(), $letters).slice(0, 1).click(); // click the initLetter if there was one
}
else {
if (opts.includeAll) $('.all', $letters).addClass('ln-selected'); // showing all: we don't need to click this: the whole list is already loaded
else { // ALL link is hidden, click the first letter that will display LI's
for (var i = ((opts.includeNums) ? 0 : 1); i < letters.length; i++) {
if (counts[letters[i]] > 0) {
firstClick = true;
$('.' + letters[i], $letters).slice(0, 1).click();
break;
}
}
}
}
}
// positions the letter count div above the letter links (so we only have to do it once: after this we just change it's left position via mouseover)
//
function setLetterCountTop() {
$letterCount.css({ top: $('.a', $letters).slice(0, 1).offset({ margin: false, border: true }).top - $letterCount.outerHeight({ margin: true }) }); // note: don't set top based on '.all': it might not be visible
}
// adds a class to each LI that has text content inside of it (ie, inside an <a>, a <div>, nested DOM nodes, etc)
//
function addClasses() {
var str, firstChar, firstWord, spl, $this, hasPrefixes = (opts.prefixes.length > 0);
$($list).children().each(function() {
$this = $(this), firstChar = '', str = $.trim($this.text()).toLowerCase();
if (str != '') {
if (hasPrefixes) {
spl = str.split(' ');
if ((spl.length > 1) && ($.inArray(spl[0], opts.prefixes) > -1)) {
firstChar = spl[1].charAt(0);
addLetterClass(firstChar, $this, true);
}
}
firstChar = str.charAt(0);
addLetterClass(firstChar, $this);
}
});
}
function addLetterClass(firstChar, $el, isPrefix) {
if (/\W/.test(firstChar)) firstChar = '-'; // not A-Z, a-z or 0-9, so considered "other"
if (!isNaN(firstChar)) firstChar = '_'; // use '_' if the first char is a number
$el.addClass('ln-' + firstChar);
if (counts[firstChar] == undefined) counts[firstChar] = 0;
counts[firstChar]++;
if (!isPrefix) allCount++;
}
function addDisabledClass() {
for (var i = 0; i < letters.length; i++) {
if (counts[letters[i]] == undefined) $('.' + letters[i], $letters).addClass('ln-disabled');
}
}
function addNoMatchLI() {
$list.append('<li class="ln-no-match" style="display:none">' + opts.noMatchText + '</li>');
}
function getLetterCount(el) {
if ($(el).hasClass('all')) return allCount;
else {
var count = counts[$(el).attr('class').split(' ')[0]];
return (count != undefined) ? count : 0; // some letters may not have a count in the hash
}
}
function bindHandlers() {
// sets the top position of the count div in case something above it on the page has resized
//
if (opts.showCounts) {
$wrapper.mouseover(function() {
setLetterCountTop();
});
}
// mouseover for each letter: shows the count above the letter
//
if (opts.showCounts) {
$('a', $letters).mouseover(function() {
var left = $(this).position().left;
var width = ($(this).outerWidth({ margin: true }) - 1) + 'px'; // the -1 is to tweak the width a bit due to a seeming inaccuracy in jquery ui/dimensions outerWidth (same result in FF2 and IE6/7)
var count = getLetterCount(this);
$letterCount.css({ left: left, width: width }).text(count).show(); // set left position and width of letter count, set count text and show it
});
// mouseout for each letter: hide the count
//
$('a', $letters).mouseout(function() {
$letterCount.hide();
});
}
// click handler for letters: shows/hides relevant LI's
//
$('a', $letters).click(function() {
$('a.ln-selected', $letters).removeClass('ln-selected');
var letter = $(this).attr('class').split(' ')[0];
if (letter == 'all') {
$list.children().show();
$list.children('.ln-no-match').hide();
isAll = true;
} else {
if (isAll) {
$list.children().hide();
isAll = false;
} else if (prevLetter != '') $list.children('.ln-' + prevLetter).hide();
var count = getLetterCount(this);
if (count > 0) {
$list.children('.ln-no-match').hide(); // in case it's showing
$list.children('.ln-' + letter).show();
}
else $list.children('.ln-no-match').show();
prevLetter = letter;
}
if ($.cookie && (opts.cookieName != null)) $.cookie(opts.cookieName, letter);
$(this).addClass('ln-selected');
$(this).blur();
if (!firstClick && (opts.onClick != null)) opts.onClick(letter);
else firstClick = false;
return false;
});
}
// creates the HTML for the letter links
//
function createLettersHtml() {
var html = [];
for (var i = 1; i < letters.length; i++) {
if (html.length == 0) html.push('<a class="all" href="#">ALL</a><a class="_" href="#">0-9</a>');
html.push('<a class="' + letters[i] + '" href="#">' + ((letters[i] == '-') ? '...' : letters[i].toUpperCase()) + '</a>');
}
return '<div class="ln-letters">' + html.join('') + '</div>' + ((opts.showCounts) ? '<div class="ln-letter-count" style="display:none; position:absolute; top:0; left:0; width:20px;">0</div>' : ''); // the styling for ln-letter-count is to give us a starting point for the element, which will be repositioned when made visible (ie, should not need to be styled by the user)
}
init();
});
};
$.fn.listnav.defaults = {
initLetter: '',
includeAll: true,
incudeOther: false,
includeNums: true,
flagDisabled: true,
noMatchText: 'No matching entries',
showCounts: true,
cookieName: null,
onClick: null,
prefixes: []
};
})(jQuery);
最佳答案
您仅应在必要时运行javascript。即当页面加载完所有内容后
尝试
<script>
$(document).ready(function(){
$('#demoOne').listnav();
});
</script>