The toggle button on css
Содержание:
More Examples
Example
Add multiple classes to a <div> element:
document.getElementById(«myDIV»).classList.add(«mystyle», «anotherClass», «thirdClass»);
Example
Remove a class from a <div> element:
document.getElementById(«myDIV»).classList.remove(«mystyle»);
Example
Remove multiple classes from a <div> element:
document.getElementById(«myDIV»).classList.remove(«mystyle», «anotherClass», «thirdClass»);
Example
Toggle between two classes for a <div> element:
document.getElementById(«myDIV»).classList.toggle(«newClassName»);
Example
Get the class name(s) of a <div> element:
<div id=»myDIV» class=»mystyle anotherClass thirdClass»>I am a DIV element</div>var x = document.getElementById(«myDIV»).classList;
Example
Find out how many class names a <div> element has:
var x = document.getElementById(«myDIV»).classList.length;
Example
Get the first class name (index 0) of a <div> element:
var x = document.getElementById(«myDIV»).classList.item(0);
Example
Find out if an element has a «mystyle» class:
var x = document.getElementById(«myDIV»).classList.contains(«mystyle»);
Example
Find out if an element has a «mystyle» class. If so, remove another class
name:
var x = document.getElementById(«myDIV»);if (x.classList.contains(«mystyle»)) {
x.classList.remove(«anotherClass»);} else {
alert(«Could not find it.»);}
Example
Toggle between classes to create a dropdown button:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById(«myBtn»).onclick = function() {myFunction()};/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */function myFunction() { document.getElementById(«myDropdown»).classList.toggle(«show»);}
Fallback Example: add
A cross-browser solution when using the classList.add()
method, for IE9 and earlier:
var x, name, arr;x = document.getElementById(«myDIV»);if (x.classList)
{ x.classList.add(«mystyle»);} else {
name = «mystyle»; arr = x.className.split(» «);
if (arr.indexOf(name) == -1) {
x.className += » » + name; }}
Fallback Example: remove
A cross-browser solution when using the classList.remove()
method, for IE9 and earlier:
var x = document.getElementById(«myDIV»);if (x.classList) {
x.classList.remove(«mystyle»);
} else { x.className = x.className.replace(/\bmystyle\b/g, «»); // For IE9 and earlier}
Fallback Example: contains
A cross-browser solution when using the classList.contains()
method, for IE9 and earlier:
var x = document.getElementById(«myDIV»);if (x.classList) { alert(x.classList.contains(«mystyle»));} else {
alert(/\bmystyle\b/g.test(x.className)); // For IE9 and earlier}
Fallback Example: toggle
A cross-browser solution when using the classList.toggle()
method, for IE9:
var x = document.getElementById(«myDIV»);if (x.classList) { x.classList.toggle(«mystyle»);} else {
// For IE9 var classes = x.className.split(» «); var i = classes.indexOf(«mystyle»);
if (i >= 0) classes.splice(i, 1); else classes.push(«mystyle»);
x.className = classes.join(» «); }
Example
Create a sticky navigation bar:
// Get the navbarvar navbar = document.getElementById(«navbar»);//
Get the offset position of the navbarvar sticky = navbar.offsetTop;// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.function myFunction() { if (window.pageYOffset
>= sticky) { navbar.classList.add(«sticky») }
else { navbar.classList.remove(«sticky»); }
}
Toggle Class
Step 1) Add HTML:
Toggle between adding a class name to the div element with id=»myDIV» (in this example we use a button to toggle the class name).
<button onclick=»myFunction()»>Try it</button><div id=»myDIV»>
This is a DIV element.</div>
Step 2) Add CSS:
Add a class name to toggle:
.mystyle { width: 100%; padding:
25px; background-color: coral;
color: white; font-size: 25px;}
Step 3) Add JavaScript:
Get the <div> element with id=»myDIV» and toggle between the «mystyle» class:
function myFunction() { var element = document.getElementById(«myDIV»);
element.classList.toggle(«mystyle»);}
Отмена действия браузера
Есть два способа отменить действие браузера:
- Основной способ – это воспользоваться объектом . Для отмены действия браузера существует стандартный метод .
- Если же обработчик назначен через (не через ), то также можно вернуть из обработчика.
Возвращать не нужно
Обычно значение, которое возвращает обработчик события, игнорируется.
Единственное исключение – это из обработчика, назначенного через .
В других случаях не нужен, он никак не обрабатывается.
Рассмотрим меню для сайта, например:
Данный пример при помощи CSS может выглядеть так:
В HTML-разметке все элементы меню являются не кнопками, а ссылками, то есть тегами . В этом подходе есть некоторые преимущества, например:
- Некоторые посетители очень любят сочетание «правый клик – открыть в новом окне». Если мы будем использовать или , то данное сочетание работать не будет.
- Поисковые движки переходят по ссылкам при индексации.
Например, вот так:
Если мы уберём , то после выполнения обработчика события браузер выполнит «действие по умолчанию» – переход по адресу из . А это нам здесь не нужно, мы обрабатываем клик сами.
Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.
События, вытекающие из других
Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.
Например, событие для поля приводит к фокусировке на нём и запускает событие . Если мы отменим событие , то фокусирования не произойдёт.
В следующем примере попробуйте нажать на первом – происходит событие . Но если вы нажимаете по второму элементу, то события не будет.
Это потому, что отменено стандартное действие . Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши Tab можно перейти от первого поля ввода ко второму. Но только не через клик мышью на элемент, это больше не работает.
Значения параметров
| Параметр | Описание |
|---|---|
| duration | Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю). |
| easing | Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing. |
| complete | Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация. |
| options |
|
Images
SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider
Usage
Step 1: Include it in your page
Include the CSS at the start:
<head>
<title>My cool page</title>
<link rel="stylesheet" href="css/toggles.css">
<link rel="stylesheet" href="css/toggles-modern.css">
<!-- ALL OF THE THEMES -->
<!-- <link rel="stylesheet" href="css/toggles-all.css"> -->
<!-- ALL OF THE CSS AND THEMES IN ONE FILE -->
<!-- <link rel="stylesheet" href="css/toggles-full.css"> -->
And the JS at the end:
<script src="js/toggles.js" type="text/javascript"></script>
<!-- MINIFIED JS - recommended for production -->
<!-- <script src="js/toggles.min.js" type="text/javascript"></script> -->
</body>
</html>
Step 2: Create your element
You need to specify the class for the specific theme you want to use. In this case we are using . The class is simply what we will use as our selector to initialize it.
<div class="toggle toggle-modern">
The themes we could have used are:
- soft
- light
- dark
- iphone
- modern
Of course, you can write your own themes/tweak the styling.
Step 3: Initialize!
Now we just need to initialize the element we made to make it toggleable!
// Simplest way:
$('.toggle').toggles();
// With options (defaults shown below)
$('.toggle').toggles({
drag: true, // allow dragging the toggle between positions
click: true, // allow clicking on the toggle
text: {
on: 'ON', // text for the ON position
off: 'OFF' // and off
},
on: true, // is the toggle ON on init
animate: 250, // animation time (ms)
easing: 'swing', // animation transition easing function
checkbox: null, // the checkbox to toggle (for use in forms)
clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)
width: 50, // width used if not set in css
height: 20, // height if not set in css
type: 'compact' // if this is set to 'select' then the select style toggle will be used
});
// Getting notified of changes, and the new state:
$('.toggle').on('toggle', function(e, active) {
if (active) {
console.log('Toggle is now ON!');
} else {
console.log('Toggle is now OFF!');
}
});
Cross-browser solution
Note: The classList property is not supported in Internet Explorer 9. The following
example uses a cross-browser solution/fallback code for IE9:
Example
var element = document.getElementById(«myDIV»);if (element.classList) { element.classList.toggle(«mystyle»);} else { // For IE9 var classes = element.className.split(» «); var i =
classes.indexOf(«mystyle»); if (i >= 0)
classes.splice(i, 1); else
classes.push(«mystyle»); element.className = classes.join(» «); }
Tip: Also see How To Add A Class.
Tip: Also see How To Remove A Class.
Tip: Learn more about the classList property in our JavaScript Reference.
❮ Previous
Next ❯
Advanced Usage
Setting toggle states
// initiate a new Toggles class
$('.toggles').toggles({
on: true
});
// the underlying Toggles class can be accessed
var myToggle = $('.toggles').data('toggles');
console.log(myToggle.active); // true
myToggle.toggle();
console.log(myToggle.active); // false
// set the state to 'false'
// will not do anything if the state is already false
myToggle.toggle(false);
console.log(myToggle.active); // false
// passing a boolean in place of options on an active toggle element
// will set the state
$('.toggles').toggles(true);
console.log(myToggle.active); // true
// the toggle-active data attribute stores the state too
console.log($('.toggles').data('toggle-active')); // true
// myToggle.toggle(state, noAnimate, noEvent)
// don't animate the change
myToggle.toggle(false, true);
// change the state without triggering an event
myToggle.toggle(true, false, true);
Using data-toggle-* attributes on the element
Any of the following options can be set using data-toggle attributes: , , , , , , , ,
<div class="toggles" data-toggle-on="true" data-toggle-height="20" data-toggle-width="60"></div>
$('.toggles').toggles();
Disabling user interaction
It can be useful to disable the toggle to stop users from changing the state. Set the attribute on the toggle element to do this. Alternatively, you could use CSS to set
// your toggle element
var toggle = $('.toggle');
// initialise it
toggle.toggles();
// disable the toggle element (click + drag will no longer work)
toggle.toggleClass('disabled', true);
// setting the state via JS is NOT disabled, only user input
// toggle the toggle on
toggle.toggles(true);
// re-enable the toggle
toggle.toggleClass('disabled', false);
Methods
| Method | Description |
|---|---|
| add(class1, class2, …) | Adds one or more class names to an element.If the specified class already exist, the class will not be added |
| contains(class) |
Returns a Boolean value, indicating whether an element has the specified class name.
Possible values:
|
| item(index) | Returns the class name with a specified index number from an element. Index starts at 0.Returns null if the index is out of range |
| remove(class1, class2, …) | Removes one or more class names from an element.Note: Removing a class that does not exist, does NOT throw an error |
| toggle(class, true|false) | Toggles between a class name for an element.The first parameter removes the specified class from an element, and returns false. If the class does not exist, it is added to the element, and the return value is true.The optional second parameter is a Boolean value that forces the class to be added or removed, regardless of whether or not it already existed. For example:Remove a class: element.classList.toggle(«classToRemove», false); Add a class: element.classList.toggle(«classToAdd», true);Note: The second parameter is not supported in Internet Explorer or Opera 12 and earlier. |
Определение и применение
jQuery метод .slideToggle() позволяет плавно отобразить или скрыть выбранные элементы скользящим движением. Если элемент изначально отображается, то он будет скрыт, если элемент скрыт, то он будет отображен.
Значение CSS свойства display элемента сохраняются и восстанавливаются при необходимости. Например, если элемент имеет значение этого свойства inline, то при отображении элемента, после того как он был скрыт, значение свойства не изменится и будет по прежнему inline.
Обращаю Ваше внимание, что метод .slideToggle() производит анимацию только высоты элемента (height), а метод .toggle(), используемый с параметрами анимирует свойства width (ширина), height (высота) и opacity (прозрачность). Метод .toggle() используемый без параметров в отличии от метода .slideToggle() не производит никакой анимации
Определение и применение
jQuery метод .fadeToggle() позволяет плавно изменить прозрачность для отдельных элементов (в зависимости от состояния элемента: из видимого в скрытое, либо из скрытого в видимое). Другими словами, метод производит анимацию изменения прозрачности выбранных элементов плавно переводя их из скрытого состояния в видимое, или наоборот из видимого состояния в скрытое.
Обращаю Ваше внимание, что когда метод .fadeToggle() вызывается на видимом элементе, то при достижении уровня прозрачности равному нулю (opacity: 😉 к элементу дополнительно добавляется значение CSS свойства display равное none, благодаря которому элемент не будет отображаться и как следствие влиять на макет страницы на которой он размещен
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Использование jQuery метода .fadeToggle() (с callback функцией)</title>
<style></style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$( ".fadetoggle" ).click(function(){ // задаем функцию при нажатиии на элемент с классом fadetoggle
$( "div" ).fadeToggle( 1000, "linear", function(){ // плавно отображаем, или скрываем элементы <div> в документе
console.log("toggle completed"); // выводим в консоль браузера информацию о завершении метода для каждого элемента в наборе
});
});
});
</script>
</head>
<body>
<button class = "fadetoggle">Метод .toggle()</button>
<hr>
<div></div>
<div></div>
<div></div>
</body>
</html>
В этом примере с использованием jQuery методa .fadeToggle() мы при нажатии на кнопку плавно изменяем прозрачность для всех элементов <div> в документе, скрывая, либо отображая их. При этом мы указали для наших методов продолжительность анимации равную секунде (1000 миллисекунд), эффект анимации происходит с одинаковой скоростью от начала до конца (linear) и функцию, которая после завершения анимации выводит в консоль браузера информацию о завершении выполнения метода для каждого элемента в наборе совпавших элементов.
Результат нашего примера:
Пример использования jQuery методов .fadeToggle()
Рассмотрим следующий пример в котором передадим в качестве параметра методов .fadeToggle() объект, содержащий различные опции, которые будут контролировать анимацию:
<!DOCTYPE html>
<html>
<head>
<title>Использование jQuery метода .fadeToggle() (объект с опциями в качестве параметра)</title>
<style></style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$( ".fadetoggle" ).click(function(){ // задаем функцию при нажатиии на элемент с классом fadetoggle
$( "div" ).fadeToggle( { // плавно отображаем, или скрываем элементы <div> в документе
duration: 800, // продолжительность анимации
easing: "linear", // скорость анимации
complete: function(){ // callback
console.log("fadeToggle completed");
},
queue: false // не ставим в очередь
});
});
});
</script>
</head>
<body>
<button class = "fadetoggle">Метод .toggle()</button>
<hr>
<div></div>
<div></div>
<div></div>
</body>
</html>
В этом примере с использованием jQuery метода .fadeToggle() мы при нажатии на кнопку плавно изменяем прозрачность для всех элементов <div> в документе, скрывая, либо отображая их. При этом мы в качестве параметров методов передаем объект содержащий следующие параметры:
- продолжительность анимации равную 800 миллисекунд (duration: 800)
- эффект анимации происходит с одинаковой скоростью от начала до конца (easing: linear)
- функция, которая после завершения анимации выводит в консоль браузера информацию о завершении выполнения метода для каждого элемента в наборе совпавших элементов (complete: function).
- анимация не размещается в очереди эффектов (queue: false).
Результат нашего примера:
Пример использования jQuery метода .fadeToggle() (объект в качестве параметра)jQuery эффекты
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Добавление класса к элементу (jQuery метод .addClass())</title>
<style></style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$("p").click(function(){ // задаем функцию при нажатиии на элемент <p>
$(this).addClass('transition redColor'); // добавляем элементу <p> по которому произведен клик два класса
});
});
</script>
</head>
<body>
<p>Обычный абзац</p>
<p>Обычный абзац</p>
<p>Обычный абзац</p>
<p>Обычный абзац</p>
</body>
</html>
В этом примере с использованием jQuery метода .addClass() мы добавляем два класса к элементу <p> (абзац) по которому произведён клик.
Результат нашего примера:
Пример добавления класса к элементу (jQuery метод .addClass())
Рассмотрим пример в котором в качестве параметра метода .addClass() передадим функцию:
<!DOCTYPE html>
<html>
<head>
<title>Получение индекса и имени класса элемента в наборе.</title>
<style></style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").addClass(function(index, currentClass){ // задаем функцию в качестве параметра метода .addClass()
var addedClass; // создаем переменную
if (currentClass === "redColor") { // если класс элемента идентичен redColor
addedClass = "greenColor"; // присваиваем значение переменной (соответствует значению класса)
$( "div" ).append("<p>нашёлся с индексом - " + index + "</p>"); // добавляем в элемент <div> информацию о индексе элементов, которые были выбраны
}
return addedClass; // возвращаем значение (значение переменной устанавливается в качестве класса элемента)
});
});
</script>
</head>
<body>
<p>Обычный абзац</p>
<p class = "redColor">Обычный абзац</p>
<p class = "redColor">Обычный абзац</p>
<p>Обычный абзац</p>
</body>
</html>
В этом примере с использованием jQuery метода .addClass() мы нашли все элементы <p> (абзац), которые имеют класс «redColor», добавили для этих элементов класс «greenColor» и с использованием метода .append() добавили в элемент <div> информацию о индексе элементов, которые были выбраны.
Результат нашего примера:
Пример получение индекса и имени класса элемента в наборе с использованием метода .addClass().jQuery DOM методы
Примеры
Пример: добавляем или удаляем класс ‘highlight’ при клике.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>
Демо
Пример: добавляем класс «highlight» при каждом третьем клике; удалить при каждом втором.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
<p class="blue">on these (<span>clicks: 0</span>)</p>
<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
<script>
var count = 0;
$("p").each(function() {
var $thisParagraph = $(this);
var count = 0;
$thisParagraph.click(function() {
count++;
$thisParagraph.find("span").text('clicks: ' + count);
$thisParagraph.toggleClass("highlight", count % 3 == 0);
});
});
</script>
</body>
</html>
Демо
Пример: добавляем/удаляем классы к элементам div в зависимости от нажатых кнопок.
<!DOCTYPE html>
<html>
<head>
<style>
.wrap > div { float: left; width: 100px; margin: 1em 1em 0 0;
padding=left: 3px; border: 1px solid #abc; }
div.a { background-color: aqua; }
div.b { background-color: burlywood; }
div.c { background-color: cornsilk; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="buttons">
<button>toggle</button>
<button class="a">toggle a</button>
<button class="a b">toggle a b</button>
<button class="a b c">toggle a b c</button>
<a href="#">reset</a>
</div>
<div class="wrap">
<div></div>
<div class="b"></div>
<div class="a b"></div>
<div class="a c"></div>
</div>
<script>
var cls = ;
var divs = $('div.wrap').children();
var appendClass = function() {
divs.append(function() {
return '<div>' + (this.className || 'none') + '</div>';
});
};
appendClass();
$('button').on('click', function() {
var tc = this.className || undefined;
divs.toggleClass(tc);
appendClass();
});
$('a').on('click', function(event) {
event.preventDefault();
divs.empty().each(function(i) {
this.className = cls;
});
appendClass();
});
</script>
</body>
</html>
Демо
