PhoneGapPhoneGap HTML5 APIJavaScriptAPI JavaScript JavaScriptHTML5 API XUIJavaScript HTML5mediaJavaScript API HTML5canvas HTML5 05-01 JavaScript JavaScriptJavaScript 5.0BlackBerryECMAScript 3 JavaScript ECMAScript5JavaScript ECMAScript3 JavaScript 20112012CPU JavaScript 126 PhoneGap App
XUI 01 XUIJavaScriptPhoneGapRob Ellis PhoneGapBrian LerouxXUI jqueryapicss jquery jqueryjavascript API 02 03 04 05-0105 JavaScript 06 07 PhoneGap XUI jquerysizzlesizzle CSSDOM document.queryselectorall SizzleXUISizzle jquerysizzle Sizzle fxui 3XUI XUI Step01 http://xuijs.com/downloadsxui Step02 JavaScriptxui.js 3index.htmlscript CHAPTER 05 HTML5 API JavaScript 127
<script src="xui.js"></script> Step03 JavaScriptDOM XUIAPIJavaScript XUIDOMevent binding document.getelementbyid("foodform").addeventlistener("submit", function (evt) { x$("#foodform").on("submit", function (evt) { document.getelementbyidx$ CSS Step04 CSS Step05 addnewfooditem function addnewfooditem(foodname) { var newfooditem = document.createelement('li'); newfooditem.innerhtml = foodname; foodlist.appendchild(newfooditem); afooddetail.foodname = foodname; renderourtemplate(afooddetail, function (markup) { document.getelementbyid("fooddescription").innerhtml = markup; ); Step06 XUI DOMli x$('#foodlist').bottom('<li>' + foodname + '</li>'); 128 PhoneGap App
Step07 bottomxui XUIhttp://xuijs.com/docs/ dominner renderourtemplate renderourtemplate(afooddetail, function (markup) { x$("#fooddescription").inner(markup); ); 01 02 03 04 05-0105 Step08 CSS last-childsafari last-child JavaScript 06 07 x$('li:last-child')[0].innerhtml Step09 DOM DOMinnerHTML cabbage CHAPTER 05 HTML5 API JavaScript 129
Step10 XUI addnewfooditem function addnewfooditem(foodname) { x$('#foodlist').bottom('<li>' + foodname + '</li>'); x$('li:last-child').css({ 'font-weight': 'bold', 'color': 'white' ); afooddetail.foodname = foodname; renderourtemplate(afooddetail, function (markup) { x$("#fooddescription").inner(markup); ); Safari Step11 addnewfooditem 130 PhoneGap App
Step12 XUI css defaultstylejavascript var defaultstyle = { 'font-weight': '', 'color': '' 01 02 03 04 05-0105 Step13 defaultstyleli addnewfooditem var storelength = window.localstorage.length; JavaScript 06 07 for (var i; i < storelength; i++) { storedfoodname = window.localstorage.key(i); if (storedfoodname.match(/^food[.]/)) { addnewfooditem(window.localstorage.getitem(storedfoodname)) x$('li').css(defaultstyle); Step14 Safari CHAPTER 05 HTML5 API JavaScript 131
Step15 x$('li:last-child').css({ 'font-weight': 'bold', 'color': 'white' ); x$('li:nth-last-of-type(n+2)').css(defaultstyle); Step16 nth-last-of-typeli CSS3 Step17 CSS deleter 132 PhoneGap App
.deleter:after { color: red; font-family: sans-serif; font-size: 10px; content: 'X'; Step18 deleterdeleter:after CSS addnewfooditem x$('#foodlist').bottom('<li>' + foodname + ' <span class="deleter"></span></li>'); 01 02 03 04 05-0105 JavaScript 06 07 Step19 CHAPTER 05 HTML5 API JavaScript 133
Step20 XUIDOM index.htmlevent delegation Twitter API Step21 if Twitter elsedeleter DOM if (evt.target.tagname == "LI") { // Li else if (x$(evt.target).hasclass('deleter')) { x$(evt.target.parentnode).remove(); remove Step22 localstorage addnewfooditem localstorage if (storedfoodname.match(/^food[.]/)) addnewfooditem(window.localstorage.getitem(storedfoodname), storedfoodname); addnewfooditem var newfood = foodfield.value; var foodkey = "food." + (window.localstorage.length + 1); addnewfooditem(newfood, foodkey); 134 PhoneGap App
Step23 addnewfooditem function addnewfooditem(foodname, foodkey) { x$('#foodlist').bottom('<li id="' + foodkey + '">' + foodname + ' <span class="deleter"></span></li>'); id Step24 localstorage deleter else if (x$(evt.target).hasclass('deleter')) { var listiem = x$(evt.target.parentnode); var storagekey = listiem[0].id; 01 02 03 04 05-0105 JavaScript 06 07 listiem.remove(); window.localstorage.removeitem(storagekey); Step25 CHAPTER 05 HTML5 API JavaScript 135
XUIDOMCSS XUI Ajax XUIDojoPrototype jquery jquery JavaScript jquery PhoneGapjQuery jquery jquery jqtouchjquery Mobile jqueryjavascript XUIPhoneGapjQuery gzipped HTTP jquery PhoneGap CPU CPU XUIXUI jquery 136 PhoneGap App
PhoneGap XUIjQueryjQuery jqueryxui XUI jqueryjavascript XUI jqueryirc 01 02 03 04 05-0105 JavaScript 06 07 DOM jquery fxui 1. hiddendisplay:nonecss a. x$(evt.target.parentnode).hide() b. x$(evt.target.parentnode).addclass('hidden') c. x$(evt.target.parentnode).css({'display': 'none') 2. XUIjQueryplugin a. XUIjQuery$ x$ b. XUIjQuery CHAPTER 05 HTML5 API JavaScript 137