jQuery EasyUI plug-in
jQuery EasyUI prevista a criação de páginas web cross-browser conjunto completo de componentes, incluindo datagrid poderoso (grade de dados), TreeGrid (forma de árvore), o painel (Panel), combinado (combinação drop-down) e assim por diante. Os utilizadores podem combinar estes componentes também podem ser usados por si só um.
Plug-in lista
Base (base)
- analisador analisador
- loader Easyloader
- draggable draggable
- Soltável pode ser colocado
- Redimensionável ajustável Tamanho
- guia de paginação
- caixa de pesquisa Searchbox
- Progress bar Progressbar
- balões Tooltip
Layout (Layout)
Menu (Menu) e Button (Botão)
Form (Formulário)
- Form Form
- caixa de verificação Validatebox
- combinação Combo
- caixa de combinação caixa de combinação
- árvore combinação Combotree
- grade composta Combogrid
- box digitais Numberbox
- caixa de Data Datebox
- Datetimebox Prazo Data
- calendário
- Spinner Spinner
- Numberspinner valor girador
- Timespinner girador tempo
- Slider Slider
Window (Janela)
DataGrid (Data Grid) e Tree (Árvore)
widget
Easyui Cada componente tem propriedades, métodos e eventos. Os usuários podem facilmente estender a esses componentes.
propriedade
É definido nos jQuery.fn. {} Plugin .defaults. Por exemplo, os atributos de diálogo são definidas no jQuery.fn.dialog.defaults.
evento
Evento (função de retorno) é definida no jQuery.fn. {} Plugin .defaults.
caminho
Método chamada sintaxe: $ ( 'selector') plugin ( "método", parâmetro) ;.
em que:
- seletor jQuery é o seletor de objeto.
- plugin é um nome de plug-in.
- método com ficha para o método existente.
- parâmetro é um objeto parâmetro pode ser um objeto, uma string ...
O método é definido no jQuery.fn. {} Plugin .methods. Cada método tem dois parâmetros: jq e param. O primeiro parâmetro 'jq' é necessário, uma referência para o objeto jQuery. O segundo parâmetro 'param' refere-se aos parâmetros do método reais passados. Por exemplo, o método componente de diálogo chamada abordagem "mymove 'estender, como segue:
$ .extend ($. Fn.dialog.methods, {
mymove: function (jq, newposition) {
voltar jq.each (function () {
$ (Este) .dialog ( 'movimento', newposition);
});
}
});
Agora você pode chamar o método 'mymove' para mover a caixa de diálogo (de diálogo) para o local especificado:
$ ( "# Dd). Dialog ( 'mymove', {
left: 200,
top: 100
});
Comecei a usar jQuery EasyUI
Baixar Biblioteca e referências EasyUI arquivos CSS e JavaScript em sua página.
<Link rel = tipo de "estilo" = "text / css" href = "easyui / temas / default / easyui.css"> <Link rel = tipo de "estilo" = "text / css" href = "easyui / temas / 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>
Uma vez que você faz referência a arquivos necessários EasyUI, você pode definir um componentes EasyUI através do uso de tags ou JavaScript. Por exemplo, para um painel de topo com uma função de dobrar, você precisa escrever o código HTML da seguinte forma:
<Div id = classe "p" = "do painel easyui" style = "width: 500px; height: 200px; padding: 10px;"
title = "Meu Painel" iconCls = "icon-salvar" dobrável = "true">
O conteúdo do painel
</ Div>
Durante a criação de um componente de marcação, atributo 'dados-options' é usado para apoiar o nome da propriedade desde a Versão 1.3 HTML5 compatível. Assim, você pode reescrever o código acima da seguinte forma:
<Div id = classe "p" = "do painel easyui" style = "width: 500px; height: 200px; padding: 10px;"
title = "meu painel"-opções de dados = "iconCls: 'icon-save', dobrável: true">
O conteúdo do painel
</ Div>
O código a seguir mostra como criar uma caixa de combinação ligada evento 'onSelect'.
<Input class = "easyui-combobox" name = "linguagem"
-opções de dados = "
url: 'combobox_data.json',
ValueField: 'id',
textField: 'texto',
panelHeight: 'auto',
onSelect: function (registro) {
alert (record.text)
} ">