Как создать кнопки переключения с помощью jQuery? Мне нужны кнопки типа «B», «I», «U» из Word и других текстовых редакторов.Как создать кнопки переключения с помощью JQuery?
-4
A
ответ
2
Посмотрите, сможет ли this JSFiddle code помочь вам.
<p><b>Disclaimer:</b> Due to a webkit bug involving pseudo classes and sibling selectors this may not work in some webkit-based browsers.</p>
<p>Here's our finished toggle button.</p>
<label id="label">
<input type="checkbox" id="checkbox" />
<span id="off">Off</span>
<span id="on">On</span>
</label>
<p>Here's how we build it. First you start off with a label containing a checkbox and two spans.</p>
<label id="label">
<input type="checkbox" />
<span>Off</span>
<span>On</span>
</label>
<p>Simple and not much to look at. Let's style those two spans to look like buttons and hide the checkbox.</p>
<label id="label">
<input type="checkbox" id="checkbox" />
<span id="off">Off</span>
<span id="on" style="display:block;">On</span>
</label>
<p>Now, the key is to hide the "On" span initially with "display: none;". Then we show it when the checkbox is checked while hiding the "Off" span at the same time. This is done with this CSS:</p>
<pre>
#checkbox:checked + #off {
display: none;
}
#checkbox:checked + #off + #on {
display: block;
}
</pre>
<p>So, when the checkbox is checked we are targeting its sibling "off" and we are also targeting the sibling of the checkbox's sibling which is "on".</p>
<p>At this point you could use server-side code or javascript to react to the hidden checkbox being checked just like you would with a normal checkbox.</p>
p {
margin: 10px;
}
pre {
margin: 10px;
}
#label {
cursor: pointer;
display: block;
margin: 20px auto;
width: 200px;
}
#checkbox {
display: none;
}
#checkbox:checked + #off {
display: none;
}
#checkbox:checked + #off + #on {
display: block;
}
#off {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
border: 2px solid #cf0404;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
color: white;
display: block;
font: 1em "Amaranth", sans-serif;
padding: 4px 10px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
#on {
background: #b4ddb4;
background: -moz-linear-gradient(top, #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(17%,#83c783), color-stop(33%,#52b152), color-stop(67%,#008a00), color-stop(83%,#005700), color-stop(100%,#002400));
background: -webkit-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
background: -o-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
background: -ms-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
background: linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
border: 2px solid #002400;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
color: white;
display: none;
font: 1em "Amaranth", sans-serif;
padding: 4px 10px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
1
jQuery UI предоставляет кнопки, отображаемые для флажков. См. Это решение: http://jqueryui.com/demos/button/#checkbox
Смежные вопросы
- 1. Как я могу реализовать эксклюзивные кнопки переключения с помощью jQuery?
- 2. Анимация div раздвигается с помощью кнопки переключения
- 3. Как создать эффект div для переключения с помощью jQuery?
- 4. Эмуляция кнопки переключения с JQuery и CSS
- 5. Целевая переменная с помощью кнопки переключения
- 6. Как создать кнопку переключения?
- 7. JQuery переключения ДИВ вверх и вниз с помощью кнопки
- 8. Запуск события JQuery с помощью кнопки переключения CSS
- 9. jQuery изменение символов кнопки переключения
- 10. Изменение рамки изображения с помощью кнопки переключения
- 11. Создать селектор с помощью кнопок переключения
- 12. Создать кнопки с jQuery
- 13. Две кнопки с несколькими элементами переключения jQuery
- 14. с помощью кнопки для переключения между вкладками
- 15. переключения изображения с помощью JQuery
- 16. Остановить совместную процедуру с помощью кнопки переключения
- 17. показать несколько строк с помощью кнопки переключения
- 18. JQuery помогает создать функцию переключения
- 19. Как создать кнопку переключения в jQuery
- 20. Создать список с помощью кнопки
- 21. Цвет кнопки переключения с addEventListener
- 22. Как создать кнопку переключения в JQuery-mobile?
- 23. Как создать кнопку переключения с помощью модуля Bootstrap Toggle?
- 24. JQuery переключения через Twitter Bootstrap кнопки классов
- 25. D3 кнопки переключения пузырьков
- 26. Как создать кнопки и сборщик данных с помощью jquery?
- 27. Использование JQuery переключения, чтобы изменить значок кнопки
- 28. Создание кнопки переключения
- 29. jQuery - активация одной кнопки переключения отключает другую
- 30. Как остановить службу с помощью кнопки переключения в другом действии?
Пожалуйста, покажите некоторые работы, которые вы уже пробовали. Всегда полезно включать JFiddle в ваши вопросы Javascript/jQuery. –