VPF::JS+CSS - Форум программистов

Djony1987

Дата 7.8.2009, 10:07 (ссылка)

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

Загрузка ...

Новичок

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

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

Здравствуйте!,

Есть кнопки:
user posted image

Код в HTML:

Код


<div class="row">
            <label>Starry sky</label>
            <div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
</div>

Код в CSS:

Код


.toggle {
    border: 1px solid #888888;
    -webkit-border-radius: 6px;
    background: #FFFFFF url(toggle.png) repeat-x;
    font-size: 19px;
    font-weight: bold;
    line-height: 30px;
}

.toggle[toggled="true"] {
    border: 1px solid #143fae;
    background: #194fdb url(toggleOn.png) repeat-x;
}

.toggleOn {
    display: none;
    position: absolute;
    width: 60px;
    text-align: center;
    left: 0;
    top: 0;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
}

.toggleOff {
    position: absolute;
    width: 60px;
    text-align: center;
    right: 0;
    top: 0;
    color: #666666;
}

.toggle[toggled="true"] > .toggleOn {
    display: block;
}

.toggle[toggled="true"] > .toggleOff {
    display: none;
}

.thumb {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 40px;
    height: 28px;    
    border: 1px solid #888888;
    -webkit-border-radius: 6px;
    background: #ffffff url(thumb.png) repeat-x;
}

.toggle[toggled="true"] > .thumb {
    left: auto;
    right: -1px;
}

Код в JS:

Код


addEventListener("click", function(event)
{
    var div = findParent(event.target, "div");
    if (div && hasClass(div, "toggle"))
    {
        div.setAttribute("toggled", div.getAttribute("toggled") != "true");
        event.preventDefault();        
    }
}, true);


function findParent(node, localName)
{
    while (node && (node.nodeType != 1 || node.localName.toLowerCase() != localName))
        node = node.parentNode;
    return node;
}


function hasClass(self, name)
{
    var re = new RegExp("(^|\\s)"+name+"($|\\s)");
    return re.exec(self.getAttribute("class")) != null;
}

Вроде все записал, что к ним относится.

Как мне различать нажатие кнопки On и Off. Т.е. например нажимаю On - происходит 1 действие, а при Off - другое?
У меня есть переменные булевы: b1, b2, b3, ... как мне сделать так чтоб кнопки были в положении On или Off в зависимости от переменной, т.е. изначально при загрузке страницы?

Заранее спасибо!

Ockonal

Дата 11.8.2009, 00:15 (ссылка)

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

Загрузка ...

Smile

Профиль
Группа: Участник
Сообщений: 219
Регистрация: 9.7.2007
Где: Ukraine::Nikolaev ;

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

Цитата

Как мне различать нажатие кнопки On и Off.

Получить текст области, по которой было нажатие.

Цитата

У меня есть переменные булевы: b1, b2, b3, ... как мне сделать так чтоб кнопки были в положении On или Off в зависимости от переменной, т.е. изначально при загрузке страницы?

Ведите какие-то скрытые поля, показывающие положение кнопок.

--------------------

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

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