Блог

Я использую навигатор инструментов 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);
  

не используйте одно и то же значение идентификатора более одного раза на странице

если вы не можете установить другой идентификатор или класс для верхнего и нижнего меню и элемента управления навигацией, я думаю, вы можете попробовать это

 $(".scrollable:eq(0)").scrollable().navigator(".navi:eq(0)");
$(".scrollable:eq(1)").scrollable().navigator(".navi:eq(1)");