jQuery Plugin EasyUI

Plug-in-Liste

Base (Base)

• Parser Parser
• Easyloader loader
• ziehbare ziehbare
• Abwerfbaren können platziert werden
• Resizable Einstellbare Größe
• Paginierung Registerkarte
• Searchbox Suchfeld
• Fortschrittsbalken Progressbar
• Tooltip Ballons

Layout (Layout)

• Platte Platte
• Tabs Tab / Tab
• Leporello - Panel
• Layout Layout

Menu (Menü) und Button (Knopf)

• Menu Menu
• Linkbutton Link - Taste
• Menubutton Menü - Taste
• Splitbutton Split - Taste

(Formular)

• Form Form
• Validatebox Verifizierungsbox
• Combo Kombination
• Combobox Combobox
• Combotree Kombination Baum
• Combogrid Verbund Gitter
• Numberbox digitale Box
• Datebox Datumsbox
• Datetimebox Datum Zeitrahmen
• Kalender
• Spinner
• Number Wert spinner
• Timespinner Zeit Spinner
• Slider Slider

Window (Fenster)

• Fenster Fenster
• Dialog Dialog
• Messager Meldungsfeld

Datagrid (Data Grid) und Baum (Baum)

• Datagrid Data Grid
• Property Property Grid
• Baum
• TreeGrid Baum Gitter

Widget

Easyui Jede Komponente hat Eigenschaften, Methoden und Ereignisse. Benutzer können leicht auf diese Komponenten erweitern.

Immobilien

Es wird definiert, in den jQuery.fn. {Plugin} * .DEFAULTS. Sind beispielsweise Dialog Attribute in jQuery.fn.dialog.defaults definiert.

Ereignis

Ereignis (Callback-Funktion) definiert in jQuery.fn. {Plugin} * .DEFAULTS.

Weg

Der Methodenaufruf Syntax: $ ( 'Wähler') Plugin ( "Methode", Parameter) ;.

wobei:

• jQuery-Selektor ist die Objektauswahl.
• Plugin ist ein Plug-in-Namen.
• Verfahren Stecker bestehende Verfahren anzupassen.
• ist ein Parameter-Objekt kann ein Objekt sein, ein String ...

Das Verfahren ist definiert in jQuery.fn. {Plugin} .methods. Jede Methode hat zwei Parameter: jq und param. Der erste Parameter 'jq' ist notwendig, eine Referenz auf das Objekt jQuery. Der zweite Parameter "param" bezieht sich auf den tatsächlichen Verfahrensparameter übergeben. Zum Beispiel Dialogkomponentenmethode zu erweitern 'mymove Ansatz genannt, wie folgt:

$ .extend ($. Fn.dialog.methods, {
    mymove: function (JQ, newposition) {
		Rückkehr jq.each (function () {
			$ (Diese) .dialog ( "bewegen", newposition);
		});
    }
});

Jetzt können Sie 'mymove' Methode aufrufen, um das Dialogfeld (Dialog) an die angegebene Position zu verschieben:

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

Ich begann jQuery EasyUI mit

Download-Verzeichnis, und Verweise EasyUI CSS und JavaScript-Dateien auf Ihrer Seite.

<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 = "easyui / jquery.easyui.min.js"> </ script>

Sobald Sie EasyUI notwendigen Dateien verweisen, können Sie ein EasyUI Komponenten durch die Verwendung von Tags oder JavaScript definieren. Zum Beispiel, um eine obere Platte mit einer Klappfunktion, müssen Sie den HTML-Code zu schreiben, wie folgt:

<Div id = "p" class = "easyui-Panel" style = "width: 500px; height: 200px; padding: 10px;"
    title = "My Panel" iconCls = "Symbol-save" zusammenklappbar = "true">
    Das Panel Inhalt
</ Div>

Wenn Erstellen einer Komponente durch die Markierung "Daten-Optionen 'Attribut wird verwendet, um die Eigenschaftsnamen seit Version 1.3 HTML5 kompatibel zu unterstützen. So können Sie den obigen Code wie folgt umschreiben:

<Div id = "p" class = "easyui-Panel" style = "width: 500px; height: 200px; padding: 10px;"
    title = "My Panel" Daten-Optionen = "iconCls: 'Icon-save', zusammenklappbar: true">
    Das Panel Inhalt
</ Div>

Der folgende Code zeigt, wie ein gebundenes Kombinationsfeld Ereignis 'onSelect' zu erstellen.

<Input class = "easyui-Combobox" name = "Sprache"
    Daten-Optionen = "
    url: 'combobox_data.json',
    Valuefield: 'id',
    textfield: 'text',
    panelHeight: 'auto',
    onSelect: Funktion (Aufnahme) {
    alert (record.text)
    } ">