Главная › 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=”radio”]

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

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

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

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

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

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

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

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

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

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

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

  1. Антон
    12 лет 2 месяца назад

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

  2. Александр
    12 лет 1 месяц назад

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

      • Александр
        12 лет 1 месяц назад / ответ на коммент 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
          12 лет 1 месяц назад / ответ на коммент Александр

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

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

          <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);
          • Александр
            12 лет 1 месяц назад / ответ на коммент Dimox

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

            .selectbox  .select {
...
}

            Ставим

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

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

  3. Вася Пупкин
    12 лет 1 месяц назад

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

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

  4. Владимир
    12 лет 1 месяц назад

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

  5. Alex
    12 лет 1 месяц назад

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

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

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

  7. Дмитрий
    12 лет назад

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

  8. Макс Башкинов
    12 лет назад

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

  9. Sheo
    12 лет назад

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

  10. zjMaster
    12 лет назад

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

  11. Лавров Сергей
    12 лет назад

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

  12. Alex
    12 лет назад

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

  13. Владимир
    12 лет -1 месяц назад

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

  14. Владимир
    12 лет -1 месяц назад

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

    <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
      12 лет -1 месяц назад / ответ на коммент Владимир

      Только что проверил – все работает. В вашем коде сразу 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. Владимир
    12 лет -1 месяц назад

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

  16. Евгений
    12 лет -1 месяц назад

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

  17. Андрей
    12 лет -1 месяц назад

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

    <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. Андрей
    12 лет -1 месяц назад

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

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

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

  20. Дмитрий
    11 лет 11 месяцев назад 
    /* при клике на пункт списка */
					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');
					});

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