Скрипт для определения селекторов jquery, css

[markimax]

Может кому надо (часто использую в личных целях):

Часто бывает, что пользователю надо знать селектор для CSS или jQuery

Особенно к примеру разработчикам тем, чтобы указать какой селектор в css изменять

Привожу рабочий код инструмента, может кому надо (элегантный и простой):

<script>
    $(function() {
      $("*").click(function() {
        var selector = $(this).parents()
                    .map(function() {
                      var id = $(this).attr("id");
                      var tagid = '';
                        if (id) {
                          tagid += "#"+ id;
                        } else {
                         var classNames = $(this).attr("class");
                         if (classNames) {
                             tagid += "." + $.trim(classNames).replace(/\s/gi, ".");
                           }
                         }
                      tagid = this.tagName+tagid;
                      return tagid;
                    })
                    .get().reverse().join(" ");
        if (selector) {
          selector += " "+ $(this)[0].nodeName;
        }

        var id = $(this).attr("id");
        if (id) {
          selector += "#"+ id;
        }

        var classNames = $(this).attr("class");
        if (classNames) {
          selector += "." + $.trim(classNames).replace(/\s/gi, ".");
        }

        alert(selector);

        return false;
      });
    });
</script>

Пример: http://opencartadmin.com/freelancer/

 

Использование: берете любой HTML модуль: SEO CMS PRO, HTML блок, HTML+

Заполняете поле textarea модуля (или html виджет)

И вешаете на те схемы где нужно определить селектор

Потом заходите на страницу схемы и кликаете на любое место где нужно определить селектор, в alert окне будет нужный селектор (обычно используется три последних)

[Sha]

Спасибо!

 

интересно, а почему не стандартными средствами? например FireBug.

быстрее, типа... ну так тогда предлагаю в консоль а не в алерт, а ещё лучше в буфер)

 

ИМХО

[markimax]

Спасибо!

 

интересно, а почему не стандартными средствами? например FireBug.

быстрее, типа... ну так тогда предлагаю в консоль а не в алерт, а ещё лучше в буфер)

 

ИМХО

 

Вы так не "ругайтесь" (firebug) :)

По опыту 99.9% пользователей понятия не имеют что это такое.

Поэтому и выложил код для разработчиков (тема как раз для этого), на базе него (к примеру разработчикам тем, для использования в теме)  можно легко сделать какой либо инструмент, для таких "продвинутых" 99.9% пользователей, чтобы они не за...ли вопросами о селекторах css и jquery. Им хоть говори, хоть не говори про инспектирование элемента - все равно не поймут.

[chukcha]

хм...

Если человек созрел до понятия селектор, то это уже 50% пользователей

[markimax]

хм...

Если человек созрел до понятия селектор, то это уже 50% пользователей

 

Надо делать универсальные решения, учитывая и те 50%. которые "не созрели"

 

К примеру на базе этого кода можно сделать "раскраску" сайта (темы), изменение css сайта  на лету и т.п.

 

P.S. Кстати это самое элегантное решение из рабочих. (код js из firebug ооочень массивный и запутанный, остальные реализации которые видел, работали с глюками, и не совсем корректно, да и размер кода был довольно таки большой, поэтому мне не жалко - поделился с вами простым и функциональным решением). У меня этот код (измененный конечно сильно) работает как "раскраска" сайта для клиентов (запарился я делать им изменения, вот и написал (на базе этого кода) за пару часов "раскраску")

[Sha]

серьёзно, не думал, что есть разработчики не знающие, что такое firebug)

 

думаю будет удобно в хроме, когда нажимаешь "new style rule",

вставить, подтереть лишнее, как-то всегда думал, что этого не хватает (может и разработчики хрома заодно услышат)

тогда, можно прикрутить к классному предложению!

[markimax]

серьёзно, не думал, что есть разработчики не знающие, что такое firebug)

 

думаю будет удобно в хроме, когда нажимаешь "new style rule",

вставить, подтереть лишнее, как-то всегда думал, что этого не хватает (может и разработчики хрома заодно услышат)

тогда, можно прикрутить к классному предложению!

 

Не поняли вы суть :)

 

Код для разработчиков, которые на базе него сделают инструмент для тех кто не знает firebug

[Sha]

ясно, а вообще, разные бывают как пользователи, так и разработчики  ;)

[Sha]

остальные реализации которые видел, работали с глюками, и не совсем корректно

 

всё, вот теперь окончательно въехал в суть поста  :-)  вы столкнулись-перелапатили-выбрали!

а нас от этого избавляете, если мы столкнёмся)))

 

P.S. но

прикрутить к https://opencartforum.com/topic/19017-%D0%BE%D1%82%D0%BB%D0%B0%D0%B4%D1%87%D0%B8%D0%BA-%D0%B4%D0%BB%D1%8F-opencart-debugger/

всё равно думаю будет неплохо))) 

ИМХО

[markimax]

всё, вот теперь окончательно въехал в суть поста  :-)  вы столкнулись-перелапатили-выбрали!

а нас от этого избавляете, если мы столкнёмся)))

Увидел задумку (архитектуру) кода, но ...

Не только "выбрали", но и добавил, изменил более 50% кода ;)

[markimax]

ясно, а вообще, разные бывают как пользователи, так и разработчики  ;)

Ну если "разработчик" не знает, что такое firebug, то и назвать тогда его, словом "разработчик", язык не поворачивается.