Jump to content
Sign in to follow this  
markimax

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

Recommended Posts

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

Часто бывает, что пользователю надо знать селектор для 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 окне будет нужный селектор (обычно используется три последних)

Share this post


Link to post
Share on other sites

Спасибо!

 

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

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

 

ИМХО

Share this post


Link to post
Share on other sites

Спасибо!

 

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

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

 

ИМХО

 

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

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

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

Share this post


Link to post
Share on other sites

хм...

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

Share this post


Link to post
Share on other sites

хм...

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

 

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

 

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

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

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

Share this post


Link to post
Share on other sites

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

 

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

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

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

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

 

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/

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

ИМХО

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By JustSkew
      Всем привет!
       
      Есть страница domain.ru/page. Нужно сделать так, чтобы эта же страница открывалась по domain.ru/page-1, .../page-2 и т.д. То есть, если после page через тире идет продолжение - открывать содержимое страницы /page без смены урл. 
       
      Например: заходим по ссылке domain.ru/page-1 - показывается содержимое страницы page (для page один шаблон в view и один контроллер), при этом урл остается domain.ru/page-1
      На сайте есть seoPro, опенкарт версии 1.5
       
       
      Чтобы было понятнее для чего это: это будет страница контактов для множества городов (kontakty-v-moskve, kontakty-v-pitere) и по всем урлам должна открываться одна страница (/kontakty), в которой будет, в зависимости от урла, меняться информация. Создавать страницу для каждого города не вариант, т.к. таких городов >150.
       
    • By smartcoder
      990.00 руб
      Скачать/Купить дополнение


      SmartProducts - товары в любом месте сайта + лэндинг страницах
      Возможности модуля:
      1. Установка блоков товаров на партнерских сайтах с отслеживанием партнерского трэк-кода.
      2. Установка блоков товаров в статьи или в категории, абсолютно в любое место сайта.
      3. Фильтрация блоков по определенным категориям, популярности, новизне.
      4. Отслеживание tracking кода с какой площадки был сделан заказ и отметка в заказе.
       
      Модуль SmartProducts можно использовать как для составления блоков товаров и размещением их абсолютно на любой странице, как и для партнерской программы.
       
      P.S.: Модуль распространяется как есть.
      Перед покупкой ознакомьтесь с описанием модуля и с демо версией, указанной выше.
      Автор в праве отказать в поддержке и в возврате средств, если вы будете устанавливать на видоизмененный opencart (даже если поменяли только папку ./admin)
       
      Добавил smartcoder Добавлено 13.05.2018 Категория Модули Системные требования Сайт разработчика smart-coder.ru Старая цена 1990 Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1
      1.5.3.1 ocStore 2.3
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Opencart.pro 2.3
      OcShop 1.5.6.4.х Обращение к серверу разработчика Нет  
    • By smartcoder
      Возможности модуля:
      1. Установка блоков товаров на партнерских сайтах с отслеживанием партнерского трэк-кода.
      2. Установка блоков товаров в статьи или в категории, абсолютно в любое место сайта.
      3. Фильтрация блоков по определенным категориям, популярности, новизне.
      4. Отслеживание tracking кода с какой площадки был сделан заказ и отметка в заказе.
       
      Модуль SmartProducts можно использовать как для составления блоков товаров и размещением их абсолютно на любой странице, как и для партнерской программы.
       
      P.S.: Модуль распространяется как есть.
      Перед покупкой ознакомьтесь с описанием модуля и с демо версией, указанной выше.
      Автор в праве отказать в поддержке и в возврате средств, если вы будете устанавливать на видоизмененный opencart (даже если поменяли только папку ./admin)
       
    • By smartcoder
      500.00 руб
      Скачать/Купить дополнение


      Emoji - смайлы в описании товаров, категорий, статей
      Emoji для Opencart 🔥😍❤️🧐👍🤔
      Добавляйте любимые смайлы Emoji в описание к товарам, категориям, статьям!
       
      Как работает модификатор?
      Данный модификатор работает с редактором Summernote, где добавляется окно вставки Emoji
       

       
      После того, как сохранили описание с Emoji, можем посмотреть как это выглядит:
       

       
       
      Где посмотреть демо?
       
      Демо админ:
      https://demo30.opencart-shop.ru/admin/index.php?route=catalog/product/edit&product_id=42
      Логин: demo
      Пароль: demo
       
      Демо фронт:
      https://demo30.opencart-shop.ru/index.php?route=product/product&product_id=42
       
      Установка:
      Установка простая, добавляются смайлы модификатором.

      Добавил smartcoder Добавлено 21.08.2019 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика https://smart-coder.ru Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3 ocStore Несовместим OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Нет  
    • By smartcoder
      Emoji для Opencart 🔥😍❤️🧐👍🤔
      Добавляйте любимые смайлы Emoji в описание к товарам, категориям, статьям!
       
      Как работает модификатор?
      Данный модификатор работает с редактором Summernote, где добавляется окно вставки Emoji
       

       
      После того, как сохранили описание с Emoji, можем посмотреть как это выглядит:
       

       
       
      Где посмотреть демо?
       
      Демо админ:
      https://demo30.opencart-shop.ru/admin/index.php?route=catalog/product/edit&product_id=42
      Логин: demo
      Пароль: demo
       
      Демо фронт:
      https://demo30.opencart-shop.ru/index.php?route=product/product&product_id=42
       
      Установка:
      Установка простая, добавляются смайлы модификатором.

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.