Upload
dohanh
View
218
Download
3
Embed Size (px)
Citation preview
Plugins… erweitern die Funktionalität
Kürzere
Entwicklung
Stabil
Getestet
Zukunftsicher
Widget-Entwicklung für jQuery Mobile 6 |
Plugins… Wiederverwendung
Widget-Entwicklung für jQuery Mobile 8 |
l erstellen
l verwenden
l evtl. anpassen
l wiederverwenden
l -> profitieren
Plugins… Strukturierung
l Funktionalität strukturieren
l Übersicht wahren
l Fehler eingrenzen
l Erweiterungen erleichtern
Widget-Entwicklung für jQuery Mobile 9 |
jQuery UI widget factory
Widget-Entwicklung für jQuery Mobile 15 |
Just call me…
I will build the widget
you need!
jQuery UI widget factory
Widget-Entwicklung für jQuery Mobile 16 |
;
(function ( $, window) {
$.widget( "mobile.widgetName", $.mobile.widget, {
options: {
foo: true,
bar: false
},
_create: function() {...},
_destroy: function () {...},
publicMethod: function ( event ) {...},
_internalMethod: function () {...}
});
})( jQuery, this);
jQuery UI widget factory
Widget-Entwicklung für jQuery Mobile 17 |
;
(function ( $, window) {
$.widget( "mobile.widgetName", $.mobile.widget, {
options: {
foo: true,
bar: false
},
_create: function() {...},
_destroy: function () {...},
publicMethod: function ( event ) {...},
_internalMethod: function () {...}
});
})( jQuery, this);
Semikolon am Anfang
jQuery UI widget factory
Widget-Entwicklung für jQuery Mobile 18 |
;
(function ( $, window) {
$.widget( "mobile.widgetName", $.mobile.widget, {
options: {
foo: true,
bar: false
},
_create: function() {...},
_destroy: function () {...},
publicMethod: function ( event ) {...},
_internalMethod: function () {...}
});
})( jQuery, this);
Initialisierung und Optionen:
Name + Namespace
Optionen mit Defaults belegen!
jQuery UI widget factory
Widget-Entwicklung für jQuery Mobile 19 |
;
(function ( $, window) {
$.widget( "mobile.widgetName", $.mobile.widget, {
options: {
foo: true,
bar: false
},
_create: function() {...},
_destroy: function () {...},
publicMethod: function ( event ) {...},
_internalMethod: function () {...}
});
})( jQuery, this);
create: Erzeugung des Plugins
destroy: cleanup für Objekte und
Referenzen
jQuery UI widget factory
Widget-Entwicklung für jQuery Mobile 20 |
;
(function ( $, window) {
$.widget( "mobile.widgetName", $.mobile.widget, {
options: {
foo: true,
bar: false
},
_create: function() {...},
_destroy: function () {...},
publicMethod: function ( event ) {...},
_internalMethod: function () {...}
});
})( jQuery, this);
public Methoden um das Plugin
von außen zu beinflussen
interne Methode müssen mit
einem _ beginnen
Auto initialization
Widget-Entwicklung für jQuery Mobile 23 |
$.widget("mobile.postit"
…
… postit-plugin-code …
…
);
$(":jqmData(role='page')").live("pagecreate", function() {
$(":jqmData(role='postit')", this).each(function() {
$(this).postit();
});
});
Namespacing
Widget-Entwicklung für jQuery Mobile 25 |
<div data-role="postit"> some content </div>
<div data-exxcellent-role="postit"> some content </div>
Theming
Widget-Entwicklung für jQuery Mobile 28 |
this.options.theme = this.options.theme ||
$.mobile.getInheritedTheme(this.element, "c");
$(this.element).addClass("postit-style-" + this.options.theme);
Semantik
Widget-Entwicklung für jQuery Mobile 29 |
Wann immer möglich,
auf bestehende Semantik aufbauen
z.B. ein eigenes progress-Element, dass sich drehen lässt…
Semantik
Widget-Entwicklung für jQuery Mobile 30 |
<progress value="32" max="100"
data-orientation="90"> </progress>
Wann immer möglich,
auf bestehende Semantik aufbauen
z.B. ein eigenes progress-Element, dass sich drehen lässt…
Widget-Entwicklung für jQuery Mobile 33 |
Accessibility
$el.attr( "role", "dialog" )
RADIO
TREEITEM
…
Aktueller jQuery mobile Gerätepark
Widget-Entwicklung für jQuery Mobile 35 |
http://jquerymobile.com/blog/
Unit Tests
Widget-Entwicklung für jQuery Mobile 36 |
test("style applied", function() {
ok( $("#mydiv_1").hasClass( "postit" ),
"css class applied" )
});
test("style not applied", function() {
ok(!$("#mydiv_2").hasClass( "postit" ),
"css class not applied")
});
Widget-Entwicklung für jQuery Mobile 37 |
test("style applied", function() {
ok( $("#mydiv_1").hasClass( "postit" ),
"css class applied" )
});
test("style not applied", function() {
ok(!$("#mydiv_2").hasClass( "postit" ),
"css class not applied")
});
Dokumentation
l Mit Hilfe von jQuery mobile
l Methoden
l Events
l Beispiele
l Download URL
– Code + Kommentare
– minified Version
Widget-Entwicklung für jQuery Mobile 38 |
Fazit
Widget-Entwicklung für jQuery Mobile 40 |
Widget factory bietet
einen einfachen Ansatz!
best practice beachten:
auto initialization
namespacing
theming
semantik
wai-aria
testing
documentation
Widget-Entwicklung für jQuery Mobile 41 |
Danke!
Vielen Dank
für Ihre Aufmerksamkeit!
Referenzen:
http://jquerymobile.com/
“jQuery Mobile” von Jon Reid
O’Reilly Media
eXXcellent solutions GmbH
Beim Alten Fritz 2
89075 Ulm
http://www.exxcellent.de