Najlepszy samouczek Wtyczka jQuery EasyUI W 2024 r. W tym samouczku możesz dowiedzieć się Plug-in listy,Widget,Zacząłem używać jQuery EasyUI,
jQuery EasyUI przewidziano utworzenie różnymi przeglądarkami stron internetowych kompletny zestaw komponentów, w tym potężne DataGrid (Siatka danych), TreeGrid (postać drzewa), panel (panel), kombi (połączenie rozwijanej) i tak dalej. Użytkownik może łączyć te składniki mogą być stosowane pojedynczo jeden.
Easyui Każdy składnik ma właściwości, metod i zdarzeń. Użytkownicy mogą łatwo rozszerzyć do tych składników.
Jest ona definiowana w jQuery.fn. {} .defaults Plugin. Na przykład, cechy dialogowych są zdefiniowane w jQuery.fn.dialog.defaults.
Zdarzenie (funkcja callback) jest zdefiniowana w jQuery.fn. {} .defaults Plugin.
Składnia wywołania metody: $ ( "selektor") wtyczki ( "metoda", parametr) ;.
w którym:
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
});
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)
} ">