настраиваемое фоновое изображение для каждого переключателя

Question

настраиваемое фоновое изображение для каждого переключателя

0

Я хочу иметь радиокнопки с помощью набора кнопок (если есть еще один параметр, отличный от набора кнопок, с удовольствием развлекать его, но я просто предполагаю, что вам нужно его использовать), у которого есть значок, уникальный значок для каждой кнопки.

Я хочу:

Нет значка кнопки радио
Эффект опрокидывания
Значок в качестве фона
Иметь другой стиль при проверке и зависании

Текущий код, который у меня есть, это

HTML:

 <div id="new_sort_options">
   <input type="radio" name="new_sort" id="sort_az" /><label for="sort_az">A-Z</label>  
   <input type="radio" name="new_sort" id="sort_popular" /><label for="sort_popular">Popular</label>
 </div>

Jquery

 $( "#new_results_sort" ).buttonset();

CSS

#new_sort_options .ui-button {
    background-color:#FFFFFF; 
    background-image:url('../images/mpg2.png'); 
    background-repeat:no-repeat; 
    border-radius:4px; 
    margin:0; 
}

Теперь, когда я помещаю это фоновое изображение в css, он работает, но это одно и то же фоновое изображение для всех переключателей. Я попытался сделать отдельный идентификатор для каждого из них и сделать фоновое изображение для каждого, но это не имело никакого значения.

Кто-нибудь знает, как создавать собственные фоновые изображения для каждого переключателя

Flashpacker 24 сен. 2013, в 12:02

Источник

Теги:

jquery

css

jquery-ui

3 ответа

Ещё вопросы

Jacob · Answer 1 · 2013-09-24T10-09-00.000Z

Пример CSS, который работает: http://jsfiddle.net/dmdBh/1/

HTML:

<input type="radio" id="radio1" name="group"/>
<label for="radio1"></label>
<input type="radio" id="radio2" name="group"/>
<label for="radio2"></label>

CSS:

input[type="radio"]{
    display:none;
}

input[type="radio"] + label
{
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type="radio"]:checked + label
{
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Source · Answer 2 · 2013-09-24T07-36-00.000Z

Как насчет встроенного css

<label  style="background-image:url('./images/mpg2.png');" for="sort_az">A-Z</label>

ZHAO Xudong · Answer 3 · 2013-09-24T07-08-00.000Z

мое решение: вместо этого используйте другой элемент dom, напишите свое собственное поведение JavaScript javascript. что-то вроде этого

"HTML

<div class="opts pdtb">
    <a href="javascript:;" class="radio" data-id="F">option1</a>
    <a href="javascript:;" class="radio" data-id="N">option2</a>
    <a href="javascript:;" class="radio" data-id="S">option3</a>
    <input type="hidden" name="type" class="fb-type" value="" />
</div>

Javascript

$('.radio').click(function() {

        var t = $(this)
        t.addClass('radio-on').siblings().removeClass('radio-on')
        t.siblings('input').val(t.data('id'))

    )}

извините, что такое поведение javascript?