Лучшее руководство по Jquery Примеры UI - Part Gallery (Widget Factory) в 2024 году. В этом руководстве вы можете изучить По умолчанию функция,
Jquery Примеры UI - Part Gallery (Widget Factory)
Использование виджетов JQuery UI с все той же абстракции, чтобы создать динамическую JQuery плагин.
Для получения более подробной информации о виджете библиотеке (Widget Factory), проверьте API документации библиотеки компонентов (Widget Factory) .
По умолчанию функция
Демо показывает простой в использовании библиотеки компонентов (jquery.ui.widget.js) для создания пользовательских виджетов.
Три блока по-другому для инициализации. Нажмите, чтобы изменить свой цвет фона. Просмотр исходного кода и комментарии, чтобы понять, как это работает.
<! DOCTYPE HTML> <HTML LANG = "EN"> <Head> <Meta Charset = "UTF-8"> <Title> библиотека JQuery UI виджет (Widget Factory) - функция по умолчанию </ title> <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт> <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт> <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css"> <Style> .custom-Раскрасить { размер шрифта: 20px; позиция: относительная; ширина: 75px; высота: 75px; } .custom-Раскрасить-чейнджер { размер шрифта: 10px; позицию: абсолютная; справа: 0; снизу: 0; } </ Style> <Script> $ (Function () { // Определения участников, где "обычай" Пространство имен, "раскрашивание" является имя члена $ .widget ( "custom.colorize", { // Параметры по умолчанию: { красный: 255, зеленый: 0, синий: 0, // Изменение Обратный вызов: нуль, случайным образом: NULL }, // Конструктор _create: функция () { this.element // Добавить тему класса .addClass ( «заказных раскрасить») // Предотвращение двойной щелчок для выбора текста .disableSelection (); this.changer = $ ( "<кнопка>", { текст: "изменение" "Класс": "на заказ Раскрасить-чейнджер" }) .appendTo (this.element) .button (); // Привязка кнопку нажмите чейнджера событие случайным методом this._on (this.changer, { // Когда виджет запрещен, _on не называется случайным нажмите: "случайное" }); this._refresh (); }, () Функции {: // вызов _refresh при создании, а затем изменить параметры this.element.css ( "цвет фона", "RGB (" + this.options.red + "," + this.options.green + "," + this.options.blue + ")" ); // Триггер this._trigger обратного вызова / события ( "Смена"); }, // Изменение цвета на случайное значение // публичные методы могут быть вызваны непосредственно с помощью случайного .colorize ( "случайный"): функция (событие) { вар цвета = { красный: Math.floor (Math.random () * 256), зеленый: Math.floor (Math.random () * 256), синий: Math.floor (Math.random () * 256) }; // Trigger событие, проверьте отменен, если (this._trigger ( "случайные", событие, цвета)! == False) { this.option (цвета); } }, // Автоматическое удаление событий связано _on здесь // сброс других модификаций _destroy: функция () { // Удалить сгенерированные элементы this.changer.remove (); this.element .removeClass ( «заказных раскрасить») .enableSelection () .css ( "цвет фона", "прозрачный"); }, // _setOptions хэш-все изменилось с опциями для вызова // при изменении опции всегда обновить _setOptions: функция () { // _super И _superApply this._superApply (аргументы); this._refresh (); }, // _setOption _setOption Для каждого человека, чтобы изменить параметры по телефонам: функции (ключ, значение) { // Цвет значения для предотвращения недействительными, если (/red|green|blue/.test(key) && (значение <0 || значение> 255)) { возвращение; } this._super (ключ, значение); } }); // Инициализация опции по умолчанию $ ( "# мой-WIDGET1") .colorize (); // По два пользовательских опций для инициализации $ ( "# My-WIDGET2") .colorize ({ красный: 60, синий: 60 }); // Зеленый по самоопределяемой значение и позволяет только достаточный зеленый цвет случайный обратный вызов для инициализации $ ( "# My-widget3") .colorize ({ зеленый: 128, случайным образом: функция (событие, щ) { вернуть ui.green> 128; } }); // Нажмите переключатель включен / выключен $ ( "#disable") .click (Функция () { // Пользовательские селекторы для каждого виджета, чтобы найти все экземпляры // Все экземпляры переключения вместе, так что мы можем начать с первого состояния, чтобы проверить, если ($ ( ": заказ раскрасить") .colorize ( "вариант", "отключено")) { $ ( ": Заказ раскрасить") .colorize ( "включить"); } Else { $ ( ": Заказ раскрасить") .colorize ( "выключить"); } }); // После инициализации, выберите опцию Настройки $ ( "#black") .click (функция () { $ ( ": Заказ раскрасить") .colorize ( "вариант", { красный: 0, зеленый: 0, синий: 0 }); }); }); </ Script> </ Head> <Body> <Div> <Div ID = "моя-WIDGET1"> изменение цвета </ DIV> <Div ID = "моя-WIDGET2"> изменение цвета </ DIV> <Div ID = "моя-widget3"> изменение цвета </ DIV> <Кнопка ID = "отключить"> переключатель отключен параметр </ кнопка> Кнопка <ID = "черный"> Блэку </ кнопка> </ Div> </ Body> </ HTML>