Jquery css add: jQuery Get and Set CSS Classes

Класс	Значок Описание	Значок
значок пользовательского интерфейса	Действие (стрелка выходит из рамки по часовой стрелке)
значок интерфейса пользователя	Восклицательный знак внутри треугольника
пользовательский интерфейс-значок-аудио	Звук/динамики
пользовательский интерфейс-значок-стрелка-д-л	Вниз, стрелка влево
пользовательский интерфейс-значок-стрелка-д-р	Стрелка вниз, вправо
пользовательский интерфейс-значок-стрелка-у-л	Стрелка вверх, влево
пользовательский интерфейс-значок-стрелка-у-р	Стрелка вверх, вправо
пользовательский интерфейс-значок-стрелка-л	Стрелка влево
пользовательский интерфейс-значок-стрелка-r	Стрелка вправо
пользовательский интерфейс-значок-стрелка-у	Стрелка вверх
пользовательский интерфейс-значок-стрелка-d	Стрелка вниз
пользовательский интерфейс значок назад	Назад (изогнутая стрелка направлена ​​вверх против часовой стрелки)
панели значков пользовательского интерфейса	Три горизонтальных перекладины друг над другом
UI-значок-пули	Три горизонтальные пули друг над другом
пользовательский интерфейс значок-календарь	Календарь
значок пользовательского интерфейса камеры	Камера
ui-icon-carat-d	Пуховой карат
ui-icon-carat-l	Левый карат
ui-icon-carat-r	Правильный карат
ui-icon-carat-u	До карата
проверка значков пользовательского интерфейса	Галочка
значок пользовательского интерфейса	Часы
пользовательский интерфейс значок облака	Облако
пользовательский интерфейс-значок-комментарий	Комментарий / Сообщение
значок пользовательского интерфейса удалить	Удалить
пользовательский интерфейс-значок-редактирование	Редактирование / Карандаш
значок пользовательского интерфейса	Глаз
значок пользовательского интерфейса запрещен	Запрещенный знак
значок пользовательского интерфейса вперед	Вперед — (изогнутая стрелка по часовой стрелке вверх)
значок интерфейса	Шестерня
UI-иконка-сетка	Сетка
значок пользовательского интерфейса сердце	Сердце / символ любви
значок пользовательского интерфейса	Дом / Дом
UI-icon-info	Информация
расположение значка пользовательского интерфейса	Местоположение
значок блокировки пользовательского интерфейса	Замок/Висячий замок
пользовательский интерфейс значок почты	Почта / Письмо
значок пользовательского интерфейса минус	Знак минус
значок интерфейса пользователя	Навигация
пользовательский интерфейс значок телефона	Телефон
пользовательский интерфейс значок-мощность	Питание (вкл. /выкл.)
пользовательский интерфейс плюс	Знак плюс
пользовательский интерфейс-значок-переработка	Знак утилизации
UI-иконка-обновить	Обновление — круговая стрелка
значок интерфейса пользователя	Поиск / Лупа
магазин иконок пользовательского интерфейса	Магазин/Сумка
значок интерфейса пользователя	Звезда
тег пользовательского интерфейса	Тег
пользовательский интерфейс пользователя	Пользователь / Человек
пользовательский интерфейс значок видео	Видео/камера

Классы тем

jQuery Mobile предоставляет два класса тем: a (серый) и b (черный). Однако, вы также можете создавать свои собственные, настраиваемые значения класса — вплоть до буквы «z» (см.

Классы сетки

Столбцы в сетке имеют одинаковую ширину (и общую ширину 100%), без границ, фона, полей или отступов. Можно использовать пять сеток компоновки:

Для получения дополнительной информации о сетках прочитайте нашу главу jQuery Mobile Grids.

« Предыдущая

Следующая глава »

Lightbox2

Примеры

Два отдельных изображения

Набор из четырех изображений

Начало работы

1. Загрузите ZIP-файл последней версии (или любой предыдущей) со страницы выпусков Github.

   Или установить с помощью npm:

    нпм установить лайтбокс2 --сохранить 

2. Откройте zip-файл и взгляните на базовый рабочий пример, который находится в папке /examples .

3. Готовы установить лайтбокс на своей странице? Начните с включения Lightbox CSS и Javascript. Вы можете взять оба этих файла из папки /dist .

   • Включите CSS в верхней части страницы в тег :

   • Включите Javascript внизу страницы перед закрывающим тегом :

4. Убедитесь, что jQuery, необходимый для Lightbox, также загружен.

   • Если вы уже используете jQuery на своей странице, убедитесь, что он загружен до lightbox.js . Требуется jQuery 1.7 или выше, а поскольку используется модуль эффектов, тонкая сборка jQuery не поддерживается.
   • Если вы в настоящее время не используете jQuery, я создал упакованный файл, который включает в себя как Lightbox, так и jQuery. Включите dist/js/lightbox-plus-jquery.js вместо lightbox.js .
5. Убедитесь, что четыре изображения, загруженные lightbox.css , находятся в правильном месте. Вы можете получить изображения из папки /dist/images .

Инициализировать с помощью HTML

• Отдельные изображения. Добавьте атрибут data-lightbox к любой ссылке на изображение, чтобы включить Lightbox. В качестве значения атрибута используйте уникальное имя для каждого изображения. Например:
  Дополнительно:
  • Добавьте атрибут data-title , если вы хотите показать заголовок.
  • Добавьте атрибут data-alt , если вы хотите установить атрибут alt связанного изображения.
• Наборы изображений. Если у вас есть группа связанных изображений, которые вы хотите объединить в набор, используйте одно и то же значение атрибута data-lightbox для всех изображений. Например:

Опции

Если вы хотите изменить любой из параметров по умолчанию, вызовите метод параметра.

Опция	По умолчанию	Описание
всегдаShowNavOnTouchDevices	ложь	Если задано значение true, стрелки навигации влево и вправо, которые появляются при наведении указателя мыши при просмотре наборов изображений, всегда будут видны на устройствах, поддерживающих сенсорный ввод.
альбом Этикетка	«Изображение %1 из %2»	Текст, отображаемый под заголовком при просмотре набора изображений. Текст по умолчанию показывает текущий номер изображения и общее количество изображений в наборе.
отключить прокрутку	ложь	Если true, запретить прокрутку страницы при открытом лайтбоксе. Это работает путем переполнения настроек, скрытого на теле.
продолжительность угасания	600	Время, необходимое контейнеру Lightbox и оверлею для постепенного появления и исчезновения, в миллисекундах.
фитимажесинвиевпорт	правда	Если задано значение true, измените размер изображений, выходящих за пределы окна просмотра, чтобы они аккуратно помещались внутри него. Это избавляет пользователя от необходимости прокручивать изображение, чтобы увидеть его целиком.
imageFadeDuration	600	Время, необходимое для появления изображения после загрузки, в миллисекундах.
максимальная ширина		Если установлено, ширина изображения будет ограничена этим числом в пикселях. Соотношение сторон не будет сохранено.
максимальная высота		Если установлено, высота изображения будет ограничена этим числом в пикселях. Соотношение сторон не будет сохранено.
positionFromTop	50	Расстояние от верха окна просмотра, на котором будет отображаться контейнер Lightbox, в пикселях.
resizeDuration	700	Время, которое требуется контейнеру Lightbox для анимации ширины и высоты при переходе между изображениями разного размера, в миллисекундах.
showImageNumberLabel	правда	Если false, текст, указывающий номер текущего изображения и общее количество изображений в наборе (например, «изображение 2 из 4»), будет скрыт.
обернутьВокруг	ложь	Если задано значение true, когда пользователь дойдет до последнего изображения в наборе, появится правая навигационная стрелка, и он будет продолжать движение вперед, что вернет его к первому изображению в наборе.

Поддержка браузера

Lightbox2 успешно протестирован в следующих браузерах:

• Internet Explorer.
  Файл lightbox-plus-jquery.js включает jQuery v2.x и поддерживает IE 9+. Если вы хотите поддерживать IE 6, 7 и 8, используйте собственную копию jQuery v1.x с lightbox.js .
• Хром
• Сафари
• Firefox
• Сафари iOS
• iOS Chrome
• Android-браузер
• Android Chrome

Лицензия

Lightbox2 находится под лицензией MIT License.