Главная › JavaScript

jQuery-плагин для стилизации селектов

105 комментариев

jQuery-плагин для стилизации select’ов

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке - это верстка html-форм. К сожалению, не существует единого стандарта отображения ...

Смотрите также

jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

2614 комментариев

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация ...

jQuery-плагин для стилизации input[type=

jQuery-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...

jQuery-плагин для стилизации input[type=

jQuery-плагин для стилизации input[type="checkbox"]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...

Цифровые часы на чистом CSS и jQuery

41 комментарий

Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея — мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки с того самого счетчика. Эта идея никак не давала мне покоя, ...

Комментарии (105)

  1. Антон
    11 лет 8 месяцев назад

    Да, я про это, уже сам разобрался, посмотрел ваш пример со стилем nowidth и сделал див с классом, как мне надо. Теперь другой вопрос, все хорошо, select стал как надо, но он теперь не работает. У меня такой селект - «class="styled» name=href onchange="sel (this.value)"", она подставляется в проигрыватель ссылку из option, ну и далее function sel (href){
    if (href==''") mus. innerHTML=""; else бла бла бла, а теперь ничего не происходит :(

  2. Александр
    11 лет 7 месяцев назад

    привет! объясни пожалуйста как передается высота и ширина селекту (знаю она у тебя в css задается, но мне нужно убрать оттуда и передать с помощью функции. width)
    $('select.styled').width (155).height (25); - не прокатывает

      • Александр
        11 лет 7 месяцев назад / ответ на коммент Dimox

        Вот так:

        $('span.select').width (155).height (25);

        То есть добустим если сделать так

        $('span.select.sel-1').width(155).height(25);
$('span.select.sel2').width(300).height(50);

        и присвоить селектам классы sel1 и sel2 я тем самым получу для разных классов разные размеры селекта?

        • Dimox
          11 лет 7 месяцев назад / ответ на коммент Александр

          Нет, не сработает.

          Правильно будет так:

          <div class="sel1"><select class="styled"><option>Селект 1</option></select></div>
<div class="sel2"><select class="styled"><option>Селект 2</option></select></div>

          $('div.sel1 span.select').width(155).height(25);
$('div.sel2 span.select').width(300).height(50);
          • Александр
            11 лет 7 месяцев назад / ответ на коммент Dimox

            Спасибо! Это мало решило вопрос разных стилей для разных селектов. Но я придумал другой способ посмотрев пример с не заданной шириной:
            вместо

            .selectbox  .select {
...
}

            Ставим

            .sel1 .selectbox  .select {...}
.sel2 .selectbox  .select {...}

            Получаем раздельные стили.
            В общем спасибо за ответы, за толковый скрипт, и отдельное спасибо за детальное описание (а то скрипт напишут, а как польз. хз).

  3. Вася Пупкин
    11 лет 7 месяцев назад

    А как сделать, чтоб при большом кол-ве элементов появлялся вертикальный скролл, а не выдавалось всё большим списком как например вот тут — img195.imageshack.us/i/screenshot20120812000.png/

    А нужно, чтоб получилось вот так — img713.imageshack.us/i/screenshot20120812001.png/

  4. Владимир
    11 лет 7 месяцев назад

    Привет! Примеры красочные, тоже давненько писал на эту тему пост конечно не полномассштабный скрипт, но полезные моменты есть, еще раз спасибо за примеры

  5. Alex
    11 лет 7 месяцев назад

    Хороший дроп получился.
    А что насчет развернутых select, те которые с size?
    Можно ли подсказку в этом направлении.

  6. Alex
    11 лет 7 месяцев назад

    Никто не говорит про multiple?
    Множественный выбор немного другое свойство.
    Я про про боксовый селект.
    Скорее всего такой скрипт не решит такой задачи.

  7. Дмитрий
    11 лет 7 месяцев назад

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

  8. Макс Башкинов
    11 лет 7 месяцев назад

    Классная статья. Но только пока не могу определиться, где применять этот скрипт массово.

  9. Sheo
    11 лет 6 месяцев назад

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

  10. zjMaster
    11 лет 6 месяцев назад

    как быть если имеются связанные поля типа Страна-Регион-город, стиль только применяется к стране, как быть?

  11. Лавров Сергей
    11 лет 6 месяцев назад

    Здравствуйте! Почитал комментарии и немного не понял как сделать разные селекты? Не могли бы Вы описать попобробнее? А лучше с примерами кода и какие изменения куда вносить?)

  12. Alex
    11 лет 6 месяцев назад

    msdn.microsoft.com/en-us/library/windows/desktop/aa511484.aspx
    Вот красочный пример того что такое листбокс — список не выпадающий, а развернутый.
    А multiple это свойство позволяющее выбирать сразу несколько пунктов в списке.
    В общем я так понимаю что плаг не поддерживает listbox.
    Может кто-то знает решение для listbox?

  13. Владимир
    11 лет 6 месяцев назад

    Все замечательно, одна проблема не отрабатывает событие onchange привязанное к элементу. Как бы это реализовать?

  14. Владимир
    11 лет 6 месяцев назад

    Смотрите есть список

    <div class="town">
            <select id="city">
                <option value="ekb">Екатеринбург</option>
                <option value="chel">Челябинск</option>
            </select>
        </div>

    и есть скрипт

    $(document).ready(function () {
            $(".town").selectbox();

        });
        $("select").change(function () {

            id = $('#city option:selected').val();
            if (id == 'ekb') {
                $('#ekb').show();
                $('#chel').hide();
            }
            else {
                $('#chel').show();
                $('#ekb').hide();
            }
        });

    При выборе города должен скрываться/показываться один из divов, но этого не происходит если подключен ваш плагин, если убрать $(«.town»).selectbox (); то все отрабатывает как надо, но выглядит не красиво))

    • Dimox
      11 лет 6 месяцев назад / ответ на коммент Владимир

      Только что проверил — все работает. В вашем коде сразу 2 ошибки. Правильно вот так:

      $(document).ready(function () {
  $("#city").selectbox();

	$("select").change(function () {
		id = $('#city option:selected').val();
		if (id == 'ekb') {
			$('#ekb').show();
			$('#chel').hide();
		}
		else {
			$('#chel').show();
			$('#ekb').hide();
		}
	});
});
  15. Владимир
    11 лет 6 месяцев назад

    Огромное спасибо и за оперативность и за подсказку. На самом деле все работает, пробовал разные варианты и получилась «каша» в итоге поэтому и не работало.

  16. Евгений
    11 лет 6 месяцев назад

    Селект просто прелесть, но есть и проблема. Отправляя ajax запрос, параметры формы плагином jquery. js получить не удается. То есть, значения методом: var login=$(«#login»).val ()
    Может подскажете как их совместить?

  17. Андрей
    11 лет 6 месяцев назад

    Привет! У меня возникла следующая ситуация:

    <li class="tour-selection-input-wrapper">
                                                <span class="label">Откуда:</span>
                                                <?php echo SearchController::actionGetDepartCities() ?>
                                            </li>
                                            <li class="tour-selection-input-wrapper">
                                                <span class="label">Куда:</span>
                                                <span id="countries"></span>
                                            </li>

    $(document).ready(function(){
    LoadCountries($("#departCities").val());
    
    $("#departCities").change(function(){
        var id = $(this).val();
        LoadCountries(id);
    });

    function LoadCountries(id){
        $.ajax({
            url: '<?php echo $this->createUrl('search/LoadCountries')?>',
            cache: false,
            data: 'depCity='+id,
            success: function(html){
                $("#countries").replaceWith(html);
                //$('select').trigger('refresh');
                //console.log($("#countries").val());
                $('select').selectbox();
            }
        });
    };
})

    При таком подходе получается, что старый селект остаётся, а новый добавляется «не проинициализированным» надеюсь правильно выразился)
    В итоге дом после 1-го изменения #departCities выглядит так:

    <li class="tour-selection-input-wrapper">
                                                <span class="label">Куда:</span>
                                                <span class="selectbox" style="display: inline-block; position: relative; z-index: 2; "><div class="select" style="float:left;position:relative;z-index:7000"><div class="text">Индия</div><b class="trigger"><i class="arrow"></i></b></div><div class="dropdown" style="position: absolute; z-index: 9999; overflow-x: hidden; overflow-y: auto; list-style: none; height: auto; bottom: auto; top: 28px; display: none; "><ul><li class="" style="">Египет</li><li class="">Израиль</li><li class="selected sel">Индия</li><li>Италия</li><li>Китай</li><li>ОАЭ</li><li>Таиланд</li><li>Турция</li><li>Кипр</li><li>Греция</li></ul></div></span><select id="countries" name="to">
<option value="40">Египет</option>
....
<option value="35">Греция</option>
</select>
                                            </li>

    Помогите, как обойти эту ситуацию, а то я не силён в JS?
    PS Извините что громоздко

  18. Андрей
    11 лет 6 месяцев назад

    Согласен, не совсем понятно расписано. Попробую проще:
    1. Есть 2 селекта один создаеётся ещё в пхп, второго на странице на момент загрузки не существует (на его месте просто пустой span с таким же id).
    После того как вся страница загрузилась, запускается функция: LoadCountries ($(«#departCities»).val ());, которая получает аяксом весь select и заменяет пустой спан на этот селект.
    После этого запускаю $('select').selectbox ();
    Первый селект оформляется нормально, а второй почему-то нет…

  19. Дмитрий
    11 лет 5 месяцев назад

    Замечательный скрипт, но есть недоделки. Кое что подправил кое что не могу, потому как мало знаком с jquery.
    Надо исправить:
    когда выбираешь пункт option с checked — ом(уже выбранный) происходит событие onChenge. По моему это неправильно. В моем случае запускается реагирующая функция. Вот от этого я хотел бы избавится!

  20. Дмитрий
    11 лет 5 месяцев назад 
    /* при клике на пункт списка */
					li.filter(':not(.disabled)').click(function() {
						if(optionSelected.text() != $(this).text()) {
							optionSelected.text($(this).text());
							$(this).addClass('selected sel').siblings().removeClass('selected sel');
							divText.text($(this).text());
							option.removeAttr('selected').eq($(this).index()).attr('selected', true);
							select.change();
						}
						dropdown.hide();
					});
					dropdown.mouseout(function() {
						dropdown.find('li.sel').addClass('selected');
					});

    Вот так лучше!