WEB лаборатория DLE » Другое для WEB » jQuery и JavaScript » Флажки или галочки checkbox и radio
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 3
    Пользователей: 0
    Гостей: 3


    Последние комментарии
    ...
    HI-tech:
    0

    Флажки или галочки checkbox и radio

    Автор: Robot_DLElabкатегория: Другое для WEB » jQuery и JavaScriptдата: 19-04-2013, 18:55
    Флажки или галочки checkbox и radio


    Стильное оформление html форм чекбоксов и радио с применение jQuery. В данном скрипте происходит скрытие стандартных форм и постановка на их место своих картинок с применением jQuery. Не Везде checkbox и radio хорошо смотрятся и если вас неудовлетворяют или не подходят к дизайну интерфейса обычные формы, то прошу качать этот плагин.

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

    Html код:
    
    <div>
    <input checked="checked" id="CheckBox1" class="CheckBoxClass" type="checkbox">
    <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass LabelSelected">Checkbox 1</label>
    <input checked="checked" id="CheckBox2" class="CheckBoxClass" type="checkbox">
    <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass LabelSelected">Checkbox 2</label>	
    </div>
    <div>
    <input checked="checked" id="Radio1" class="RadioClass" name="group1" type="radio">
    <label id="Label1" for="Radio1" class="RadioLabelClass RadioSelected">Radio 1</label>
    <input id="Radio2" class="RadioClass" name="group1" type="radio">
    <label id="Label2" for="Radio2" class="RadioLabelClass">Radio 2</label>	
    <input id="Radio3" class="RadioClass" name="group1" type="radio">
    <label id="Label3" for="Radio3" class="RadioLabelClass">Radio 3</label>		
    </div>
    

    Простой Css без излишеств:
    
    .CheckBoxClass,.RadioClass{
    display: none;
    }
    .CheckBoxLabelClass{
    background: url("UnCheck.png") no-repeat;
    padding-left: 30px;
    padding-top: 3px;
    margin: 5px;
    height: 28px;	
    width: 150px;
    display: block;
    }
    .CheckBoxLabelClass:hover, .RadioLabelClass:hover{
    text-decoration: underline;
    }
    .LabelSelected{
    background: url("Check.png") no-repeat;
    }
    .RadioLabelClass{
    background: url("UnCheck.png") no-repeat;
    padding-left: 30px;
    padding-top: 3px;
    margin: 5px;
    height: 28px;	
    width: 70px;
    display: block;	
    float: left;
    }
    .RadioSelected{
    background: url("Check.png") no-repeat;
    }
    

    И подключаем js, который есть в архиве. Приятного использования.



    Скачать бесплатно

    Теги: jQuery

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.