JQuery плагин EasyUI
Jquery EasyUI при условии, для создания кросс-браузерный веб-страниц полный набор компонентов, в том числе мощный DataGrid (сетка данных), TreeGrid (форма дерева), панель (панель), комбо (раскрывающийся комбинации) и так далее. Пользователи могут комбинируют эти компоненты также могут быть использованы отдельно один.
Вставные список
Основание (основания)
- Parser анализатор
- EasyLoader погрузчик
- Draggable Draggable
- Droppable могут быть размещены
- Resizable Регулируемый размер
- вкладка Разбивка
- Строкапоиска окно поиска
- Прогресс бар Progressbar
- Tooltip воздушные шары
Layout (Макет)
Меню (Menu) и (кнопка)
Форма (форма)
- Форма Форма
- Окно проверки Validatebox
- сочетание Combo
- выпадающий Комбобокс
- Combotree сочетание дерева
- Combogrid композитные сетки
- цифровая коробка Numberbox
- Дата окно Datebox
- Datetimebox Дата Временные рамки
- Календарь
- Spinner Spinner
- Numberspinner значение вертушка
- Timespinner время вертушка
- Slider Slider
Окно (Window)
DataGrid (Data Grid) и дерево (дерево)
Виджет
Easyui Каждый компонент имеет свойства, методы и события. Пользователи могут легко распространяться на эти компоненты.
свойство
Она определяется в jQuery.fn. {Plugin} .defaults. Например, диалоговые атрибуты определены в jQuery.fn.dialog.defaults.
событие
Событие (функция обратного вызова) определена в jQuery.fn. {Plugin} .defaults.
способ
Метод вызова Синтаксис: $ ( 'селектор') плагин ( "метод", параметр) ;.
где:
- селектор JQuery является селектор объекта.
- Плагин является именем плагина.
- Метод с вилкой, чтобы соответствовать существующий метод.
- параметр является объектом параметр может быть объектом, строка ...
Метод определен в jQuery.fn. {Plugin} .methods. Каждый метод имеет два параметра: JQ и параметров. Первый параметр 'JQ' необходимо, ссылку на объект JQuery. Второй параметр 'парам' относится к фактическим параметрам метода прошли. Например, чтобы расширить диалог метод компонент под названием 'mymove' подход следующим образом:
$ .extend ($. Fn.dialog.methods, {
mymove: функция (JQ, newposition) {
вернуть jq.each (функция () {
$ (Это) .dialog ( 'движение', newposition);
});
}
});
Теперь вы можете вызвать метод 'mymove', чтобы переместить диалоговое окно (диалоговое окно) в указанное место:
$ ( '# Dd'). Диалог ( 'mymove', {
Слева направо: 200,
верх: 100
});
Я начал использовать JQuery EasyUI
Скачать библиотеку, а также ссылки EasyUI CSS и JavaScript файлы в вашей странице.
<Link отн = тип "таблица стилей" = "текст / CSS" HREF = "easyui / темы / по умолчанию / easyui.css"> <Link отн = тип "таблица стилей" = "текст / CSS" HREF = "easyui / темы / icon.css"> <Script тип = "текст / JavaScript" SRC = "easyui / JQuery-1.7.2.min.js"> </ скрипт> <Тип скрипта = "текст / JavaScript" SRC = "easyui / jquery.easyui.min.js"> </ скрипт>
После того, как вы ссылаетесь EasyUI необходимые файлы, вы можете определить компоненты EasyUI за счет использования тегов или JavaScript. Например, на верхней панели с функцией складывания, вам нужно написать HTML код следующим образом:
<Div ID = класс "р" = "easyui панели" стиль = "ширина: 500px; высота: 200px; обивка: 10px;"
название = "Моя группа" iconCls = "Значок-сохранить" разборные = "истинный">
Содержание панели
</ Div>
При создании компонента путем маркировки, атрибут 'Data-Options' используется для поддержки имя свойства, начиная с версии 1.3 HTML5 совместимы. Таким образом, вы можете переписать приведенный выше код следующим образом:
<Div ID = класс "р" = "easyui панели" стиль = "ширина: 500px; высота: 200px; обивка: 10px;"
название = "My Panel" Data-опции = "iconCls: 'иконка-Сохранить", складная: истинный ">
Содержание панели
</ Div>
Следующий код показывает, как создать связанный со списком событие 'onSelect'.
<Input класс = "easyui-выпадающий" название = "язык"
Данные опции-= "
URL: 'combobox_data.json',
valueField: 'ID',
TextField: 'текст',
panelHeight: 'авто',
onSelect: функция (запись) {
Оповещение (record.text)
} ">