我在我的页面上使用 jQuery 工具导航器。以下是他们网站上的示例； http://flowplayer.org/tools/scrollable/navigator.html
虽然我能够让它在一个地方工作，但我需要在同一个 HTML 中的两个地方使用导航器(一个@页面顶部和另一个@页面底部)
但它无法正常工作...我的问题是我需要更新什么才能让插件在 2 个地方工作？
只是给出一个想法，JS 似乎正在使用“可滚动”名称...但我不确定它是如何工作的，因为代码的编写风格对我来说有点复杂。 我在文件准备好后打电话 $("#browsable").scrollable().navigator();
下面是HTML代码结构；
<div class="fl LeftCol"><a class="prev browse left disabled"></a></div>
<div class="fl MidCol">
<div class="scrollable" id="browsable">
<div class="items">
<!-- Item 1 start-->
<div>
</div>
<!-- Item 1 end -->
<!-- Item 2 start -->
<div>
</div>
<!-- Item 2 end -->
</div> <!-- End items -->
</div> <!-- End browsable -->
</div> <!-- End MidCol -->
<div class="fl RightCol"><a class="next browse right"></a></div>
<div class="fl navi"><a class="active"></a><a class=""></a></div>
和 JS(美化)
/*!
* jQuery Tools v1.2.6 - The missing UI library for the Web
*
* scrollable/scrollable.js
* scrollable/scrollable.navigator.js
*
* NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
*
* http://flowplayer.org/tools/
*
*/
(function (a) {
a.tools = a.tools || {
version: "v1.2.6"
}, a.tools.scrollable = {
conf: {
activeClass: "active",
circular: !1,
clonedClass: "cloned",
disabledClass: "disabled",
easing: "swing",
initialIndex: 0,
item: "> *",
items: ".items",
keyboard: !0,
mousewheel: !1,
next: ".next",
prev: ".prev",
size: 1,
speed: 400,
vertical: !1,
touch: !0,
wheelSpeed: 0
}
};
function b(a, b) {
var c = parseInt(a.css(b), 10);
if (c) return c;
var d = a[0].currentStyle;
return d && d.width && parseInt(d.width, 10)
}
function c(b, c) {
var d = a(c);
return d.length < 2 ? d : b.parent().find(c)
}
var d;
function e(b, e) {
var f = this,
g = b.add(f),
h = b.children(),
i = 0,
j = e.vertical;
d || (d = f), h.length > 1 && (h = a(e.items, b)), e.size > 1 && (e.circular = !1), a.extend(f, {
getConf: function () {
return e
},
getIndex: function () {
return i
},
getSize: function () {
return f.getItems().size()
},
getNaviButtons: function () {
return n.add(o)
},
getRoot: function () {
return b
},
getItemWrap: function () {
return h
},
getItems: function () {
return h.find(e.item).not("." + e.clonedClass)
},
move: function (a, b) {
return f.seekTo(i + a, b)
},
next: function (a) {
return f.move(e.size, a)
},
prev: function (a) {
return f.move(-e.size, a)
},
begin: function (a) {
return f.seekTo(0, a)
},
end: function (a) {
return f.seekTo(f.getSize() - 1, a)
},
focus: function () {
d = f;
return f
},
addItem: function (b) {
b = a(b), e.circular ? (h.children().last().before(b), h.children().first().replaceWith(b.clone().addClass(e.clonedClass))) : (h.append(b), o.removeClass("disabled")), g.trigger("onAddItem", [b]);
return f
},
seekTo: function (b, c, k) {
b.jquery || (b *= 1);
if (e.circular && b === 0 && i == -1 && c !== 0) return f;
if (!e.circular && b < 0 || b > f.getSize() || b < -1) return f;
var l = b;
b.jquery ? b = f.getItems().index(b) : l = f.getItems().eq(b);
var m = a.Event("onBeforeSeek");
if (!k) {
g.trigger(m, [b, c]);
if (m.isDefaultPrevented() || !l.length) return f
}
var n = j ? {
top: -l.position().top
} : {
left: -l.position().left
};
i = b, d = f, c === undefined && (c = e.speed), h.animate(n, c, e.easing, k ||
function () {
g.trigger("onSeek", [b])
});
return f
}
}), a.each(["onBeforeSeek", "onSeek", "onAddItem"], function (b, c) {
a.isFunction(e[c]) && a(f).bind(c, e[c]), f[c] = function (b) {
b && a(f).bind(c, b);
return f
}
});
if (e.circular) {
var k = f.getItems().slice(-1).clone().prependTo(h),
l = f.getItems().eq(1).clone().appendTo(h);
k.add(l).addClass(e.clonedClass), f.onBeforeSeek(function (a, b, c) {
if (!a.isDefaultPrevented()) {
if (b == -1) {
f.seekTo(k, c, function () {
f.end(0)
});
return a.preventDefault()
}
b == f.getSize() && f.seekTo(l, c, function () {
f.begin(0)
})
}
});
var m = b.parents().add(b).filter(function () {
if (a(this).css("display") === "none") return !0
});
m.length ? (m.show(), f.seekTo(0, 0, function () {}), m.hide()) : f.seekTo(0, 0, function () {})
}
var n = c(b, e.prev).click(function (a) {
a.stopPropagation(), f.prev()
}),
o = c(b, e.next).click(function (a) {
a.stopPropagation(), f.next()
});
e.circular || (f.onBeforeSeek(function (a, b) {
setTimeout(function () {
a.isDefaultPrevented() || (n.toggleClass(e.disabledClass, b <= 0), o.toggleClass(e.disabledClass, b >= f.getSize() - 1))
}, 1)
}), e.initialIndex || n.addClass(e.disabledClass)), f.getSize() < 2 && n.add(o).addClass(e.disabledClass), e.mousewheel && a.fn.mousewheel && b.mousewheel(function (a, b) {
if (e.mousewheel) {
f.move(b < 0 ? 1 : -1, e.wheelSpeed || 50);
return !1
}
});
if (e.touch) {
var p = {};
h[0].ontouchstart = function (a) {
var b = a.touches[0];
p.x = b.clientX, p.y = b.clientY
}, h[0].ontouchmove = function (a) {
if (a.touches.length == 1 && !h.is(":animated")) {
var b = a.touches[0],
c = p.x - b.clientX,
d = p.y - b.clientY;
f[j && d > 0 || !j && c > 0 ? "next" : "prev"](), a.preventDefault()
}
}
}
e.keyboard && a(document).bind("keydown.scrollable", function (b) {
if (!(!e.keyboard || b.altKey || b.ctrlKey || b.metaKey || a(b.target).is(":input"))) {
if (e.keyboard != "static" && d != f) return;
var c = b.keyCode;
if (j && (c == 38 || c == 40)) {
f.move(c == 38 ? -1 : 1);
return b.preventDefault()
}
if (!j && (c == 37 || c == 39)) {
f.move(c == 37 ? -1 : 1);
return b.preventDefault()
}
}
}), e.initialIndex && f.seekTo(e.initialIndex, 0, function () {})
}
a.fn.scrollable = function (b) {
var c = this.data("scrollable");
if (c) return c;
b = a.extend({}, a.tools.scrollable.conf, b), this.each(function () {
c = new e(a(this), b), a(this).data("scrollable", c)
});
return b.api ? c : this
}
})(jQuery);
(function (a) {
var b = a.tools.scrollable;
b.navigator = {
conf: {
navi: ".navi",
naviItem: null,
activeClass: "active",
indexed: !1,
idPrefix: null,
history: !1
}
};
function c(b, c) {
var d = a(c);
return d.length < 2 ? d : b.parent().find(c)
}
a.fn.navigator = function (d) {
typeof d == "string" && (d = {
navi: d
}), d = a.extend({}, b.navigator.conf, d);
var e;
this.each(function () {
var b = a(this).data("scrollable"),
f = d.navi.jquery ? d.navi : c(b.getRoot(), d.navi),
g = b.getNaviButtons(),
h = d.activeClass,
i = d.history && history.pushState,
j = b.getConf().size;
b && (e = b), b.getNaviButtons = function () {
return g.add(f)
}, i && (history.pushState({
i: 0
}), a(window).bind("popstate", function (a) {
var c = a.originalEvent.state;
c && b.seekTo(c.i)
}));
function k(a, c, d) {
b.seekTo(c), d.preventDefault(), i && history.pushState({
i: c
})
}
function l() {
return f.find(d.naviItem || "> *")
}
function m(b) {
var c = a("<" + (d.naviItem || "a") + "/>").click(function (c) {
k(a(this), b, c)
});
b === 0 && c.addClass(h), d.indexed && c.text(b + 1), d.idPrefix && c.attr("id", d.idPrefix + b);
return c.appendTo(f)
}
l().length ? l().each(function (b) {
a(this).click(function (c) {
k(a(this), b, c)
})
}) : a.each(b.getItems(), function (a) {
a % j == 0 && m(a)
}), b.onBeforeSeek(function (a, b) {
setTimeout(function () {
if (!a.isDefaultPrevented()) {
var c = b / j,
d = l().eq(c);
d.length && l().removeClass(h).eq(c).addClass(h)
}
}, 1)
}), b.onAddItem(function (a, c) {
var d = b.getItems().index(c);
d % j == 0 && m(d)
})
});
return d.api ? e : this
}
})(jQuery);
最佳答案
不要在页面上多次使用同一个id值
如果你不能为顶部和底部菜单和导航控件设置不同的 id 或类，那么我想你可以试试这个
$(".scrollable:eq(0)").scrollable().navigator(".navi:eq(0)");
$(".scrollable:eq(1)").scrollable().navigator(".navi:eq(1)");
关于javascript - jQuery 工具问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7805043/