0 Пользователей и 1 Гость просматривают эту тему.
  • 29 Ответов
  • 4992 Просмотров
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Доброго времени суток, уважаемые форумчане.

введение: много раз сталкиваюсь с "инициативой браузеров подделывать большинство элементов форм под себя". Да к тому же стиль отображения этих элементов еще и нельзя  изменить стандартными CSS средствами. Заказчик уперся... Ну и самому хочется видеть кроссбраузрный, красивый элемент.

Конечно же есть в сети множество плагинов и скриптов для решения этой проблемы. Но совсем другое, когда ты сам это сделаешь и понимаешь что к чему.

Так вот начну я с рецепта стилизации чекбоксов (checkbox).

Скорее всего для мастеров это не будет открытием, но для начинающих думаю будет полезно знать такие вещи.

В дальнейшем планирую продолжить разработку подробных рецептов для "проблемных" элементов форм.
Какой именно элемент формы станет следующим может зависит и от ваших пожеланий.

1. Стилизация Checkbox
2. Стилизация Select
3. Плагин - Стилизация Checkbox
« Последнее редактирование: 27.06.2012, 11:59:25 от fliginskih »
*

Fedor Vlasenko

  • Живу я здесь
  • 3844
  • 730 / 7
  • Все начинается с Value
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Считаю идею не совсем удачной. Тем более для новичков. Смысл подключения стороннего скрипта js.
Если js использоваться совсем не будет.Нарисуйте в чем проблема.
Что значит стороннего? JoomShopping работает на jQuery.
Цитировать
Нарисуйте в чем проблема.
Удивлен что у вас возникает подобный вопрос. Слишком ограничены возможности стилизации элементов.
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
...Не просто так Google вместо стандартных чекбоксов использует div
*

Fedor Vlasenko

  • Живу я здесь
  • 3844
  • 730 / 7
  • Все начинается с Value
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
1) Почему div? Мне одному кажется что это строчный элемент а не блочный? И как теперь засунуть чекбокс в абзац? DTD не позволит ведь! И браузеры тоже.
2) Раз уж мы завязываем все на js, то не лучше ли подменять нативные чекбоксы псевдочекбоксами динамически, средствами js ?
3) В коде полная антисанитария! Зачем функцию checking объявлять в глобальном контексте? Зачем ее вообще объявлять, тоесть оборачивать в нее код, который вызывается всего один раз?

А так же смотрим код:
Код
                        if(jQuery(this).find("input").is(':checked')){
                            jQuery(this).find("input").attr("checked", false);
                        }else{
                            jQuery(this).find("input").attr("checked", true);
                        }

Включаем моск: в зависимости от значения false/true вызываем одинаковый код, с параметром false/true - напрашивается вывод, не проще ли написать

Код
jQuery(this).find("input").attr("checked", !jQuery(this).find("input").is(':checked'));

Еще, я думаю всем привычней писать знак доллара вместо jQuery. В таком случае ваш код полезен и для чисто jQuery окружения, и для noconflict режима:

Код: javascript
(function($){
    $('selector').method();
})(jQuery);

Извините если че перемудрил, я не знаток js ...
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
В догонку: посмотрел пример с лэйблом... Тоесть теперь я не могу создать полноценный label ? НО ПОЧЕМУ???
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Довожу до сведения, что метод toggleClass вторым параметром принимает булеву переменную, указывающую - удалить или добавить класс, а значит, опять условие if .. else не нужно.
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
1) Почему div? Мне одному кажется что это строчный элемент а не блочный? И как теперь засунуть чекбокс в абзац? DTD не позволит ведь! И браузеры тоже.
div - это блочный элемент.
Раз уж вы за логику, то не надо засовывать чекбокс в абзац, ибо <p>.. - определяет текстовый абзац.

2) Раз уж мы завязываем все на js, то не лучше ли подменять нативные чекбоксы псевдочекбоксами динамически, средствами js ?
Лучше, но основная идея состоит в другом. Я за то, что бы понимать что и почему происходит. По этому рецепт показывает все "движения" внутри. Динамическая замена - это следующий шаг.

3) В коде полная антисанитария! Зачем функцию checking объявлять в глобальном контексте? Зачем ее вообще объявлять, тоесть оборачивать в нее код, который вызывается всего один раз?
Про функцию - согласен только при частных случаях. Алгоритм был взят из более сложного случая, где функцию требовалось вызывать несколько раз.

А так же смотрим код:
Потому что не обязательно все ограничится сменой атрибута.

Еще, я думаю всем привычней писать знак доллара вместо jQuery. В таком случае ваш код полезен и для чисто jQuery окружения, и для noconflict режима:
Согласен, привычка.
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
В догонку: посмотрел пример с лэйблом... Тоесть теперь я не могу создать полноценный label ? НО ПОЧЕМУ???
Почему же. Можете. Заметьте, что это был "пример".
*

nevigen

  • Moderator
  • 10260
  • 855 / 25
  • http://n*****n.com
Я извиняюсь.
А можно уточнить каким образом именно эта тема относится к ЖШ ? Она имеет четкий критерий привязки к ЖШ ? с какого бока ?
Не спорю новичкам возможно полезно, но реально к ЖШ не имеет отношения.
Тут ведь не курсы повышения квалификации. Есть отдельные разделы форума для таких обсуждений ;)
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Я извиняюсь.
А можно уточнить каким образом именно эта тема относится к ЖШ ? Она имеет четкий критерий привязки к ЖШ ? с какого бока ?
Не спорю новичкам возможно полезно, но реально к ЖШ не имеет отношения.
Тут ведь не курсы повышения квалификации. Есть отдельные разделы форума для таких обсуждений ;)
И я извиняюсь ( JoomShopping > Дизайн и все что связано с шаблоном ).  В ЖШ разве этих элементов нету? Чего стоит один фильтр - кладезь чекбоксов.
*

nevigen

  • Moderator
  • 10260
  • 855 / 25
  • http://n*****n.com
Ну у Вас есть тема как стилизировать фильтр. Это я понимаю труд и привязка к ЖШ.
А данная тема больше похожа на продвижение.
Курсы по ликбезу. Для этого есть соответсвющие темы. С таким же успехом я могу сказать что чекбоксы присутствуют и в компонентах форм, и в Виртумарте, и в массе дргуих. посему четкой принадлежности именно к данному разделу я не вижу.
Я не говорю что тема не нужна! Просто говорю, что она не в своем разделе !
Вот и все.
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
div - это блочный элемент.
Я имел ввиду, что нативный чекбокс - строчный элемент, так зачем его заменять блочным? Чем span не угодил?
Раз уж вы за логику, то не надо засовывать чекбокс в абзац, ибо <p>.. - определяет текстовый абзац.
Думаю не я один верстаю формы на <p> - часто это удобно, и в этом ничего плохого я не вижу.

Лучше, но основная идея состоит в другом. Я за то, что бы понимать что и почему происходит. По этому рецепт показывает все "движения" внутри. Динамическая замена - это следующий шаг.

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

Про функцию - согласен только при частных случаях. Алгоритм был взят из более сложного случая, где функцию требовалось вызывать несколько раз.
Но это не объясняет причину объявления ее как глобальной? По сути вы объявляете window.checking - зачем этот метод объекту window?
Изучив ваш пример, начинающий js-кодер создаст в следующий раз функцию open, и будет недоумевать, почему поламался код вызова всплывающего окна, который написан как window.open(...)

Потому что не обязательно все ограничится сменой атрибута.

Но ведь дважды вызывается одинаковый код, просто с разным параметром. Не лучше, очевиднее и проще ли написать код, а параметр писать в локальную переменную?


В соответствии со всем, сказанным выше, привожу примерный код:

Код: javascript
(function($){
// вешаем наш код на domready
$(document).ready(function(){
// инициализация состояния псевдочекбоксов
$(".checkbox").each(function(){
var checked = $('input', this).is(':checked');
$(this).toggleClass('checked', checked);
});
// оживляем псеводчекбоксы
$(".checkbox").click(function(){
var checked = $('input', this).is(':checked');
$(this).toggleClass('checked', !checked);
$('input', this).attr('checked', !checked);
});
});
})(jQuery);

Ведь это короче и яснее чем
Код: javascript
function checking() {
// функция проверяет состояние настоящего чекбокса
// и устанавливает стиль для соответствующего псевдо-чекбокса
    jQuery.each(jQuery(".checkbox"),
            function(){
                if(jQuery(this).find("input").is(':checked')){
                    jQuery(this).addClass("checked");
                }else{
                    jQuery(this).removeClass("checked");
                }
            }
    );
}
 
jQuery(document).ready(
        function(){
            checking(); // функция проверки запустится при загрузке страницы
            jQuery(".checkbox").click(
                    // скрипт будет менять состояние настоящего чекбокса
                    // и стиль псевдо-чекбокса при клике по нему
                    function(){
                        jQuery(this).toggleClass("checked");
                        if(jQuery(this).find("input").is(':checked')){
                            jQuery(this).find("input").attr("checked", false);
                        }else{
                            jQuery(this).find("input").attr("checked", true);
                        }
                    }
            );
        }
);
« Последнее редактирование: 12.05.2012, 07:49:22 от danik.html »
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Цитировать
Я имел ввиду, что нативный чекбокс - строчный элемент, так зачем его заменять блочным? Чем span не угодил?
Сделал все на спанах. В примере в лейблом поменял на <label...

Код
По сути вы объявляете window.checking - зачем этот метод объекту window?
Я пересмотрю свой код. Ваш код, конечно, изящнее. Но у него слишком "узкая специализация". (по крайней мере, в силу своего небольшого опыта в js, я так думаю.) Или вы не видите "перспектив" развития кода, как вижу этого я.

Код конечно можно сократить. Но тогда логика будет менее понятна для начинающих (я кстати тоже считаю себя начинающим).
« Последнее редактирование: 12.05.2012, 11:50:08 от fliginskih »
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Ведь это короче и яснее чем
Немного переделал код..

Некорректно использовать так
Код: javascript
$('input', this)...

Цитировать
Код: javascript
$(".checkbox").each(function(){
var checked = $('input', this).is(':checked');
$(this).toggleClass('checked', checked);
});
Пришел к логическому выводу и сделал в итоге по другому
Код: javascript
 $.each($(".checkbox"),function(){
                            if($(this).find("input").is(':checked')){
                                $(this).addClass("checked");
                            }
                        }
                );
« Последнее редактирование: 12.05.2012, 13:14:32 от fliginskih »
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
И все таки я склоняюсь к конструкции с условием if/else. Что если помимо псевдо-чекбокса надо будет еще что-нибудь "оживить".
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
nevigen, не ругайся. Мы же во благо ЖШ стараемся. Ибо меня беспокоит этот вопрос. А на ВМ и другие компоненты мне пока что наплевать.
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Некорректно использовать так
Почему это? не работает чтоли? и $('selector').each() - разве нет такого метода?

Вот пример из офф-документации:

Код: javascript
$('div.foo').click(function() {
  $('span', this).addClass('bar');
});
Так что тут не так то?
А вот по each() - разве не то что требуется?

Что-то я не понимаю твоей упертости :)

И все таки я склоняюсь к конструкции с условием if/else. Что если помимо псевдо-чекбокса надо будет еще что-нибудь "оживить".

Ну если что-то нужно, то просто допиши ниже - if (checked) { .. } else { .. }
« Последнее редактирование: 12.05.2012, 14:15:53 от danik.html »
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1

Почему это? не работает чтоли? и $('selector').each() - разве нет такого метода?

Есть, но я не об этом, а о том что:

Так не корректно,
Код: javascript
$('input', this)...

а надо так:
Код: javascript
$(this).find("input")...
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4

Есть, но я не об этом, а о том что:

Так не корректно,
Код: javascript
$('input', this)...

а надо так:
Код: javascript
$(this).find("input")...
А в чем разница?
Первый вариант короче да и только.

И почему опять "некорректно" ? Нипанимаю..
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Не могу аргументировать, но ваш способ некорректно работает.
Какой логический смысл вашей конструкции?
Код: javascript
$('input', this)
...
хм. оказывается что они эквивалентны. тогда я не могу понять, почему результат разный...
« Последнее редактирование: 12.05.2012, 14:31:13 от fliginskih »
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Цитировать
Selector Context
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function. For example, to do a search within an event handler, the search can be restricted like so:

$('div.foo').click(function() {
  $('span', this).addClass('bar');
});
When the search for the span selector is restricted to the context of this, only spans within the clicked element will get the additional class.

Internally, selector context is implemented with the .find() method, so $('span', this) is equivalent to $(this).find('span').
http://api.jquery.com/jQuery/
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
да. я уже заметил. буду думать в чем проблема.
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Странно, все нормально. До этого, вроде бы точно так же делал. (исправил). Спасибо.
« Последнее редактирование: 12.05.2012, 14:42:56 от fliginskih »
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Так все работает ведь
да. я уже исправил
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Добавил рецепт для стилизации select. Обсуждаем.
*

fliginskih

  • Захожу иногда
  • 197
  • 15 / 1
Добавил рецепт по созданию плагина для стилизации чекбокса. Читаем, обсуждаем.
*

Sven

  • Захожу иногда
  • 107
  • 6 / 5
Уважаемый fliginskih, поясните пожалуйста, как прикрутить к джумшоппингу ваш скрипт меняющий стилизацию select? Я знаю только HTML и CSS. Делал по аналогии с другим скриптом так:

С вашего сайта взял код яваскрипта, вставил его в блокнот, сохранил файл как selecter.js, и поместил его в папку components\com_jshopping\js\
В файле components\com_jshopping\templates\default\product\product_default.php в самом низу добавил строку <script type = "text/javascript" src = "<?php print JURI::root(); ?>components/com_jshopping/js/selecter.js"></script>
Ваш код CSS добавил в default.css джумшоповский.

Но скрипт не заработал, хотя браузеры его видят и подгружают. Что еще нужно сделать чтобы скрипт заработал? Ответьте пожалуйста кто знает.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Оформление карточки товара, Popup фото, прочие элементы

Автор 12mv

Ответов: 0
Просмотров: 793
Последний ответ 06.12.2015, 16:55:10
от 12mv
Элементы желтым цветом

Автор Single92

Ответов: 7
Просмотров: 803
Последний ответ 21.07.2013, 22:31:24
от Single92