#javascript #jquery #html #css #jquery-plugins
#javascript #jquery #HTML #css #jquery-плагины
Вопрос:
Я использую навигатор инструментов jQuery на своей странице. Ниже приведен пример с их сайта; http://flowplayer.org/tools/scrollable/navigator.html
Хотя я могу заставить его работать в одном месте, мне нужно использовать навигатор в 2 местах в одном и том же HTML (один @ top, а другой @ bottom страницы)
Но он работает некорректно…Мой вопрос в том, что мне нужно обновить, чтобы плагин работал в 2 местах?
Просто чтобы дать представление, JS, похоже, использует «прокручиваемое» имя … но я не уверен, как это работает, поскольку стиль написания кода для меня немного сложный. И я вызываю следующий на document ready $(«#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 amp;amp; d.width amp;amp; 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 amp;amp; (h = a(e.items, b)), e.size > 1 amp;amp; (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 amp;amp; b === 0 amp;amp; i == -1 amp;amp; c !== 0) return f;
if (!e.circular amp;amp; 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 amp;amp; (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]) amp;amp; a(f).bind(c, e[c]), f[c] = function (b) {
b amp;amp; 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() amp;amp; 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 amp;amp; n.add(o).addClass(e.disabledClass), e.mousewheel amp;amp; a.fn.mousewheel amp;amp; 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 amp;amp; !h.is(":animated")) {
var b = a.touches[0],
c = p.x - b.clientX,
d = p.y - b.clientY;
f[j amp;amp; d > 0 || !j amp;amp; c > 0 ? "next" : "prev"](), a.preventDefault()
}
}
}
e.keyboard amp;amp; 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" amp;amp; d != f) return;
var c = b.keyCode;
if (j amp;amp; (c == 38 || c == 40)) {
f.move(c == 38 ? -1 : 1);
return b.preventDefault()
}
if (!j amp;amp; (c == 37 || c == 39)) {
f.move(c == 37 ? -1 : 1);
return b.preventDefault()
}
}
}), e.initialIndex amp;amp; 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" amp;amp; (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 amp;amp; history.pushState,
j = b.getConf().size;
b amp;amp; (e = b), b.getNaviButtons = function () {
return g.add(f)
}, i amp;amp; (history.pushState({
i: 0
}), a(window).bind("popstate", function (a) {
var c = a.originalEvent.state;
c amp;amp; b.seekTo(c.i)
}));
function k(a, c, d) {
b.seekTo(c), d.preventDefault(), i amp;amp; 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 amp;amp; c.addClass(h), d.indexed amp;amp; c.text(b 1), d.idPrefix amp;amp; 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 amp;amp; m(a)
}), b.onBeforeSeek(function (a, b) {
setTimeout(function () {
if (!a.isDefaultPrevented()) {
var c = b / j,
d = l().eq(c);
d.length amp;amp; l().removeClass(h).eq(c).addClass(h)
}
}, 1)
}), b.onAddItem(function (a, c) {
var d = b.getItems().index(c);
d % j == 0 amp;amp; m(d)
})
});
return d.api ? e : this
}
})(jQuery);
Комментарии:
1. Можете ли вы опубликовать ссылку на свою демонстрацию, чтобы я мог увидеть, в чем проблема? Опубликованный вами код не очень помогает.
Ответ №1:
не используйте одно и то же значение идентификатора более одного раза на странице
если вы не можете установить другой идентификатор или класс для верхнего и нижнего меню и элемента управления навигацией, я думаю, вы можете попробовать это
$(".scrollable:eq(0)").scrollable().navigator(".navi:eq(0)");
$(".scrollable:eq(1)").scrollable().navigator(".navi:eq(1)");