plugin per jQuery EasyUI
jQuery EasyUI previsto per la creazione di cross-browser le pagine web set completo di componenti, tra cui potenti datagrid (griglia di dati), treegrid (struttura ad albero), pannello (pannello), combo (combinazione discesa) e così via. Gli utenti possono combinare questi componenti possono anche essere usati da soli uno.
Plug-in lista
Base (base)
- parser
- Easyloader loader
- trascinabili trascinabili
- Droppable può essere collocato
- Ridimensionabile misura adattabile
- scheda impaginazione
- casella di ricerca di Ricerca
- Barra di avanzamento Progressbar
- palloncini tooltip
Layout (layout)
Menu (Menu) e Button (Pulsante)
Form (Form)
- Form forma
- casella di verifica Validatebox
- combinazione Combo
- casella combinata Combobox
- albero combinazione Combotree
- Combogrid griglia composita
- scatola digitale Numberbox
- casella Data Datebox
- Datetimebox cornice Ora Data
- Calendario
- Spinner filatore
- Numberspinner valore filatore
- Timespinner tempo filatore
- Slider Slider
Finestra (Window)
DataGrid (Data Grid) e Albero (Albero)
widget
Easyui Ogni componente ha proprietà, metodi ed eventi. Gli utenti possono facilmente estendere a tali componenti.
proprietà
Essa è definita nelle jQuery.fn. {Plugin} .defaults. Ad esempio, gli attributi di dialogo sono definiti in jQuery.fn.dialog.defaults.
evento
Evento (funzione di callback) è definita in jQuery.fn. {Plugin} .defaults.
modo
Metodo chiamata sintassi: $ ( 'selector') plug-in ( 'metodo', parametro) ;.
In cui:
- selettore jQuery è il selettore oggetto.
- plugin è un nome del plug-in.
- Metodo con presa adatta al metodo esistente.
- parametro è un oggetto parametro può essere un oggetto, una stringa ...
Il metodo è definito in jQuery.fn. {Plugin} .methods. Ogni metodo ha due parametri: JQ e param. Il primo parametro 'JQ' è necessario, un riferimento all'oggetto jQuery. Il secondo parametro 'param' si riferisce ai parametri metodo effettivo passati. Ad esempio, per estendere il metodo del componente dialogo chiamato approccio 'mymove', come segue:
$ .extend ($. Fn.dialog.methods, {
mymove: function (JQ, newPosition) {
tornare jq.each (function () {
$ (This) .dialog ( 'movimento', newPosition);
});
}
});
Ora è possibile chiamare il metodo 'mymove' per spostare la finestra di dialogo (dialogo) alla posizione specificata:
$ ( '# Dd'). Dialog ( 'mymove', {
sinistra: 200,
top: 100
});
Ho iniziato a usare jQuery EasyUI
Scarica Library e riferimenti EasyUI CSS e JavaScript file nella tua pagina.
<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> <Tipo di script = "text / javascript" src = "/ easyui jquery.easyui.min.js"> </ script>
Una volta che si fa riferimento a file necessari EasyUI, è possibile definire un componenti EasyUI attraverso l'utilizzo di tag o JavaScript. Ad esempio, per un pannello superiore con una funzione di piegatura, è necessario scrivere il codice HTML come segue:
<Div id = "p" class = stile "easyui-pannello" = "width: 500px; height: 200px; padding: 10px;"
title = "My Panel" iconCls = "icona-save" pieghevole = "true">
Il contenuto del pannello
</ Div>
Durante la creazione di componenti per la marcatura, l'attributo 'data-opzioni' viene utilizzato per supportare il nome della proprietà a partire dalla versione 1.3 HTML5 compatibile. Così si può riscrivere il codice precedente come segue:
<Div id = "p" class = stile "easyui-pannello" = "width: 500px; height: 200px; padding: 10px;"
title = "Il mio pannello" Dati-options = "iconCls: 'icona-save', pieghevole: true">
Il contenuto del pannello
</ Div>
Il codice di seguito viene illustrato come creare una casella combinata legata evento 'onSelect'.
<Input class = "easyui-combobox" name = "lingua"
data-options = "
URL: 'combobox_data.json',
ValueField: 'id',
textField: 'testo',
panelHeight: 'auto',
onSelect: function (record) {
alert (record.text)
} ">