Какой код в настоящее время называется?

Тема в разделе "JavaScript", создана пользователем Ahmad, 11 сен 2013.

Модераторы: ZiX
  1. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Существует сайт, который имеет два небольших "<-" "->" кнопки для навигации, и их HTML код выглядит примерно так:

    <-:

    Код:
    <a class="left prev browse" href="javascript:;">&lt;</a>

    ->:


    Код:
    <a class="right next browse" href="javascript:;">&gt;</a>
    Чего я не понимаю, как есть JavaScript вызываются здесь?

    Какое событие / функции в настоящее время называется?

    Я не могу определить, какие события / функция вызывается, когда мы нажимаем "<-" "->" кнопок.

    Как навигация происходит?

    URL: Перейти по ссылке

    Расположение "<-" "->" кнопки:

    [​IMG]
     
  2. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.517
    Симпатии:
    1.365
    Последнее редактирование: 11 сен 2013
    Шумадан нравится это.
  3. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    <script type="text/javascript">
    jQuery(function($){
    $(".scrollable").scrollable({circular: true}).navigator();
    });
    (function(d){var a=[];var c=[38,38,40,40,37,39,37,39,66,65];var b=0;d.extend({konami:function(e,f){a.push(e);if(f){c=f}}});d(document).bind("keyup",function(e){var f=e.keyCode;if(f==c){b++}else{b=f==c[0]?1:0}if(b==c.length){if(a.length>0){d.each(a,function(g){this()})}}});d.konami(function(){d.fancybox({padding:0,autoScale:false,transitionIn:"elastic",transitionOut:"elastic",width:480,height:390,href:"Перейти по ссылке",type:"iframe"})})})(jQuery);
    </script>
    На сайте в html есть такой кусок кода
    но тут нас интересует только строка
    $(".scrollable").scrollable({circular: true}).navigator();
    Именно в ней идет инициализация прокрутки
     
    Шумадан нравится это.
  4. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Я не думаю, что код отвечает за навигацию между свидетельство сообщений. Я хочу знать, какой код выполняется, когда эти кнопки нажаты, что вызывает сообщение, чтобы изменить.
     
  5. sofwar

    sofwar Создатель

    Регистр.:
    15 июл 2012
    Сообщения:
    10
    Симпатии:
    2
    Вам же сказали что код вызывается функцией .click() Перейти по ссылке , если вы хотите найти на том сайте дайте ссылку в лс
     
  6. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    что код отвечает за навигацию между свидетельство сообщений

    Читаю Ваше сообщение уже не сколько раз и ни как не могу понять о чем Вы пишите что такое
    какое сообщение там просто происходит прокутка элементов?

    Вот тут простейший пример работы этого скроллера
    Перейти по ссылке
     
    Последнее редактирование модератором: 15 окт 2013
  7. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Мой вопрос: какой код вызывается при нажатии кнопки? Как влево / вправо переключение происходит? Поскольку текущий код не объясняет так:

    английский/English: My question: Which code is being called when I press the buttons ? How is the left/right shifting happening ? Because current code does not explain this:


    <a class="left prev browse" href="javascript:;"> << / a>

    <a class="right next browse" href="javascript:;">> </ a>


    Значит ли это, использовать тот же плагин JQuery, как в моем случае (JQuery плагин смягчение)?
     
    Последнее редактирование модератором: 13 окт 2013
  8. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    Вы меня извените, но я дал Вам простейший пример работы этого виджета scrollable
    Ладно я сам его скачал в минимизированом виде и раскомпресовал что б Вам показать что к чему и так весь код плагина вот
    Код:
    (function (a) {
        a.tools = a.tools || {
            version: "v1.2.7"
        }, 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).on(c, e[c]), f[c] = function (b) {
                    b && a(f).on(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).on("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);
    и так из кода видно что при нажатии стрелочек влево вправо срабатывает этот код
    Код:
                next: function (a) {
                    return f.move(e.size, a)
                },
                prev: function (a) {
                    return f.move(-e.size, a)
                },
    Которые в свою очередь вызывают эту функцию

    Код:
    move: function (a, b) {
                    return f.seekTo(i + a, b)
                },
    [/QUOTE]
    Которая вызывает функцию f.seekTo
    Код:
                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
                }
    Да Вам я понимаю не надо так глубоко копать а нужно просто поставить этот плагин, и настроить ему стилевое оформление соответствующие Вашему сайту
     
    Последнее редактирование модератором: 13 окт 2013
  9. etosh

    etosh Создатель

    Регистр.:
    22 июл 2013
    Сообщения:
    32
    Симпатии:
    4
    Тут налицо проблема с гугло-переводчиком :)
    Про обработчики JQuery уже всё сказано, добавить нечего. Напишите по-английски ему, ясно что он не понимает перевода.