Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не могу разобраться в коде (https://javascript.ru/forum/jquery/49629-ne-mogu-razobratsya-v-kode.html)

Карбонат 21.08.2014 17:08

Не могу разобраться в коде
 
(function(c) {
    c.fn.darkbox = function() {
        function j() {
            clearInterval(m);
            d.css("background-position", "24px 24px")
        }

        function h() {
            j();
            k.animate({
                opacity: 0
            }, q, function() {
                b.removeClass(r);
                d.stop();
                l.unbind("error", n).attr("src", "")
            })
        }

        function o(a) {
            if (27 === a.which || 32 === a.which)
                if (0 === c("div.darkbox:hidden").length) {
                    a.preventDefault();
                    h()
                }
        }

        function n() {
            j();
            b.addClass("darkbox-error");
            setTimeout(h, s)
        }
        c('<div class="darkbox"><div class="darkbox-shadow"></div><div class="darkbox-canvas"><img alt=""><div class="darkbox-button" title="Close"></div></div></div>').appendTo("body");
        var q = 100,
            s = 800,
            r = "darkbox-on darkbox-done darkbox-loaded darkbox-error",
            t = /mac/i.test(navigator.platform) ? "darkbox-button-left" : "darkbox-button-right",
            b = c("div.darkbox"),
            k = b.children("div.darkbox-shadow"),
            d = b.children("div.darkbox-canvas"),
            l = d.children("img"),
            u = d.children("div.darkbox-button"),
            m = 0,
            i = 0;
        k.css({
            opacity: 0
        }).click(h);
        u.addClass(t).click(h);
        l.load(function() {
            j();
            var a = c(this),
                g = 1,
                e = a.width(),
                f = a.height();
            g = b.width();
            var p = b.height();
            if (0 === e && 0 === f) setTimeout(function() {
                a.load()
            }, 10);
            else {
                if (e > g - 50 || f > p - 50) {
                    g = Math.min((g - 50) / e, (p - 50) / f);
                    e = Math.round(e * g);
                    f = Math.round(f * g)
                }
                b.addClass("darkbox-loaded");
                d.animate({
                    width: e,
                    marginLeft: -e / 2,
                    height: f,
                    marginTop: -f / 2,
                    opacity: 1
                }, 400, function() {
                    b.addClass("darkbox-done")
                })
            }
        });
        c(document).keypress(o).keydown(o);
        this.click(function(a) {
            a.preventDefault();
            a = c(this);
            b.addClass("darkbox-on");
            d.css({
                width: "",
                marginLeft: "",
                height: "",
                marginTop: "",
                opacity: 0.5
            });
            m = setInterval(function() {
                d.css("background-position", "24px " + (24 - 56 * i) + "px");
                i = 7 <= i ? 0 :
                    i + 1
            }, 90);
            l.one("error", n).css({
                width: "",
                height: ""
            }).attr("src", a.attr("href")).attr("alt", a.attr("title"));
            k.animate({
                opacity: 0.6
            }, 200)
        });
        return this
    }
})(jQuery);

Код открывает изобраение в увеличенном размере. В заблуждения вводит следующее
1:
[JS](function(c) {
    c.fn.darkbox = function() {

Почему с, а не $
2:
c('<div class="darkbox"><div class="darkbox-shadow"></div><div class="darkbox-canvas"><img alt=""><div class="darkbox-button" title="Close"></div></div></div>').appendTo("body");

Читал в документации, но не нашел такой метод создания объекта, как я понимаю создается элемент "c" так? или что иное?
3:
var a = c(this)

Эту карамбу я вообще не понимаю, что в итоге "a"?

tsigel 21.08.2014 17:12

Карбонат,
с = jQuery

tsigel 21.08.2014 17:13

(function (trololo) {alert(trololo)})("ololo")

a - объект jQuery

deivan 21.08.2014 17:13

1. c - это ссылка на jQuery
2. методами жквери (а на него ссылается переменная с) создается див согласно тегам в строке и добавляется в боди

Карбонат 21.08.2014 17:21

Спасибо, все понял!

Карбонат 21.08.2014 17:23

t = /mac/i.test(navigator.platform)
В чем смысл этой строчки?

Aetae 21.08.2014 17:52

"Не мак ли у тебя случаем", вроде очевидно даже если не знать js.

Карбонат 21.08.2014 21:25

Ага, спасибо. Понял.
k.css({
            opacity: 0
        }).click(h);

Тут же такой порядок действий:
мы элементу k меняем css свойство opacity на 0 и ждем, пока кто-нибудь щелкнет по нему?

tsigel 21.08.2014 21:47

нет, передаем обработчик вероятно

Карбонат 21.08.2014 22:08

а зачем тогда css({
opacity: 0
})

tsigel 21.08.2014 22:34

чтобы был прозрачным, вероятно :)

Карбонат 22.08.2014 01:42

this.click(function(a) {

Чем здесь является а, мы ведь потом используем как элемент DOM модели

Карбонат 22.08.2014 02:23

И можно ли здесь с this работать как с массивом, ведь он jquery объект, тобишь набор

Карбонат 22.08.2014 03:07

Еще такой вопрос. Из страницы я получаю запросом $( 'a[rel=darkbox]' ).darkbox();
DOM элементы, которые в итоге у меня составляют элемент this в плагине. Если в самом начале написать
alert(this.lenght)
, то он к примеру, выведет 3 элемента. Обработка у меня происходит по клику по одному из них, могу я узнать по какому именно: 1-ому, 2-ому или 3-ему, произошел клик, то есть узнать порядок 0, 1 или 2. Я ведь могу воспользоваться методом this.eq(1) и выбрать средний. Но могу ли я к примеру кликнуть по нему и узнать его номер?

skrudjmakdak 22.08.2014 08:35

оно?
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    background: yellow;
    margin: 5px;
  }
  span {
    color: red;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
 
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
 
<script>
$( "div" ).click(function() {
  // `this` is the DOM element that was clicked
  var index = $( "div" ).index( this );
  $( "span" ).text( "That was div index #" + index );
});
</script>
 
</body>
</html>

Карбонат 22.08.2014 10:48

Интересная идея, спасибо! Сейчас опробую.

Карбонат 22.08.2014 11:41

А что с a? Это же сначала событие событие, а потом jquery объект

Карбонат 22.08.2014 11:53

А нет, потом DOM-элемент, просто для экономии переменных написали?


Часовой пояс GMT +3, время: 13:13.