Wtyczka jQuery EasyUI

Plug-in listy

Podstawa (zasada)

• parser parser
• Easyloader ładowarka
• Draggable Draggable
• Droppable można umieścić
• Resizable Regulowany Rozmiar
• Zakładka Pagination
• SearchBox pole wyszukiwania
• Pasek postępu Progressbar
• Tooltip balony

Layout (Układ)

• pANEL
• Tabs Tab / Tab
• Akordeon Panel układany
• układ układ

Menu (Menu) i przycisk (przycisk)

• Menu Menu
• Przycisk Link linkButton
• Przycisk menu MenuButton
• Splitbutton przycisk Podział

Formularz (formularz)

• formularz formularz
• Okno weryfikacji Validatebox
• Połączenie Combo
• rozwijana combobox
• Combotree kombinacja drzewa
• Combogrid kompozytowe siatki
• Numberbox digital box
• Datebox Data box
• Datetimebox Data Godzina ramki
• Kalendarz
• Spinner Spinner
• Numberspinner Wartość pokrętła
• Timespinner czas spinner
• Suwak Suwak

Okna (Okno)

• okno okno
• Dialog Dialog
• okno komunikatu Messager

DataGrid (Siatka danych) oraz drzewa (drzewo)

• Siatka danych DataGrid
• PropertyGrid nieruchomości Siatka
• drzewo drzewo
• TreeGrid drzewa siatki

Widget

Easyui Każdy składnik ma właściwości, metod i zdarzeń. Użytkownicy mogą łatwo rozszerzyć do tych składników.

nieruchomość

Jest ona definiowana w jQuery.fn. {} .defaults Plugin. Na przykład, cechy dialogowych są zdefiniowane w jQuery.fn.dialog.defaults.

wydarzenie

Zdarzenie (funkcja callback) jest zdefiniowana w jQuery.fn. {} .defaults Plugin.

sposób

Składnia wywołania metody: $ ( "selektor") wtyczki ( "metoda", parametr) ;.

w którym:

• selektor jQuery jest selektor obiektu.
• Wtyczka jest nazwą typu plug-in.
• Metoda z wtyczką pasującą do istniejącego sposobu.
• Parametr ten jest przedmiotem parametr może być przedmiotem, ciąg ...

Sposób jest zdefiniowany w jQuery.fn. {Plugin} .metody. Każda metoda ma dwa parametry: JQ i param. jest pierwszym parametrem 'jq "konieczne odniesienie do obiektu jQuery. Drugi parametr 'param' odnosi się do rzeczywistych parametrów metody przeszły. Na przykład, w celu rozszerzenia metody składnik dialogowego podejście "mymove", jak następuje:

$ .extend ($. Fn.dialog.methods {
    mymove: function (jq, newposition) {
		powrót jq.each (function () {
			$ (This) .dialog ( "ruch", newposition);
		});
    }
});

Teraz można nazwać "mymove" metoda, aby przesunąć okno (okna) do określonej lokalizacji:

$ ( '# Dd "). Dialog (" mymove', {
    left: 200,
    top: 100
});

Zacząłem używać jQuery EasyUI

Pobierz bibliotekę, a odniesienia EasyUI CSS i JavaScript plików w swoją stronę.

<Link rel = "stylesheet" type = "text / css" href = "easyui / themes / default / easyui.css">
<Link rel = "stylesheet" type = "text / css" href = "easyui / themes / icon.css">
<Script type = "text / javascript" src = "easyui / jquery-1.7.2.min.js"> </ script>
<Script type = "text / javascript" src = "/ jquery.easyui.min.js easyui"> </ script>

Po odwoływać EasyUI niezbędnych plików, można zdefiniować elementy EasyUI dzięki zastosowaniu znaczników lub JavaScript. Na przykład, na górnym panelu z funkcją składania, trzeba napisać kod HTML, co następuje:

<Div id = class "p" = "easyui panelu" style = "width: 500px; height: 200px; padding: 10px;"
    title = "Mój panel" iconCls = "icon-save" składane = "true">
    Zawartość panelu
</ Div>

Podczas tworzenia komponentu zaznaczając, atrybut "dane-options" jest wykorzystywane do wspierania nazwę właściwości od wersji 1.3 HTML5 kompatybilne. Więc można przepisać powyższy kod w następujący sposób:

<Div id = class "p" = "easyui panelu" style = "width: 500px; height: 200px; padding: 10px;"
    title = "Mój panel" data-options = "iconCls: 'Save' ikon, składane: true">
    Zawartość panelu
</ Div>

Poniższy kod pokazuje jak utworzyć pole kombi zdarzenia związanego onselect ''.

<Wejście class = "easyui-combobox" name = "język"
    data-options = "
    url: 'combobox_data.json "
    valueField: 'id',
    textField: "text"
    panelHeight: 'auto',
    onSelect: function (nagrywanie) {
    alert (record.text)
    } ">