Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
1

Фиксация цвета кнопок

05.01.2016, 20:07. Просмотров 1891. Ответов 17
Метки нет (Все метки)


Здравствуйте.

Есть 10 кнопок.
Текущее оформление кнопок следующее:
- Каждая кнопка имеет border - разных цветов. Фон кнопок белый. Цвет шрифта на всех кнопках = цвет border.
- При наведении на кнопку, ее цвет меняется. Фон становится таким же цветом как border, а текст меняется на белый
- После нажатия по любой кнопке, происходит 4 секундная анимация.

Как сделать, что бы:
После первого нажатия - цвет кнопки фиксировался, цвет border'а и цвет шрифта фиксировались.
После второго нажатия - цвет кнопки, цвет border'a и цвет шрифта становились по умолчанию.

Используется bootstrap, поэтому кнопки выглядят вот так:

HTML5
1
2
3
4
<button type="button" class="btn btn-primary">Кнопка1</button>
<button type="button" class="btn btn-primary">Кнопка2</button>
<button type="button" class="btn btn-primary">Кнопка3</button>
<button type="button" class="btn btn-primary">Кнопка4</button>
P.S. Все кнопки могут иметь разные цвета.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.01.2016, 20:07
Ответы с готовыми решениями:

Фиксация цвета кнопок
Здравствуйте. Есть десяток кнопок. После нажатия на любую кнопку зафиксировать её цвет. Да...

Фиксация цвета текста на кнопке
Здравствуйте. Сейчас в коде ниже, при нажатии на кнопку фиксируется её цвет. (кнопок...

изменение цвета кнопок
Привет всем! Помогите разобраться. У меня есть например 4 кнопки с определенным цветом: ...

Смена цвета кнопок при нажатии
Здравствуйте, У меня есть список в котором несколько кнопок. Мне нужно чтобы при нажатии на кнопку...

17
346 / 321 / 203
Регистрация: 27.06.2014
Сообщений: 762
05.01.2016, 20:43 2
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    function fHover (selector) {
        var e = typeof selector === "string" ? document.querySelector (selector) : selector,
            def = {background: getComputedStyle (e)["background"], color: getComputedStyle (e)["color"]},
            css = function (e, s) {for (var i in s) e.style[i] = s[i];},
            over = function () {
                css (e, {background: getComputedStyle (e)["borderColor"], color: "white"});
            },
            out = function () {
                css (e, def);
            }
        e.addEventListener ("mouseover", over);
        e.addEventListener ("mouseout", out);
    }
 
    window.addEventListener ("load", function () {
        [].forEach.call(document.querySelectorAll (".btn.btn-primary"), function (e) {
            fHover (e);
        })
    })
HTML5
1
2
3
4
    <button style="border: solid 1px red" type="button" class="btn btn-primary">Кнопка1</button>
    <button style="border: solid 1px green" type="button" class="btn btn-primary">Кнопка2</button>
    <button style="border: solid 1px blue" type="button" class="btn btn-primary">Кнопка3</button>
    <button style="border: solid 1px orange" type="button" class="btn btn-primary">Кнопка4</button>
0
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
05.01.2016, 21:17  [ТС] 3
Не работает.
0
346 / 321 / 203
Регистрация: 27.06.2014
Сообщений: 762
05.01.2016, 21:50 4
хз у меня работает...
0
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
05.01.2016, 22:31 5
skolm, *.classList.toggle(...)
https://jsfiddle.net/pbaqkn77/
Javascript
1
2
3
4
document.documentElement.onclick = function(e){
    if(e.target.tagName !== 'BUTTON') return false;
  e.target.classList.toggle('changed');
};
1
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
05.01.2016, 22:56  [ТС] 6
Цитата Сообщение от Padimanskas Посмотреть сообщение
skolm, *.classList.toggle(...)
Спасибо.

Но таких кнопок несколько и у каждой своей оформление. Как этот код дополнить?
0
супермизантроп
Эксперт JS
3860 / 2934 / 685
Регистрация: 18.04.2012
Сообщений: 8,539
05.01.2016, 22:59 7
Лучший ответ Сообщение было отмечено skolm как решение

Решение

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
.btn {background-color: white}
</style>
 
<script>
onload = function ()
{
function Mout ()
   {
   this.style.backgroundColor = 'white';
   this.style.color = this.currentStyle ? this.currentStyle.borderTopColor
                    : getComputedStyle (this, null).getPropertyValue ('border-top-color');
   }
for (var B = document.querySelectorAll ('.btn.btn-primary'), j = 0, J = B.length; j < J; j++)
with (B [j]) onmouseover = function ()
                           {
                           this.style.backgroundColor = this.currentStyle ? this.currentStyle.borderTopColor
                                                      : getComputedStyle (this, null).getPropertyValue ('border-top-color');
                           this.style.color = 'white';
                           },
             onmouseout = Mout,
             onclick = function () {this.onmouseout = this.onmouseout ? '' : Mout; this.blur ()}
}
</script>
 
    <button type="button" class="btn btn-primary" style="border: solid 1px red;    color: red"   >Кнопка 1</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px green;  color: green" >Кнопка 2</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px blue;   color: blue"  >Кнопка 3</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px orange; color: orange">Кнопка 4</button>
1
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
05.01.2016, 23:28 8
Цитата Сообщение от skolm Посмотреть сообщение
Как этот код дополнить?
можно дописать нужные классы
0
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
05.01.2016, 23:53  [ТС] 9
Цитата Сообщение от Padimanskas Посмотреть сообщение
можно дописать нужные классы
Как же, если в е.target попадает тип кнопки а не конкретный класс или id.

Добавлено через 4 минуты
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
.btn {background-color: white}
</style>
 
<script>
onload = function ()
{
function Mout ()
   {
   this.style.backgroundColor = 'white';
   this.style.color = this.currentStyle ? this.currentStyle.borderTopColor
                    : getComputedStyle (this, null).getPropertyValue ('border-top-color');
   }
for (var B = document.querySelectorAll ('.btn.btn-primary'), j = 0, J = B.length; j < J; j++)
with (B [j]) onmouseover = function ()
                           {
                           this.style.backgroundColor = this.currentStyle ? this.currentStyle.borderTopColor
                                                      : getComputedStyle (this, null).getPropertyValue ('border-top-color');
                           this.style.color = 'white';
                           },
             onmouseout = Mout,
             onclick = function () {this.onmouseout = this.onmouseout ? '' : Mout; this.blur ()}
}
</script>
 
    <button type="button" class="btn btn-primary" style="border: solid 1px red;    color: red"   >Кнопка 1</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px green;  color: green" >Кнопка 2</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px blue;   color: blue"  >Кнопка 3</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px orange; color: orange">Кнопка 4</button>
Да, спасибо, почти что надо, а как сделать еще здесь таймер, чтобы нельзя было сменить стиль кнопки, пока не истечет 2 секунды? Просто у меня тут анимация и пока она происходит нужно чтобы цвет нельзя было сменить.
0
супермизантроп
Эксперт JS
3860 / 2934 / 685
Регистрация: 18.04.2012
Сообщений: 8,539
06.01.2016, 00:02 10
Цитата Сообщение от skolm Посмотреть сообщение
почти что надо
не понял, почему "почти"?
какое именно из заданных вами в первом сообщении условий не исполнено?

Цитата Сообщение от skolm Посмотреть сообщение
как сделать еще здесь таймер, чтобы нельзя было сменить стиль кнопки, пока не истечет 2 секунды? Просто у меня тут анимация и пока она происходит нужно чтобы цвет нельзя было сменить.
обрабатываются три события -- наведение, отведение и клик
при всех трёх событиях происходит изменение правил стиля
уточните -- перед каким именно событием (наведение, отведение или клик) требуется тайм-аут в 2 секунды?
и с какого момента начинать отсчитывать 2 секунды?
0
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
06.01.2016, 00:30  [ТС] 11
Цитата Сообщение от kalabuni Посмотреть сообщение
не понял, почему "почти"?
какое именно из заданных вами в первом сообщении условий не исполнено?
Работает всё прекрасно, просто вот как раз таймер еще нужен.

Цитата Сообщение от kalabuni Посмотреть сообщение
обрабатываются три события -- наведение, отведение и клик
при всех трёх событиях происходит изменение правил стиля
уточните -- перед каким именно событием (наведение, отведение или клик) требуется тайм-аут в 2 секунды?
и с какого момента начинать отсчитывать 2 секунды?
После кликов - таймаут 2 или 1 секунды (кнопка не может сменить цвет).
0
супермизантроп
Эксперт JS
3860 / 2934 / 685
Регистрация: 18.04.2012
Сообщений: 8,539
06.01.2016, 01:24 12
Цитата Сообщение от skolm Посмотреть сообщение
После кликов - таймаут 2 или 1 секунды (кнопка не может сменить цвет).
требуется уточнение
положим, кликнули на кнопку 1 и она "зафиксировалась" (стала красной с белым текстом и перестала реагировать на наведение/отведение курсора)
вопрос: в течении двух секунд нельзя возвращать к дефолтному стилю именно и только эту Кнопку 1?
а по другим кнопкам - (по второй, по третьей, по -дцатой) в эти две секунды кликать для их "фиксации" (или для возврата их к дефолту) можно?
0
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
06.01.2016, 01:31  [ТС] 13
Цитата Сообщение от kalabuni Посмотреть сообщение
требуется уточнение
положим, кликнули на кнопку 1 и она "зафиксировалась" (стала красной с белым текстом и перестала реагировать на наведение/отведение курсора)
вопрос: в течении двух секунд нельзя возвращать к дефолтному стилю именно и только эту Кнопку 1?
а по другим кнопкам - (по второй, по третьей, по -дцатой) в эти две секунды кликать для их "фиксации" (или для возврата их к дефолту) можно?
Только 1 кнопку. Остальные можно кликать, но на них тоже паузу.
0
супермизантроп
Эксперт JS
3860 / 2934 / 685
Регистрация: 18.04.2012
Сообщений: 8,539
06.01.2016, 01:52 14
Лучший ответ Сообщение было отмечено skolm как решение

Решение

строку #22 моего кода onclick = function () {this.onmouseout = this.onmouseout ? '' : Mout; this.blur ()} замените на следующие шесть строчек
Javascript
1
2
3
4
5
6
             onclick = function ()
                       {
                       if (this.onmouseout && !this.getAttribute ('tmr')) this.onmouseout = '', this.setAttribute ('tmr', +new Date);
                       else if (this.getAttribute ('tmr') && (+new Date - this.getAttribute ('tmr') > 2000)) onmouseout = Mout, this.setAttribute ('tmr', '');
                       this.blur ();
                       }
1
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
06.01.2016, 02:13  [ТС] 15
Цитата Сообщение от kalabuni Посмотреть сообщение
строку #22 моего кода onclick = function () {this.onmouseout = this.onmouseout ? '' : Mout; this.blur ()} замените на следующие шесть строчек
Все работает прекрасно, огромное спасибо за потраченное время)
0
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
06.01.2016, 02:35 16
Цитата Сообщение от skolm Посмотреть сообщение
Как же, если в е.target попадает тип кнопки а не конкретный класс или id.
В e.target находится элемент на котором инициировано событие, из этого элемента можно получить все необходимое для обхода и мутаций dom. Нужно всего лишь включить mdn и немного воображения.
0
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
06.01.2016, 03:03  [ТС] 17
Цитата Сообщение от Padimanskas Посмотреть сообщение
В e.target находится элемент на котором инициировано событие, из этого элемента можно получить все необходимое для обхода и мутаций dom. Нужно всего лишь включить mdn и немного воображения. Но я уже вижу следующую тему под названием "помогите с кодом", а внутри этот волосатый комок, который муссируется выше
Да, в е таргет прилетает тип button, но однозначной инициализации то нет, верно? Т.е. я конкретно в таргете не знаю, какая именно нажата кнопка, а не зная этого невозможно однозначно изменить параметры стилей на нужные. Тоже самое будет относится к прочим кнопкам, которые модифицировать не надо, т.е. я буду при нажатии на кнопку типа буттон пытаться изменить её стиль.
0
супермизантроп
Эксперт JS
3860 / 2934 / 685
Регистрация: 18.04.2012
Сообщений: 8,539
06.01.2016, 04:40 18
Цитата Сообщение от skolm Посмотреть сообщение
в е таргет прилетает тип button, но однозначной инициализации то нет, верно?
во-первых, походу вы перепутали инициализацию с идентификацией
во-вторых, вы неправы -- в e.target "прилетает" ссылка на сам HTML-элемент, на котором произошло событие,
т.е. кнопка, на которую нажали -- она однозначно идентифицируется через этот самый e.target
e.target в коде вашего оппонента равносилен this в моём коде

мой код таки работает, решая все поставленные задачи, а вот для работы кода Вашего оппонента нужно дополнительно "включить mdn и немного воображения"



есть люди, которые полагают, что написать в коде window.addEventListener ("load", function () {} - это весьма круто
а вот равносильное для данной задачи onload = function () {} -- это, по их мнению, совсем несолидно

но это по молодости, с возрастом обычно проходит

так что... бывает... skolm, не берите в голову
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.01.2016, 04:40

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

фиксация меню
Я недавно создал сайт и все бы хорошо, но есть одна проблема - не получается реализовать следующее:...

Фиксация значения переменной
Здравствуйте. Есть следующий скрипт: &lt;h4&gt;&lt;b&gt;Значение: &lt;script type=&quot;text/javascript&quot;&gt;...

Фиксация редактирования элемента формы
Здравствуйте. Есть большая форма, точнее (от формы я отказался) большое количество инпутов и...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
18
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.