VPF::пример по созданию графического checkboxa

a.benz

Дата 25.1.2009, 12:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 31
Регистрация: 16.6.2008

Репутация: нет
Всего: нет

Есть отличный пример по созданию графического checkboxa

http://xpoint.ru/know-how/JavaScript/GraficheskiyCheckbox?1

Нужна еще пара подобных примеров,для закрепления....
Давайте вместе сделаем тоже самое,только с другим inputom...

IDVsbruck

Дата 26.1.2009, 04:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22

Может, я сегодня просто зол ... но пример не могу назвать отличным, особенно если учитывать "недостаток №1" - разве сложно сделать?
И сразу вытекает несколько вопросов:
1. "ДавайТЕ вместе сделаЕМ" - зачем? Сделай и выложи, будут вопросы - ответят и помогут.
2. Почему в разделе "для профи"? - Если есть вопросы, то это раздел "пониже".
3. А какие, собственно, возникают вопросы?

И пару советов :
1. Все же удобно пользоваться фреймворками. Даже хотя бы не из-за удобства, а исходя из вопросов кроссбраузерности - обладая начальными знаниями, сложно сразу сделать кроссбраузерную модель.
2. Назначать переделываемым элементам свой класс и обрабатывать при загрузке страницы: "checkbox_redisign", "edit_redesign" и т.д. Там же можно задавать присущие переделываемому элементу параметры, к примеру, ширину.
3. Это достаточно неплохо реализовано в niceforms (кажись, версия 1.0) - в инете навалом - скачай и посмотри, думаю, вопросов быть не должно.

bars80080

Дата 26.1.2009, 10:33 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

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

Добавлено через 1 минуту и 20 секунд

Цитата(IDVsbruck @ 26.1.2009, 03:12

)

Все же удобно пользоваться фреймворками. Даже хотя бы не из-за удобства, а исходя из вопросов кроссбраузерности - обладая начальными знаниями, сложно сразу сделать кроссбраузерную модель.

в опере 9.50 не работает клик

a.benz

Дата 27.1.2009, 09:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 31
Регистрация: 16.6.2008

Репутация: нет
Всего: нет

IDVsbruck, вредина.....

bars80080, клик ???? чето такое было,я onclick заменил на onMouseDown

DenVdmj

Дата 27.1.2009, 11:48 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 11.6.2007

Репутация: нет
Всего: нет

a.benz, дурацкий способ, не делайте так. Можно стилизовать родные чекбоксы, у них будет полностью родное поведение (которое разное для разных ОС и барузеров), то есть способ свободен от недостатков описанных в конце статьи.
Код приводить пока не буду (его надо отрывать от юзаемых либ), а идея проста: утановите чекбоксам прозрачность и позиционирование:

Код


    opacity: 0;
    _filter: alpha(opacity=0);
    position: absolute;

и заключите фейковую картинку (или div со спрайтом) и подпись к чекбоксу в label, таким образом чекбокс будет получать события (с картинки и подписи) будучи невидимым. Дальше дело техники.
----------
Пример таки получилось по быстрому выдрать (выдирать пришлось с мясом так что не удивляйтесь отдельным моментам в коде smile

) :

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">

label input{
    opacity: 0;
    _filter: alpha(opacity=0);
    position: absolute;
}

label{
    position: relative;
    display: block;
    float: left;
    clear: both;
    left: 100px;
    margin: 2px;
    -moz-user-select: none;
}

label .checkbox-img{
    position: absolute;
    left: 2px;
    top:  2px;
    width:  16px;
    height: 16px;
    background:transparent url(checkboxes.gif) no-repeat 0 0;
    background-position: 0 -16px;
}

label .checkbox-text{
    font: 11px/20px "Verdana";
    padding: 0 8px 0 20px;
}

label.on-focus {
    outline: 1px dotted #AAA;
}

label.checkbox .checkbox-img,
label.checkbox .unchecked { background-position: 0 -16px }
label.checkbox .checked   { background-position: 0 0 }

label.radio .checkbox-img,
label.radio .unchecked { background-position: 0 -112px }
label.radio .checked   { background-position: 0 -96px }

</style>
<script>

Array.prototype.forEach || (
Array.prototype.forEach = function (m, o) {
    for(var i = 0, l = this.length; i < l; i++)
        m.call(o, this[i], i, this)
})


///
// добавляет класс. третий аргумент не должен задаваться
// возвращает:
//    true  -- если класс был добавлен
//    false -- если класс уже существовал, или задана пустая строка
//

function addClass (e, c, f) {
    if( f = !! f || posClass(e, c) < 0 ) e.className += ' ' + c;
    return f
}

///
// добавляет отсутствующий класс или удаляет существующий
// возвращает:
//    true  -- если класс был добавлен
//    false -- если класс был удален
//

function flipClass (e, c) {
    return !delClass(e, c) && addClass(e, c, 1);
}

///
// удаляет класс
// возвращает:
//    true  -- если класс был удален
//    false -- если класс не был обнаружен
//

function delClass (e, c) {
    var s = e.className, i = posClass(e, c), f = i >= 0;
    if( f ) e.className = s.slice(0, i) + s.slice(i+c.length);
    return f
}

///
// позиция класса в className, -1 если класс не был обнаружен
//

function posClass (e, c) {
    return (' ' + e.className + ' ').indexOf(' ' + c + ' ')
}

///
// true если установлен класс, false если нет
//

function hasClass (e, c) {
    return posClass(e, c) >= 0
}

///
// если установлен класс a
//    заменяет класс a на класс b и возвращает добавленный класс
// иначе
//    заменяет класс b на класс a и возвращает добавленный класс
// иначе
//    возвращает пустую строку
//

function swapClass (e, a, b) {
    if( delClass(e, a) ) return addClass(e, b), b;
    if( delClass(e, b) ) return addClass(e, a), a;
    return ''
}

onload = function (){

    var onchange = function (e) {
        var event = e || window.event,
            self = event.target || event.srcElement,
            name = self.getAttribute('name');

        name && Array.prototype.forEach.call( document.getElementsByName(name), function (el) {
            var ico = el.nextSibling, checked = el.checked;
            delClass( ico, checked ? 'unchecked' : 'checked' );
            addClass( ico, checked ? 'checked' : 'unchecked' );
        });

        switch ( event.type ) {
            case 'focus': addClass( self.parentNode, 'on-focus' ); break;
            case 'blur' : delClass( self.parentNode, 'on-focus' ); break;
        };
    };

    Array.prototype.forEach.call( document.getElementsByTagName('input'), function (el) {
        var type = el.getAttribute('type');
        if( type == 'checkbox' || type == 'radio' ) {
            addClass(el.parentNode, type);
            ['onkeydown','onkeyup','onchange','onclick','onkeypress','onfocus','onblur'].forEach(
                function(func){ el[func] = onchange }
            )
            onchange({target:el});
        }
    });
}

</script>

<label for="chbox1"><input type="checkbox" name="chbox1" id="chbox1"><span class="checkbox-img"></span><span class="checkbox-text">checkbox 1</span></label>
<label for="chbox2"><input type="checkbox" name="chbox2" id="chbox2"><span class="checkbox-img"></span><span class="checkbox-text">checkbox 2</span></label>
<label for="chbox3"><input type="checkbox" name="chbox3" id="chbox3"><span class="checkbox-img"></span><span class="checkbox-text">checkbox 3</span></label>

<label for="radioA1"><input type="radio" name="radioA" checked="1"
                                                       id="radioA1"><span class="checkbox-img"></span><span class="checkbox-text">GROUP A - radio 1</span></label>
<label for="radioA2"><input type="radio" name="radioA" id="radioA2"><span class="checkbox-img"></span><span class="checkbox-text">GROUP A - radio 2</span></label>
<label for="radioA3"><input type="radio" name="radioA" id="radioA3"><span class="checkbox-img"></span><span class="checkbox-text">GROUP A - radio 3</span></label>


<label for="radioB1"><input type="radio" name="radioB" id="radioB1"><span class="checkbox-img"></span><span class="checkbox-text">GROUP B - radio 1</span></label>
<label for="radioB2"><input type="radio" name="radioB" checked="1"
                                                       id="radioB2"><span class="checkbox-img"></span><span class="checkbox-text">GROUP B - radio 2</span></label>
<label for="radioB3"><input type="radio" name="radioB" id="radioB3"><span class="checkbox-img"></span><span class="checkbox-text">GROUP B - radio 3</span></label>


<div id="display" style="position:absolute; bottom: 10px; right:10px">
</div>

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

Это сообщение отредактировал(а) DenVdmj - 27.1.2009, 12:05

Присоединённый файл ( Кол-во скачиваний: 10 )

checkboxes.gif 1,93 Kb

a.benz

Дата 28.1.2009, 18:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 31
Регистрация: 16.6.2008

Репутация: нет
Всего: нет

Классс!Еще один способ буду разбираться

DenVdmj

Дата 31.1.2009, 01:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 11.6.2007

Репутация: нет
Всего: нет

Ну, как успехи? Вот пара ссылок, хотя они и так легко гуглятся.
http://lipidity.com/fancy-form/
http://www.emblematiq.com/projects/niceforms/
И заодно, раз уж решил разобраться с вопросом -- мне интересно: в fancy-form не юзается for в label, хотя известно что не все браузеры это понимают. Если знаешь/нарыл ответ -- поделись ))

a.benz

Дата 4.2.2009, 10:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 31
Регистрация: 16.6.2008

Репутация: нет
Всего: нет

Раз не во всех браузерах,то зачем его использывать....

DenVdmj

Дата 11.2.2009, 23:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 11.6.2007

Репутация: нет
Всего: нет

Ммм... Существуют два способа связать label с input -- указать в атрибуте for label значение id input, или просто заключить input в label. Второй способ не работает в msie, но при инспекции работы fancy-form в firebug мы не увидим атрибута for у label. При этом в msie он работает.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »