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>