######################
#### ------> Directory

######################
#### ------> Files:
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter02\firstindex.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter02\secondindex.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter03\example1-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter03\example1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\countdown-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\countdown.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\date.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\esc.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\example1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\isnan.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\pi.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\regex.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\render-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\render.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\scope1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\scoping-fixed.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\scoping.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\teststring.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\writingthedate-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\writingthedate.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\compound.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\deleteop1-orig.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\deleteop1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\equality.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\equality2.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\typeof.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\dowhile.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\foreach.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\forinloop.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\forloop.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\form1example-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\form1example.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\ifexample-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\ifexample.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\ifexample2.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\ifexample3.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\myexample.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\arguments.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\confirm-complete.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\confirm.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\listing7-1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\listing7-2.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\aststring.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\concat-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\concat-orig.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\concat.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\concat2-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\encode.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\foreach.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\numsort.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\proploop-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\proploop.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\sort.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\starstring.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\history.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\javatest-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\javatest.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location1-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location2-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location2.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location3.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\naviprops-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\naviprops.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\screen-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\screen.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter10\librarypage.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter10\CompletedCode\librarypage.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\docready-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\docready.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\listing11-1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\listing11-2.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\listing11-3.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\listing11-4.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\create.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\createid-jquery.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\createid.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\del-jquery.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\del.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\example1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\example2.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\getbyid-jquery.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\getbyid.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\getbytag-jquery.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\getbytag.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\setattrib-jquery.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\setattrib.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\showattribs-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\showattribs.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\example13-2.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\example13-3.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\example13-4.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\example13-5.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\useragent.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\hover1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\listing14-1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\nightsky-im.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\nightsky.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\hover\hover-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\hover\hover-jquery.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\hover\hover.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\preload\hover.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\preload-js\hover.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\slideshow\slideshow.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\slideshow-js\slide-prev.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\slideshow-js\slideshow-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\slideshow-js\slideshow.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\example1-jquery.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\example1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza-checkbox-js.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza-checkbox.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza-radio.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\selectbox.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\validating\grass-inline.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\validating\grass.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\css1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\css2-jq.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\css2.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\example16-3-jq.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\example16-3.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\form-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\form.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\cal-custom.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\cal-ex1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\cal.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\dialog-open.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\dialog.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\test-complete.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\test.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\collapsible.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\custom-icons.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\fillspace.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\hoverintent.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\mouseover.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\no-auto-height.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\sortable.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\addClass\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\addClass\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\animate\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\animate\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\categories.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\combobox.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\custom-data.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\folding.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\maxheight.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\multiple-remote.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\multiple.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\remote-jsonp.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\remote-with-cache.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\remote.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\xml.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\checkbox.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\icons.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\radio.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\splitbutton.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\toolbar.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\alt-field.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\animation.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\buttonbar.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\date-formats.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\date-range.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\dropdown-month-year.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\icon-trigger.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\inline.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\localization.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\min-max.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\multiple-calendars.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\other-months.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\show-week.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\animated.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\modal-confirmation.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\modal-form.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\modal-message.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\modal.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\constrain-movement.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\cursor-style.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\delay-start.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\handle.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\revert.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\scroll.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\snap-to.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\sortable.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\visual-feedback.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\accepted-elements.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\photo-manager.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\propagation.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\revert.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\shopping-cart.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\visual-feedback.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\effect\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\effect\easing.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\effect\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\hide\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\hide\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\position\cycler.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\position\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\position\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\progressbar\animated.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\progressbar\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\progressbar\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\progressbar\resize.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\removeClass\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\removeClass\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\animate.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\aspect-ratio.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\constrain-area.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\delay-start.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\helper.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\max-min.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\snap-to-grid.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\synchronous-resize.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\textarea.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\visual-feedback.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\selectable\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\selectable\display-grid.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\selectable\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\selectable\serialize.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\show\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\show\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\colorpicker.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\hotelrooms.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\multiple-vertical.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\range-vertical.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\range.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\rangemax.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\rangemin.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\side-scroll.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\slider-vertical.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\steps.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\tabs.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\connect-lists-through-tabs.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\connect-lists.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\delay-start.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\display-grid.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\empty-lists.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\items.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\placeholder.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\portlets.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\switchClass\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\switchClass\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\ajax.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\bottom.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\collapsible.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\cookie.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\manipulation.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\mouseover.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\sortable.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\vertical.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\ajax\content1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\ajax\content2.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\toggle\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\toggle\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\toggleClass\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\toggleClass\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\accordion.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\addClass.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\animate.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\autocomplete.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\button.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\datepicker.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\dialog.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\draggable.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\droppable.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\effect.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\hide.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\position.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\progressbar.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\removeClass.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\resizable.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\selectable.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\show.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\slider.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\sortable.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\switchClass.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\tabs.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\toggle.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\toggleClass.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\footerbar.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\footerbarb.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\headerbutton.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\link.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\links.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\navbar.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\pers-active.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\pers-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\pers.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\test-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\test.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\themee.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\nav.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\accessibility.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\features.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\getting-started.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\intro.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\platforms.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\data-attributes.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\events-nav.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\globalconfig.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\mediahelpers.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\themes.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\api-buttons.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-grouped.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-icons.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-inline.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-themes.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-types.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\dialogTransition.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\iOSFullscreen.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\jq17b1.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\loadingMessage.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\loadingMessageTextVisible.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\minScrollBack.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\pageLoadErrorMessage.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\pageTransition.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\pushState.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\touchOverflow.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\api-content.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-set-events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-set-methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-set-options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-set.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-grids.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-html.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-themes.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\docs-forms.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-all-compare.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-all-mini.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-all-native.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-all.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-sample.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-themes.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\plugin-eventsmethods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\checkboxes\events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\checkboxes\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\checkboxes\methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\checkboxes\options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\radiobuttons\events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\radiobuttons\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\radiobuttons\methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\radiobuttons\options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\search\events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\search\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\search\methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\search\options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\custom.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\slider\events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\slider\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\slider\methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\slider\options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\switch\events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\switch\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\switch\methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\switch\options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\textinputs\events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\textinputs\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\textinputs\methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\textinputs\options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\docs-lists.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-all-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-count.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-divider.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-formatting.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-forms-inset.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-forms.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-icons.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-inset.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-nested.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-ol.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-performance.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-readonly-inset.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-readonly.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-search-filtertext.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-search-inset.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-search-with-dividers.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-search.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-split-purchase.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-split.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-themes.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-thumbnails.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-ul.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-alt.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-buttons.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-overlay.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-success.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-with-select.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\multipage-template.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-anatomy.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-cache.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-customtransitions.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-dialogs.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-dynamic.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-links.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-navmodel.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-scripting.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-template.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-titles.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-transitions-dialog.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-transitions-flash-workaround.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-transitions-page.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-transitions.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\phonegap.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\touchoverflow.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\transition-success.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\docs-links-urltest\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\animals.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\colors.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\sample-reuse-page-external.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\sample-reuse-page.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\vehicles.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-a.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-b.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-c.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-d.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-e.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-events.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-a.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-b.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-c.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-d.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-e.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-f.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-g.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-h.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-methods.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-options.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fullscreen.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-themes.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\docs-bars.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\docs-footers.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\docs-headers.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\docs-navbar.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\footer-persist-a.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\footer-persist-b.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\footer-persist-c.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\footer-persist-d.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\index.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter20\ajax.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter20\isbn-full.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter20\isbn.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\bin\Debug\AppX\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\bin\Debug\AppX\pages\items\items.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\bin\Debug\AppX\pages\split\split.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\pages\items\items.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\pages\split\split.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\bin\Debug\AppX\default.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\bin\Debug\AppX\pages\items\items.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\bin\Debug\AppX\pages\split\split.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\pages\items\items.html
C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\pages\split\split.html

#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter02\firstindex.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My First Page</title>
</head>
<body>
	<script type="text/javascript">
        function yetAnotherAlert(textToAlert) {
            alert(textToAlert);
         }
        yetAnotherAlert("This is Chapter 2");
    </script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter02\secondindex.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My First Page</title>
    <script type="text/javascript" src="myscript.js"></script>
</head>
<body>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter03\example1-full.html
<!doctype html>
<html>
<head>
<script type="text/javascript">
function cubeme(incomingNum) {
    if (incomingNum == 1) {
        return "What are you doing?";
    } else {
        return Math.pow(incomingNum,3);
    }
}
</script>
    <title>A Chapter 3 Example</title>
</head>

<body>
<script type="text/javascript">
var theNum = 2;
var finalNum = cubeme(theNum);

if (isNaN(finalNum)) {
    alert("You should know that 1 to any power is 1.");
} else {
    alert("When cubed, " + theNum + " is " + finalNum);
}
</script>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter03\example1.html
<!doctype html>
<html>
<head>
<script type="text/javascript">

	//TODO: Add code here
	
</script>
    <title>A Chapter 3 Example</title>
</head>

<body>
<script type="text/javascript">

	//TODO:  Add code here
	
</script>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\countdown-full.html
<!doctype html>
<html>
<head>
    <title>the date</title>
</head>
<body>
    <p id="dateField">&nbsp;</p>
    <script type = "text/javascript">
    var today = new Date();
    var then = new Date();
    // January 1, 2014
    then.setFullYear(2014,0,1);
    var diff = then.getTime() - today.getTime();
    diff = Math.floor(diff / (1000 * 60 * 60 * 24));
    var dateLoc = document.getElementById("dateField");
    dateLoc.innerHTML = "There are " + diff + " days until 1/1/2014";
    </script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\countdown.html
<!doctype html>
<html>
<head>
    <title>the date</title>
</head>
<body>
    <p id="dateField">&nbsp;</p>
    <script type = "text/javascript">

		//TODO:  Add code here

    </script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\date.html
<!doctype html>
<html>
<head>
<title>Date</title>
</head>
<body>
<script type="text/javascript">
var myDate = new Date();
alert(myDate.toLocaleDateString());
var myDate = new Date();
alert(myDate.getYear());
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\esc.html
<!doctype html>
<html>
<head>
<title>Escaping</title>
</head>
<body>
<script type="text/javascript">
document.write("hello\t\t\"hello\"goodbye");
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\example1.html
<!doctype html>
<html>
<head>
<title>Hexadecimal Numbers</title>
<script type="text/javascript">

//TODO: Add code here
var h = 0xe;
var i = 0x2;
var j = h * i;
alert(j);

</script>
</head>
<body>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\isnan.html
<!doctype html>
<html>
<head>
<title>isNan</title>
</head>
<body>
<script type="text/javascript">
document.write("Is Not a Number: " + isNaN("4"));
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\pi.html
<!doctype html>
<html>
<head>
<title>Regex</title>
</head>
<body>
<script type="text/javascript">
var myString = "http://www.braingia.org";
var myRegex = /http:\/\/\w+\.(.*)/;
var results = myRegex.exec(myString);
alert(results[1]);
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\regex.html
<!doctype html>
<html>
<head>
<title>Regex</title>
</head>
<body>
<script type="text/javascript">
var myString = "http://www.braingia.org";
var myRegex = /http:\/\/\w+\.(.*)/;
var results = myRegex.exec(myString);
alert(results[1]);
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\render-full.html
<!doctype html>
<html>
<head>
    <title>the date</title>
    <script type = "text/javascript">
    var started = new Date();
    var now = started.getTime();
    </script>
</head>
<body>
    <p id="dateField">&nbsp;</p>
    <script type = "text/javascript">
    var bottom = new Date();
    var diff = (bottom.getTime() - now)/1000;
    var finaltime = diff.toPrecision(5);
    var dateLoc = document.getElementById("dateField");
    dateLoc.innerHTML = "Page rendered in " + finaltime + " seconds.";
    </script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\render.html
<!doctype html>
<html>
<head>
    <title>the date</title>
    <script type = "text/javascript">
    var started = new Date();
    var now = started.getTime();
    </script>
</head>
<body>
    <p id="dateField">&nbsp;</p>
    <script type = "text/javascript">

		//TODO:  Add code here

    </script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\scope1.html
<!doctype html>
<html>
<head>
<title>Scope</title>
</head>
<body>
<script type="text/javascript">
var aNewVariable = "I'm Global.";
function doSomething(incomingBits) {
    alert(aNewVariable);
    alert(incomingBits);
}
doSomething("An argument");
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\scoping-fixed.html
<!doctype html>
<html>
<head>
    <title>Scoping Example</title>
    <script type="text/javascript" >
    var aNewVariable = "is global.";
    function doSomething(incomingBits) {
        alert("Global variable within the function: " + aNewVariable);
        alert("Local variable within the function: " + incomingBits);
    }

    </script>

</head>
<body>
<script type="text/javascript" >
	var incomingBits = " must be defined if necessary.";
    doSomething("is a local variable");
    alert("Global var outside the function: " + aNewVariable);
    alert("Local var outside the function: " + incomingBits);
    
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\scoping.html
<!doctype html>
<html>
<head>
    <title>Scoping Example</title>
    <script type="text/javascript">
    	var aNewVariable = "is global.";
    	function doSomething(incomingBits) {
        	alert("Global variable within the function: " + aNewVariable);
        	alert("Local variable within the function: " + incomingBits);
    	}
    </script>
</head>
<body>
<script type="text/javascript">
	doSomething("is a local variable");
    alert("Global var outside the function: " + aNewVariable);
    alert("Local var outside the function: " + incomingBits);
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\teststring.html
<!doctype html>
<html>
<head>
<title>String Testing</title>
</head>
<body>
<script type="text/javascript">
var myString = "This is a string.";
alert(myString.substring(3));  //Returns "s is a string."
alert(myString.substring(3,9));  //Returns "s is a"
alert(myString.slice(3));  //Returns "s is a string."
alert(myString.substring(3,9));  //Returns "s is a"
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\writingthedate-full.html
<!doctype html>
<html>
<head>
    <title>the date</title>
</head>
<body>
    <p id="dateField">&nbsp;</p>
    <script type = "text/javascript">

    var myDate = new Date();
    var dateString = myDate.toLocaleDateString() + " " + myDate.toLocaleTimeString();
    var dateLoc = document.getElementById("dateField");
    dateLoc.innerHTML = "Hello - Page Rendered on " + dateString;
    </script>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter04\writingthedate.html
<!doctype html>
<html>
<head>
    <title>the date</title>
</head>
<body>
    <p id="dateField">&nbsp;</p>
    <script type = "text/javascript">

		//TODO:  Add code here
    
    </script>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\compound.html
<!doctype html>
<html>
<head>
    <title>Compound</title>

    <script type = "text/javascript">
		var myNum = 10;
		alert(myNum);
		myNum += 30;
		alert(myNum);
    </script>

</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\deleteop1-orig.html
<!doctype html>
<html>
<head>
    <title>The Delete Operator</title>
</head>
<body id="mainbody">
<script type="text/javascript">
    
	var polaris = new Object;
    polaris.constellation = "Ursa Minor";

	alert(polaris.constellation);
    delete(polaris.constellation);
    alert(polaris.constellation);
</script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\deleteop1.html
<!doctype html>
<html>
<head>
    <title>The Delete Operator</title>
</head>
<body id="mainbody">
<script type="text/javascript">

	//TODO Add code here
    
</script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\equality.html
<!doctype html>
<html>
<head>
    <title>Equality</title>
    <script type = "text/javascript">
    
	// TODO: add code here

	</script>
</head>
<body>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\equality2.html
<!doctype html>
<html>
<head>
    <title>Equality</title>
    <script type = "text/javascript">
    
	//TODO

	</script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter05\typeof.html
<!doctype html>
<html>
<head>
    <title>The Typeof Example</title>

    <script type = "text/javascript">

		//TODO Add code here

    </script>

</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\dowhile.html
<!doctype html>
<html>
<head>
    <title>Do While</title>
</head>
<body>
<script type="text/javascript">
var count = 0;
do {
    alert("Count is " + count);
    count++;
}
while (count < 3);

</script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\foreach.html
<!doctype html>
<html>
<head>
    <title>For Each In Loop Example</title>
</head>
<body>
<script type = "text/javascript">

    var star = new Object;

    star.name = "Polaris";
    star.type = "Double/Cepheid";
    star.constellation = "Ursa Minor";
    
    for each (var starValue in star) {
        alert(starValue + " is in the star object.");
    }
</script>
    
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\forinloop.html
<!doctype html>
<html>
<head>
    <title>For In Loop Example</title>
</head>
<body>
<script type = "text/javascript">

//TODO: add code here

</script>
    
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\forloop.html
<!doctype html>
<html>
<head>
    <title>For Loop Example</title>
</head>
<body>
<script type = "text/javascript" >

//TODO: Add code here

</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\form1example-full.html
<!doctype html>
<html>
<head>

    <title>Just Your Basic Form</title>
    <script type = "text/javascript">
    function alertName() {
        var name = document.forms[0].nametext.value;
        if (name == "steve") {
            alert("Hello Steve.  Welcome to Machine");
        }
        else if (name == "tim") {
            alert("Hello Tim.");
        }
        else {
            alert("Hello " + name);
        }
        return true;
    }  //end function
        
    </script>
</head>
<body>
<form id="myform" action="#" onsubmit="return alertName();">
<p>Username: <input id="nametext" name="username" type="text" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\form1example.html
<!doctype html>
<html>
<head>

    <title>Just Your Basic Form</title>
    <script type = "text/javascript">

		//TODO:  Add code here
        
    </script>
</head>
<body>
<form id="myform" action="#" onsubmit="return alertName();">
<p>Username: <input id="nametext" name="username" type="text" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\ifexample-full.html
<!doctype html>
<html>
<head>
    <title>An If Example</title>
</head>
<body>

<script type="text/javascript">
var inputNum = prompt("Please enter a number below 100:");
if (inputNum > 99) {
    alert("That number, " + inputNum + ", is not below 100.");
}

</script>

<p>This is an example from Chapter 6.</p>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\ifexample.html
<!doctype html>
<html>
<head>
    <title>An If Example</title>
</head>
<body>

<script type="text/javascript">

	//TODO:  Add code here

</script>

<p>This is an example from Chapter 6.</p>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\ifexample2.html
<!doctype html>
<html>
<head>
    <title>An If Example</title>
</head>
<body>

<script type="text/javascript">
var inputNum = prompt("Please enter a number below 100:");
if (isNaN(inputNum) || ((inputNum > 99) || (inputNum < 51))) {
	alert("That number, " + inputNum + ", is not between 50 and 100.");
}

</script>

<p>This is an example from Chapter 6.</p>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\ifexample3.html
<!doctype html>
<html>
<head>
    <title>An If Example</title>
</head>
<body>

<script type="text/javascript">
var inputNum = prompt("Please enter a number between 50 and 100:");

if (isNaN(inputNum)) {
    alert(inputNum + " doesn't appear to be a number.");
}
else if ((inputNum > 99) || (inputNum < 51)) {
    alert("That number, " + inputNum + ", is not between 50 and 100.");
}
else {
    alert("You entered a number: " + inputNum);
}

</script>

<p>This is an example from Chapter 6.</p>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter06\myexample.html
<!doctype html>
<html>
<head>
    <title>A Multi-Level Example</title>
</head>
<body>
<script type="text/javascript">
var inputNum = prompt("Please enter a number between 50 and 100:");
if (isNaN(inputNum)) {
    if (inputNum.match(/one|two|three|four|five|six|seven|eight|nine|ten/))
	{
        alert("While this is a number, it's not really a number to me.");
    } else {
        alert(inputNum + " doesn't appear to be a number.");
    }
} else if ((inputNum > 99) || (inputNum < 51)) {
    alert("That number, " + inputNum + ", is not between 50 and 100.");
}
</script>

<p>This is an example from Chapter 6.</p>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\arguments.html
<!doctype html>
<html> 
<head>
    <title>Arguments Array</title>
</head>
<body>
<script type="text/javascript">
function myFunction() {
    var firstArg = arguments[0];
    var secondArg = arguments[1];
    alert("firstArg is: " + firstArg);
    alert("secondArg is: " + secondArg);
}
myFunction("hello","world");
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\confirm-complete.html
<!doctype html>
<html>
<head>
    <title>Confirming Something</title>
    
    <script type="text/javascript">
    
    function processConfirm(answer) {
	var result = "";
        if (answer) {
            result = "Excellent.  We'll play a nice game of chess.";
        } else {
            result = "Maybe later then.";
        }
        return result;
    }

    </script>
</head>
<body>
<script type="text/javascript">
var confirmAnswer = confirm("Shall we play a game?");
var theAnswer = processConfirm(confirmAnswer);
alert(theAnswer);
</script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\confirm.html
<!doctype html>
<html>
<head>
    <title>Confirming Something</title>
    
    <script type="text/javascript">
    
	// TO DO: Add code here

    </script>
</head>
<body>
<script type="text/javascript">

//TO DO: Add code here

</script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\listing7-1.html
<!doctype html>
<html> 
<head>
    <title>Return Value</title>
</head>
<body>
<script type="text/javascript">
function multiplyNums(x) {
    return x * 2;
}
var theNumber = 10;
var result = multiplyNums(theNumber);
alert(result);
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter07\listing7-2.html
<!doctype html>
<html>
<head>
    <title>Order Fruit</title>
    <script type = "text/javascript">
    function orderFruit() {
        var total = 0;
        // Call another function to place order 
        return total;
    }
    </script>
</head>
<body>
<script type = "text/javascript">
	var result = orderFruit();
	alert("The total is " + result);
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\aststring.html
<!doctype html>
<html>
<head>
    <title>Join</title>
    <script type="text/javascript">


		var star = ["Polaris", "Deneb", "Vega", "Altair"];
		var starString = star.join("*");
		document.write(starString);


    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\concat-full.html
<!doctype html>
<html>
<head>
    <title>Concat</title>
    <script type="text/javascript">


    var star = ["Polaris", "Deneb", "Vega", "Altair"];

    for (var i = 0; i < star.length; i++) {
        alert(star[i]);
    }

    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\concat-orig.html
<!doctype html>
<html>
<head>
    <title>Concat</title>
    <script type="text/javascript">
/*    
    var star = ["Polaris", "Deneb", "Vega", "Altair"];

    var newstars = ["Aldebaran", "Rigel"];
    var morestars = star.concat(newstars);
    var mStarLength = morestars.length;
    for (var i = 0; i < mStarLength; i++) {
        alert(morestars[i]);
    }
var star = ["Polaris", "Deneb", "Vega", "Altair"];
var starString = star.join("*");
var star = ["Polaris", "Deneb", "Vega", "Altair"];
var sortedStars = star.sort();
var nums = [11,543,22,111];
var sortedNums = nums.sort();

alert(sortedNums);    
*/

//alert(encodeURI("http://www.braingia.org/a uri with spaces.htm"));

var candies = ["chocolate","licorice","mints"];
candies.forEach(function(candy) {
    alert(candy);
});    

    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\concat.html
<!doctype html>
<html>
<head>
    <title>Concat</title>
    <script type="text/javascript">

	//TO DO: Add code here

    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\concat2-full.html
<!doctype html>
<html>
<head>
    <title>Concat</title>
    <script type="text/javascript">


    var star = ["Polaris", "Deneb", "Vega", "Altair"];

    var newstars = ["Aldebaran", "Rigel"];
    var morestars = star.concat(newstars);
    var mStarLength = morestars.length;
    for (var i = 0; i < mStarLength; i++) {
        alert(morestars[i]);
    }


    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\encode.html
<!doctype html>
<html>
<head>
    <title>Encode</title>
    <script type="text/javascript">

		alert(encodeURI("http://www.braingia.org/a uri with spaces.htm"));

    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\foreach.html
<!doctype html>
<html>
<head>
    <title>Foreach</title>
    <script type="text/javascript">

		var candies = ["chocolate","licorice","mints"];
		candies.forEach(function(candy) {
    		alert(candy);
		});


    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\numsort.html
<!doctype html>
<html>
<head>
    <title>Number Sort</title>
    <script type="text/javascript">


		var nums = [11,543,22,111];
		var sortedNums = nums.sort();

		document.write(sortedNums);


    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\proploop-full.html
<!doctype html>
<html>
<head>
<title>Properties</title>

<script type="text/javascript">
    var star = {};

    function Star(constell,type,specclass,magnitude) {
        this.constellation = constell;
        this.type = type;
        this.spectralClass = specclass;
        this.mag  = magnitude;
    }

    star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);
    star["Mizar"] = new Star("Ursa Major","Spectroscopic Binary","A1 V",2.3);
    star["Aldebaran"] = new Star("Taurus","Irregular Variable","K5 III",0.85);
    star["Rigel"] = new Star("Orion","Supergiant with Companion","B8 Ia",0.12);
    star["Castor"] = new Star("Gemini","Multiple/Spectroscopic","A1 V",1.58);
    star["Albireo"] = new Star("Cygnus","Double","K3 II",3.1);
    star["Acrux"] = new Star("Crux","Double","B1 IV",0.8);
    star["Gemma"] = new Star("Corona Borealis","Eclipsing Binary","A0 V",2.23);
    star["Procyon"] = new Star("Canis Minor","Double","F5 IV",0.38);
    star["Sirius"] = new Star("Canis Major","Double","A1 V",-1.46);
    star["Rigil Kentaurus"] = new Star("Centaurus","Double","G2 V",-0.01);
    star["Deneb"] = new Star("Cygnus","Supergiant","A2 Ia",1.25);
    star["Vega"] = new Star("Lyra","White Dwarf","A0 V",0.03);
    star["Altair"] = new Star("Aquila","White Dwarf","A7 V",0.77);

</script>
</head>
<body>
<script type="text/javascript">
for (var element in star) {
	for (var propt in star[element]) {
    	alert(element + ": " + propt + " = " + star[element][propt]);
	}
}

</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\proploop.html
<!doctype html>
<html>
<head>
<title>Properties</title>

<script type="text/javascript">
    var star = {};

    function Star(constell,type,specclass,magnitude) {
        this.constellation = constell;
        this.type = type;
        this.spectralClass = specclass;
        this.mag  = magnitude;
    }

    star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);
    star["Vega"] = new Star("Lyra","White Dwarf","A0 V",0.03);
    star["Altair"] = new Star("Aquila","White Dwarf","A7 V",0.77);

</script>
</head>
<body>
<script type="text/javascript">

//TODO:  Add code here

</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\sort.html
<!doctype html>
<html>
<head>
    <title>Sort</title>
    <script type="text/javascript">


		var star = ["Polaris", "Deneb", "Vega", "Altair"];
		var sortedStars = star.sort();

		document.write(sortedStars);


    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter08\starstring.html
<!doctype html>
<html>
<head>
    <title>Join</title>
    <script type="text/javascript">


		var star = ["Polaris", "Deneb", "Vega", "Altair"];
		var starString = star.join();
		document.write(starString);


    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\history.html
<!doctype html>
<html>
<head>
    <title>History</title>
    <script type="text/javascript">
        function moveBack() {
            history.back();
			return false;
        }
        function moveForward() {
            history.forward();
			return false;
        }
    </script>
</head>
<body>
<p><a href="#" onclick="return moveBack();">Click to go back</a></p>
<p><a href="#" onclick="return moveForward();">Click to go forward</a></p>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\javatest-full.html
<!doctype html>
<html>
<head>
    <title>Java Test</title>
    <script type="text/javascript">
        if (navigator.javaEnabled()) {
            alert("Java is enabled");
        } else {
            alert("Java is not enabled");
        }
    </script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\javatest.html
<!doctype html>
<html>
<head>
    <title>Java Test</title>
    <script type="text/javascript">
    
		//TO DO: Add code here
	
	</script>
</head>
<body>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location1-full.html
<!doctype html>
<html>
<head>
    <title>Location, Location, Location</title>
</head>
<body>
    <script type="text/javascript">
            var body = document.getElementsByTagName("body")[0];
            for (var prop in location) {
                var elem = document.createElement("p");
                var text = document.createTextNode(prop + ": " +
					location[prop]);
                elem.appendChild(text);
                body.appendChild(elem);
            }
    </script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location1.html
<!doctype html>
<html>
<head>
    <title>Location, Location, Location</title>
</head>
<body>
    <script type="text/javascript">
    
	//TO DO: Add code here

	</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location2-full.html
<!doctype html>
<html>
<head>
    <title>Location, Location, Location</title>

</head>
<body> 
    <script type="text/javascript">
            var body = document.getElementsByTagName("body")[0];
            for (var prop in location) {
                var elem = document.createElement("p");
                var text = document.createTextNode(prop + ": " +
					location[prop]);
                elem.appendChild(text);
                body.appendChild(elem);
            }
            if (location.search) {
                var querystring = location.search;
                var splits = querystring.split('&');
                for (var i = 0; i < splits.length; i++) {
                    var splitpair = splits[i].split('=');
                    var elem = document.createElement("p");
                    var text = document.createTextNode(splitpair[0] + ": " + splitpair[1]);
                    elem.appendChild(text);
                    body.appendChild(elem);
                 }
            }
    </script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location2.html
<!doctype html>
<html>
<head>
    <title>Location, Location, Location</title>

</head>
<body> 
    <script type="text/javascript">
    
	//TO DO: Add code here

	</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\location3.html
<!doctype html>
<html>
<head>
    <title>Location, Location, Location</title>

</head>
<body> 
    <script type="text/javascript">
            var body = document.getElementsByTagName("body")[0];
            for (var prop in location) {
                var elem = document.createElement("p");
                var text = document.createTextNode(prop + ": " +
					location[prop]);
                elem.appendChild(text);
                body.appendChild(elem);
            }
            if (location.search) {
                var querystring = location.search.substring(1);
                var splits = querystring.split('&');
                for (var i = 0; i < splits.length; i++) {
                    var splitpair = splits[i].split('=');
                    var elem = document.createElement("p");
                    var text = document.createTextNode(splitpair[0] + ": " + splitpair[1]);
                    elem.appendChild(text);
                    body.appendChild(elem);
                 }
            }
    </script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\naviprops-full.html
<!doctype html>
<html>
<head>
    <title>The navigator Object</title>
</head>
<body>
    <script type="text/javascript">
            var body = document.getElementsByTagName("body")[0];
            for (var prop in navigator) {
                var elem = document.createElement("p");
                var text = document.createTextNode(prop + ": " +
					navigator[prop]);
                elem.appendChild(text);
                body.appendChild(elem);
            }
    </script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\naviprops.html
<!doctype html>
<html>
<head>
    <title>The navigator Object</title>
</head>
<body>
    <script type="text/javascript">
    
	//TO DO: Add code here

	</script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\screen-full.html
<!doctype html>
<html>
<head>
    <title>Screen</title>

</head>
<body>

   <script type = "text/javascript" >
        alert("Available Height: " + screen.availHeight);
        alert("Total Height: " + screen.height);
        alert("Available Width: " + screen.availWidth);
        alert("Total Width: " + screen.width);
    </script>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter09\screen.html
<!doctype html>
<html>
<head>
    <title>Screen</title>

</head>
<body>

   	<script type = "text/javascript">
    
		//TO DO: Add code here

	</script>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter10\librarypage.html
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
<script type="text/javascript" src="library.js"></script>
</head>
<body>
<script type="text/javascript">

// TODO Add call to the alert function here

</script>
</form>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter10\CompletedCode\librarypage.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>A Basic Example</title>
<script type="text/javascript" src="library.js"></script>
</head>
<body>
<script type="text/javascript">
MyLibrary.sendAlert("hello, this is the message");
</script>
</form>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\docready-full.html
<!doctype html>
<html>
<head>
<title>Document Ready</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
	$(document).ready(function() {
		alert("hi");
	});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\docready.html
<!doctype html>
<html>
<head>
<title>Document Ready</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>

<!--
	//TODO: Add code here.
	//Don't forget the <script> element!
	//And Remove the HTML comments too!
-->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\listing11-1.html
<!doctype html>
<html>
<head>
<title>Adding jQuery</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\listing11-2.html
<!doctype html>
<html>
<head>
<title>Table Test</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table>
  <tr>
    <td>Row 1 Column 1 of the table</td>
    <td>Row 1 Column 2 of the table</td>
  </tr>
  <tr>
    <td>Row 2 Column 1 of the table</td>
    <td>Row 2 Column 2 of the table</td>
  </tr>
  <tr>
    <td>Row 3 Column 1 of the table</td>
    <td>Row 3 Column 2 of the table</td>
  </tr>
  <tr>
    <td>Row 4 Column 1 of the table</td>
    <td>Row 4 Column 2 of the table</td>
  </tr>
  <tr>
    <td>Row 5 Column 1 of the table</td>
    <td>Row 5 Column 2 of the table</td>
  </tr>
  <tr>
    <td>Row 6 Column 1 of the table</td>
    <td>Row 6 Column 2 of the table</td>
  </tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
    $('tr:odd').css("background-color", "#abacab");
});
</script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\listing11-3.html
<!doctype html>
<html>
<head>
<title>Iteration Test</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table>
  <th>Team Name</th>
  <th>W-L Record</th>
  <th>Win Percentage</th>
  <tr>
    <td>Team 1</td>
    <td>12-8</td>
    <td class="percentage">.600</td>
  </tr>
  <tr>
    <td>Team 5</td>
    <td>11-9</td>
    <td class="percentage">.550</td>
  </tr>
  <tr>
    <td>Team 4</td>
    <td>10-10</td>
    <td class="percentage">.500</td>
  </tr>
  <tr>
    <td>Team 2</td>
    <td>9-11</td>
    <td class="percentage">.450</td>
  </tr>
  <tr>
    <td>Team 6</td>
    <td>6-14</td>
    <td class="percentage">.300</td>
  </tr>
  <tr>
    <td>Team 3</td>
    <td>2-18</td>
    <td class="percentage">.100</td>
  </tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
    $('tr:odd').css("background-color", "#abacab");
    $('.percentage').each(function() {
        if ($(this).text() >= .5) {
            $(this).css('font-weight', 'bold');
        }
    });
});
</script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter11\listing11-4.html
<!doctype html>
<html>
<head>
<title>Iteration Test</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table>
  <th>Team Name</th>
  <th>W-L Record</th>
  <th>Win Percentage</th>
  <tr>
    <td>Team 1</td>
    <td>12-8</td>
    <td class="percentage">.600</td>
  </tr>
  <tr>
    <td>Team 5</td>
    <td>11-9</td>
    <td class="percentage">.550</td>
  </tr>
  <tr>
    <td>Team 4</td>
    <td>10-10</td>
    <td class="percentage">.500</td>
  </tr>
  <tr>
    <td>Team 2</td>
    <td>9-11</td>
    <td class="percentage">.450</td>
  </tr>
  <tr>
    <td>Team 6</td>
    <td>6-14</td>
    <td class="percentage">.300</td>
  </tr>
  <tr>
    <td>Team 3</td>
    <td>2-18</td>
    <td class="percentage">.100</td>
  </tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
    $('tr:odd').css("background-color", "#abacab");
    $('.percentage').each(function() {
        if ($(this).text() >= .5) {
            $(this).parent().css('font-weight', 'bold');
        }
    });
});
</script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\create.html
<!doctype html>
<html>
<head>
    <title>Create</title>

</head>
<body>
    <script type="text/javascript">
    var newelement = document.createElement("p");
    document.body.appendChild(newelement);
    newelement.appendChild(document.createTextNode("Hello World"));
    </script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\createid-jquery.html
<!doctype html>
<html>
<head>
    <title>Create</title>
</head>
<body>
    <script type="text/javascript">
    var newelement = document.createElement("p");
    newelement.setAttribute("id","newelement");
    document.body.appendChild(newelement);
    newelement.appendChild(document.createTextNode("Hello World"));
    </script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\createid.html
<!doctype html>
<html>
<head>
    <title>Create</title>

</head>
<body>
    <script type="text/javascript">
    var newelement = document.createElement("p");
    newelement.setAttribute("id","newelement");
    document.body.appendChild(newelement);
    newelement.appendChild(document.createTextNode("Hello World"));
    </script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\del-jquery.html
<!doctype html>
<html>
<head>
    <title>Del</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
    <script type="text/javascript">
	$(document).ready(function() {
    for (var i = 0; i < 3; i++) {
        $("body").append("<p id=\"element" + i + "\">Hello World, I'm Element " + i + ".</p>");
    }
	$("#element1").remove();
	});
    </script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\del.html
<!doctype html>
<html>
<head>
    <title>Del</title>

</head>
<body>
    <script type="text/javascript">
    for (var i = 0; i < 3; i++) {
        var element = document.createElement("p");
        element.setAttribute("id","element" + i);
        document.body.appendChild(element);
        element.appendChild(document.createTextNode("Hello World, I'm Element " + i + "."));
    }
    var removeel = document.getElementById("element1");
    document.body.removeChild(removeel);

    </script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\example1.html
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Here's some text.</p>
<p>Here's more text.</p>
<p>Link to the <a href="http://www.w3.org">W3</a></p>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\example2.html
<!doctype html>
<html>
<head>
    <title>Get By Id</title>
    <script type="text/javascript">
    function checkhref() {
        var a1 = document.getElementById("w3link");
        alert(a1.href);
    }
    </script>
</head>
<body onload="checkhref();">
<p id="sometext">Here's some text.</p>
<p id="moretext">Here's more text.</p>
<p id="linkp">Link to the <a id="w3link" href="http://www.w3.org">W3</a></p>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\getbyid-jquery.html
<!doctype html>
<html>
<head>
    <title>Get By Id</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
    	function changetext() {
        	alert($("#sometext").text());
        	$("#sometext").text("Changed Text");
    	}
		changetext();
	});
    </script>
</head>
<body>
<p id="sometext">Here's some text.</p>
<p id="moretext">Here's more text.</p>
<p id="linkp">Link to the <a id="w3link" href="http://www.w3.org">W3</a></p>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\getbyid.html
<!doctype html>
<html>
<head>
    <title>Get By Id</title>
    <script type="text/javascript">
    function changetext() {
        var p1 = document.getElementById("sometext");
        alert(p1.innerHTML);
        p1.innerHTML = "Changed Text";
    }
    </script>
</head>
<body onload="return changetext();">
<p id="sometext">Here's some text.</p>
<p id="moretext">Here's more text.</p>
<p id="linkp">Link to the <a id="w3link" href="http://www.w3.org">W3</a></p>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\getbytag-jquery.html
<!doctype html>
<html>
<head>
    <title>Tag Name</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    		function changecolors() {
				$("td").each(function() {
            		$(this).css("background-color","#aaabba");
				});
        	}
    </script>
</head>
<body>
<table id="mytable" border="1">
<tr><td id="lefttd0">Left column</td><td id="righttd0">Right
column</td></tr>
<tr><td id="lefttd1">Left column</td><td id="righttd1">Right
column</td></tr>
<tr><td id="lefttd2">Left column</td><td id="righttd2">Right
column</td></tr>
</table>
<a href="#" onclick="return changecolors();">Click to Change Colors</a>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\getbytag.html
<!doctype html>
<html>
<head>
    <title>Tag Name</title>
    <script type="text/javascript">
    function changecolors() {
        var a1 = document.getElementsByTagName("td");

        var a1Length = a1.length;
        for (var i = 0; i < a1Length; i++) {
            a1[i].style.background = "#aaabba";
        }
   }

    </script>
</head>
<body>
<table id="mytable" border="1">
<tr><td id="lefttd0">Left column</td><td id="righttd0">Right
column</td></tr>
<tr><td id="lefttd1">Left column</td><td id="righttd1">Right
column</td></tr>
<tr><td id="lefttd2">Left column</td><td id="righttd2">Right
column</td></tr>
</table>
<a href="#" onclick="return changecolors();">Click to Change Colors</a>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\setattrib-jquery.html
<!doctype html>
<html>
<head>
    <title>Set Attrib</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<a href="http://www.braingia.org" id="braingialink">Steve Suehring's Web
Site</a>
<script type="text/javascript">
    alert($("#braingialink").attr("href"));
    $("#braingialink").attr("href","http://www.microsoft.com");
    alert($("#braingialink").attr("href"));
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\setattrib.html
<!doctype html>
<html>
<head>
    <title>Set Attrib</title>

</head>
<body>
<a href="http://www.braingia.org" id="braingialink">Steve Suehring's Web
Site</a>
<script type="text/javascript">
    var a1 = document.getElementById("braingialink");
    alert(a1.getAttribute("href"));
    a1.setAttribute("href","http://www.microsoft.com");
    alert(a1.getAttribute("href"));
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\showattribs-full.html
<!doctype html>
<html>
<head>
    <title>Show Attribs</title>
    <script type="text/javascript">
    function showattribs(e) {
        var e = document.getElementById("braingialink");
        var elemList = "";
        for (var element in e) {
            var attrib = e.getAttribute(element);
            elemList = elemList + element + ": " + attrib + "\n";
        }
        alert(elemList);
    }
    </script>
</head>
<body>
<a onclick="return showattribs();" href="http://www.braingia.org"
id="braingialink">Steve Suehring's
Web Site</a>
<script type="text/javascript">

</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter12\showattribs.html
<!doctype html>
<html>
<head>
    <title>Show Attribs</title>
    <script type="text/javascript">
    
		//TO DO: Add code here

	</script>
</head>
<body>
<a onclick="return showattribs();" href="http://www.braingia.org"
id="braingialink">Steve Suehring's
Web Site</a>
<script type="text/javascript">

</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\example13-2.html
<!doctype html>
<html>
<head>
<title>Trigger Test</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="myDiv">
Here is some text.<br>
It goes inside this div<br>
</div>
<p>
<a id="braingiaLink" href="http://www.braingia.org">Steve Suehring</a>
</p>
<script type="text/javascript">
$(document).ready(function() {

$('#braingiaLink').on("click", function() {
    alert("hello");
    return true;
});

$('#myDiv').on("click",function() {
	$('#braingiaLink').trigger("click");
});

});
</script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\example13-3.html
<!doctype html>
<html>
<head>
<title>timer</title>
<script type="text/javascript" src="ehandler.js"></script>
</head>
<body id="mainBody">
<p>Hello</p>
<script type="text/javascript">
function sendAlert() {
    alert("Hello");
}
function startTimer() {
    var timerID = window.setTimeout(sendAlert,3000);
}
var mainBody = document.getElementById("mainBody");
EHandler.add(mainBody, "load", function() { startTimer(); });
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\example13-4.html
<!doctype html>
<html>
<head>
<title>timer</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body id="mainBody">
<p>Hello</p>
<script type="text/javascript">
function sendAlert() {
    alert("Hello");
}
function startTimer() {
    var timerID = window.setTimeout(sendAlert,3000);
}
$(window).load(function() {
	startTimer();
});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\example13-5.html
<!doctype html>
<html>
<head>
<title>Trigger Test</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
#braingiaLink {
    border: solid 1px black;
    padding: 3px;
}
#wrapperP {
    padding: 50px;
}
</style>
</head>
<body>
<div id="myDiv">
Here is some text.<br>
It goes inside this div<br>
</div>
<p id="wrapperP">
<a id="braingiaLink" href="http://www.braingia.org">Steve Suehring</a>
</p>
<script type="text/javascript">
$(document).ready(function() {
$('#braingiaLink').click(function() {
    alert("hello");
    return true;
});

$('#myDiv').click(function() {
    $('#braingiaLink').click();
});

$('#wrapperP').mouseover(function() {
    $('#braingiaLink').hide();
});

$('#wrapperP').mouseout(function() {
    $('#braingiaLink').show();
});

});
</script>

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter13\useragent.html
<!doctype html>
<html>
<head>
<title>user agent</title>
</head>
<body>
<script type="text/javascript">

	alert(navigator.userAgent);

</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\hover1.html
<!doctype html>
<html>
<head>
<title>hover example</title>
</head>
<body>
<img id="home" name="img_home" src="home_default.png" alt="Home" 
onmouseover="window.document.img_home.src='home_over.png'" 
onmouseout="window.document.img_home.src='home_default.png'">
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\listing14-1.html
<!doctype html>
<html>
<head>
<title>hover example</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<img id="home" name="img_home" src="home_default.png" alt="Home" />
<script type="text/javascript">
$(window).load(function () {
	$('#home').hover(function() {
		$("#home").attr("src","home_over.png");
	}, function() {
		$("#home").attr("src","home_default.png");
	});
});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\nightsky-im.html
<!doctype html>
<html>
<head>
<title>Night Sky</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function loadConst() {
    var areas = document.getElementsByTagName("area");
    var areaLength = areas.length;
    for (var i = 0; i < areaLength; i++) {
        EHandler.add(areas[i],"mouseover", function(i) {
                        return function() {
                           document.getElementById("nightsky").src = "nightsky_map_" +
                               areas[i].id + ".gif";
                        };
                    }(i));
        EHandler.add(areas[i],"mouseout", function(i) {
                        return function() {
                            document.getElementById("nightsky").src =
                              "nightsky_map_default.gif";
                        };
                    }(i));
    }  //end for loop
}  // end function loadConst
</script>
</head>
<body>
<p><img id="nightsky" name="nightsky" src="nightsky_map_default.gif" isMap
useMap="#sky"
alt="The Night Sky"></p>
<p><map name="sky">
<area id="ursaminor" coords="119,180,264,228" alt="Ursa Minor" shape="RECT"
 href="http://en.wikipedia.org/wiki/Ursa_Minor">
<area id="draco" coords="66,68,193,170" alt="Draco" shape="RECT"
 href="http://en.wikipedia.org/wiki/Draco">
<area id="draco" coords="36,170,115,246" alt="Draco" shape="RECT"
 href="http://en.wikipedia.org/wiki/Draco">
<area id="draco" coords="118,249,174,328" alt="Draco" shape="RECT"
 href="http://en.wikipedia.org/wiki/Draco">
<area id="cepheus" coords="201,47,298,175" alt="Draco" shape="RECT"
 href="http://en.wikipedia.org/wiki/Cepheus_(constellation)">
<area id="cassie" coords="334,95,389,204" alt="Cassiopeia" shape="RECT"
 href="http://en.wikipedia.org/wiki/Cassiopeia_(constellation)">
</map></p>
<script type="text/javascript">
var bodyEl = document.getElementsByTagName("body")[0];
EHandler.add(bodyEl,"load", function() { loadConst(); });
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\nightsky.html
<!doctype html>
<html>
<head>
<title>Night Sky</title>
<script type="text/javascript">
</script>
</head>
<body>
<p><img id="nightsky" name="nightsky" src="nightsky_map_default.gif" isMap
useMap="#sky" alt="The Night Sky"></p>
<p><map name="sky">
<area coords="119,180,264,228" alt="Ursa Minor" shape="RECT"
 href="http://en.wikipedia.org/wiki/Ursa_Minor">
<area coords="66,68,193,170" alt="Draco" shape="RECT"
 href="http://en.wikipedia.org/wiki/Draco">
<area coords="36,170,115,246" alt="Draco" shape="RECT"
 href="http://en.wikipedia.org/wiki/Draco">
<area coords="118,249,174,328" alt="Draco" shape="RECT"
 href="http://en.wikipedia.org/wiki/Draco">
<area coords="201,47,298,175" alt="Draco" shape="RECT"
 href="http://en.wikipedia.org/wiki/Cepheus_(constellation)">
<area coords="334,95,389,204" alt="Cassiopeia" shape="RECT"
 href="http://en.wikipedia.org/wiki/Cassiopeia_(constellation)">
</map></p>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\hover\hover-full.html
<!doctype html>
<html>
<head>
<title>hover exercise</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<img id="home" name="img_home" src="home_default.png" alt="Home" /><br />
<img id="blog" name="img_blog" src="blog_default.png" alt="Blog" /><br />
<img id="about" name="img_about" src="about_default.png" alt="About" /><br
/>
<script type="text/javascript">
$(window).load(function () {
	$('img').hover(function() {
		$(this).attr("src",$(this).attr("id") + "_over.png");
	}, function() {
		$(this).attr("src",$(this).attr("id") + "_default.png");
	});
});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\hover\hover-jquery.html
<!doctype html>
<html>
<head>
<title>hover regular expression</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<img id="home" name="hover_home" src="home_default.png" alt="Home" /><br />
<img id="blog" name="hover_blog" src="blog_default.png" alt="Blog" /><br />
<img id="about" name="hover_about" src="about_default.png" alt="About" /><br />
<img id="logo" name="logo" src="logo.png" alt="Logo" /><br />
<script type="text/javascript">
$(window).load(function () {
	$('img[name^=hover]').hover(function() {
		$(this).attr("src",$(this).attr("id") + "_over.png");
	}, function() {
		$(this).attr("src",$(this).attr("id") + "_default.png");
	});
});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\hover\hover.html
<!doctype html>
<html>
<head>
<title>hover exercise</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<img id="home" name="img_home" src="home_default.png" alt="Home" /><br />
<img id="blog" name="img_blog" src="blog_default.png" alt="Blog" /><br />
<img id="about" name="img_about" src="about_default.png" alt="About" /><br
/>
<script type="text/javascript">

	//TODO: Add Code Here

</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\preload\hover.html
<!doctype html>
<html>
<head>
<title>hover regular expression</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<img id="home" name="hover_home" src="home_default.png" alt="Home" /><br />
<img id="blog" name="hover_blog" src="blog_default.png" alt="Blog" /><br />
<img id="about" name="hover_about" src="about_default.png" alt="About" /><br />
<img id="logo" name="logo" src="logo.png" alt="Logo" /><br />
<script type="text/javascript">
$(window).load(function () {
	$('img[name^=hover]').each(function() {
		var image = $('<img />').attr('src',$(this).attr("id") + "_over.png");
	});
		
	$('img[name^=hover]').hover(function() {
		$(this).attr("src",$(this).attr("id") + "_over.png");
	}, function() {
		$(this).attr("src",$(this).attr("id") + "_default.png");
	});
});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\preload-js\hover.html
<!doctype html>
<html>
<head>
<title>Rollover</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function rollover() {
    var images = document.getElementsByTagName("img");
    var imgLength = images.length;
    var preLoad = [];
    for (var i = 0; i < imgLength; i++) {
        if (images[i].id.match(/rollover/)) {
            preLoad[i] = new Image();
            preLoad[i].src = images[i].id + "_over.png";
            EHandler.add(images[i],"mouseover", function(i) {
                return function() {
                    images[i].src = images[i].id + "_over.png";
                };
            }(i));
            EHandler.add(images[i],"mouseout", function(i) {
                return function() {
                    images[i].src = images[i].id + "_default.png";
                };
            }(i));
        }
    }
}
</script>
</head>
<body>
<p><img id="rollover_home" name="img_home" src="rollover_home_default.png"
        alt="Home"></p>
<p><img id="rollover_about" name="img_about" src="rollover_about_default.png"
        alt="About"></p>
<p><img id="rollover_blog" name="img_blog" src="rollover_blog_default.png"
        alt="Blog"></p>
<p><img id="logo" name="img_logo" src="logo.png" alt="Braingia Logo"></p>
<script type="text/javascript">
var bodyEl = document.getElementsByTagName("body")[0];
EHandler.add(bodyEl,"load", function() { rollover(); });
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\slideshow\slideshow.html
<!doctype html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var images = ['home_default.png','about_default.png','blog_default.png','logo.png'];
function nextImage() {
	var index = $('img[name=slideimage]').attr("id");
    if (index == images.length - 1) {
        index = 0;
    } else {
        index++;
    }
    $('img[name=slideimage]').attr("src",images[index]);
    $('img[name=slideimage]').attr("id",index);
}
function prevImage() {
	var index = $('img[name=slideimage]').attr("id");
    if (index == 0) {
        index = images.length - 1;
    } else {
        index--;
    }
    $('img[name=slideimage]').attr("src",images[index]);
    $('img[name=slideimage]').attr("id",index);
}

</script>
</head>
<body>
<p><img id="0" name="slideimage" src="home_default.png" alt="Home"></p>
<form name="slideform">
<input type="button" id="prevbtn" value="Previous">
<input type="button" id="nextbtn" value="Next">
</form>
<script type="text/javascript">
$(window).load(function() {
	$("#prevbtn").on("click",function() {
		prevImage();
	});
	$("#nextbtn").on("click",function() {
		nextImage();
	});
});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\slideshow-js\slide-prev.html
<!doctype html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
var images = ['home_default.png','about_default.png','blog_default.png','logo.png'];
function nextImage() {
    var img = document.getElementById("slideimage");
    var imgname = img.name.split("_");
    var index = imgname[1];
    if (index == images.length - 1) {
        index = 0;
    } else {
        index++;
    }
    img.src = images[index];
    img.name = "image_" + index;
}
function prevImage() {
    var img = document.getElementById("slideimage");
    var imgname = img.name.split("_");
    var index = imgname[1];
    if (index == 0) {
        index = images.length - 1;
    } else {
        index--;
    }
    img.src = images[index];
    img.name = "image_" + index;}

</script>
</head>
<body>
<p><img id="slideimage" name="image_0" src="home_default.png" alt="Home"></p>
<form name="slideform">
<input type="button" id="prevbtn" value="Previous">
<input type="button" id="nextbtn" value="Next">
</form>
<script type="text/javascript">
var nextBtn = document.getElementById("nextbtn");var prevBtn = document.getElementById("prevbtn");
EHandler.add(nextBtn,"click",function() { 
    nextImage(); 
});
EHandler.add(prevBtn,"click",function() { 
    prevImage(); 
});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\slideshow-js\slideshow-full.html
<!doctype html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
var images = ['home_default.png','about_default.png','blog_default.png','logo.png'];
function nextImage() {
    var img = document.getElementById("slideimage");
    var imgname = img.name.split("_");
    var index = imgname[1];
    if (index == images.length - 1) {
        index = 0;
    } else {
        index++;
    }
    img.src = images[index];
    img.name = "image_" + index;
}
</script>
</head>
<body>
<p><img id="slideimage" name="image_0" src="home_default.png" alt="Home"></p>
<form name="slideform">
<input type="button" id="nextbtn" value="Next">
</form>
<script type="text/javascript">
var nextBtn = document.getElementById("nextbtn");
EHandler.add(nextBtn,"click",function() { nextImage(); });
</script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter14\slideshow-js\slideshow.html
<!doctype html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">

	//TODO:  Add code here

</script>
</head>
<body>
<p><img id="slideimage" name="image_0" src="home_default.png" alt="Home"></p>
<form name="slideform">
<input type="button" id="nextbtn" value="Next">
</form>
<script type="text/javascript">
var nextBtn = document.getElementById("nextbtn");
EHandler.add(nextBtn,"click",function() { nextImage(); });
</script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\example1-jquery.html
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#myForm").submit(function(eventObj) {
   		if ($("#textbox1").val() == "") {
        	alert("Name is required.");
        	eventObj.preventDefault();
        	return false;
    	} else {
        	alert("Hello " + $("#textbox1").val());
        	return true;
    	}
	});
});
</script>
</head>
<body>
<p>A Basic Form Example</p>
<form id="myForm" action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
</form>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\example1.html
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function formValid(eventObj) {
        if (document.forms[0].textname.value.length == 0) {
           	alert("Name is required.");
			if (eventObj.preventDefault) {
		   		eventObj.preventDefault();
			} else {
				window.event.returnValue = false;
			}
           	return false;
        } else {
           	alert("Hello " + document.forms[0].textname.value);
           	return true;
        }
        
}
</script>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname"
type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var formEl = document.getElementsByTagName("form")[0];
EHandler.add(formEl,"submit", function(eventObj) { formValid(eventObj); } );
</script>
</form>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza-checkbox-js.html
<!doctype html
<html>
<head>
    <title>Pizza</title>
    <script type="text/javascript" src="ehandler.js"></script>
    <script type="text/javascript">
    function prepza() {
        var checkboxes = document.forms["pizzaform"].toppingcheck.length;
        var newelement = document.createElement("p");
        newelement.setAttribute("id","orderheading");
        document.body.appendChild(newelement);
        newelement.appendChild(document.createTextNode("This pizza will have:"));

        for (var i = 0; i < checkboxes; i++) {
            if (document.forms["pizzaform"].toppingcheck[i].checked) {
                  var newelement = document.createElement("p");
                  newelement.setAttribute("id","newelement" + i);
                  document.body.appendChild(newelement);
                  newelement.appendChild(document.createTextNode(
                          document.forms["pizzaform"].toppingcheck[i].value));
            }
        }
    }
    </script>
</head>
<body>
<form id="pizzaform" action="#">
<p>Toppings:</p>
<input type="checkbox" id="topping1" value="Sausage"
    name="toppingcheck">Sausage<br>
<input type="checkbox" id="topping2" value="Pepperoni"
    name="toppingcheck">Pepperoni<br>
<input type="checkbox" id="topping3" value="Ham"
    name="toppingcheck">Ham<br>
<input type="checkbox" id="topping4" value="Green Peppers"
    name="toppingcheck">Green Peppers<br>
<input type="checkbox" id="topping5" value="Mushrooms"
    name="toppingcheck">Mushrooms<br>
<input type="checkbox" id="topping6" value="Onions"
    name="toppingcheck">Onions<br>
<input type="checkbox" id="topping7" value="Pineapple"
    name="toppingcheck">Pineapple<br>

<p><input type="button" id="prepBtn" name="prepBtn" value="Prep Pizza"></p>
</form>
<script type="text/javascript">
var prepBtn = document.getElementById("prepBtn");
EHandler.add(prepBtn,"click",function() { prepza(); });
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza-checkbox.html
<!doctype html>
<html>
<head>
    <title>Pizza</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    function prepza() {
		$("#orderheading").text("This pizza will have:");
		$("input[name=toppingcheck]:checked").each(function() {
			$("#orderheading").append('<p id="newelement' + $(this).val() + '">' + $(this).val() + '</p>');
        });
		return false;
    }
    </script>
</head>
<body>
<form id="pizzaform" action="#">
<p>Toppings:</p>
<input type="checkbox" id="topping1" value="Sausage"
    name="toppingcheck">Sausage<br>
<input type="checkbox" id="topping2" value="Pepperoni"
    name="toppingcheck">Pepperoni<br>
<input type="checkbox" id="topping3" value="Ham"
    name="toppingcheck">Ham<br>
<input type="checkbox" id="topping4" value="Green Peppers"
    name="toppingcheck">Green Peppers<br>
<input type="checkbox" id="topping5" value="Mushrooms"
    name="toppingcheck">Mushrooms<br>
<input type="checkbox" id="topping6" value="Onions"
    name="toppingcheck">Onions<br>
<input type="checkbox" id="topping7" value="Pineapple"
    name="toppingcheck">Pineapple<br>

<p><input type="button" id="prepBtn" name="prepBtn" value="Prep Pizza"></p>
<p id="orderheading"></p>
</form>
<script type="text/javascript">
	$(document).ready(function() {
		$("#prepBtn").on("click",function() {
			return prepza(this);
		})
	});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza-full.html
<!doctype html>
<html>
<head>
    <title>Pizza</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    function flip(pizzatype) {
        if (pizzatype.value == "Veggie Special") {
           $("#topping").val("veggies");
        } else if (pizzatype.value == "Meat Special") {
            $("#topping").val("meat");
        } else if (pizzatype.value == "Hawaiian") {
            $("#topping").val("hampineapple");
        }
    }
    </script>
</head>
<body>
<form id="pizzaform" action="#">
<p>
<input id="vegbutton" type="button" name="special_veg" value="Veggie Special">
<input id="meatbutton" type="button" name="special_meat" value="Meat Special">
<input id="hawbutton" type="button" name="special_hawaiian" value="Hawaiian">
</p>
Main Topping: <select id="topping" name="topping">
<option value="cheese" selected="selected">Cheese</option>
<option value="veggies">Veggies</option>
<option value="meat">Meat</option>
<option value="hampineapple">Ham & Pineapples</option>
</select>
</form>
<script type="text/javascript">
	$(document).ready(function() {
		$('input[name^=special]').each(function() {
			$(this).on("click",function() {
				flip(this);
			});
		});
	});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza-radio.html
<!doctype html>
<html>
<head>
    <title>Pizza</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    function prepza() {
		$("#orderheading").text("This pizza will have:");
		$("#orderheading").append('<p>' + $("input[name=crust]:checked").val() + ' Crust</p>');
		$("input[name=toppingcheck]:checked").each(function() {
			$("#orderheading").append('<p id="newelement' + $(this).val() + '">' + $(this).val() + '</p>');
        });
		return false;
    }
    </script>
</head>
<body>
<form id="pizzaform" action="#">
<table>
<tr><td>Toppings</td><td>Crust</td></tr>
<tr>
  <td><input type="checkbox" id="topping1" value="Sausage"
    name="toppingcheck">Sausage</td>
  <td><input type="radio" name="crust" value="Regular"
    checked="checked" id="radio1">Regular</td>
</tr>
<tr>
  <td><input type="checkbox" id="topping2" value="Pepperoni"
    name="toppingcheck">Pepperoni</td>
  <td><input type="radio" name="crust" value="Deep Dish"
    id="radio2" />Deep Dish</td>
</tr>
<tr>
  <td><input type="checkbox" id="topping3" value="Ham"
    name="toppingcheck">Ham</td>
  <td><input type="radio" name="crust" value="Thin" id="radio3">Thin</td>
</tr>
<tr>
  <td><input type="checkbox" id="topping4" value="Green Peppers"
    name="toppingcheck">Green Peppers</td>
  <td></td>
</tr>
<tr>
  <td><input type="checkbox" id="topping5" value="Mushrooms"
    name="toppingcheck">Mushrooms</td>
  <td></td>
</tr>
<tr>
  <td><input type="checkbox" id="topping6" value="Onions"
    name="toppingcheck">Onions</td>
  <td></td>
</tr>
<tr>
  <td><input type="checkbox" id="topping7" value="Pineapple"
    name="toppingcheck">Pineapple</td>
  <td></td>
</tr>
</table>
<p><input type="button" id="prepBtn" name="prepBtn" value="Prep Pizza"></p>
<p id="orderheading"></p>
</form>
<script type="text/javascript">
	$(document).ready(function() {
		$("#prepBtn").on("click",function() {
			return prepza(this);
		})
	});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\pizza.html
<!doctype html>
<html>
<head>
    <title>Pizza</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    
		//TODO: Add code here

	</script>
</head>
<body>
<form id="pizzaform" action="#">
<p>
<input id="vegbutton" type="button" name="special_veg" value="Veggie Special">
<input id="meatbutton" type="button" name="special_meat" value="Meat Special">
<input id="hawbutton" type="button" name="special_hawaiian" value="Hawaiian">
</p>
Main Topping: <select id="topping" name="topping">
<option value="cheese" selected="selected">Cheese</option>
<option value="veggies">Veggies</option>
<option value="meat">Meat</option>
<option value="hampineapple">Ham & Pineapples</option>
</select>
</form>
<script type="text/javascript">

	//TODO:  Add code here

</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\selectbox.html
<!doctype html>
<html>
<head>
<title>A Select Example</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#starselect").change(function(eventObj) {
		alert($("#starselect").val());
	});
});
</script>
</head>
<body>
<p>A Basic Select Example</p>
<form id="starform" action="">
Select A Constellation:
<select name="startype" id="starselect">
<option selected="selected"> </option>
<option value="Aquila">Aquila</option>
<option value="Centaurus">Centaurus</option>
<option value="Canis Major">Canis Major</option>
<option value="Canis Minor">Canis Minor</option>
<option value="Corona Borealis">Corona Borealis</option>
<option value="Crux">Crux</option>
<option value="Cygnus">Cygnus</option>
<option value="Gemini">Gemini</option>
<option value="Lyra">Lyra</option>
<option value="Orion">Orion</option>
<option value="Taurus">Taurus</option>
<option value="Ursa Major">Ursa Major</option>
<option value="Ursa Minor">Ursa Minor</option>
</select>
</form>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\validating\grass-inline.html
<!doctype html>
<html>
<head>
<title>Catalog Example</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<form name="catalogform" id="catalogform" action="catalog.php" method="POST">
<p>Order Blades of Grass From Steve Suehring's Lawn</p>
<div id="lawndiv"><img alt="steve suehring's lawn is dead" src="lawn.png" id="lawnpic"><br></div>
<p>Description: Steve is terrible at lawn care, therefore there's not much
   grass on his lawn.  Quantities are extremely limited.</p>
<p>Price:  $100.00 per blade</p>
<p>Quantity to order (Limit 3 per Household): <input type="text" name="quantity"></p>
<p><input type="submit" value="Place Order"></p>
</form>
<script type="text/javascript">
	$(document).ready(function() {
		$("#catalogform").on("submit",function(event) {
			if ($("input[name=quantity]").val() > 3) {
				$("input[name=quantity]").after('<span id="errorSpan"> Limit 3 per household</span>');
				$("#errorSpan").css("background-color","grey");
        	   	event.preventDefault();
           		return false;
        	} else {
	           	return true;
        	}
		});
	});	
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter15\validating\grass.html
<!doctype html>
<html>
<head>
<title>Catalog Example</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<form name="catalogform" id="catalogform" action="catalog.php" method="POST">
<p>Order Blades of Grass From Steve Suehring's Lawn</p>
<div id="lawndiv"><img alt="steve suehring's lawn is dead" src="lawn.png" id="lawnpic"><br></div>
<p>Description: Steve is terrible at lawn care, therefore there's not much
   grass on his lawn.  Quantities are extremely limited.</p>
<p>Price:  $100.00 per blade</p>
<p>Quantity to order (Limit 3 per Household): <input type="text" name="quantity"></p>
<p><input type="submit" value="Place Order"></p>
</form>
<script type="text/javascript">
	$(document).ready(function() {
		$("#catalogform").on("submit",function(event) {
			if ($("input[name=quantity]").val() > 3) {
				alert("Limit 3 per Household.");
        	   	event.preventDefault();
           		return false;
        	} else {
	           	return true;
        	}
		});
	});	
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\css1.html
<!doctype html>
<html>
<head>
<title>JavaScript Step by Step</title>
<style type="text/css">
h1 { font-family: arial; }
#tagline { font-weight: bold; }
</style>
</head>
<body>
<h1 id="heading">JavaScript Step by Step</h1>
<p id="tagline">JavaScript Step by Step is a book by Steve Suehring, published by Microsoft Press.</p>
<p>The book emphasizes standards-based JavaScript that works on multiple platforms through different browsers.</p>
</script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\css2-jq.html
<!doctype html>
<html>
<head>
<title>JavaScript Step by Step</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
h1 { font-family: arial; }
#tagline { font-weight: bold; }
</style>
</head>
<body>
<h1 id="heading">JavaScript Step by Step</h1>
<p id="tagline">JavaScript Step by Step is a book by Steve Suehring, published by
Microsoft Press.</p>
<p>The book emphasizes standards-based JavaScript that works on multiple platforms
through different browsers.</p>
<script type="text/javascript">
	$(document).ready(function() {
		$("p").css("font-family","arial");
	});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\css2.html
<!doctype html>
<html>
<head>
<title>JavaScript Step by Step</title>
<style type="text/css">
h1 { font-family: arial; }
#tagline { font-weight: bold; }
</style>
</head>
<body>
<h1 id="heading">JavaScript Step by Step</h1>
<p id="tagline">JavaScript Step by Step is a book by Steve Suehring, published by
Microsoft Press.</p>
<p>The book emphasizes standards-based JavaScript that works on multiple platforms
through different browsers.</p>
<script type="text/javascript">
	var pElements = document.getElementsByTagName("p");
	for (var i = 0; i < pElements.length; i++) {
    	pElements[i].style.fontFamily = "arial";
	}
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\example16-3-jq.html
<!doctype html>
<html>
<head>
<title>JavaScript Step by Step</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h1 style="font-family: arial; color: #0000FF;" id="heading">JavaScript Step by Step</h1>
<script type="text/javascript">
alert($("#heading").css("color"));
</script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\example16-3.html
<!doctype html>
<html>
<head>
<title>JavaScript Step by Step</title>
<style type="text/css">
</style>
</head>
<body>
<h1 style="font-family: arial; color: #0000FF;" id="heading">JavaScript Step by Step</h1>
<script type="text/javascript">
var heading = document.getElementById("heading");
if (typeof heading.currentStyle != "undefined") {
    var curStyle = heading.currentStyle.color;
} else if (typeof window.getComputedStyle != "undefined") {
    var curStyle =
        document.defaultView.getComputedStyle(heading,null).getPropertyValue("color");
}
alert(curStyle);
</script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\form-full.html
<!doctype html>
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<form name="formexample" id="formexample" action="#">
<div id="citydiv">
	City: <input id="city" name="city">
</div>
<div>
	<input id="submit" type="submit">
</div>
</form>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter16\form.html
<!doctype html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form name="formexample" id="formexample" action="#">
<div id="citydiv">
	City: <input id="city" name="city">
</div>
<div>
	<input id="submit" type="submit">
</div>
</form>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\cal-custom.html
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Datepicker</title>
    <link type="text/css" rel="stylesheet"
		href="css/ui-lightness/jquery-ui-1.8.22.custom.css" />
    <link type="text/css" rel="stylesheet"
         href="css/cal.css" />
    <script type="text/javascript"
		src="js/jquery-1.7.2.min.js">
	</script>
    <script type="text/javascript"
		src="js/jquery-ui-1.8.22.custom.min.js">
	</script>
    <script type="text/javascript"
        src="js/cal-custom.js">
    </script>
</head>
    <body>
        <div id="mainContainer">
        <form action="#" method="POST">
        <input type="text" name="cal" id="cal">
        </form>
        </div> <!-- end mainContainer -->
    </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\cal-ex1.html
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Datepicker</title>
    <link type="text/css" rel="stylesheet"
		href="css/ui-lightness/jquery-ui-1.8.22.custom.css" />
    <link type="text/css" rel="stylesheet"
         href="css/cal.css" />
    <script type="text/javascript"
		src="js/jquery-1.7.2.min.js">
	</script>
    <script type="text/javascript"
		src="js/jquery-ui-1.8.22.custom.min.js">
	</script>
    <script type="text/javascript"
        src="js/cal-ex1.js">
    </script>
</head>
    <body>
        <div id="mainContainer">
        <form action="#" method="POST">
        <input type="text" name="cal" id="cal">
        </form>
        </div> <!-- end mainContainer -->
    </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\cal.html
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Datepicker</title>
    <link type="text/css" rel="stylesheet"
		href="css/ui-lightness/jquery-ui-1.8.22.custom.css" />
    <link type="text/css" rel="stylesheet"
         href="css/cal.css" />
    <script type="text/javascript"
		src="js/jquery-1.7.2.min.js">
	</script>
    <script type="text/javascript"
		src="js/jquery-ui-1.8.22.custom.min.js">
	</script>
    <script type="text/javascript"
        src="js/cal.js">
    </script>
</head>
    <body>
        <div id="mainContainer">
        <form action="#" method="POST">
        <input type="text" name="cal" id="cal">
        </form>
        </div> <!-- end mainContainer -->
    </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\dialog-open.html
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Dialog</title>
    <link type="text/css" rel="stylesheet"
		href="css/ui-lightness/jquery-ui-1.8.22.custom.css" />
    <script type="text/javascript"
		src="js/jquery-1.7.2.min.js">
	</script>
    <script type="text/javascript"
		src="js/jquery-ui-1.8.22.custom.min.js">
	</script>
    <script type="text/javascript"
        src="js/dialog-open.js">
    </script>
</head>
    <body>
		<div id="opener">Click here to open the dialog</div>
		<div id="dialog" title="My Dialog">
			<p>Here's a dialog</p>
		</div>
    </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\dialog.html
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Dialog</title>
    <link type="text/css" rel="stylesheet"
		href="css/ui-lightness/jquery-ui-1.8.22.custom.css" />
    <script type="text/javascript"
		src="js/jquery-1.7.2.min.js">
	</script>
    <script type="text/javascript"
		src="js/jquery-ui-1.8.22.custom.min.js">
	</script>
    <script type="text/javascript"
        src="js/dialog.js">
    </script>
</head>
    <body>
		<div id="dialog" title="My Dialog">
			<p>Here's a dialog</p>
		</div>
    </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\index.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){

				// Accordion
				$("#accordion").accordion({ header: "h3" });

				// Tabs
				$('#tabs').tabs();

				// Dialog
				$('#dialog').dialog({
					autoOpen: false,
					width: 600,
					buttons: {
						"Ok": function() {
							$(this).dialog("close");
						},
						"Cancel": function() {
							$(this).dialog("close");
						}
					}
				});

				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});

				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});

				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});

				// Progressbar
				$("#progressbar").progressbar({
					value: 20
				});

				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); },
					function() { $(this).removeClass('ui-state-hover'); }
				);

			});
		</script>
		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>
	</head>
	<body>
	<h1>Welcome to jQuery UI!</h1>
	<p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of <a href="js/jquery-1.7.2.min.js">jQuery</a>, your personalized copy of <a href="js/jquery-ui-1.8.22.custom.min.js">jQuery UI (js/jquery-ui-1.8.22.custom.min.js)</a>, and <a href="css/ui-lightness/jquery-ui-1.8.22.custom.css">css/ui-lightness/jquery-ui-1.8.22.custom.css</a> which imports the entire jQuery UI CSS Framework. You can choose to link a subset of the CSS Framework depending on your needs. </p>
	<p style="font-size: 1.2em; line-height: 1.5; margin: 1em 0; width: 50%;">You've downloaded components and a theme that are compatible with jQuery 1.3+. Please make sure you are using jQuery 1.3+ in your production environment.</p>

	<p style="font-weight: bold; margin: 2em 0 1em; font-size: 1.3em;">YOUR COMPONENTS:</p>

		<!-- Accordion -->
		<h2 class="demoHeaders">Accordion</h2>
		<div id="accordion">
			<div>
				<h3><a href="#">First</a></h3>
				<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
			</div>
			<div>
				<h3><a href="#">Second</a></h3>
				<div>Phasellus mattis tincidunt nibh.</div>
			</div>
			<div>
				<h3><a href="#">Third</a></h3>
				<div>Nam dui erat, auctor a, dignissim quis.</div>
			</div>
		</div>

		<!-- Autocomplete -->
		<h2 class="demoHeaders">Autocomplete</h2>
		<div>
			<input id="autocomplete" style="z-index: 100; position: relative" title="type &quot;a&quot;" />
		</div>

		<!-- Button -->
		<h2 class="demoHeaders">Button</h2>
		<button id="button">A button element</button>
		<form style="margin-top: 1em;">
			<div id="radioset">
				<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
				<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
				<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
			</div>
		</form>


		<!-- Tabs -->
		<h2 class="demoHeaders">Tabs</h2>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
				<li><a href="#tabs-3">Third</a></li>
			</ul>
			<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
			<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
		</div>

		<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
		<h2 class="demoHeaders">Dialog</h2>
		<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>


		<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
		<div style="position: relative; width: 96%; height: 200px; padding:1% 4%; overflow:hidden;" class="fakewindowcontain">
			<p>Lorem ipsum dolor sit amet,  Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>

			<!-- ui-dialog -->
			<div class="ui-overlay"><div class="ui-widget-overlay"></div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div></div>
			<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
				<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				</div>
			</div>

		</div>


		<!-- ui-dialog -->
		<div id="dialog" title="Dialog Title">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>


		<h2 class="demoHeaders">Framework Icons (content color preview)</h2>
		<ul id="icons" class="ui-widget ui-helper-clearfix">

		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>

		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
		</ul>


		<!-- Slider -->
		<h2 class="demoHeaders">Slider</h2>
		<div id="slider"></div>

		<!-- Datepicker -->
		<h2 class="demoHeaders">Datepicker</h2>
		<div id="datepicker"></div>

		<!-- Progressbar -->
		<h2 class="demoHeaders">Progressbar</h2>
		<div id="progressbar"></div>

		<!-- Highlight / Error -->
		<h2 class="demoHeaders">Highlight / Error</h2>
		<div class="ui-widget">
			<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
				<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
				<strong>Hey!</strong> Sample ui-state-highlight style.</p>
			</div>
		</div>
		<br/>
		<div class="ui-widget">
			<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
				<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
				<strong>Alert:</strong> Sample ui-state-error style.</p>
			</div>
		</div>

	</body>
</html>





#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\test-complete.html
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Test Page</title>
    <link type="text/css" rel="stylesheet"
		href="css/ui-lightness/jquery-ui-1.8.22.custom.css" />
	<link type="text/css" rel="stylesheet"
		href="css/style.css" />
    <script type="text/javascript"
		src="js/jquery-1.7.2.min.js">
	</script>
    <script type="text/javascript"
		src="js/jquery-ui-1.8.22.custom.min.js">
	</script>
    <script type="text/javascript"
        src="js/custom.js">
    </script>
</head>
    <body>
        <div id="mainContainer">
        <div id="mainHeadingContainer">
            <div id="header">
                <h1>jQuery UI Test Page</h1>
				Here's some text!
			</div>
        </div>
        <form action="#" method="POST">
            <select name="effect">
            <option value="bounce">Bounce</option>
            <option value="drop">Drop</option>
            <option value="explode">Explode</option>
            <option value="fade">Fade</option>
            <option value="fold">Fold</option>
            <option value="highlight">Highlight</option>
            <option value="puff">Puff</option>
            <option value="pulsate">Pulsate</option>
            <option value="shake">Shake</option>
            <option value="slide">Slide</option>
            <option value="transfer">Transfer</option>
            </select>
        <input type="submit" name="submit" value="Run Effect">
        <input type="button" name="reset" value="Reset Page">
        <span id="trash"></span>
        </form>
        </div> <!-- end mainContainer -->
    </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\test.html
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Test Page</title>

	<!-- TODO:  Add links and scripts here -->


</head>
    <body>
        <div id="mainContainer">
        <div id="mainHeadingContainer">
            <div id="header">
                <h1>jQuery UI Test Page</h1>
				Here's some text!
			</div>
        </div>
        <form action="#" method="POST">

		<!--  TODO:  Add select dropdown here -->

        <input type="submit" name="submit" value="Run Effect">
        <input type="button" name="reset" value="Reset Page">
        <span id="trash"></span>
        </form>
        </div> <!-- end mainContainer -->
    </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Demos</title>
	<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
	<link rel="stylesheet" href="demos.css">
	<script src="../jquery-1.7.2.js"></script>
	<script src="../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../ui/jquery.ui.core.js"></script>
	<script src="../ui/jquery.ui.widget.js"></script>
	<script src="../ui/jquery.ui.mouse.js"></script>
	<script src="../ui/jquery.ui.accordion.js"></script>
	<script src="../ui/jquery.ui.autocomplete.js"></script>
	<script src="../ui/jquery.ui.button.js"></script>
	<script src="../ui/jquery.ui.datepicker.js"></script>
	<script src="../ui/jquery.ui.dialog.js"></script>
	<script src="../ui/jquery.ui.draggable.js"></script>
	<script src="../ui/jquery.ui.droppable.js"></script>
	<script src="../ui/jquery.ui.position.js"></script>
	<script src="../ui/jquery.ui.progressbar.js"></script>
	<script src="../ui/jquery.ui.resizable.js"></script>
	<script src="../ui/jquery.ui.selectable.js"></script>
	<script src="../ui/jquery.ui.slider.js"></script>
	<script src="../ui/jquery.ui.sortable.js"></script>
	<script src="../ui/jquery.ui.tabs.js"></script>
	<script src="../ui/jquery.effects.core.js"></script>
	<script src="../ui/jquery.effects.blind.js"></script>
	<script src="../ui/jquery.effects.bounce.js"></script>
	<script src="../ui/jquery.effects.clip.js"></script>
	<script src="../ui/jquery.effects.drop.js"></script>
	<script src="../ui/jquery.effects.explode.js"></script>
	<script src="../ui/jquery.effects.fold.js"></script>
	<script src="../ui/jquery.effects.highlight.js"></script>
	<script src="../ui/jquery.effects.pulsate.js"></script>
	<script src="../ui/jquery.effects.scale.js"></script>
	<script src="../ui/jquery.effects.shake.js"></script>
	<script src="../ui/jquery.effects.slide.js"></script>
	<script src="../ui/jquery.effects.transfer.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-af.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ar.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-az.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ca.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-cs.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-cy-GB.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-da.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-de.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-el.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-en-AU.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-en-NZ.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-eo.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-es.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-et.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-eu.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-fa.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-fi.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-fo.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-fr.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-gl.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-he.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-hi.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-hr.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-hu.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-hy.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-id.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-is.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-it.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ja.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ka.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-kk.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-km.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ko.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-lb.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-lt.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-lv.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-mk.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ml.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ms.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-nl.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-nl-BE.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-no.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-pl.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-pt.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-rm.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ro.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ru.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-sk.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-sl.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-sq.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-sr.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-sv.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-ta.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-th.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-tj.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-tr.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-uk.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-vi.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
	<script src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
	<script>
	$(function() {
		
		$('.left-nav a').click(function(ev) {
			window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
			loadPage(this.href);
			$('.left-nav a.selected').removeClass('selected');
			$(this).addClass('selected');
			ev.preventDefault();
		});
		
		if (window.location.hash) {
			if (window.location.hash.indexOf('|') === -1) {
				window.location.hash += '|default';	
			}			
			var path = window.location.href.replace(/(index\.html)?#/,'');
			path = path.replace('\|','/') + '.html';
			loadPage(path);
		}		

		function loadPage(path) {			
			var section = path.replace(/\/[^\/]+\.html/,'');
			var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' ');
			
			$('td.normal div.normal')
				.empty()
				.append('<h4 class="demo-subheader">Functional demo:</h4>')
				.append('<h3 class="demo-header">'+ header +'</h3>')
				.append('<div id="demo-config"></div>')
				.find('#demo-config')
					.append('<div id="demo-frame"></div><div id="demo-config-menu"></div><div id="demo-link"><a class="demoWindowLink" href="#"><span class="ui-icon ui-icon-newwin"></span>Open demo in a new window</a></div>')
					.find('#demo-config-menu')
						.load(section + '/index.html .demos-nav', function() {
							$('#demo-config-menu a').each(function() {
								this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1'));
								$(this).attr('target', 'demo-frame');
								$(this).click(function() {

									resetDemos();
									
									$(this).parents('ul').find('li').removeClass('demo-config-on');
									$(this).parent().addClass('demo-config-on');
									$('#demo-notes').fadeOut();

									//Set the hash to the actual page without ".html"
									window.location.hash = header + '|' + this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];

									loadDemo(this.getAttribute('href'));

									return false;
								});
							});

							if (window.location.hash) {
								var demo = window.location.hash.split('|')[1];
								$('#demo-config-menu a').each(function(){
									if (this.href.indexOf(demo + '.html') !== -1) {
										$(this).parents('ul').find('li').removeClass('demo-config-on');
										$(this).parent().addClass('demo-config-on');									
										loadDemo(this.href);										
									}
								});
							}

							updateDemoNotes();
						})
					.end()
					.find('#demo-link a')
						.bind('click', function(ev){
							window.open(this.href);
							ev.preventDefault();
						})
					.end()
				.end()
			;
			
			resetDemos();
		}
				
		function loadDemo(path) {
			var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1];
			$.get(path, function(data) {
				var source = data;
				data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
				data = data.replace(/<\/?link.*>/ig,""); //Remove link tags
				data = data.replace(/<\/?html.*>/ig,""); //Remove html tag
				data = data.replace(/<\/?body.*>/ig,""); //Remove body tag
				data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
				data = data.replace(/<\/?!doctype.*>/ig,""); //Remove doctype
				data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
				data = data.replace(/((href|src)=["'])(?!(http|#))/ig, "$1" + directory + "/");

				$('#demo-style').remove();
				$('#demo-frame').empty().html(data);
				$('#demo-frame style').clone().appendTo('head').attr('id','demo-style');
				$('#demo-link a').attr('href', path);
				updateDemoNotes();
				updateDemoSource(source);
				
				if (/default.html$/.test(path)) {
					$.get("documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) {
						$("#demo-source").after(html);
						$("#widget-docs").tabs();
						$(".param-header").click(function() {
							$(this).parent().toggleClass("param-open").end().next().toggle();
						});
						$(".docs-list-header").each(function() {
							var header = $(this);
							var details = header.next().find(".param-details").hide();
							$("a:first", header).click(function() {
								details.show().parent().addClass("param-open");
								return false;
							});
							$("a:last", header).click(function() {
								details.hide().parent().removeClass("param-open");
								return false;
							});
						});
					}, "html" );
				}
			}, "html" );
		}

		function updateDemoNotes() {
			var notes = $('#demo-frame .demo-description');
			if ($('#demo-notes').length == 0) {
				$('<div id="demo-notes"></div>').insertAfter('#demo-config');
			}
			$('#demo-notes').hide().empty().html(notes.html());
			$('#demo-notes').show();
			notes.hide();
		}
		
		function updateDemoSource(source) {
			if ($('#demo-source').length == 0) {
				$('<div id="demo-source"><a href="#" class="source-closed">View Source</a><div><pre><code></code></pre></div></div>').insertAfter('#demo-notes');
				$('#demo-source').find(">a").click(function() {
					$(this).toggleClass("source-closed").toggleClass("source-open").next().toggle();
					return false;
				}).end().find(">div").hide();
			}
			var cleanedSource = source
				.replace('themes/base/jquery.ui.all.css', 'theme/jquery.ui.all.css')
				.replace(/\s*\x3Clink.*demos\x2Ecss.*\x3E\s*/, '\r\n\t')
				.replace(/\x2E\x2E\x2F\x2E\x2E\x2F/g, '');

			$('#demo-source code').empty().text(cleanedSource);
		}
		
		function resetDemos() {
			$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
			$(".ui-dialog-content").remove();			
		}
				
	});
	</script>
</head>
<body>

<table class="layout-grid" cellspacing="0" cellpadding="0">
	<tr>
		<td class="left-nav">
			<dl class="demos-nav">
				<dt>Interactions</dt>
					<dd><a href="draggable/index.html">Draggable</a></dd>
					<dd><a href="droppable/index.html">Droppable</a></dd>
					<dd><a href="resizable/index.html">Resizable</a></dd>
					<dd><a href="selectable/index.html">Selectable</a></dd>
					<dd><a href="sortable/index.html">Sortable</a></dd>
				<dt>Widgets</dt>
					<dd><a href="accordion/index.html">Accordion</a></dd>
					<dd><a href="autocomplete/index.html">Autocomplete</a></dd>
					<dd><a href="button/index.html">Button</a></dd>
					<dd><a href="datepicker/index.html">Datepicker</a></dd>
					<dd><a href="dialog/index.html">Dialog</a></dd>
					<dd><a href="progressbar/index.html">Progressbar</a></dd>
					<dd><a href="slider/index.html">Slider</a></dd>
					<dd><a href="tabs/index.html">Tabs</a></dd>
				<dt>Effects</dt>
					<dd><a href="animate/index.html">Color Animation</a></dd>
					<dd><a href="toggleClass/index.html">Toggle Class</a></dd>
					<dd><a href="addClass/index.html">Add Class</a></dd>
					<dd><a href="removeClass/index.html">Remove Class</a></dd>
					<dd><a href="switchClass/index.html">Switch Class</a></dd>
					<dd><a href="effect/index.html">Effect</a></dd>
					<dd><a href="toggle/index.html">Toggle</a></dd>
					<dd><a href="hide/index.html">Hide</a></dd>
					<dd><a href="show/index.html">Show</a></dd>
				<dt>Utilities</dt>
					<dd><a href="position/index.html">Position</a></dd>
					<dd><a href="widget/index.html">Widget</a></dd>
				<dt>About jQuery UI</dt>
					<dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd>
					<dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd>					
					<dd><a href="http://jqueryui.com/docs/Changelog">Changelog</a></dd>
					<dd><a href="http://jqueryui.com/docs/Roadmap">Roadmap</a></dd>
					<dd><a href="http://jqueryui.com/docs/Subversion">Subversion Access</a></dd>
					<dd><a href="http://jqueryui.com/docs/Developer_Guide">UI Developer Guidelines</a></dd>
				<dt>Theming</dt>
					<dd><a href="http://jqueryui.com/docs/Theming">Theming jQuery UI</a></dd>
					<dd><a href="http://jqueryui.com/docs/Theming/API">jQuery UI CSS Framework</a></dd>
					<dd><a href="http://jqueryui.com/docs/Theming/Themeroller">ThemeRoller application</a></dd>
					<dd><a href="http://jqueryui.com/docs/Theming/ThemeSwitcher">Theme Switcher Widget</a></dd>

			</dl>
		</td>
		<td class="normal">

			<div class="normal">

					<h3>Instructions</h3>
					<p>
						These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them.
					</p>
				
			</div>

		</td>
	</tr>
</table>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\collapsible.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion - Collapse content</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#accordion" ).accordion({
			collapsible: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>collapsible</code> option to true. Click on the currently open section to collapse its content pane.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\custom-icons.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion - Customize icons</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		var icons = {
			header: "ui-icon-circle-arrow-e",
			headerSelected: "ui-icon-circle-arrow-s"
		};
		$( "#accordion" ).accordion({
			icons: icons
		});
		$( "#toggle" ).button().toggle(function() {
			$( "#accordion" ).accordion( "option", "icons", false );
		}, function() {
			$( "#accordion" ).accordion( "option", "icons", icons );
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
	</div>
</div>

<button id="toggle">Toggle icons</button>

</div><!-- End demo -->



<div class="demo-description">
<p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and selected (open) state.  Use any class from the UI CSS framework, or create custom classes with background images.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#accordion" ).accordion();
	});
	</script>
</head>
<body>

<div class="demo">

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		</p>
		<p>
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos.
		</p>
	</div>
</div>

</div><!-- End demo -->

<div class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\fillspace.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion - Fill space</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#accordion" ).accordion({
			fillSpace: true
		});
	});
	$(function() {
		$( "#accordionResizer" ).resizable({
			minHeight: 140,
			resize: function() {
				$( "#accordion" ).accordion( "resize" );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<h3 class="docs">Resize the outer container:</h3>
 
<div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content">

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
	</div>
</div>

<span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>
</div><!-- End accordionResizer -->

<div style="margin-top:7px; padding:10px; width:350px; height:50px;" class="ui-widget-content">I'm another panel</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the boolean <code>fillSpace</code> option to true, and the script will automatically set the dimensions of the accordion to the height of its parent container.  The accordion will also resize with its container if the container is <code>resizable</code>.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\hoverintent.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion - Open on hoverintent</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$("#accordion").accordion({
			event: "click hoverintent"
		});
	});
	
	var cfg = ($.hoverintent = {
		sensitivity: 7,
		interval: 100
	});

	$.event.special.hoverintent = {
		setup: function() {
			$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
		},
		teardown: function() {
			$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
		},
		handler: function( event ) {
			var self = this,
				args = arguments,
				target = $( event.target ),
				cX, cY, pX, pY;
			
			function track( event ) {
				cX = event.pageX;
				cY = event.pageY;
			};
			pX = event.pageX;
			pY = event.pageY;
			function clear() {
				target
					.unbind( "mousemove", track )
					.unbind( "mouseout", arguments.callee );
				clearTimeout( timeout );
			}
			function handler() {
				if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
					clear();
					event.type = "hoverintent";
					// prevent accessing the original event since the new event
					// is fired asynchronously and the old event is no longer
					// usable (#6028)
					event.originalEvent = {};
					jQuery.event.handle.apply( self, args );
				} else {
					pX = cX;
					pY = cY;
					timeout = setTimeout( handler, cfg.interval );
				}
			}
			var timeout = setTimeout( handler, cfg.interval );
			target.mousemove( track ).mouseout( clear );
			return true;
		}
	};
	</script>
</head>
<body>

<div class="demo">

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		</p>
		<p>
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos.
		</p>
	</div>
</div>

</div><!-- End demo -->

<div class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="fillspace.html">Fill space</a></li>
		<li><a href="no-auto-height.html">No auto height</a></li>
		<li><a href="collapsible.html">Collapse content</a></li>
		<li><a href="mouseover.html">Open on mouseover</a></li>
		<li><a href="hoverintent.html">Open on hoverintent</a></li>
		<li><a href="custom-icons.html">Customize icons</a></li>
		<li><a href="sortable.html">Sortable</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\mouseover.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion - Open on mouseover</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#accordion" ).accordion({
			event: "mouseover"
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Toggle sections open/closed on mouseover with the <code>event</code> option. The default value for event is "click."</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\no-auto-height.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion - No auto height</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#accordion" ).accordion({
			autoHeight: false,
			navigation: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="accordion">
	<h3><a href="#section1">Section 1</a></h3>
	<div>
		<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
	</div>
	<h3><a href="#section2">Section 2</a></h3>
	<div>
		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
	</div>
	<h3><a href="#section3">Section 3</a></h3>
	<div>
		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
		<ul>
			<li>List item</li>
			<li>List item</li>
			<li>List item</li>
			<li>List item</li>
			<li>List item</li>
			<li>List item</li>
			<li>List item</li>
		</ul>
		<a href="#othercontent">Link to other content</a>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Setting <code>autoHeight: false</code> allows to accordion panels to keep their native height.</p>
<p>In addition, the <code>navigation</code> option is enabled, opening the panel based on the current location, eg. no-auto-height.html#panel2 would open the second panel on page load. It also finds anchors within the content, so #othercontent will open the third section, as it contains a link with that href.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\accordion\sortable.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion - Sortable</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	/* IE has layout issues when sorting (see #5413) */
	.group { zoom: 1 }
	</style>
	<script>
	$(function() {
		$( "#accordion" )
			.accordion({
				header: "> div > h3"
			})
			.sortable({
				axis: "y",
				handle: "h3",
				stop: function( event, ui ) {
					// IE doesn't register the blur when sorting
					// so trigger focusout handlers to remove .ui-state-focus
					ui.item.children( "h3" ).triggerHandler( "focusout" );
				}
			});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="accordion">
	<div class="group">
		<h3><a href="#">Section 1</a></h3>
		<div>
			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
		</div>
	</div>
	<div class="group">
		<h3><a href="#">Section 2</a></h3>
		<div>
			<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
		</div>
	</div>
	<div class="group">
		<h3><a href="#">Section 3</a></h3>
		<div>
			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
			<ul>
				<li>List item one</li>
				<li>List item two</li>
				<li>List item three</li>
			</ul>
		</div>
	</div>
	<div class="group">
		<h3><a href="#">Section 4</a></h3>
		<div>
			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
		</div>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Drag the header to re-order panels.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\addClass\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - addClass demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
		.toggler { width: 500px; height: 200px; position: relative; }
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px;  padding: 1em;  font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
		.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
	</style>
	<script>
	$(function() {
		$( "#button" ).click(function() {
			$( "#effect" ).addClass( "newClass", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#effect" ).removeClass( "newClass" );
			}, 1500 );
		}
	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class=" ui-corner-all">
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
	</div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\addClass\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\animate\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - Animate demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
		.toggler { width: 500px; height: 200px; position: relative; }
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
	</style>
	<script>
	$(function() {
		$( "#button" ).toggle(
			function() {
				$( "#effect" ).animate({
					backgroundColor: "#aa0000",
					color: "#fff",
					width: 500
				}, 1000 );
			},
			function() {
				$( "#effect" ).animate({
					backgroundColor: "#fff",
					color: "#000",
					width: 240
				}, 1000 );
			}
		);
	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Animate</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\animate\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\categories.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Categories</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-autocomplete-category {
		font-weight: bold;
		padding: .2em .4em;
		margin: .8em 0 .2em;
		line-height: 1.5;
	}
	</style>
	<script>
	$.widget( "custom.catcomplete", $.ui.autocomplete, {
		_renderMenu: function( ul, items ) {
			var self = this,
				currentCategory = "";
			$.each( items, function( index, item ) {
				if ( item.category != currentCategory ) {
					ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
					currentCategory = item.category;
				}
				self._renderItem( ul, item );
			});
		}
	});
	</script>
	<script>
	$(function() {
		var data = [
			{ label: "anders", category: "" },
			{ label: "andreas", category: "" },
			{ label: "antal", category: "" },
			{ label: "annhhx10", category: "Products" },
			{ label: "annk K12", category: "Products" },
			{ label: "annttop C13", category: "Products" },
			{ label: "anders andersson", category: "People" },
			{ label: "andreas andersson", category: "People" },
			{ label: "andreas johnson", category: "People" }
		];
		
		$( "#search" ).catcomplete({
			delay: 0,
			source: data
		});
	});
	</script>
</head>
<body>

<div class="demo">
	<label for="search">Search: </label>
	<input id="search" />
</div><!-- End demo -->



<div class="demo-description">
<p>A categorized search result. Try typing "a" or "n".</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\combobox.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Combobox</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-combobox {
		position: relative;
		display: inline-block;
	}
	.ui-combobox-toggle {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-left: -1px;
		padding: 0;
		/* adjust styles for IE 6/7 */
		*height: 1.7em;
		*top: 0.1em;
	}
	.ui-combobox-input {
		margin: 0;
		padding: 0.3em;
	}
	</style>
	<script>
	(function( $ ) {
		$.widget( "ui.combobox", {
			_create: function() {
				var input,
					self = this,
					select = this.element.hide(),
					selected = select.children( ":selected" ),
					value = selected.val() ? selected.text() : "",
					wrapper = this.wrapper = $( "<span>" )
						.addClass( "ui-combobox" )
						.insertAfter( select );

				input = $( "<input>" )
					.appendTo( wrapper )
					.val( value )
					.addClass( "ui-state-default ui-combobox-input" )
					.autocomplete({
						delay: 0,
						minLength: 0,
						source: function( request, response ) {
							var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
							response( select.children( "option" ).map(function() {
								var text = $( this ).text();
								if ( this.value && ( !request.term || matcher.test(text) ) )
									return {
										label: text.replace(
											new RegExp(
												"(?![^&;]+;)(?!<[^<>]*)(" +
												$.ui.autocomplete.escapeRegex(request.term) +
												")(?![^<>]*>)(?![^&;]+;)", "gi"
											), "<strong>$1</strong>" ),
										value: text,
										option: this
									};
							}) );
						},
						select: function( event, ui ) {
							ui.item.option.selected = true;
							self._trigger( "selected", event, {
								item: ui.item.option
							});
						},
						change: function( event, ui ) {
							if ( !ui.item ) {
								var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
									valid = false;
								select.children( "option" ).each(function() {
									if ( $( this ).text().match( matcher ) ) {
										this.selected = valid = true;
										return false;
									}
								});
								if ( !valid ) {
									// remove invalid value, as it didn't match anything
									$( this ).val( "" );
									select.val( "" );
									input.data( "autocomplete" ).term = "";
									return false;
								}
							}
						}
					})
					.addClass( "ui-widget ui-widget-content ui-corner-left" );

				input.data( "autocomplete" )._renderItem = function( ul, item ) {
					return $( "<li></li>" )
						.data( "item.autocomplete", item )
						.append( "<a>" + item.label + "</a>" )
						.appendTo( ul );
				};

				$( "<a>" )
					.attr( "tabIndex", -1 )
					.attr( "title", "Show All Items" )
					.appendTo( wrapper )
					.button({
						icons: {
							primary: "ui-icon-triangle-1-s"
						},
						text: false
					})
					.removeClass( "ui-corner-all" )
					.addClass( "ui-corner-right ui-combobox-toggle" )
					.click(function() {
						// close if already visible
						if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
							input.autocomplete( "close" );
							return;
						}

						// work around a bug (likely same cause as #5265)
						$( this ).blur();

						// pass empty string as value to search for, displaying all results
						input.autocomplete( "search", "" );
						input.focus();
					});
			},

			destroy: function() {
				this.wrapper.remove();
				this.element.show();
				$.Widget.prototype.destroy.call( this );
			}
		});
	})( jQuery );

	$(function() {
		$( "#combobox" ).combobox();
		$( "#toggle" ).click(function() {
			$( "#combobox" ).toggle();
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<label>Your preferred programming language: </label>
	<select id="combobox">
		<option value="">Select one...</option>
		<option value="ActionScript">ActionScript</option>
		<option value="AppleScript">AppleScript</option>
		<option value="Asp">Asp</option>
		<option value="BASIC">BASIC</option>
		<option value="C">C</option>
		<option value="C++">C++</option>
		<option value="Clojure">Clojure</option>
		<option value="COBOL">COBOL</option>
		<option value="ColdFusion">ColdFusion</option>
		<option value="Erlang">Erlang</option>
		<option value="Fortran">Fortran</option>
		<option value="Groovy">Groovy</option>
		<option value="Haskell">Haskell</option>
		<option value="Java">Java</option>
		<option value="JavaScript">JavaScript</option>
		<option value="Lisp">Lisp</option>
		<option value="Perl">Perl</option>
		<option value="PHP">PHP</option>
		<option value="Python">Python</option>
		<option value="Ruby">Ruby</option>
		<option value="Scala">Scala</option>
		<option value="Scheme">Scheme</option>
	</select>
</div>
<button id="toggle">Show underlying select</button>

</div><!-- End demo -->



<div class="demo-description">
<p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p>
<p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\custom-data.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Custom data and display</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#project-label {
		display: block;
		font-weight: bold;
		margin-bottom: 1em;
	}
	#project-icon {
		float: left;
		height: 32px;
		width: 32px;
	}
	#project-description {
		margin: 0;
		padding: 0;
	}
	</style>
	<script>
	$(function() {
		var projects = [
			{
				value: "jquery",
				label: "jQuery",
				desc: "the write less, do more, JavaScript library",
				icon: "jquery_32x32.png"
			},
			{
				value: "jquery-ui",
				label: "jQuery UI",
				desc: "the official user interface library for jQuery",
				icon: "jqueryui_32x32.png"
			},
			{
				value: "sizzlejs",
				label: "Sizzle JS",
				desc: "a pure-JavaScript CSS selector engine",
				icon: "sizzlejs_32x32.png"
			}
		];

		$( "#project" ).autocomplete({
			minLength: 0,
			source: projects,
			focus: function( event, ui ) {
				$( "#project" ).val( ui.item.label );
				return false;
			},
			select: function( event, ui ) {
				$( "#project" ).val( ui.item.label );
				$( "#project-id" ).val( ui.item.value );
				$( "#project-description" ).html( ui.item.desc );
				$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

				return false;
			}
		})
		.data( "autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
				.appendTo( ul );
		};
	});
	</script>
</head>
<body>

<div class="demo">
	<div id="project-label">Select a project (type "j" for a start):</div>
	<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/>
	<input id="project"/>
	<input type="hidden" id="project-id"/>
	<p id="project-description"></p>
</div><!-- End demo -->



<div class="demo-description">
<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
<p>Try typing "j" to get a list of projects or just press the down arrow.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	</script>
</head>
<body>
	
<div class="demo">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\folding.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Accent folding</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];

		var accentMap = {
			"á": "a",
			"ö": "o"
		};
		var normalize = function( term ) {
			var ret = "";
			for ( var i = 0; i < term.length; i++ ) {
				ret += accentMap[ term.charAt(i) ] || term.charAt(i);
			}
			return ret;
		};

		$( "#developer" ).autocomplete({
			source: function( request, response ) {
				var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
				response( $.grep( names, function( value ) {
					value = value.label || value.value || value;
					return matcher.test( value ) || matcher.test( normalize( value ) );
				}) );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<form>
	<label for="developer">Developer: </label>
	<input id="developer" />
	</form>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p>
<p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>
	<div class="demos-nav">
		<h4>Examples</h4>
		<ul>
			<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
			<li><a href="remote.html">Remote datasource</a></li>
			<li><a href="remote-with-cache.html">Remote with caching</a></li>
			<li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
			<li><a href="maxheight.html">Scrollable results</a></li>
			<li><a href="combobox.html">Combobox</a></li>
			<li><a href="custom-data.html">Custom data and display</a></li>
			<li><a href="xml.html">XML data parsed once</a></li>
			<li><a href="categories.html">Categories</a></li>
			<li><a href="folding.html">Accent folding</a></li>
			<li><a href="multiple.html">Multiple values</a></li>
			<li><a href="multiple-remote.html">Multiple, remote</a></li>
		</ul>
	</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\maxheight.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Scrollable results</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-autocomplete {
		max-height: 100px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
	}
	/* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */
	* html .ui-autocomplete {
		height: 100px;
	}
	</style>
	<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	</script>
</head>
<body>
	
<div class="demo">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\multiple-remote.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Multiple, remote</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	</style>
	<script>
	$(function() {
		function split( val ) {
			return val.split( /,\s*/ );
		}
		function extractLast( term ) {
			return split( term ).pop();
		}

		$( "#birds" )
			// don't navigate away from the field on tab when selecting an item
			.bind( "keydown", function( event ) {
				if ( event.keyCode === $.ui.keyCode.TAB &&
						$( this ).data( "autocomplete" ).menu.active ) {
					event.preventDefault();
				}
			})
			.autocomplete({
				source: function( request, response ) {
					$.getJSON( "search.php", {
						term: extractLast( request.term )
					}, response );
				},
				search: function() {
					// custom minLength
					var term = extractLast( this.value );
					if ( term.length < 2 ) {
						return false;
					}
				},
				focus: function() {
					// prevent value inserted on focus
					return false;
				},
				select: function( event, ui ) {
					var terms = split( this.value );
					// remove the current input
					terms.pop();
					// add the selected item
					terms.push( ui.item.value );
					// add placeholder to get the comma-and-space at the end
					terms.push( "" );
					this.value = terms.join( ", " );
					return false;
				}
			});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<label for="birds">Birds: </label>
	<input id="birds" size="50" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p>
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\multiple.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Multiple values</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		function split( val ) {
			return val.split( /,\s*/ );
		}
		function extractLast( term ) {
			return split( term ).pop();
		}

		$( "#tags" )
			// don't navigate away from the field on tab when selecting an item
			.bind( "keydown", function( event ) {
				if ( event.keyCode === $.ui.keyCode.TAB &&
						$( this ).data( "autocomplete" ).menu.active ) {
					event.preventDefault();
				}
			})
			.autocomplete({
				minLength: 0,
				source: function( request, response ) {
					// delegate back to autocomplete, but extract the last term
					response( $.ui.autocomplete.filter(
						availableTags, extractLast( request.term ) ) );
				},
				focus: function() {
					// prevent value inserted on focus
					return false;
				},
				select: function( event, ui ) {
					var terms = split( this.value );
					// remove the current input
					terms.pop();
					// add the selected item
					terms.push( ui.item.value );
					// add placeholder to get the comma-and-space at the end
					terms.push( "" );
					this.value = terms.join( ", " );
					return false;
				}
			});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<label for="tags">Tag programming languages: </label>
	<input id="tags" size="50" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\remote-jsonp.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	#city { width: 25em; }
	</style>
	<script>
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
		}

		$( "#city" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "http://ws.geonames.org/searchJSON",
					dataType: "jsonp",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data.geonames, function( item ) {
							return {
								label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
								value: item.name
							}
						}));
					}
				});
			},
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.label :
					"Nothing selected, input was " + this.value);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<label for="city">Your city: </label>
	<input id="city" />
	Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\remote-with-cache.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Remote with caching</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	</style>
	<script>
	$(function() {
		var cache = {},
			lastXhr;
		$( "#birds" ).autocomplete({
			minLength: 2,
			source: function( request, response ) {
				var term = request.term;
				if ( term in cache ) {
					response( cache[ term ] );
					return;
				}

				lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
					cache[ term ] = data;
					if ( xhr === lastXhr ) {
						response( data );
					}
				});
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<label for="birds">Birds: </label>
	<input id="birds" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
<p>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\remote.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Remote datasource</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	</style>
	<script>
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
		}

		$( "#birds" ).autocomplete({
			source: "search.php",
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.value + " aka " + ui.item.id :
					"Nothing selected, input was " + this.value );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<label for="birds">Birds: </label>
	<input id="birds" />
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
<p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\autocomplete\xml.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - XML data parsed once</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	</style>
	<script>
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
		}

		$.ajax({
			url: "london.xml",
			dataType: "xml",
			success: function( xmlResponse ) {
				var data = $( "geoname", xmlResponse ).map(function() {
					return {
						value: $( "name", this ).text() + ", " +
							( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
						id: $( "geonameId", this ).text()
					};
				}).get();
				$( "#birds" ).autocomplete({
					source: data,
					minLength: 0,
					select: function( event, ui ) {
						log( ui.item ?
							"Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
							"Nothing selected, input was " + this.value );
					}
				});
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<label for="birds">London matches: </label>
	<input id="birds" />
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p>
<p>This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\checkbox.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button - Checkboxes</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#check" ).button();
		$( "#format" ).buttonset();
	});
	</script>
	<style>
	#format { margin-top: 2em; }
	</style>
</head>
<body>

<div class="demo">

<input type="checkbox" id="check" /><label for="check">Toggle</label>

<div id="format">
	<input type="checkbox" id="check1" /><label for="check1">B</label>
	<input type="checkbox" id="check2" /><label for="check2">I</label>
	<input type="checkbox" id="check3" /><label for="check3">U</label>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "input:submit, a, button", ".demo" ).button();
		$( "a", ".demo" ).click(function() { return false; });
	});
	</script>
</head>
<body>

<div class="demo">

<button>A button element</button>

<input type="submit" value="A submit button"/>

<a href="#">An anchor</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\icons.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button - Icons</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( ".demo button:first" ).button({
            icons: {
                primary: "ui-icon-locked"
            },
            text: false
        }).next().button({
            icons: {
                primary: "ui-icon-locked"
            }
        }).next().button({
            icons: {
                primary: "ui-icon-gear",
                secondary: "ui-icon-triangle-1-s"
            }
        }).next().button({
            icons: {
                primary: "ui-icon-gear",
                secondary: "ui-icon-triangle-1-s"
            },
            text: false
        });
	});
	</script>
</head>
<body>

<div class="demo">

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>

</div><!-- End demo -->



<div class="demo-description">
<p>Some buttons with various combinations of text and icons, here specified via metadata.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="radio.html">Radios</a></li>
		<li><a href="checkbox.html">Checkboxes</a></li>
		<li><a href="icons.html">Icons</a></li>
		<li><a href="toolbar.html">Toolbar</a></li>
		<li><a href="splitbutton.html">Split Button</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\radio.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button - Radios</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#radio" ).buttonset();
	});
	</script>
</head>
<body>

<div class="demo">

<form>
	<div id="radio">
		<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
		<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
		<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
	</div>
</form>

</div><!-- End demo -->



<div class="demo-description">
<p>A set of three radio buttons transformed into a button set.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\splitbutton.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button - Split button</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#rerun" )
			.button()
			.click(function() {
				alert( "Running the last action" );
			})
			.next()
				.button( {
					text: false,
					icons: {
						primary: "ui-icon-triangle-1-s"
					}
				})
				.click(function() {
					alert( "Could display a menu to select an action" );
				})
				.parent()
					.buttonset();
	});
	</script>
	<style>
		
	</style>
</head>
<body>

<div class="demo">

<div>
	<button id="rerun">Run last action</button>
	<button id="select">Select an action</button>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon and no text. Both are grouped together in a set.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\button\toolbar.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button - Toolbar</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#toolbar {
		padding: 10px 4px;
	}
	</style>
	<script>
	$(function() {
		$( "#beginning" ).button({
			text: false,
			icons: {
				primary: "ui-icon-seek-start"
			}
		});
		$( "#rewind" ).button({
			text: false,
			icons: {
				primary: "ui-icon-seek-prev"
			}
		});
		$( "#play" ).button({
			text: false,
			icons: {
				primary: "ui-icon-play"
			}
		})
		.click(function() {
			var options;
			if ( $( this ).text() === "play" ) {
				options = {
					label: "pause",
					icons: {
						primary: "ui-icon-pause"
					}
				};
			} else {
				options = {
					label: "play",
					icons: {
						primary: "ui-icon-play"
					}
				};
			}
			$( this ).button( "option", options );
		});
		$( "#stop" ).button({
			text: false,
			icons: {
				primary: "ui-icon-stop"
			}
		})
		.click(function() {
			$( "#play" ).button( "option", {
				label: "play",
				icons: {
					primary: "ui-icon-play"
				}
			});
		});
		$( "#forward" ).button({
			text: false,
			icons: {
				primary: "ui-icon-seek-next"
			}
		});
		$( "#end" ).button({
			text: false,
			icons: {
				primary: "ui-icon-seek-end"
			}
		});
		$( "#shuffle" ).button();
		$( "#repeat" ).buttonset();
	});
	</script>
</head>
<body>

<div class="demo">

<span id="toolbar" class="ui-widget-header ui-corner-all">
	<button id="beginning">go to beginning</button>
	<button id="rewind">rewind</button>
	<button id="play">play</button>
	<button id="stop">stop</button>
	<button id="forward">fast forward</button>
	<button id="end">go to end</button>
	
	<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
	
	<span id="repeat">
		<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
		<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
		<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
	</span>
</span>

</div><!-- End demo -->



<div class="demo-description">
<p>
	A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
	an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. 
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\alt-field.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Populate alternate field</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({
			altField: "#alternate",
			altFormat: "DD, d MM, yy"
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker">&nbsp;<input type="text" id="alternate" size="30"/></p>

</div><!-- End demo -->



<div class="demo-description">
<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options.  This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\animation.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Animations</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<script src="../../ui/jquery.effects.blind.js"></script>
	<script src="../../ui/jquery.effects.bounce.js"></script>
	<script src="../../ui/jquery.effects.clip.js"></script>
	<script src="../../ui/jquery.effects.drop.js"></script>
	<script src="../../ui/jquery.effects.fold.js"></script>
	<script src="../../ui/jquery.effects.slide.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker();
		$( "#anim" ).change(function() {
			$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker" size="30"/></p>

<p>Animations:<br />
	<select id="anim">
		<option value="show">Show (default)</option>
		<option value="slideDown">Slide down</option>
		<option value="fadeIn">Fade in</option>
		<option value="blind">Blind (UI Effect)</option>
		<option value="bounce">Bounce (UI Effect)</option>
		<option value="clip">Clip (UI Effect)</option>
		<option value="drop">Drop (UI Effect)</option>
		<option value="fold">Fold (UI Effect)</option>
		<option value="slide">Slide (UI Effect)</option>
		<option value="">None</option>
	</select>
</p>

</div><!-- End demo -->



<div class="demo-description">
<p>Use different animations when opening or closing the datepicker.  Choose an animation from the dropdown, then click on the input to see its effect.  You can use one of the three standard animations or any of the UI Effects.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\buttonbar.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Display button bar</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({
			showButtonPanel: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option.  Each button is enabled by default when the bar is displayed, but can be turned off with additional options.  Button text is customizable.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\date-formats.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Format date</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker();
		$( "#format" ).change(function() {
			$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker" size="30"/></p>

<p>Format options:<br />
	<select id="format">
		<option value="mm/dd/yy">Default - mm/dd/yy</option>
		<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
		<option value="d M, y">Short - d M, y</option>
		<option value="d MM, y">Medium - d MM, y</option>
		<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
		<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
	</select>
</p>

</div><!-- End demo -->



<div class="demo-description">
<p>Display date feedback in a variety of ways.  Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\date-range.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Select a Date Range</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#from" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 3,
			onSelect: function( selectedDate ) {
				$( "#to" ).datepicker( "option", "minDate", selectedDate );
			}
		});
		$( "#to" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 3,
			onSelect: function( selectedDate ) {
				$( "#from" ).datepicker( "option", "maxDate", selectedDate );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>

</div><!-- End demo -->



<div class="demo-description">
<p>Select the date range to search for.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker();
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\dropdown-month-year.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Display month &amp; year menus</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({
			changeMonth: true,
			changeYear: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.  Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\icon-trigger.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Icon trigger</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "images/calendar.gif",
			buttonImageOnly: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the icon next to the input field to show the datepicker.  Set the datepicker to open on focus (default behavior), on icon click, or both.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="date-formats.html">Format date</a></li>
		<li><a href="min-max.html">Restrict date range</a></li>
		<li><a href="localization.html">Localize calendar</a></li>
		<li><a href="alt-field.html">Populate alternate field</a></li>
		<li><a href="inline.html">Display inline</a></li>
		<li><a href="buttonbar.html">Display button bar</a></li>
		<li><a href="dropdown-month-year.html">Display month &amp; year menus</a></li>		
		<li><a href="other-months.html">Dates in other months</a></li>		
		<li><a href="show-week.html">Show week of the year</a></li>		
		<li><a href="multiple-calendars.html">Display multiple months</a></li>		
		<li><a href="icon-trigger.html">Icon trigger</a></li>
		<li><a href="animation.html">Animations</a></li>
		<li><a href="date-range.html">Date Range</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\inline.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Display inline</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker();
	});
	</script>
</head>
<body>

<div class="demo">

Date: <div id="datepicker"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Display the datepicker embedded in the page instead of in an overlay.  Simply call .datepicker() on a div instead of an input.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\localization.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Localize calendar</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-af.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ar.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-az.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-bg.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-bs.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ca.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-cs.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-cy-GB.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-da.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-de.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-el.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-en-AU.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-en-NZ.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-eo.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-es.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-et.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-eu.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-fa.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-fi.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-fo.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-fr.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-gl.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-he.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-hi.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-hr.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-hu.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-hy.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-id.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-is.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-it.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ja.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ka.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-kk.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-km.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ko.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-lb.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-lt.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-lv.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-mk.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ml.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ms.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-nl.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-nl-BE.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-no.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-pl.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-pt.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-rm.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ro.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ru.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-sk.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-sl.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-sq.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-sr.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-sv.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-ta.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-th.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-tj.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-tr.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-uk.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-vi.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
	<script src="../../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
		$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
		$( "#locale" ).change(function() {
			$( "#datepicker" ).datepicker( "option",
				$.datepicker.regional[ $( this ).val() ] );
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<p>Date: <input type="text" id="datepicker"/>&nbsp;
	<select id="locale">
		<option value="af">Afrikaans</option>
		<option value="sq">Albanian (Gjuha shqipe)</option>
		<option value="ar-DZ">Algerian Arabic</option>
		<option value="ar">Arabic (&#8235;(&#1604;&#1593;&#1585;&#1576;&#1610;</option>
		<option value="hy">Armenian (&#1344;&#1377;&#1397;&#1381;&#1408;&#1381;&#1398;)</option>
		<option value="az">Azerbaijani (Az&#601;rbaycan dili)</option>
		<option value="eu">Basque (Euskara)</option>
		<option value="bs">Bosnian (Bosanski)</option>
		<option value="bg">Bulgarian (&#1073;&#1098;&#1083;&#1075;&#1072;&#1088;&#1089;&#1082;&#1080; &#1077;&#1079;&#1080;&#1082;)</option>
		<option value="ca">Catalan (Catal&agrave;)</option>
		<option value="zh-HK">Chinese Hong Kong (&#32321;&#39636;&#20013;&#25991;)</option>
		<option value="zh-CN">Chinese Simplified (&#31616;&#20307;&#20013;&#25991;)</option>
		<option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option>
		<option value="hr">Croatian (Hrvatski jezik)</option>
		<option value="cs">Czech (&#269;e&#353;tina)</option>
		<option value="da">Danish (Dansk)</option>
		<option value="nl-BE">Dutch (Belgium)</option>
		<option value="nl">Dutch (Nederlands)</option>
		<option value="en-AU">English/Australia</option>
		<option value="en-NZ">English/New Zealand</option>
		<option value="en-GB">English/UK</option>
		<option value="eo">Esperanto</option>
		<option value="et">Estonian (eesti keel)</option>
		<option value="fo">Faroese (f&oslash;royskt)</option>
		<option value="fa">Farsi/Persian (&#8235;(&#1601;&#1575;&#1585;&#1587;&#1740;</option>
		<option value="fi">Finnish (suomi)</option>
		<option value="fr" selected="selected">French (Fran&ccedil;ais)</option>
		<option value="fr-CH">French/Swiss (Fran&ccedil;ais de Suisse)</option>
		<option value="gl">Galician</option>
		<option value="ge">Georgian</option>
		<option value="de">German (Deutsch)</option>
		<option value="el">Greek (&#917;&#955;&#955;&#951;&#957;&#953;&#954;&#940;)</option>
		<option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option>
		<option value="hi">Hindi (&#2361;&#2367;&#2306;&#2342;&#2368;)</option>
		<option value="hu">Hungarian (Magyar)</option>
		<option value="is">Icelandic (&Otilde;slenska)</option>
		<option value="id">Indonesian (Bahasa Indonesia)</option>
		<option value="it">Italian (Italiano)</option>
		<option value="ja">Japanese (&#26085;&#26412;&#35486;)</option>
		<option value="kk">Kazakhstan (Kazakh)</option>
		<option value="km">Khmer</option>
		<option value="ko">Korean (&#54620;&#44397;&#50612;)</option>
		<option value="lv">Latvian (Latvie&ouml;u Valoda)</option>
		<option value="lt">Lithuanian (lietuviu kalba)</option>
		<option value="lb">Luxembourgish</option>
		<option value="mk">Macedonian</option>
		<option value="ml">Malayalam</option>
		<option value="ms">Malaysian (Bahasa Malaysia)</option>
		<option value="no">Norwegian (Norsk)</option>
		<option value="pl">Polish (Polski)</option>
		<option value="pt">Portuguese (Portugu&ecirc;s)</option>
		<option value="pt-BR">Portuguese/Brazilian (Portugu&ecirc;s)</option>
		<option value="rm">Rhaeto-Romanic (Romansh)</option>
		<option value="ro">Romanian (Rom&acirc;n&#259;)</option>
		<option value="ru">Russian (&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;)</option>
		<option value="sr">Serbian (&#1089;&#1088;&#1087;&#1089;&#1082;&#1080; &#1112;&#1077;&#1079;&#1080;&#1082;)</option>
		<option value="sr-SR">Serbian (srpski jezik)</option>
		<option value="sk">Slovak (Slovencina)</option>
		<option value="sl">Slovenian (Slovenski Jezik)</option>
		<option value="es">Spanish (Espa&ntilde;ol)</option>
		<option value="sv">Swedish (Svenska)</option>
		<option value="ta">Tamil (&#2980;&#2990;&#3007;&#2996;&#3021;)</option>
		<option value="th">Thai (&#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618;)</option>
		<option value="tj">Tajikistan</option>
		<option value="tr">Turkish (T&uuml;rk&ccedil;e)</option>
		<option value="uk">Ukranian (&#1059;&#1082;&#1088;&#1072;&#1111;&#1085;&#1089;&#1100;&#1082;&#1072;)</option>
		<option value="vi">Vietnamese (Ti&#7871;ng Vi&#7879;t)</option>
		<option value="cy-GB">Welsh/UK (Cymraeg)</option>
	</select></p>

</div><!-- End demo -->



<div class="demo-description">
<p>Localize the datepicker calendar language and format (English / Western formatting is the default).  The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\min-max.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Restrict date range</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options.  Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D').  For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\multiple-calendars.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Display multiple months</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({
			numberOfMonths: 3,
			showButtonPanel: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\other-months.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Dates in other months</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({
			showOtherMonths: true,
			selectOtherMonths: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>The datepicker can show dates that come from other than the main month
	being displayed. These other dates can also be made selectable.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\datepicker\show-week.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Show week of the year</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({
			showWeek: true,
			firstDay: 1
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->



<div class="demo-description">
<p>The datepicker can show the week of the year. The default calculation follows
	the ISO 8601 definition: the week starts on Monday, the first week of the year
	contains the first Thursday of the year. This means that some days from one
	year may be placed into weeks 'belonging' to another year.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\animated.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Animation</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<script src="../../ui/jquery.effects.blind.js"></script>
	<script src="../../ui/jquery.effects.explode.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	// increase the default animation speed to exaggerate the effect
	$.fx.speeds._default = 1000;
	$(function() {
		$( "#dialog" ).dialog({
			autoOpen: false,
			show: "blind",
			hide: "explode"
		});

		$( "#opener" ).click(function() {
			$( "#dialog" ).dialog( "open" );
			return false;
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog" title="Basic dialog">
	<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>

</div><!-- End demo -->



<div class="demo-description">
<p>Dialogs may be animated by specifying an effect for the show and/or hide properties.  You must include the individual effects file for any effects you would like to use.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#dialog" ).dialog();
	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog" title="Basic dialog">
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<form>
	<input value="text input" /><br />
	<input type="checkbox" />checkbox<br />
	<input type="radio" />radio<br />
	<select>
		<option>select</option>
	</select><br /><br />
	<textarea>textarea</textarea><br />
</form>
</div><!-- End sample page content -->

</div><!-- End demo -->



<div class="demo-description">
<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe.  It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="animated.html">Animated dialog</a></li>
		<li><a href="modal.html">Modal dialog</a></li>
		<li><a href="modal-message.html">Modal message</a></li>
		<li><a href="modal-confirmation.html">Modal confirmation</a></li>
		<li><a href="modal-form.html">Modal form</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\modal-confirmation.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Modal confirmation</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
	
		$( "#dialog-confirm" ).dialog({
			resizable: false,
			height:140,
			modal: true,
			buttons: {
				"Delete all items": function() {
					$( this ).dialog( "close" );
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog-confirm" title="Empty the recycle bin?">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
	<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
	<form>
		<input value="text input" /><br />
		<input type="checkbox" />checkbox<br />
		<input type="radio" />radio<br />
		<select>
			<option>select</option>
		</select><br /><br />
		<textarea>textarea</textarea><br />
	</form>
</div><!-- End sample page content -->

</div><!-- End demo -->



<div class="demo-description">
<p>Confirm an action that may be destructive or important.  Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\modal-form.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Modal form</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
	<script>
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
		var name = $( "#name" ),
			email = $( "#email" ),
			password = $( "#password" ),
			allFields = $( [] ).add( name ).add( email ).add( password ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"Create an account": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( name, "username", 3, 16 );
					bValid = bValid && checkLength( email, "email", 6, 80 );
					bValid = bValid && checkLength( password, "password", 5, 16 );

					bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
					bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

					if ( bValid ) {
						$( "#users tbody" ).append( "<tr>" +
							"<td>" + name.val() + "</td>" + 
							"<td>" + email.val() + "</td>" + 
							"<td>" + password.val() + "</td>" +
						"</tr>" ); 
						$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});

		$( "#create-user" )
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
			});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>


<div id="users-contain" class="ui-widget">
	<h1>Existing Users:</h1>
	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user">Create new user</button>

</div><!-- End demo -->



<div class="demo-description">
<p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\modal-message.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Modal message</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
	
		$( "#dialog-message" ).dialog({
			modal: true,
			buttons: {
				Ok: function() {
					$( this ).dialog( "close" );
				}
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog-message" title="Download complete">
	<p>
		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
		Your files have downloaded successfully into the My Downloads folder.
	</p>
	<p>
		Currently using <b>36% of your storage space</b>.
	</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
	<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
	<form>
		<input value="text input" /><br />
		<input type="checkbox" />checkbox<br />
		<input type="radio" />radio<br />
		<select>
			<option>select</option>
		</select><br /><br />
		<textarea>textarea</textarea><br />
	</form>
</div><!-- End sample page content -->

</div><!-- End demo -->



<div class="demo-description">
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work.  Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\dialog\modal.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Basic modal</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
	
		$( "#dialog-modal" ).dialog({
			height: 140,
			modal: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog-modal" title="Basic modal dialog">
	<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
	<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
	<form>
		<input value="text input" /><br />
		<input type="checkbox" />checkbox<br />
		<input type="radio" />radio<br />
		<select>
			<option>select</option>
		</select><br /><br />
		<textarea>textarea</textarea><br />
	</form>
</div><!-- End sample page content -->

</div><!-- End demo -->



<div class="demo-description">
<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\constrain-movement.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Constrain movement</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	#draggable, #draggable2 { margin-bottom:20px; }
	#draggable { cursor: n-resize; }
	#draggable2 { cursor: e-resize; }
	#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ axis: "y" });
		$( "#draggable2" ).draggable({ axis: "x" });

		$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
		$( "#draggable4" ).draggable({ containment: "#demo-frame" });
		$( "#draggable5" ).draggable({ containment: "parent" });
	});
	</script>
</head>
<body>

<div class="demo">

<h3 class="docs">Constrain movement along an axis:</h3>
	
<div id="draggable" class="draggable ui-widget-content">
	<p>I can be dragged only vertically</p>
</div>

<div id="draggable2" class="draggable ui-widget-content">
	<p>I can be dragged only horizontally</p>
</div>

<h3 class="docs">Or to within another DOM element:</h3>
<div id="containment-wrapper">
<div id="draggable3" class="draggable ui-widget-content">
	<p>I'm contained within the box</p>
</div>

<div id="draggable4" class="draggable ui-widget-content">
	<p>I'm contained within the box's parent</p>
</div>

<div class="draggable ui-widget-content">
	<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\cursor-style.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Cursor style</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
		$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
		$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>I will always stick to the center (relative to the mouse)</p>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>My cursor is at left -5 and top -5</p>
</div>

<div id="draggable3" class="ui-widget-content">
	<p>My cursor position is only controlled for the 'bottom' value</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left).  Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable { width: 150px; height: 150px; padding: 0.5em; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable();
	});
	</script>
</head>
<body>

<div class="demo">

<div id="draggable" class="ui-widget-content">
	<p>Drag me around</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\delay-start.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Delay start</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ distance: 20 });
		$( "#draggable2" ).draggable({ delay: 1000 });
		$( ".ui-draggable" ).disableSelection();
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>Only if you drag me by 20 pixels, the dragging will start</p>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\events.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Events</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable { width: 16em; padding: 0 1em; }
	#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
	#draggable ul li span.ui-icon { float: left; }
	#draggable ul li span.count { font-weight: bold; }
	</style>
	<script>
	$(function() {
		var $start_counter = $( "#event-start" ),
			$drag_counter = $( "#event-drag" ),
			$stop_counter = $( "#event-stop" ),
			counts = [ 0, 0, 0 ];

		$( "#draggable" ).draggable({
			start: function() {
				counts[ 0 ]++;
				updateCounterStatus( $start_counter, counts[ 0 ] );
			},
			drag: function() {
				counts[ 1 ]++;
				updateCounterStatus( $drag_counter, counts[ 1 ] );
			},
			stop: function() {
				counts[ 2 ]++;
				updateCounterStatus( $stop_counter, counts[ 2 ] );
			}
		});

		function updateCounterStatus( $event_counter, new_count ) {
			// first update the status visually...
			if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
				$event_counter.addClass( "ui-state-hover" )
					.siblings().removeClass( "ui-state-hover" );
			}
			// ...then update the numbers
			$( "span.count", $event_counter ).text( new_count );
		}
	});
	</script>
</head>
<body>

<div class="demo">

<div id="draggable" class="ui-widget ui-widget-content">

	<p>Drag me to trigger the chain of events.</p>

	<ul class="ui-helper-reset">
		<li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
		<li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
		<li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
	</ul>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events.  Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\handle.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Handles</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	#draggable p { cursor: move; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ handle: "p" });
		$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
		$( "div, p" ).disableSelection();
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p class="ui-widget-header">I can be dragged only by this handle</p>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>You can drag me around&hellip;</p>
	<p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
</div>

<!-- ADD CANCEL DEMO -->

</div><!-- End demo -->



<div class="demo-description">
<p>Allow dragging only when the cursor is over a specific part of the draggable.  Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable.  Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="events.html">Events</a></li>
		<li><a href="constrain-movement.html">Constrain movement</a></li>
		<li><a href="delay-start.html">Delay start</a></li>
		<li><a href="snap-to.html">Snap to element or&#160;grid</a></li>
		<li><a href="scroll.html">Auto-scroll</a></li>
		<li><a href="revert.html">Revert position</a></li>
		<li><a href="visual-feedback.html">Visual feedback</a></li>
		<li><a href="handle.html">Drag handle</a></li>
		<li><a href="cursor-style.html">Cursor style</a></li>
		<li><a href="sortable.html">Draggable + Sortable</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\revert.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Revert position</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ revert: true });
		$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>Revert the original</p>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>Revert the helper</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\scroll.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Auto-scroll</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ scroll: true });
		$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
		$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>Scroll set to true, default settings</p>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>scrollSensitivity set to 100</p>
</div>

<div id="draggable3" class="ui-widget-content">
	<p>scrollSpeed set to 100</p>
</div>

<div style='height: 5000px; width: 1px;'></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\snap-to.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Snap to element or grid</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
	.ui-widget-header p, .ui-widget-content p { margin: 0; }
	#snaptarget { height: 140px; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ snap: true });
		$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
		$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
		$( "#draggable4" ).draggable({ grid: [ 20,20 ] });
		$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="snaptarget" class="ui-widget-header">
	<p>I'm a snap target</p>
</div>

<br clear="both" />

<div id="draggable" class="draggable ui-widget-content">
	<p>Default (snap: true), snaps to all other draggable elements</p>
</div>

<div id="draggable2" class="draggable ui-widget-content">
	<p>I only snap to the big box</p>
</div>

<div id="draggable3" class="draggable ui-widget-content">
	<p>I only snap to the outer edges of the big box</p>
</div>

<div id="draggable4" class="draggable ui-widget-content">
	<p>I snap to a 20 x 20 grid</p>
</div>

<div id="draggable5" class="draggable ui-widget-content">
	<p>I snap to a 80 x 80 grid</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Snap the draggable to the inner or outer boundaries of a DOM element.  Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
<p>Or snap the draggable to a grid.  Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\sortable.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable + Sortable</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
	.demo li { margin: 5px; padding: 5px; width: 150px; }
	</style>
	<script>
	$(function() {
		$( "#sortable" ).sortable({
			revert: true
		});
		$( "#draggable" ).draggable({
			connectToSortable: "#sortable",
			helper: "clone",
			revert: "invalid"
		});
		$( "ul, li" ).disableSelection();
	});
	</script>
</head>
<body>

<div class="demo">
	
<ul>
	<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
	<li class="ui-state-default">Item 1</li>
	<li class="ui-state-default">Item 2</li>
	<li class="ui-state-default">Item 3</li>
	<li class="ui-state-default">Item 4</li>
	<li class="ui-state-default">Item 5</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\draggable\visual-feedback.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Visual feedback</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
	#set { clear:both; float:left; width: 368px; height: 120px; }
	p { clear:both; margin:0; padding:1em 0; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ helper: "original" });
		$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
		$( "#draggable3" ).draggable({
			cursor: "move",
			cursorAt: { top: -12, left: -20 },
			helper: function( event ) {
				return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
			}
		});
		$( "#set div" ).draggable({ stack: "#set div" });
	});
	</script>
</head>
<body>

<div class="demo">

<h3 class="docs">With helpers:</h3>

<div id="draggable" class="ui-widget-content">
	<p>Original</p>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>Semi-transparent clone</p>
</div>

<div id="draggable3" class="ui-widget-content">
	<p>Custom helper (in combination with cursorAt)</p>
</div>

<h3 class="docs">Stacked:</h3>
<div id="set">
	<div class="ui-widget-content">
		<p>We are draggables..</p>
	</div>

	<div class="ui-widget-content">
		<p>..whose z-indexes are controlled automatically..</p>
	</div>

	<div class="ui-widget-content">
		<p>..with the stack option.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p>
<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\accepted-elements.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Accept</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
	#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
	</style>
	<script>
	$(function() {
		$( "#draggable, #draggable-nonvalid" ).draggable();
		$( "#droppable" ).droppable({
			accept: "#draggable",
			activeClass: "ui-state-hover",
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
				$( this )
					.addClass( "ui-state-highlight" )
					.find( "p" )
						.html( "Dropped!" );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="draggable-nonvalid" class="ui-widget-content">
	<p>I'm draggable but can't be dropped</p>
</div>

<div id="draggable" class="ui-widget-content">
	<p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
	<p>accept: '#draggable'</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable();
		$( "#droppable" ).droppable({
			drop: function( event, ui ) {
				$( this )
					.addClass( "ui-state-highlight" )
					.find( "p" )
						.html( "Dropped!" );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
	<p>Drop here</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="accepted-elements.html">Accepted elements</a></li>
		<li><a href="propagation.html">Prevent propagation</a></li>
		<li><a href="visual-feedback.html">Visual feedback</a></li>
		<li><a href="revert.html">Revert draggable position</a></li>
		<li><a href="shopping-cart.html">Shopping Cart</a></li>
		<li><a href="photo-manager.html">Simple photo manager</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\photo-manager.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Simple photo manager</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
	.gallery.custom-state-active { background: #eee; }
	.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
	.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
	.gallery li a { float: right; }
	.gallery li a.ui-icon-zoomin { float: left; }
	.gallery li img { width: 100%; cursor: move; }

	#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
	#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
	#trash h4 .ui-icon { float: left; }
	#trash .gallery h5 { display: none; }
	</style>
	<script>
	$(function() {
		// there's the gallery and the trash
		var $gallery = $( "#gallery" ),
			$trash = $( "#trash" );

		// let the gallery items be draggable
		$( "li", $gallery ).draggable({
			cancel: "a.ui-icon", // clicking an icon won't initiate dragging
			revert: "invalid", // when not dropped, the item will revert back to its initial position
			containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
			helper: "clone",
			cursor: "move"
		});

		// let the trash be droppable, accepting the gallery items
		$trash.droppable({
			accept: "#gallery > li",
			activeClass: "ui-state-highlight",
			drop: function( event, ui ) {
				deleteImage( ui.draggable );
			}
		});

		// let the gallery be droppable as well, accepting items from the trash
		$gallery.droppable({
			accept: "#trash li",
			activeClass: "custom-state-active",
			drop: function( event, ui ) {
				recycleImage( ui.draggable );
			}
		});

		// image deletion function
		var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
		function deleteImage( $item ) {
			$item.fadeOut(function() {
				var $list = $( "ul", $trash ).length ?
					$( "ul", $trash ) :
					$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );

				$item.find( "a.ui-icon-trash" ).remove();
				$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
					$item
						.animate({ width: "48px" })
						.find( "img" )
							.animate({ height: "36px" });
				});
			});
		}

		// image recycle function
		var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
		function recycleImage( $item ) {
			$item.fadeOut(function() {
				$item
					.find( "a.ui-icon-refresh" )
						.remove()
					.end()
					.css( "width", "96px")
					.append( trash_icon )
					.find( "img" )
						.css( "height", "72px" )
					.end()
					.appendTo( $gallery )
					.fadeIn();
			});
		}

		// image preview function, demonstrating the ui.dialog used as a modal window
		function viewLargerImage( $link ) {
			var src = $link.attr( "href" ),
				title = $link.siblings( "img" ).attr( "alt" ),
				$modal = $( "img[src$='" + src + "']" );

			if ( $modal.length ) {
				$modal.dialog( "open" );
			} else {
				var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
					.attr( "src", src ).appendTo( "body" );
				setTimeout(function() {
					img.dialog({
						title: title,
						width: 400,
						modal: true
					});
				}, 1 );
			}
		}

		// resolve the icons behavior with event delegation
		$( "ul.gallery > li" ).click(function( event ) {
			var $item = $( this ),
				$target = $( event.target );

			if ( $target.is( "a.ui-icon-trash" ) ) {
				deleteImage( $item );
			} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
				viewLargerImage( $target );
			} else if ( $target.is( "a.ui-icon-refresh" ) ) {
				recycleImage( $item );
			}

			return false;
		});
	});
	</script>
</head>
<body>

<div class="demo ui-widget ui-helper-clearfix">

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras</h5>
		<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
		<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 2</h5>
		<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
		<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 3</h5>
		<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
		<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 4</h5>
		<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
		<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
</ul>

<div id="trash" class="ui-widget-content ui-state-default">
	<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>

</div><!-- End demo -->


<div class="demo-description">
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\propagation.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Prevent propagation</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
	#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
	#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable();

		$( "#droppable, #droppable-inner" ).droppable({
			activeClass: "ui-state-hover",
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
				$( this )
					.addClass( "ui-state-highlight" )
					.find( "> p" )
						.html( "Dropped!" );
				return false;
			}
		});

		$( "#droppable2, #droppable2-inner" ).droppable({
			greedy: true,
			activeClass: "ui-state-hover",
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
				$( this )
					.addClass( "ui-state-highlight" )
					.find( "> p" )
						.html( "Dropped!" );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
	<p>Outer droppable</p>
	<div id="droppable-inner" class="ui-widget-header">
		<p>Inner droppable (not greedy)</p>
	</div>
</div>

<div id="droppable2" class="ui-widget-header">
	<p>Outer droppable</p>
	<div id="droppable2-inner" class="ui-widget-header">
		<p>Inner droppable (greedy)</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>When working with nested droppables &#8212; for example, you may have an editable directory structure displayed as a tree, with folder and document nodes &#8212; the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\revert.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Revert draggable position</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ revert: "valid" });
		$( "#draggable2" ).draggable({ revert: "invalid" });

		$( "#droppable" ).droppable({
			activeClass: "ui-state-hover",
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
				$( this )
					.addClass( "ui-state-highlight" )
					.find( "p" )
						.html( "Dropped!" );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>I revert when I'm dropped</p>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>I revert when I'm not dropped</p>
</div>

<div id="droppable" class="ui-widget-header">
	<p>Drop me here</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\shopping-cart.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Shopping Cart Demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	h1 { padding: .2em; margin: 0; }
	#products { float:left; width: 500px; margin-right: 2em; }
	#cart { width: 200px; float: left; }
	/* style the list to maximize the droppable hitarea */
	#cart ol { margin: 0; padding: 1em 0 1em 3em; }
	</style>
	<script>
	$(function() {
		$( "#catalog" ).accordion();
		$( "#catalog li" ).draggable({
			appendTo: "body",
			helper: "clone"
		});
		$( "#cart ol" ).droppable({
			activeClass: "ui-state-default",
			hoverClass: "ui-state-hover",
			accept: ":not(.ui-sortable-helper)",
			drop: function( event, ui ) {
				$( this ).find( ".placeholder" ).remove();
				$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
			}
		}).sortable({
			items: "li:not(.placeholder)",
			sort: function() {
				// gets added unintentionally by droppable interacting with sortable
				// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
				$( this ).removeClass( "ui-state-default" );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="products">
	<h1 class="ui-widget-header">Products</h1>	
	<div id="catalog">
		<h3><a href="#">T-Shirts</a></h3>
		<div>
			<ul>
				<li>Lolcat Shirt</li>
				<li>Cheezeburger Shirt</li>
				<li>Buckit Shirt</li>
			</ul>
		</div>
		<h3><a href="#">Bags</a></h3>
		<div>
			<ul>
				<li>Zebra Striped</li>
				<li>Black Leather</li>
				<li>Alligator Leather</li>
			</ul>
		</div>
		<h3><a href="#">Gadgets</a></h3>
		<div>
			<ul>
				<li>iPhone</li>
				<li>iPod</li>
				<li>iPad</li>
			</ul>
		</div>
	</div>
</div>

<div id="cart">
	<h1 class="ui-widget-header">Shopping Cart</h1>
	<div class="ui-widget-content">
		<ol>
			<li class="placeholder">Add your items here</li>
		</ol>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a shopping cart, where they are sortable.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\droppable\visual-feedback.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Visual feedback</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
	#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable();
		$( "#droppable" ).droppable({
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
				$( this )
					.addClass( "ui-state-highlight" )
					.find( "p" )
						.html( "Dropped!" );
			}
		});

		$( "#draggable2" ).draggable();
		$( "#droppable2" ).droppable({
			accept: "#draggable2",
			activeClass: "ui-state-hover",
			drop: function( event, ui ) {
				$( this )
					.addClass( "ui-state-highlight" )
					.find( "p" )
						.html( "Dropped!" );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<h3 class="docs">Feedback on hover:</h3>
	
<div id="draggable" class="ui-widget-content">
	<p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
	<p>Drop here</p>
</div>

<h3 class="docs">Feedback on activating draggable:</h3>

<div id="draggable2" class="ui-widget-content">
	<p>Drag me to my target</p>
</div>

<div id="droppable2" class="ui-widget-header">
	<p>Drop here</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\effect\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - Effect demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<script src="../../ui/jquery.effects.blind.js"></script>
	<script src="../../ui/jquery.effects.bounce.js"></script>
	<script src="../../ui/jquery.effects.clip.js"></script>
	<script src="../../ui/jquery.effects.drop.js"></script>
	<script src="../../ui/jquery.effects.explode.js"></script>
	<script src="../../ui/jquery.effects.fade.js"></script>
	<script src="../../ui/jquery.effects.fold.js"></script>
	<script src="../../ui/jquery.effects.highlight.js"></script>
	<script src="../../ui/jquery.effects.pulsate.js"></script>
	<script src="../../ui/jquery.effects.scale.js"></script>
	<script src="../../ui/jquery.effects.shake.js"></script>
	<script src="../../ui/jquery.effects.slide.js"></script>
	<script src="../../ui/jquery.effects.transfer.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
		.toggler { width: 500px; height: 200px; position: relative; }
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
		.ui-effects-transfer { border: 2px dotted gray; } 
	</style>
	<script>
	$(function() {
		// run the currently selected effect
		function runEffect() {
			// get effect type from 
			var selectedEffect = $( "#effectTypes" ).val();
			
			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if ( selectedEffect === "scale" ) {
				options = { percent: 0 };
			} else if ( selectedEffect === "transfer" ) {
				options = { to: "#button", className: "ui-effects-transfer" };
			} else if ( selectedEffect === "size" ) {
				options = { to: { width: 200, height: 60 } };
			}

			// run the effect
			$( "#effect" ).effect( selectedEffect, options, 500, callback );
		};

		// callback function to bring a hidden box back
		function callback() {
			setTimeout(function() {
				$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
			}, 1000 );
		};

		// set effect from select menu value
		$( "#button" ).click(function() {
			runEffect();
			return false;
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Effect</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>

<select name="effects" id="effectTypes">
	<option value="blind">Blind</option>
	<option value="bounce">Bounce</option>
	<option value="clip">Clip</option>
	<option value="drop">Drop</option>
	<option value="explode">Explode</option>
	<option value="fade">Fade</option>
	<option value="fold">Fold</option>
	<option value="highlight">Highlight</option>
	<option value="puff">Puff</option>
	<option value="pulsate">Pulsate</option>
	<option value="scale">Scale</option>
	<option value="shake">Shake</option>
	<option value="size">Size</option>
	<option value="slide">Slide</option>
	<option value="transfer">Transfer</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to show the effect.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\effect\easing.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - Easing demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.graph {
		float: left;
		margin-left: 10px;
	}
	</style>
	<script>
	$(function() {
		if ( !$( "<canvas/>" )[0].getContext ) {
			$( "<div/>" ).text(
				"Your browser doesn't support canvas, which is required for this demo. " +
				"Give Firefox 3 a try!"
			).appendTo( "#graphs" );
			return;
		}

		var i = 0,
			width = 100,
			height = 100;
		$.each( $.easing, function( name, impl ) {
			// skip linear/jswing and any non functioning implementation
			if ( !$.isFunction( impl ) || /jswing/.test( name ) ) {
				return;
			}
			var graph = $( "<div/>" ).addClass( "graph" ).appendTo( "#graphs" ),
				text = $( "<div/>" ).text( ++i + ". " + name ).appendTo( graph ),
				wrap = $( "<div/>" ).appendTo( graph ).css( 'overflow', 'hidden' ),
				canvas = $( "<canvas/>" ).appendTo( wrap )[ 0 ];
			canvas.width = width;
			canvas.height = height;
			var drawHeight = height * 0.8,
				cradius = 10;
				ctx = canvas.getContext( "2d" );
			ctx.fillStyle = "black";

			ctx.beginPath();
			ctx.moveTo( cradius, 0 );
			ctx.quadraticCurveTo( 0, 0, 0, cradius );
			ctx.lineTo( 0, height - cradius );
			ctx.quadraticCurveTo( 0, height, cradius, height );
			ctx.lineTo( width - cradius, height );
			ctx.quadraticCurveTo( width, height, width, height - cradius );
			ctx.lineTo( width, 0 );
			ctx.lineTo( cradius, 0 );
			ctx.fill();

			ctx.strokeStyle = "#555";
			ctx.beginPath();
			ctx.moveTo( width * 0.1, drawHeight + .5 );
			ctx.lineTo( width * 0.9, drawHeight + .5 );
			ctx.stroke();

			ctx.strokeStyle = "#555";
			ctx.beginPath();
			ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
			ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
			ctx.stroke();
			
			ctx.strokeStyle = "white";
			ctx.beginPath();
			ctx.lineWidth = 2;
			ctx.moveTo( width * 0.1, drawHeight );
			$.each( new Array( width ), function( position ) {
				var val = impl( 0, position, 0, 1, height );
				if ( /linear|jswing/.test( name ) ) {
					val = position / width;
				}
				ctx.lineTo( position * 0.8 + width * 0.1,
					drawHeight - drawHeight * val * 0.7 );
			});
			ctx.stroke();
			graph.click(function() {
				wrap
					.animate( { height: "hide" }, 2000, name )
					.delay( 800 )
					.animate( { height: "show" }, 2000, name );
			});

			graph.width( width ).height( height + text.height() + 10 );
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="graphs"></div>

</div><!-- End demo -->



<div class="demo-description">
<p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\effect\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Effect showcase</a></li>
		<li><a href="easing.html">Easing showcase</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\hide\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - Hide Demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<script src="../../ui/jquery.effects.blind.js"></script>
	<script src="../../ui/jquery.effects.bounce.js"></script>
	<script src="../../ui/jquery.effects.clip.js"></script>
	<script src="../../ui/jquery.effects.drop.js"></script>
	<script src="../../ui/jquery.effects.explode.js"></script>
	<script src="../../ui/jquery.effects.fold.js"></script>
	<script src="../../ui/jquery.effects.highlight.js"></script>
	<script src="../../ui/jquery.effects.pulsate.js"></script>
	<script src="../../ui/jquery.effects.scale.js"></script>
	<script src="../../ui/jquery.effects.shake.js"></script>
	<script src="../../ui/jquery.effects.slide.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.toggler { width: 500px; height: 200px; }
	#button { padding: .5em 1em; text-decoration: none; }
	#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
	#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
	</style>
	<script>
	$(function() {
		// run the currently selected effect
		function runEffect() {
			// get effect type from 
			var selectedEffect = $( "#effectTypes" ).val();

			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if ( selectedEffect === "scale" ) {
				options = { percent: 0 };
			} else if ( selectedEffect === "size" ) {
				options = { to: { width: 200, height: 60 } };
			}

			// run the effect
			$( "#effect" ).hide( selectedEffect, options, 1000, callback );
		};

		// callback function to bring a hidden box back
		function callback() {
			setTimeout(function() {
				$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
			}, 1000 );
		};

		// set effect from select menu value
		$( "#button" ).click(function() {
			runEffect();
			return false;
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Hide</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>

<select name="effects" id="effectTypes">
	<option value="blind">Blind</option>
	<option value="bounce">Bounce</option>
	<option value="clip">Clip</option>
	<option value="drop">Drop</option>
	<option value="explode">Explode</option>
	<option value="fold">Fold</option>
	<option value="highlight">Highlight</option>
	<option value="puff">Puff</option>
	<option value="pulsate">Pulsate</option>
	<option value="scale">Scale</option>
	<option value="shake">Shake</option>
	<option value="size">Size</option>
	<option value="slide">Slide</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\hide\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\position\cycler.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Position - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<link rel="stylesheet" href="../demos.css">
    <style>
   	html, body {
   		margin: 0;
		padding: 0
   	}
    </style>
	<script>
	$(function() {
		// TODO refactor into a widget and get rid of these plugin methods
		$.fn.position2 = function( options ) {
			return this.position( $.extend({
				of: window,
				using: function( to ) {
					$( this ).css({
						top: to.top,
						left: to.left
					})
				},
				collision: "none"
			}, options));
		}

		$.fn.left = function( using ) {
			return this.position2({
				my: "right middle",
				at: "left middle",
				offset: "25 0",
				using: using
			});
		}
		$.fn.right = function( using ) {
			return this.position2({
				my: "left middle",
				at: "right middle",
				offset: "-25 0",
				using: using
			});
		}
		$.fn.center = function( using ) {
			return this.position2({
				my: "center middle",
				at: "center middle",
				using: using
			});
		};

		$( "body" ).css({
			overflow: "hidden"
		})
		$( ".demo" ).css({
			position: "relative",
		});
		$( ".demo img" ).css({
			position: "absolute",
		});

		$( "img:eq(0)" ).left();
		$( "img:eq(1)" ).center();
		$( "img:eq(2)" ).right();

		function animate( to ) {
			$(this).stop( true, false ).animate( to );
		}
		function next( event ) {
			event.preventDefault();
			$( "img:eq(2)" ).center( animate );
			$( "img:eq(1)" ).left( animate )
			$( "img:eq(0)" ).right().appendTo( ".demo" );
		}
		function previous( event ) {
			event.preventDefault();
			$( "img:eq(0)" ).center( animate );
			$( "img:eq(1)" ).right( animate );
			$( "img:eq(2)" ).left().prependTo( ".demo" );
		}
		$( "#previous" ).click( previous );
		$( "#next" ).click( next );

		$( ".demo img" ).click(function( event ) {
			$( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event );
		});

		$( window ).resize(function() {
			$( "img:eq(0)" ).left( animate );
			$( "img:eq(1)" ).center( animate );
			$( "img:eq(2)" ).right( animate );
		});
	});
	</script>
</head>
<body>

<div class="demo">

<img src="images/earth.jpg" width="458" height="308" />
<img src="images/flight.jpg" width="512" height="307" />
<img src="images/rocket.jpg" width="300" height="353" />

<a id="previous" href="#">Previous</a>
<a id="next" href="#">Next</a>

</div><!-- End demo -->



<div class="demo-description">
<p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them.
<br/>Use the links at the top to cycle, or click on the images on the left and right.
<br/>Note how the images are repositioned when resizing the window.
<br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\position\default.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Position - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	div#parent {
		width: 60%;
		margin: 10px auto;
		padding: 5px;
		border: 1px solid #777;
		background-color: #fbca93;
		text-align: center;
	}
	div.positionable {
		width: 75px;
		height: 75px;
		position: absolute;
		display: block;
		right: 0;
		bottom: 0;
		background-color: #bcd5e6;
		text-align: center;
	}
	select, input {
		margin-left: 15px;
	}
	</style>
	<script>
	$(function() {
		function position() {
			$( ".positionable" ).position({
				of: $( "#parent" ),
				my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
				at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
				offset: $( "#offset" ).val(),
				collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
			});
		}

		$( ".positionable" ).css( "opacity", 0.5 );

		$( ":input" ).bind( "click keyup change", position );

		$( "#parent" ).draggable({
			drag: position
		});

		position();
	});
	</script>
</head>
<body>

<div class="demo">

<div id="parent">
	<p>
	This is the position parent element.
	</p>
</div>

<div class="positionable">
	<p>
	to position
	</p>
</div>

<div class="positionable" style="width:120px; height: 40px;">
	<p>
	to position 2
	</p>
</div>

<div style="padding: 20px; margin-top: 75px;">
	position...
	<div style="padding-bottom: 20px;">
		<b>my:</b>
		<select id="my_horizontal">
			<option value="left">left</option>
			<option value="center">center</option>
			<option value="right">right</option>
		</select>
		<select id="my_vertical">
			<option value="top">top</option>
			<option value="middle">center</option>
			<option value="bottom">bottom</option>
		</select>
	</div>
	<div style="padding-bottom: 20px;">
		<b>at:</b>
		<select id="at_horizontal">
			<option value="left">left</option>
			<option value="center">center</option>
			<option value="right">right</option>
		</select>
		<select id="at_vertical">
			<option value="top">top</option>
			<option value="middle">center</option>
			<option value="bottom">bottom</option>
		</select>
	</div>
	<div style="padding-bottom: 20px;">
		<b>offset:</b>
		<input id="offset">
	</div>
	<div style="padding-bottom: 20px;">
		<b>collision:</b>
		<select id="collision_horizontal">
			<option value="flip">flip</option>
			<option value="fit">fit</option>
			<option value="none">none</option>
		</select>
		<select id="collision_vertical">
			<option value="flip">flip</option>
			<option value="fit">fit</option>
			<option value="none">none</option>
		</select>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
<br/>Drag around the parent element to see collision detection in action.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\position\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Position Demo</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="cycler.html">Cycling images</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\progressbar\animated.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Progressbar - Animated</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.progressbar.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
	</style>
	<script>
	$(function() {
		$( "#progressbar" ).progressbar({
			value: 59
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="progressbar"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>
This progressbar has an animated fill by setting the
<code>background-image</code>
on the
<code>.ui-progressbar-value</code>
element, using css.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\progressbar\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Progressbar - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.progressbar.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#progressbar" ).progressbar({
			value: 37
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="progressbar"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Default determinate progress bar.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\progressbar\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Progressbar Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="animated.html">Animated</a></li>
		<li><a href="resize.html">Resizable progressbar</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\progressbar\resize.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Progressbar - Resizable</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.progressbar.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#progressbar" ).progressbar({
			value: 37
		});
		$( "#progressbarWrapper" ).resizable();
	});
	</script>
</head>
<body>

<div class="demo">

<div id="progressbarWrapper" style="height:30px; " class="ui-widget-default">
	<div id="progressbar" style="height:100%;"></div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The progress bar's widths are specified in percentages for flexible sizing so it will resize to fit its container. Try resizing the height and width of this bar to see how it maintains the correct proportions. (This is not necessarily a real-world example, but it's a good illustration of how flexibly all the plugins are coded.)</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\removeClass\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - removeClass Demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.toggler { width: 500px; height: 200px; position: relative; }
	#button { padding: .5em 1em; text-decoration: none; }
	#effect { position: relative;  width: 240px;  padding: 1em;  letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
	.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
	</style>
	<script>
	$(function() {
		$( "#button" ).click(function() {
			$( "#effect" ).removeClass( "newClass", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#effect" ).addClass( "newClass" );
			}, 1500 );
		}
	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class="newClass ui-corner-all">
		Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 
	</div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\removeClass\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\animate.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Animate</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#resizable { width: 150px; height: 150px; padding: 0.5em; }
	#resizable h3 { text-align: center; margin: 0; }
	.ui-resizable-helper { border: 1px dotted gray; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			animate: true
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Animate</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Animate the resize action using the <code>animate</code> option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\aspect-ratio.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Preserve aspect ratio</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#resizable { width: 160px; height: 90px; padding: 0.5em; }
	#resizable h3 { text-align: center; margin: 0; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			aspectRatio: 16 / 9
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Preserve aspect ratio</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\constrain-area.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Constrain resize area</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#container { width: 300px; height: 300px; }
	#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
	#resizable { background-position: top left; width: 150px; height: 150px; }
	#resizable, #container { padding: 0.5em; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			containment: "#container"
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="container" class="ui-widget-content">
	<h3 class="ui-widget-header">Containment</h3>
	<div id="resizable" class="ui-state-active">
		<h3 class="ui-widget-header">Resizable</h3>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#resizable { width: 150px; height: 150px; padding: 0.5em; }
	#resizable h3 { text-align: center; margin: 0; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable();
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Resizable</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Enable any DOM element to be resizable.  With the cursor grab the right or bottom border and drag to the desired width or height.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\delay-start.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Delay start</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
	#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			delay: 1000
		});
		
		$( "#resizable2" ).resizable({
			distance: 40
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<h3 class="docs">Time delay (ms):</h3>
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Time</h3>
</div>

<h3 class="docs">Distance delay (px):</h3>
<div id="resizable2" class="ui-widget-content">
	<h3 class="ui-widget-header">Distance</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Delay the start of resizng for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\helper.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Helper</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#resizable { width: 150px; height: 150px; padding: 0.5em; }
	#resizable h3 { text-align: center; margin: 0; }
	.ui-resizable-helper { border: 2px dotted #00F; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			helper: "ui-resizable-helper"
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Helper</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="aspect-ratio.html">Preserve aspect ratio</a></li>
		<li><a href="max-min.html">Maximum / minimum size</a></li>
		<li><a href="constrain-area.html">Constrain resize area</a></li>
 		<li><a href="delay-start.html">Delay start</a></li>
		<li><a href="snap-to-grid.html">Snap to grid</a></li>
		<li><a href="visual-feedback.html">Visual feedback</a></li>
		<li><a href="synchronous-resize.html">Synchronous resize</a></li>
		<li><a href="animate.html">Animate</a></li>
		<li><a href="helper.html">Resize Helper</a></li>
		<li><a href="textarea.html">Textarea</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\max-min.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Maximum / minimum size</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#resizable { width: 200px; height: 150px; padding: 5px; }
	#resizable h3 { text-align: center; margin: 0; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			maxHeight: 250,
			maxWidth: 350,
			minHeight: 150,
			minWidth: 200
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Resize larger / smaller</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Limit the resizable element to a maximum or minimum height or width using the <code>maxHeight</code>, <code>maxWidth</code>, <code>minHeight</code>, and <code>minWidth</code> options.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\snap-to-grid.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Snap to grid</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#resizable { width: 150px; height: 150px; padding: 0.5em; }
	#resizable h3 { text-align: center; margin: 0; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			grid: 50
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Grid</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Snap the resizable element to a grid.  Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\synchronous-resize.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Synchronous resize</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#resizable { background-position: top left; }
	#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
	#resizable h3, #also h3 { text-align: center; margin: 0; }
	#also { margin-top: 1em; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			alsoResize: "#also"
		});
		$( "#also" ).resizable();
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="resizable" class="ui-widget-header">
	<h3 class="ui-state-active">Resize</h3>
</div>

<div id="also" class="ui-widget-content">
	<h3 class="ui-widget-header">will also resize</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Resize multiple elements simultaneously by clicking and dragging the sides of one.  Pass a shared selector into the <code>alsoResize</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\textarea.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Textarea</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.ui-resizable-se {
		bottom: 17px;
	}
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			handles: "se"
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<textarea id="resizable" rows="5" cols="20"></textarea>

</div><!-- End demo -->



<div class="demo-description">
<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\resizable\visual-feedback.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Visual feedback</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#resizable { width: 150px; height: 150px; padding: 0.5em; }
	#resizable h3 { text-align: center; margin: 0; }
	.ui-resizable-ghost { border: 1px dotted gray; }
	</style>
	<script>
	$(function() {
		$( "#resizable" ).resizable({
			ghost: true
		});
	});
	</script>
</head>
<body>

<div class="demo">
	
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Ghost</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Instead of showing the actual element during resize, set the <code>ghost</code> option to true to show a semi-transparent part of the element.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\selectable\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Selectable - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.selectable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	
	<style>
	#feedback { font-size: 1.4em; }
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
	</style>
	<script>
	$(function() {
		$( "#selectable" ).selectable();
	});
	</script>
</head>
<body>

<div class="demo">

<ol id="selectable">
	<li class="ui-widget-content">Item 1</li>
	<li class="ui-widget-content">Item 2</li>
	<li class="ui-widget-content">Item 3</li>
	<li class="ui-widget-content">Item 4</li>
	<li class="ui-widget-content">Item 5</li>
	<li class="ui-widget-content">Item 6</li>
	<li class="ui-widget-content">Item 7</li>
</ol>

</div><!-- End demo -->



<div class="demo-description">
<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\selectable\display-grid.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Selectable - Display as grid</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.selectable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	
	<style>
	#feedback { font-size: 1.4em; }
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; }
	#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
	</style>
	<script>
	$(function() {
		$( "#selectable" ).selectable();
	});
	</script>
</head>
<body>

<div class="demo">

<ol id="selectable">
	<li class="ui-state-default">1</li>
	<li class="ui-state-default">2</li>
	<li class="ui-state-default">3</li>
	<li class="ui-state-default">4</li>
	<li class="ui-state-default">5</li>
	<li class="ui-state-default">6</li>
	<li class="ui-state-default">7</li>
	<li class="ui-state-default">8</li>
	<li class="ui-state-default">9</li>
	<li class="ui-state-default">10</li>
	<li class="ui-state-default">11</li>
	<li class="ui-state-default">12</li>
</ol>

</div><!-- End demo -->



<div class="demo-description">
<p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\selectable\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Selectable Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="serialize.html">Serialize</a></li>
		<li><a href="display-grid.html">Display as grid</a></li>		
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\selectable\serialize.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Selectable - Serialize</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.selectable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	
	<style>
	#feedback { font-size: 1.4em; }
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
	</style>
	<script>
	$(function() {
		$( "#selectable" ).selectable({
			stop: function() {
				var result = $( "#select-result" ).empty();
				$( ".ui-selected", this ).each(function() {
					var index = $( "#selectable li" ).index( this );
					result.append( " #" + ( index + 1 ) );
				});
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

<ol id="selectable">
	<li class="ui-widget-content">Item 1</li>
	<li class="ui-widget-content">Item 2</li>
	<li class="ui-widget-content">Item 3</li>
	<li class="ui-widget-content">Item 4</li>
	<li class="ui-widget-content">Item 5</li>
	<li class="ui-widget-content">Item 6</li>
</ol>

</div><!-- End demo -->



<div class="demo-description">
<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items.  Present values as feedback, or pass as a data string.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\show\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - Show Demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<script src="../../ui/jquery.effects.blind.js"></script>
	<script src="../../ui/jquery.effects.bounce.js"></script>
	<script src="../../ui/jquery.effects.clip.js"></script>
	<script src="../../ui/jquery.effects.drop.js"></script>
	<script src="../../ui/jquery.effects.explode.js"></script>
	<script src="../../ui/jquery.effects.fold.js"></script>
	<script src="../../ui/jquery.effects.highlight.js"></script>
	<script src="../../ui/jquery.effects.pulsate.js"></script>
	<script src="../../ui/jquery.effects.scale.js"></script>
	<script src="../../ui/jquery.effects.shake.js"></script>
	<script src="../../ui/jquery.effects.slide.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.toggler { width: 500px; height: 200px; }
	#button { padding: .5em 1em; text-decoration: none; }
	#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
	#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
	</style>
	<script>
	$(function() {
		// run the currently selected effect
		function runEffect() {
			// get effect type from 
			var selectedEffect = $( "#effectTypes" ).val();

			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if ( selectedEffect === "scale" ) {
				options = { percent: 100 };
			} else if ( selectedEffect === "size" ) {
				options = { to: { width: 280, height: 185 } };
			}

			// run the effect
			$( "#effect" ).show( selectedEffect, options, 500, callback );
		};

		//callback function to bring a hidden box back
		function callback() {
			setTimeout(function() {
				$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
			}, 1000 );
		};

		// set effect from select menu value
		$( "#button" ).click(function() {
			runEffect();
			return false;
		});

		$( "#effect" ).hide();
	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Show</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>

<select name="effects" id="effectTypes">
	<option value="blind">Blind</option>
	<option value="bounce">Bounce</option>
	<option value="clip">Clip</option>
	<option value="drop">Drop</option>
	<option value="explode">Explode</option>
	<option value="fold">Fold</option>
	<option value="highlight">Highlight</option>
	<option value="puff">Puff</option>
	<option value="pulsate">Pulsate</option>
	<option value="scale">Scale</option>
	<option value="shake">Shake</option>
	<option value="size">Size</option>
	<option value="slide">Slide</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\show\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\colorpicker.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Colorpicker</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#red, #green, #blue {
		float: left;
		clear: left;
		width: 300px;
		margin: 15px;
	}
	#swatch {
		width: 120px;
		height: 100px;
		margin-top: 18px;
		margin-left: 350px;
		background-image: none;
	}
	#red .ui-slider-range { background: #ef2929; }
	#red .ui-slider-handle { border-color: #ef2929; }
	#green .ui-slider-range { background: #8ae234; }
	#green .ui-slider-handle { border-color: #8ae234; }
	#blue .ui-slider-range { background: #729fcf; }
	#blue .ui-slider-handle { border-color: #729fcf; }
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	function hexFromRGB(r, g, b) {
		var hex = [
			r.toString( 16 ),
			g.toString( 16 ),
			b.toString( 16 )
		];
		$.each( hex, function( nr, val ) {
			if ( val.length === 1 ) {
				hex[ nr ] = "0" + val;
			}
		});
		return hex.join( "" ).toUpperCase();
	}
	function refreshSwatch() {
		var red = $( "#red" ).slider( "value" ),
			green = $( "#green" ).slider( "value" ),
			blue = $( "#blue" ).slider( "value" ),
			hex = hexFromRGB( red, green, blue );
		$( "#swatch" ).css( "background-color", "#" + hex );
	}
	$(function() {
		$( "#red, #green, #blue" ).slider({
			orientation: "horizontal",
			range: "min",
			max: 255,
			value: 127,
			slide: refreshSwatch,
			change: refreshSwatch
		});
		$( "#red" ).slider( "value", 255 );
		$( "#green" ).slider( "value", 140 );
		$( "#blue" ).slider( "value", 60 );
	});
	</script>
</head>
<body class="ui-widget-content" style="border:0;">

<div class="demo">

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
	<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
	Simple Colorpicker
</p>

<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>

<div id="swatch" class="ui-widget-content ui-corner-all"></div>

</div><!-- End demo -->



<div class="demo-description" style="clear:left;">
<p>Combine three sliders to create a simple RGB colorpicker.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" >
	<title>jQuery UI Slider - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; }
	</style>
	<script>
	$(function() {
		$( "#slider" ).slider();
	});
	</script>
</head>
<body>

<div class="demo">

<div id="slider"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\hotelrooms.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Range with fixed minimum</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		var select = $( "#minbeds" );
		var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
			min: 1,
			max: 6,
			range: "min",
			value: select[ 0 ].selectedIndex + 1,
			slide: function( event, ui ) {
				select[ 0 ].selectedIndex = ui.value - 1;
			}
		});
		$( "#minbeds" ).change(function() {
			slider.slider( "value", this.selectedIndex + 1 );
		});
	});
	</script>
</head>
<body>

<div class="demo">

<form id="reservation">
	<label for="minbeds">Minimum number of beds</label>
	<select name="minbeds" id="minbeds">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
	</select>
</form>

</div><!-- End demo -->



<div class="demo-description">
<p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="steps.html">Snap to increments</a></li>
		<li><a href="range.html">Range slider</a></li>
		<li><a href="rangemin.html">Range with fixed minimum</a></li>
		<li><a href="hotelrooms.html">Room reservation</a></li>
		<li><a href="rangemax.html">Range with fixed maximum</a></li>
		<li><a href="slider-vertical.html">Vertical slider</a></li>
		<li><a href="range-vertical.html">Vertical range slider</a></li>
		<li><a href="multiple-vertical.html">Multiple sliders</a></li>
		<li><a href="colorpicker.html">Simple colorpicker</a></li>
		<li><a href="side-scroll.html">Simple scrollbar</a></li>
		<li><a href="tabs.html">Slider controls tabs</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\multiple-vertical.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Multiple sliders</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; }
	#eq span {
		height:120px; float:left; margin:15px
	}
	</style>
	<script>
	$(function() {
		// setup master volume
		$( "#master" ).slider({
			value: 60,
			orientation: "horizontal",
			range: "min",
			animate: true
		});
		// setup graphic EQ
		$( "#eq > span" ).each(function() {
			// read initial values from markup and remove that
			var value = parseInt( $( this ).text(), 10 );
			$( this ).empty().slider({
				value: value,
				range: "min",
				animate: true,
				orientation: "vertical"
			});
		});
	});
	</script>
</head>
<body class="ui-widget-content" style="border:0;">

<div class="demo">

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
	<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
	Master volume
</p>

<div id="master" style="width:260px; margin:15px;"></div>

<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
	<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
	Graphic EQ
</p>

<div id="eq">
	<span>88</span>
	<span>77</span>
	<span>55</span>
	<span>33</span>
	<span>40</span>
	<span>45</span>
	<span>70</span>
</div>

</div><!-- End demo -->



<div class="demo-description" style="clear:left;">
<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\range-vertical.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Vertical range slider</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		$( "#slider-range" ).slider({
			orientation: "vertical",
			range: true,
			values: [ 17, 67 ],
			slide: function( event, ui ) {
				$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
			}
		});
		$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
			" - $" + $( "#slider-range" ).slider( "values", 1 ) );
	});
	</script>
</head>
<body>

<div class="demo">

<p>
	<label for="amount">Target sales goal (Millions):</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range" style="height:250px;"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Change the orientation of the range slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\range.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Range slider</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 500,
			values: [ 75, 300 ],
			slide: function( event, ui ) {
				$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
			}
		});
		$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
			" - $" + $( "#slider-range" ).slider( "values", 1 ) );
	});
	</script>
</head>
<body>

<div class="demo">

<p>
	<label for="amount">Price range:</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\rangemax.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Range with fixed maximum</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		$( "#slider-range-max" ).slider({
			range: "max",
			min: 1,
			max: 10,
			value: 2,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value );
			}
		});
		$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
	});
	</script>
</head>
<body>

<div class="demo">

<p>
	<label for="amount">Minimum number of bedrooms:</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range-max"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Fix the maximum value of the range slider so that the user can only select a minimum.  Set the <code>range</code> option to "max."</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\rangemin.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Range with fixed minimum</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		$( "#slider-range-min" ).slider({
			range: "min",
			value: 37,
			min: 1,
			max: 700,
			slide: function( event, ui ) {
				$( "#amount" ).val( "$" + ui.value );
			}
		});
		$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
	});
	</script>
</head>
<body>

<div class="demo">

<p>
	<label for="amount">Maximum price:</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range-min"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Fix the minimum value of the range slider so that the user can only select a maximum.  Set the <code>range</code> option to "min."</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\side-scroll.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Slider scrollbar</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; }
	.scroll-pane { overflow: auto; width: 99%; float:left; }
	.scroll-content { width: 2440px; float: left; }
	.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
	* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
	.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
	.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
	.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
	.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
	.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
	</style>
	<script>
	$(function() {
		//scrollpane parts
		var scrollPane = $( ".scroll-pane" ),
			scrollContent = $( ".scroll-content" );
		
		//build slider
		var scrollbar = $( ".scroll-bar" ).slider({
			slide: function( event, ui ) {
				if ( scrollContent.width() > scrollPane.width() ) {
					scrollContent.css( "margin-left", Math.round(
						ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
					) + "px" );
				} else {
					scrollContent.css( "margin-left", 0 );
				}
			}
		});
		
		//append icon to handle
		var handleHelper = scrollbar.find( ".ui-slider-handle" )
		.mousedown(function() {
			scrollbar.width( handleHelper.width() );
		})
		.mouseup(function() {
			scrollbar.width( "100%" );
		})
		.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
		.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
		
		//change overflow to hidden now that slider handles the scrolling
		scrollPane.css( "overflow", "hidden" );
		
		//size scrollbar and handle proportionally to scroll distance
		function sizeScrollbar() {
			var remainder = scrollContent.width() - scrollPane.width();
			var proportion = remainder / scrollContent.width();
			var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
			scrollbar.find( ".ui-slider-handle" ).css({
				width: handleSize,
				"margin-left": -handleSize / 2
			});
			handleHelper.width( "" ).width( scrollbar.width() - handleSize );
		}
		
		//reset slider value based on scroll content position
		function resetValue() {
			var remainder = scrollPane.width() - scrollContent.width();
			var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
				parseInt( scrollContent.css( "margin-left" ) );
			var percentage = Math.round( leftVal / remainder * 100 );
			scrollbar.slider( "value", percentage );
		}
		
		//if the slider is 100% and window gets larger, reveal content
		function reflowContent() {
				var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
				var gap = scrollPane.width() - showing;
				if ( gap > 0 ) {
					scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
				}
		}
		
		//change handle position on window resize
		$( window ).resize(function() {
			resetValue();
			sizeScrollbar();
			reflowContent();
		});
		//init scrollbar size
		setTimeout( sizeScrollbar, 10 );//safari wants a timeout
	});
	</script>
</head>
<body>

<div class="demo">

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
	<div class="scroll-content">
		<div class="scroll-content-item ui-widget-header">1</div>
		<div class="scroll-content-item ui-widget-header">2</div>
		<div class="scroll-content-item ui-widget-header">3</div>
		<div class="scroll-content-item ui-widget-header">4</div>
		<div class="scroll-content-item ui-widget-header">5</div>
		<div class="scroll-content-item ui-widget-header">6</div>
		<div class="scroll-content-item ui-widget-header">7</div>
		<div class="scroll-content-item ui-widget-header">8</div>
		<div class="scroll-content-item ui-widget-header">9</div>
		<div class="scroll-content-item ui-widget-header">10</div>
		<div class="scroll-content-item ui-widget-header">11</div>
		<div class="scroll-content-item ui-widget-header">12</div>
		<div class="scroll-content-item ui-widget-header">13</div>
		<div class="scroll-content-item ui-widget-header">14</div>
		<div class="scroll-content-item ui-widget-header">15</div>
		<div class="scroll-content-item ui-widget-header">16</div>
		<div class="scroll-content-item ui-widget-header">17</div>
		<div class="scroll-content-item ui-widget-header">18</div>
		<div class="scroll-content-item ui-widget-header">19</div>
		<div class="scroll-content-item ui-widget-header">20</div>
	</div>
	<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
		<div class="scroll-bar"></div>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\slider-vertical.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Vertical slider</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		$( "#slider-vertical" ).slider({
			orientation: "vertical",
			range: "min",
			min: 0,
			max: 100,
			value: 60,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value );
			}
		});
		$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
	});
	</script>
</head>
<body>

<div class="demo">

<p>
	<label for="amount">Volume:</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-vertical" style="height:200px;"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Change the orientation of the slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\steps.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Snap to increments</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		$( "#slider" ).slider({
			value:100,
			min: 0,
			max: 500,
			step: 50,
			slide: function( event, ui ) {
				$( "#amount" ).val( "$" + ui.value );
			}
		});
		$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
	});
	</script>
</head>
<body>

<div class="demo">

<p>
	<label for="amount">Donation amount ($50 increments):</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value.  The default increment is 1.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\slider\tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider - Snap to increments</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<script src="../../ui/jquery.ui.slider.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#demo-frame > div.demo { padding: 10px !important; }
	</style>
	<script>
	$(function() {
		$( "#tabs" ).tabs({
			select: function( event, ui ) {
				$( "#slider" ).slider( "value", ui.index );
			}
		});
		$( "#slider" ).slider({
			min: 0,
			max: $( "#tabs" ).tabs( "length" ) - 1,
			slide: function( event, ui ) {
				$( "#tabs" ).tabs( "select", ui.value );
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="slider" style="width:100px"></div>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Control tabs with a slider.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\connect-lists-through-tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Connect lists with Tabs</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style>
	<script>
	$(function() {
		$( "#sortable1, #sortable2" ).sortable().disableSelection();

		var $tabs = $( "#tabs" ).tabs();

		var $tab_items = $( "ul:first li", $tabs ).droppable({
			accept: ".connectedSortable li",
			hoverClass: "ui-state-hover",
			drop: function( event, ui ) {
				var $item = $( this );
				var $list = $( $item.find( "a" ).attr( "href" ) )
					.find( ".connectedSortable" );

				ui.draggable.hide( "slow", function() {
					$tabs.tabs( "select", $tab_items.index( $item ) );
					$( this ).appendTo( $list ).show( "slow" );
				});
			}
		});
	});
	</script>
</head>
<body>
<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
	</ul>
	<div id="tabs-1">
		<ul id="sortable1" class="connectedSortable ui-helper-reset">
			<li class="ui-state-default">Item 1</li>
			<li class="ui-state-default">Item 2</li>
			<li class="ui-state-default">Item 3</li>
			<li class="ui-state-default">Item 4</li>
			<li class="ui-state-default">Item 5</li>
		</ul>
	</div>
	<div id="tabs-2">
		<ul id="sortable2" class="connectedSortable ui-helper-reset">
			<li class="ui-state-highlight">Item 1</li>
			<li class="ui-state-highlight">Item 2</li>
			<li class="ui-state-highlight">Item 3</li>
			<li class="ui-state-highlight">Item 4</li>
			<li class="ui-state-highlight">Item 5</li>
		</ul>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\connect-lists.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Connect lists</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style>
	<script>
	$(function() {
		$( "#sortable1, #sortable2" ).sortable({
			connectWith: ".connectedSortable"
		}).disableSelection();
	});
	</script>
</head>
<body>
<div class="demo">

<ul id="sortable1" class="connectedSortable">
	<li class="ui-state-default">Item 1</li>
	<li class="ui-state-default">Item 2</li>
	<li class="ui-state-default">Item 3</li>
	<li class="ui-state-default">Item 4</li>
	<li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
	<li class="ui-state-highlight">Item 1</li>
	<li class="ui-state-highlight">Item 2</li>
	<li class="ui-state-highlight">Item 3</li>
	<li class="ui-state-highlight">Item 4</li>
	<li class="ui-state-highlight">Item 5</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
	Sort items from one list into another and vice versa, by passing a selector into
	the <code>connectWith</code> option. The simplest way to do this is to
	group all related lists with a CSS class, and then pass that class into the
	sortable function (i.e., <code>connectWith: '.myclass'</code>).
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	#sortable li span { position: absolute; margin-left: -1.3em; }
	</style>
	<script>
	$(function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	});
	</script>
</head>
<body>
<div class="demo">

<ul id="sortable">
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
	Enable a group of DOM elements to be sortable. Click on and drag an
	element to a new spot within the list, and the other items will adjust to
	fit. By default, sortable items share <code>draggable</code> properties.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\delay-start.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Delay start</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
	</style>
	<script>
	$(function() {
		$( "#sortable1" ).sortable({
			delay: 300
		});
		
		$( "#sortable2" ).sortable({
			distance: 15
		});

		$( "li" ).disableSelection();
	});
	</script>
</head>
<body>
<div class="demo">

<h3 class="docs">Time delay of 300ms:</h3>

<ul id="sortable1">
	<li class="ui-state-default">Item 1</li>
	<li class="ui-state-default">Item 2</li>
	<li class="ui-state-default">Item 3</li>
	<li class="ui-state-default">Item 4</li>
</ul>

<h3 class="docs">Distance delay of 15px:</h3>

<ul id="sortable2">
	<li class="ui-state-default">Item 1</li>
	<li class="ui-state-default">Item 2</li>
	<li class="ui-state-default">Item 3</li>
	<li class="ui-state-default">Item 4</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
	Prevent accidental sorting either by delay (time) or distance. Set a number of
	milliseconds the element needs to be dragged before sorting starts
	with the <code>delay</code> option. Set a distance in pixels the element
	needs to be dragged before sorting starts with the <code>distance</code>
	option.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\display-grid.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Display as grid</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; }
	#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
	</style>
	<script>
	$(function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	});
	</script>
</head>
<body>
<div class="demo">

<ul id="sortable">
	<li class="ui-state-default">1</li>
	<li class="ui-state-default">2</li>
	<li class="ui-state-default">3</li>
	<li class="ui-state-default">4</li>
	<li class="ui-state-default">5</li>
	<li class="ui-state-default">6</li>
	<li class="ui-state-default">7</li>
	<li class="ui-state-default">8</li>
	<li class="ui-state-default">9</li>
	<li class="ui-state-default">10</li>
	<li class="ui-state-default">11</li>
	<li class="ui-state-default">12</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
	To arrange sortable items as a grid, give them identical dimensions and
	float them using CSS.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\empty-lists.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Handle empty lists</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
	#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style>
	<script>
	$(function() {
		$( "ul.droptrue" ).sortable({
			connectWith: "ul"
		});

		$( "ul.dropfalse" ).sortable({
			connectWith: "ul",
			dropOnEmpty: false
		});

		$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
	});
	</script>
</head>
<body>
<div class="demo">

<ul id="sortable1" class='droptrue'>
	<li class="ui-state-default">Can be dropped..</li>
	<li class="ui-state-default">..on an empty list</li>
	<li class="ui-state-default">Item 3</li>
	<li class="ui-state-default">Item 4</li>
	<li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class='dropfalse'>
	<li class="ui-state-highlight">Cannot be dropped..</li>
	<li class="ui-state-highlight">..on an empty list</li>
	<li class="ui-state-highlight">Item 3</li>
	<li class="ui-state-highlight">Item 4</li>
	<li class="ui-state-highlight">Item 5</li>
</ul>

<ul id="sortable3" class='droptrue'>
</ul>

<br clear="both" />

</div><!-- End demo -->



<div class="demo-description">
<p>
	Prevent all items in a list from being dropped into a separate, empty list
	using the <code>dropOnEmpty</code> option set to <code>false</code>.  By default,
	sortable items can be dropped on empty lists.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="placeholder.html">Drop placeholder</a></li>
		<li><a href="connect-lists.html">Connect lists</a></li>
		<li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li>
		<li><a href="empty-lists.html">Handle empty lists</a></li>
		<li><a href="items.html">Include / exclude items</a></li>
		<li><a href="delay-start.html">Delay start</a></li>
		<li><a href="display-grid.html">Display as grid</a></li>		
		<li><a href="portlets.html">Portlets</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\items.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Include / exclude items</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }
	</style>
	<script>
	$(function() {
		$( "#sortable1" ).sortable({
			items: "li:not(.ui-state-disabled)"
		});

		$( "#sortable2" ).sortable({
			cancel: ".ui-state-disabled"
		});

		$( "#sortable1 li, #sortable2 li" ).disableSelection();		
	});
	</script>
</head>
<body>
<div class="demo">

<h3 class="docs">Specify which items are sortable:</h3>

<ul id="sortable1">
	<li class="ui-state-default">Item 1</li>
	<li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
	<li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
	<li class="ui-state-default">Item 4</li>
</ul>

<h3 class="docs">Cancel sorting (but keep as drop targets):</h3>

<ul id="sortable2">
	<li class="ui-state-default">Item 1</li>
	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
	<li class="ui-state-default">Item 4</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
	Specify which items are eligible to sort by passing a jQuery selector into
	the <code>items</code> option. Items excluded from this option are not
	sortable, nor are they valid targets for sortable items.
</p>
<p>
	To only prevent sorting on certain items, pass a jQuery selector into the
	<code>cancel</code> option. Cancelled items remain valid sort targets for
	others.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\placeholder.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Drop placeholder</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
	html>body #sortable li { height: 1.5em; line-height: 1.2em; }
	.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
	</style>
	<script>
	$(function() {
		$( "#sortable" ).sortable({
			placeholder: "ui-state-highlight"
		});
		$( "#sortable" ).disableSelection();
	});
	</script>
</head>
<body>
<div class="demo">

<ul id="sortable">
	<li class="ui-state-default">Item 1</li>
	<li class="ui-state-default">Item 2</li>
	<li class="ui-state-default">Item 3</li>
	<li class="ui-state-default">Item 4</li>
	<li class="ui-state-default">Item 5</li>
	<li class="ui-state-default">Item 6</li>
	<li class="ui-state-default">Item 7</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
	When dragging a sortable item to a new location, other items will make room
	for the that item by shifting to allow white space between them. Pass a
	class into the <code>placeholder</code> option to style that space to
	be visible.  Use the boolean <code>forcePlaceholderSize</code> option
	to set dimensions on the placeholder.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\sortable\portlets.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Portlets</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.column { width: 170px; float: left; padding-bottom: 100px; }
	.portlet { margin: 0 1em 1em 0; }
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }
	</style>
	<script>
	$(function() {
		$( ".column" ).sortable({
			connectWith: ".column"
		});

		$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
				.end()
			.find( ".portlet-content" );

		$( ".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
		});

		$( ".column" ).disableSelection();
	});
	</script>
</head>
<body>
<div class="demo">

<div class="column">

	<div class="portlet">
		<div class="portlet-header">Feeds</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>
	
	<div class="portlet">
		<div class="portlet-header">News</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>

</div>

<div class="column">

	<div class="portlet">
		<div class="portlet-header">Shopping</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>

</div>

<div class="column">

	<div class="portlet">
		<div class="portlet-header">Links</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>
	
	<div class="portlet">
		<div class="portlet-header">Images</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>

</div>

</div><!-- End demo -->



<div class="demo-description">
<p>
	Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
	option to allow sorting between columns.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\switchClass\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - switchClass Demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.toggler { width: 500px; height: 200px; position: relative; }
	#button { padding: .5em 1em; text-decoration: none; }
	#effect {position: relative;   }
	.newClass { width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
	.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
	</style>
	<script>
	$(function() {
		$( "#button" ).click(function(){
			$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
			$( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
			return false;	
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class="newClass ui-corner-all">
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 
	</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\switchClass\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Content via Ajax</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs({
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html(
						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
						"If this wouldn't be a demo." );
				}
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Preloaded</a></li>
		<li><a href="ajax/content1.html">Tab 1</a></li>
		<li><a href="ajax/content2.html">Tab 2</a></li>
		<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
		<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links.  While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\bottom.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Tabs at bottom</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs();
		$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
			.removeClass( "ui-corner-all ui-corner-top" )
			.addClass( "ui-corner-bottom" );
	});
	</script>
	<style>
	#tabs { height: 200px; } 
	.tabs-bottom { position: relative; } 
	.tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; } 
	.tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } 
	.tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
	.ui-tabs-selected { margin-top: -3px !important; }
	</style>
</head>
<body>

<div class="demo">

<div id="tabs" class="tabs-bottom">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>With some additional CSS (for positioning) and JS (to put the right classes on elements) the tabs can be placed below their content.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\collapsible.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Collapse content</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs({
			collapsible: true
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p><strong>Click this tab again to close the content pane.</strong></p>
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p><strong>Click this tab again to close the content pane.</strong></p>
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p><strong>Click this tab again to close the content pane.</strong></p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the selected tab to toggle its content closed/open.  To enable this functionality, set the <code>collapsible</code> option to true.</p>
<pre><code>collapsible: true
</code></pre>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\cookie.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../external/jquery.cookie.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs({
			cookie: {
				// store cookie for a day, without, it would be a session cookie
				expires: 1
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Looks the same as the default demo, but uses cookie to store the selected tab, and restore it when the page (re)loads.
The cookie is stored for a day, so tabs will be restored even after closing the browser. Use cookie: {} for using cookies with default options.</p>
<p>The cookie option requires the cookie plugin, which can be found in the development-bundle > external folder from the download builder.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Click tabs to swap between content that is broken into logical sections.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
		<li><a href="ajax.html">Content via Ajax</a></li>
		<li><a href="mouseover.html">Open on mouseover</a></li>
		<li><a href="collapsible.html">Collapse content</a></li>
		<li><a href="sortable.html">Sortable</a></li>
		<li><a href="manipulation.html">Simple manipulation</a></li>
		<li><a href="bottom.html">Tabs below content</a></li>
		<li><a href="cookie.html">Cookie persistence</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\manipulation.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Simple manipulation</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#dialog label, #dialog input { display:block; }
	#dialog label { margin-top: 0.5em; }
	#dialog input, #dialog textarea { width: 95%; }
	#tabs { margin-top: 1em; }
	#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
	#add_tab { cursor: pointer; }
	</style>
	<script>
	$(function() {
		var $tab_title_input = $( "#tab_title"),
			$tab_content_input = $( "#tab_content" );
		var tab_counter = 2;

		// tabs init with a custom tab template and an "add" callback filling in the content
		var $tabs = $( "#tabs").tabs({
			tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
			add: function( event, ui ) {
				var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
				$( ui.panel ).append( "<p>" + tab_content + "</p>" );
			}
		});

		// modal dialog init: custom buttons and a "close" callback reseting the form inside
		var $dialog = $( "#dialog" ).dialog({
			autoOpen: false,
			modal: true,
			buttons: {
				Add: function() {
					addTab();
					$( this ).dialog( "close" );
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			open: function() {
				$tab_title_input.focus();
			},
			close: function() {
				$form[ 0 ].reset();
			}
		});

		// addTab form: calls addTab function on submit and closes the dialog
		var $form = $( "form", $dialog ).submit(function() {
			addTab();
			$dialog.dialog( "close" );
			return false;
		});

		// actual addTab function: adds new tab using the title input from the form above
		function addTab() {
			var tab_title = $tab_title_input.val() || "Tab " + tab_counter;
			$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );
			tab_counter++;
		}

		// addTab button: just opens the dialog
		$( "#add_tab" )
			.button()
			.click(function() {
				$dialog.dialog( "open" );
			});

		// close icon: removing the tab on click
		// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
		$( "#tabs span.ui-icon-close" ).live( "click", function() {
			var index = $( "li", $tabs ).index( $( this ).parent() );
			$tabs.tabs( "remove", index );
		});
	});
	</script>
</head>
<body>

<div class="demo">

	<div id="dialog" title="Tab data">
		<form>
			<fieldset class="ui-helper-reset">
				<label for="tab_title">Title</label>
				<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
				<label for="tab_content">Content</label>
				<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
			</fieldset>
		</form>
	</div>

	<button id="add_tab">Add Tab</button>

	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
		</ul>
		<div id="tabs-1">
			<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
		</div>
	</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Simple tabs adding and removing.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\mouseover.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Open on mouseover</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs({
			event: "mouseover"
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Toggle sections open/closed on mouseover with the <code>event</code> option. The default value for event is "click."</p>
<pre><code>event: 'mouseover'
</code></pre>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\sortable.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Sortable</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Drag the tabs above to re-order them.</p>
<p>
Making tabs sortable is as simple as calling
<code>.sortable()</code>
on the
<code>.ui-tabs-nav</code>
element.
</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\vertical.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Vertical Tabs functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
		$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
	});
	</script>
	<style>
	.ui-tabs-vertical { width: 55em; }
	.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
	.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
	.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
	.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
	.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
	</style>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<h2>Content heading 1</h2>
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<h2>Content heading 2</h2>
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<h2>Content heading 3</h2>
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Click tabs to swap between content that is broken into logical sections.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\ajax\content1.html
<p><strong>This content was loaded via ajax.</strong></p>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
<p>Mauris vitae ante. Curabitur augue. Nulla purus nibh, lobortis ut, feugiat at, aliquam id, purus. Sed venenatis, lorem venenatis volutpat commodo, purus quam lacinia justo, mattis interdum pede pede a odio. Fusce nibh. Morbi nisl mauris, dapibus in, tristique eget, accumsan et, pede. Donec mauris risus, pulvinar ut, faucibus eu, mollis in, nunc. In augue massa, commodo a, cursus vehicula, varius eu, dui. Suspendisse sodales suscipit lorem. Morbi malesuada, eros quis condimentum dignissim, lectus nibh tristique urna, non bibendum diam massa vel risus. Morbi suscipit. Proin egestas, eros at scelerisque scelerisque, dolor lacus fringilla lacus, ut ullamcorper mi magna at quam. Aliquam sed elit. Aliquam turpis purus, congue quis, iaculis id, ullamcorper sit amet, justo. Maecenas sed mauris. Proin magna justo, interdum in, tincidunt eu, viverra eu, turpis. Suspendisse mollis. In magna. Phasellus pellentesque, urna pellentesque convallis pellentesque, augue sem blandit pede, at rhoncus libero nisl a odio.</p>
<p>Sed vitae nibh non magna semper tempor. Duis dolor. Nam congue laoreet arcu. Fusce lobortis enim quis ligula. Maecenas commodo odio id mi. Maecenas scelerisque tellus eu odio. Etiam dolor purus, lacinia a, imperdiet in, aliquam et, eros. In pellentesque. Nullam ac massa. Integer et turpis. Ut quam augue, congue non, imperdiet id, eleifend ac, nisi. Etiam ac arcu. Cras iaculis accumsan erat. Nullam vulputate sapien nec nisi pretium rhoncus. Aliquam a nibh. Vivamus est ante, fermentum a, tincidunt ut, imperdiet nec, velit. Aenean non tortor. Sed nec mauris eget tellus condimentum rutrum.</p>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\tabs\ajax\content2.html
<p><strong>This other content was loaded via ajax.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.</p>
<p>Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.</p>
<p>Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.</p>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\toggle\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - Toggle Demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<script src="../../ui/jquery.effects.blind.js"></script>
	<script src="../../ui/jquery.effects.bounce.js"></script>
	<script src="../../ui/jquery.effects.clip.js"></script>
	<script src="../../ui/jquery.effects.drop.js"></script>
	<script src="../../ui/jquery.effects.explode.js"></script>
	<script src="../../ui/jquery.effects.fold.js"></script>
	<script src="../../ui/jquery.effects.highlight.js"></script>
	<script src="../../ui/jquery.effects.pulsate.js"></script>
	<script src="../../ui/jquery.effects.scale.js"></script>
	<script src="../../ui/jquery.effects.shake.js"></script>
	<script src="../../ui/jquery.effects.slide.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.toggler { width: 500px; height: 200px; }
	#button { padding: .5em 1em; text-decoration: none; }
	#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
	#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
	</style>
	<script>
	$(function() {
		// run the currently selected effect
		function runEffect() {
			// get effect type from 
			var selectedEffect = $( "#effectTypes" ).val();
			
			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if ( selectedEffect === "scale" ) {
				options = { percent: 0 };
			} else if ( selectedEffect === "size" ) {
				options = { to: { width: 200, height: 60 } };
			}
			
			// run the effect
			$( "#effect" ).toggle( selectedEffect, options, 500 );
		};
		
		// set effect from select menu value
		$( "#button" ).click(function() {
			runEffect();
			return false;
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Toggle</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>

<select name="effects" id="effectTypes">
	<option value="blind">Blind</option>
	<option value="bounce">Bounce</option>
	<option value="clip">Clip</option>
	<option value="drop">Drop</option>
	<option value="explode">Explode</option>
	<option value="fold">Fold</option>
	<option value="highlight">Highlight</option>
	<option value="puff">Puff</option>
	<option value="pulsate">Pulsate</option>
	<option value="scale">Scale</option>
	<option value="shake">Shake</option>
	<option value="size">Size</option>
	<option value="slide">Slide</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\toggle\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\toggleClass\default.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - toggleClass Demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.toggler { width: 500px; height: 200px; position: relative; }
	#button { padding: .5em 1em; text-decoration: none; }
	#effect {position: relative;  width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
	.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
	</style>
	<script>
	$(function() {
		$( "#button" ).click(function() {
			$( "#effect" ).toggleClass( "newClass", 1000 );
			return false;
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="toggler">
	<div id="effect" class="newClass ui-corner-all">
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 
	</div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\demos\toggleClass\index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects Demos</title>
	<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
	</ul>
</div>

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\accordion.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Accordion</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>Make the selected elements Accordion widgets. Semantic requirements:</p>
<p>The markup of your accordion container needs pairs of headers and content panels:</p>
<pre>&lt;div id=&quot;accordion&quot;&gt;
    &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;First header&lt;/a&gt;&lt;/h3&gt;
    &lt;div&gt;First content&lt;/div&gt;
    &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Second header&lt;/a&gt;&lt;/h3&gt;
    &lt;div&gt;Second content&lt;/div&gt;
&lt;/div&gt;</pre>
<p>If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'a.header'. The content element must be always next to its header.</p>
<p>If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.</p>
<p>Use activate(Number) to change the active content programmatically.</p>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.8/Accordion?section=1" title="Edit section: NOTE: If you want multiple sections open at once, don't use an accordion">edit</a>]</div><a name="NOTE:_If_you_want_multiple_sections_open_at_once.2C_don.27t_use_an_accordion"></a><h4>NOTE: If you want multiple sections open at once, don't use an accordion</h4>
<p>An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:</p>
<pre>jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle();
		return false;
	}).next().hide();
});</pre>
<p>Or animated:</p>
<pre>jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle('slow');
		return false;
	}).next().hide();
});</pre>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
<li>UI Effects Core (Optional - only for non-default animations)</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="310">
A simple jQuery UI Accordion.<br />
</p>
<pre>$(&quot;#accordion&quot;).accordion();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#accordion&quot;).accordion();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;accordion&quot;&gt;
	&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 1&lt;/a&gt;&lt;/h3&gt;
	&lt;div&gt;
		&lt;p&gt;
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		&lt;/p&gt;
	&lt;/div&gt;
	&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 2&lt;/a&gt;&lt;/h3&gt;
	&lt;div&gt;
		&lt;p&gt;
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		&lt;/p&gt;
	&lt;/div&gt;
	&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 3&lt;/a&gt;&lt;/h3&gt;
	&lt;div&gt;
		&lt;p&gt;
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		&lt;/p&gt;
		&lt;ul&gt;
			&lt;li&gt;List item one&lt;/li&gt;
			&lt;li&gt;List item two&lt;/li&gt;
			&lt;li&gt;List item three&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;
	&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 4&lt;/a&gt;&lt;/h3&gt;
	&lt;div&gt;
		&lt;p&gt;
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		&lt;/p&gt;
		&lt;p&gt;
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos.
		&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the accordion. Can be set when initialising (first creating) the accordion.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
//setter
$( ".selector" ).accordion( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-active">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-active">active</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector, Element, jQuery, Boolean, Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">first child</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Selector for the active element. Set to false to display none at start. Needs <code>collapsible: true</code>.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>active</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ active: 2 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>active</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var active = $( ".selector" ).accordion( "option", "active" );
//setter
$( ".selector" ).accordion( "option", "active", 2 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-animated">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-animated">animated</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean, String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"slide"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and all defined easing methods are supported ('bounceslide' requires UI Effects Core).</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>animated</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ animated: 'bounceslide' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>animated</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var animated = $( ".selector" ).accordion( "option", "animated" );
//setter
$( ".selector" ).accordion( "option", "animated", 'bounceslide' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-autoHeight">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-autoHeight">autoHeight</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>autoHeight</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ autoHeight: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>autoHeight</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
//setter
$( ".selector" ).accordion( "option", "autoHeight", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-clearStyle">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-clearStyle">clearStyle</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoHeight.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>clearStyle</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ clearStyle: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>clearStyle</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var clearStyle = $( ".selector" ).accordion( "option", "clearStyle" );
//setter
$( ".selector" ).accordion( "option", "clearStyle", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-collapsible">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-collapsible">collapsible</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>collapsible</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ collapsible: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>collapsible</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
//setter
$( ".selector" ).accordion( "option", "collapsible", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-event">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-event">event</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"click"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The event on which to trigger the accordion.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>event</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ event: 'mouseover' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>event</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var event = $( ".selector" ).accordion( "option", "event" );
//setter
$( ".selector" ).accordion( "option", "event", 'mouseover' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-fillSpace">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-fillSpace">fillSpace</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set, the accordion completely fills the height of the parent element. Overrides autoheight.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>fillSpace</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ fillSpace: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>fillSpace</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var fillSpace = $( ".selector" ).accordion( "option", "fillSpace" );
//setter
$( ".selector" ).accordion( "option", "fillSpace", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-header">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-header">header</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector, jQuery</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"&gt; li &gt;&nbsp;:first-child,&gt;&nbsp;:not(li):even"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Selector for the header element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>header</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ header: 'h3' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>header</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var header = $( ".selector" ).accordion( "option", "header" );
//setter
$( ".selector" ).accordion( "option", "header", 'h3' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-icons">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-icons">icons</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Object</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">{ &quot;header&quot;: &quot;ui-icon-triangle-1-e&quot;, &quot;headerSelected&quot;: &quot;ui-icon-triangle-1-s&quot; }</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by <a href="http://www.themeroller.com" class="external text" title="http://www.themeroller.com">jQuery UI ThemeRoller</a>. Set to false to have no icons displayed.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>icons</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ icons: { &quot;header&quot;: &quot;ui-icon-plus&quot;, &quot;headerSelected&quot;: &quot;ui-icon-minus&quot; } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>icons</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var icons = $( ".selector" ).accordion( "option", "icons" );
//setter
$( ".selector" ).accordion( "option", "icons", { &quot;header&quot;: &quot;ui-icon-plus&quot;, &quot;headerSelected&quot;: &quot;ui-icon-minus&quot; } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-navigation">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-navigation">navigation</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>navigation</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ navigation: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>navigation</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var navigation = $( ".selector" ).accordion( "option", "navigation" );
//setter
$( ".selector" ).accordion( "option", "navigation", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-navigationFilter">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-navigationFilter">navigationFilter</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Function</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default"> </dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Overwrite the default location.href-matching with your own matcher.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a accordion with the <code>navigationFilter</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).accordion({ navigationFilter: function(){ ... } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>navigationFilter</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var navigationFilter = $( ".selector" ).accordion( "option", "navigationFilter" );
//setter
$( ".selector" ).accordion( "option", "navigationFilter", function(){ ... } );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">accordioncreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when accordion is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).accordion({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>accordioncreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;accordioncreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-change">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-change">change</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">accordionchange</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.
</p>
<pre>$('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
});</pre></p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>change</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).accordion({
   change: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>change</code> event by type: <code>accordionchange</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;accordionchange&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

<p>
<li class="event" id="event-changestart">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-changestart">changestart</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">accordionchangestart</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered every time the accordion starts to change.
</p>
<pre>$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
});</pre></p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>changestart</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).accordion({
   changestart: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>changestart</code> event by type: <code>accordionchangestart</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;accordionchangestart&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.accordion( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the accordion functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>

<p>
<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.accordion( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the accordion.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.accordion( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the accordion.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.accordion( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any accordion option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.accordion( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple accordion options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.accordion( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-accordion element.</p>
  </div>
</li>


<li class="method" id="method-activate">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-activate">activate</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.accordion( "activate"

, index





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass <code>false</code> to close all (only possible with <code>collapsible:true</code>).</p>
  </div>
</li>


<li class="method" id="method-resize">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-resize">resize</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.accordion( "resize"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Recompute heights of the accordion contents when using the fillSpace option and the container height changed. For example, when the container is a resizable, this method should be called by its resize-event.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Accordion plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.accordion.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;div class="<strong>ui-accordion</strong> ui-widget ui-helper-reset"&gt;<br />
&nbsp;&nbsp;&lt;h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-active ui-corner-top"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="ui-icon ui-icon-triangle-1-s"/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#"&gt;Section 1&lt;/a&gt;<br />
&nbsp;&nbsp;&lt;/h3&gt;<br />
&nbsp;&nbsp;&lt;div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom <strong>ui-accordion-content-active</strong>"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;Section 1 content<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&lt;h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="ui-icon ui-icon-triangle-1-e"/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#"&gt;Section 2&lt;/a&gt;<br />
&nbsp;&nbsp;&lt;/h3&gt;<br />
&nbsp;&nbsp;&lt;div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;Section 2 content<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&lt;h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="ui-icon ui-icon-triangle-1-e"/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#"&gt;Section 3&lt;/a&gt;<br />
&nbsp;&nbsp;&lt;/h3&gt;<br />
&nbsp;&nbsp;&lt;div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;Section 3 content<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&lt;/div&gt;<br />
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the accordion plugin, not markup you should use to create a accordion. The only markup needed for that is <br />&lt;div&gt;<br />
&#160;&#160;&#160;&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 1&lt;/a&gt;&lt;/h3&gt;<br />
&#160;&#160;&#160;&lt;div&gt;<br />
&#160;&#160;&#160;&#160;&#160;&#160;Section 1 content<br />
&#160;&#160;&#160;&lt;/div&gt;<br />
&#160;&#160;&#160;&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 2&lt;/a&gt;&lt;/h3&gt;<br />
&#160;&#160;&#160;&lt;div&gt;<br />
&#160;&#160;&#160;&#160;&#160;&#160;Section 2 content<br />
&#160;&#160;&#160;&lt;/div&gt;<br />
&#160;&#160;&#160;&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Section 3&lt;/a&gt;&lt;/h3&gt;<br />
&#160;&#160;&#160;&lt;div&gt;<br />
&#160;&#160;&#160;&#160;&#160;&#160;Section 3 content<br />
&#160;&#160;&#160;&lt;/div&gt;<br />
&lt;/div&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 38072 bytes
Post-expand include size: 64821 bytes
Template argument size: 35925 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3773-1!1!0!!en!2 and timestamp 20120724122450 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\addClass.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI addClass</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/addClass?section=1" title="Edit section: addClass( class, [duration] )">edit</a>]</div><a name="addClass.28_class.2C_.5Bduration.5D_.29"></a><h3>addClass( class, <span class="optional">[</span>duration<span class="optional">]</span> )</h3>
<p>Adds the specified class to each of the set of matched elements with an optional transition between the states.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>Effects Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="100">
Adds the class 'selected' to the matched elements with a one second transition.<br />
</p>
<pre>$(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(this).<strong class="selflink">addClass</strong>(&quot;selected&quot;, 1000);
    });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
  p { cursor: pointer; font-size: 1.2em; }
  .selected { color:red; }
&lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(this).<strong class="selflink">addClass</strong>(&quot;selected&quot;, 1000);
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  &lt;p&gt;Click me to add a 'selected' class.&lt;/p&gt;
&lt;p&gt;Click me to add a 'selected' class.&lt;/p&gt;
&lt;p&gt;Click me to add a 'selected' class.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Arguments</h2>
    <ul class="options-list">
      
<li class="option" id="option-class">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-class">class</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>One CSS class to add to the elements.</p>
  </div>
</li>


<li class="option" id="option-duration">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-duration">duration</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
  </div>
</li>

    </ul>
  </div>
</div>

</p><!-- 
Pre-expand include size: 5208 bytes
Post-expand include size: 6765 bytes
Template argument size: 4231 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2606-1!1!0!!en!2 and timestamp 20120724021053 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\animate.html
<p>The jQuery UI effects core extends the <a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a> function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:
</p>
<ul><li> <b>backgroundColor</b>
</li><li> <b>borderBottomColor</b>
</li><li> <b>borderLeftColor</b>
</li><li> <b>borderRightColor</b>
</li><li> <b>borderTopColor</b>
</li><li> <b>color</b>
</li><li> <b>outlineColor</b>
</li></ul>
<p>with one of the following combinations:
</p>
<ul><li> <b>hex (#FF0000)</b>
</li><li> <b>rgb (rgb(255,255,255))</b>
</li><li> <b>names ("black")</b>
</li></ul>
<p><br />
</p><p><div class="options list"><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody>
</table><b class="options">Example:</b><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody>
<div class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<div id="demo" class="tabs-container" rel="125">
A simple color animation.<br />
</p>
<pre>$(&quot;.block&quot;).<a href="http://docs.jquery.com/Events/toggle" title="Events/toggle">toggle</a>(function() {
    $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;black&quot; }, 1000);
},function() {
    $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;#68BFEF&quot; }, 500);
});

</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "<a href="http://www.w3.org/TR/html4/loose.dtd" class="external free" title="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="<a href="http://code.jquery.com/jquery-latest.js" class="external free" title="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"&gt;&lt;/script&gt;
  
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;

  &lt;script&gt;
  $(document).ready(function(){
    $(&quot;.block&quot;).<a href="http://docs.jquery.com/Events/toggle" title="Events/toggle">toggle</a>(function() {
    $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;black&quot; }, 1000);
},function() {
    $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;#68BFEF&quot; }, 500);
});

  });
  &lt;/script&gt;
  &lt;style&gt;
  .block { 
    color: white;
    background-color: #68BFEF;
    width: 150px; 
    height: 70px;
    margin: 10px; 
  }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class=&quot;block&quot;&gt; Click me&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
</p><p></tbody></table></div>
</p><!-- 
Pre-expand include size: 3730 bytes
Post-expand include size: 5382 bytes
Template argument size: 3450 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3094-1!1!0!!en!2 and timestamp 20120724114846 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\autocomplete.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Autocomplete</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.</p>
<p>By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.</p>
<p>This can be used to enter previous selected values, for example you could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book.</p>
<p>You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.</p>
<p>Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:</p>
<ul>
<li>an Array with local data</li>
<li>a String, specifying a URL</li>
<li>a Callback</li>
</ul>
<p><b>Expected data format</b></p>
<p>The data from local data, a url or a callback can come in two variants:</p>
<ul>
<li>An Array of Strings:<br /><code>[ "Choice1", "Choice2" ]</code></li>
<li>An Array of Objects with label and value properties:<br /><code>[ { label: "Choice1", value: "value1" }, ... ]</code></li>
</ul>
<p>The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.</p>
<p>When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead the request parameter "term" gets added to the URL, which the server-side script should use for filtering the results. The data itself can be in the same format as the local data described above.</p>
<p>The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:</p>
<ul>
<li>A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".</li>
<li>A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties). It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.</li>
</ul>
<p>The label is always treated as text, if you want the label to be treated as html you can use <a href="https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js" class="external text" title="https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js">Scott González' html extension</a>. The demos all focus on different variations of the source-option - look for the one that matches your use case, and take a look at the code.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
<li>UI Position</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="300">
A simple jQuery UI Autocomplete.<br />
</p>
<pre>$(&quot;input#autocomplete&quot;).autocomplete({
    source: [&quot;c++&quot;, &quot;java&quot;, &quot;php&quot;, &quot;coldfusion&quot;, &quot;javascript&quot;, &quot;asp&quot;, &quot;ruby&quot;]
});
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;input#autocomplete&quot;).autocomplete({
    source: [&quot;c++&quot;, &quot;java&quot;, &quot;php&quot;, &quot;coldfusion&quot;, &quot;javascript&quot;, &quot;asp&quot;, &quot;ruby&quot;]
});
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;input id=&quot;autocomplete&quot; /&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the autocomplete. Can be set when initialising (first creating) the autocomplete.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a autocomplete with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).autocomplete({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
//setter
$( ".selector" ).autocomplete( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-appendTo">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"body"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Which element the menu should be appended to.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a autocomplete with the <code>appendTo</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).autocomplete({ appendTo: "#someElem" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>appendTo</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
//setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-autoFocus">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-autoFocus">autoFocus</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true the first item will be automatically focused.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a autocomplete with the <code>autoFocus</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).autocomplete({ autoFocus: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>autoFocus</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" );
//setter
$( ".selector" ).autocomplete( "option", "autoFocus", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-delay">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-delay">delay</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">300</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The delay in milliseconds the Autocomplete waits after a keystroke to activate itself. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a autocomplete with the <code>delay</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).autocomplete({ delay: 0 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>delay</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
//setter
$( ".selector" ).autocomplete( "option", "delay", 0 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-minLength">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-minLength">minLength</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The minimum number of characters a user has to type before the Autocomplete activates. Zero is useful for local data with just a few items. Should be increased when there are a lot of items, where a single character would match a few thousand items.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a autocomplete with the <code>minLength</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).autocomplete({ minLength: 0 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>minLength</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
//setter
$( ".selector" ).autocomplete( "option", "minLength", 0 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-position">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-position">position</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Object</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">{ my: &quot;left top&quot;, at: &quot;left bottom&quot;, collision: &quot;none&quot; }</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Identifies the position of the Autocomplete widget in relation to the associated input element. The "of" option defaults to the input element, but you can specify another element to position against. You can refer to the <a href="http://docs.jquery.com/UI/Position" class="external text" title="http://docs.jquery.com/UI/Position">jQuery UI Position</a> utility for more details about the various options.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a autocomplete with the <code>position</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).autocomplete({ position: { my : &quot;right top&quot;, at: &quot;right bottom&quot; } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>position</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var position = $( ".selector" ).autocomplete( "option", "position" );
//setter
$( ".selector" ).autocomplete( "option", "position", { my : &quot;right top&quot;, at: &quot;right bottom&quot; } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-source">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-source">source</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Array, Callback</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">none, must be specified</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Defines the data to use, must be specified. See Overview section for more details, and look at the various demos.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a autocomplete with the <code>source</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).autocomplete({ source: [&quot;c++&quot;, &quot;java&quot;, &quot;php&quot;, &quot;coldfusion&quot;, &quot;javascript&quot;, &quot;asp&quot;, &quot;ruby&quot;] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>source</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var source = $( ".selector" ).autocomplete( "option", "source" );
//setter
$( ".selector" ).autocomplete( "option", "source", [&quot;c++&quot;, &quot;java&quot;, &quot;php&quot;, &quot;coldfusion&quot;, &quot;javascript&quot;, &quot;asp&quot;, &quot;ruby&quot;] );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">autocompletecreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when autocomplete is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).autocomplete({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>autocompletecreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;autocompletecreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-search">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-search">search</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">autocompletesearch</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Before a request (source-option) is started, after minLength and delay are met. Can be canceled (return false), then no request will be started and no items suggested.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>search</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).autocomplete({
   search: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>search</code> event by type: <code>autocompletesearch</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;autocompletesearch&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-open">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-open">open</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">autocompleteopen</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Triggered when the suggestion menu is opened.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>open</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).autocomplete({
   open: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>open</code> event by type: <code>autocompleteopen</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;autocompleteopen&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-focus">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-focus">focus</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">autocompletefocus</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>focus</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).autocomplete({
   focus: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>focus</code> event by type: <code>autocompletefocus</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;autocompletefocus&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-select">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-select">select</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">autocompleteselect</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>select</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).autocomplete({
   select: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>select</code> event by type: <code>autocompleteselect</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;autocompleteselect&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-close">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-close">close</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">autocompleteclose</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>When the list is hidden - doesn't have to occur together with a change.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>close</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).autocomplete({
   close: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>close</code> event by type: <code>autocompleteclose</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;autocompleteclose&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-change">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-change">change</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">autocompletechange</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Triggered when the field is blurred, if the value has changed; ui.item refers to the selected item.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>change</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).autocomplete({
   change: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>change</code> event by type: <code>autocompletechange</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;autocompletechange&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.autocomplete( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the autocomplete functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.autocomplete( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the autocomplete.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.autocomplete( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the autocomplete.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.autocomplete( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any autocomplete option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.autocomplete( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple autocomplete options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.autocomplete( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-autocomplete element.</p>
  </div>
</li>


<li class="method" id="method-search">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-search">search</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.autocomplete( "search"

, <span class="optional">[</span>value<span class="optional">] </span>





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Triggers a search event, which, when data is available, then will display the suggestions; can be used by a selectbox-like button to open the suggestions when clicked. If no value argument is specified, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.</p>
  </div>
</li>


<li class="method" id="method-close">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-close">close</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.autocomplete( "close"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Close the Autocomplete menu. Useful in combination with the search method, to close the open menu.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Autocomplete plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.autocomplete.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;input class=&quot;<strong>ui-autocomplete-input</strong>&quot;/&gt;<br />
&lt;ul class=&quot;<strong>ui-autocomplete</strong> <strong>ui-menu</strong> ui-widget ui-widget-content ui-corner-all&quot;&gt;<br />
&nbsp;&nbsp;&lt;li class=&quot;<strong>ui-menu-item</strong>&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-corner-all&quot;&gt;item 1&lt;/a&gt;<br />
&nbsp;&nbsp;&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;li class=&quot;<strong>ui-menu-item</strong>&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-corner-all&quot;&gt;item 2&lt;/a&gt;<br />
&nbsp;&nbsp;&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;li class=&quot;<strong>ui-menu-item</strong>&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-corner-all&quot;&gt;item 3&lt;/a&gt;<br />
&nbsp;&nbsp;&lt;/li&gt;<br />
&lt;/ul&gt;
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the autocomplete plugin, not markup you should use to create a autocomplete. The only markup needed for that is &lt;input/&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 35954 bytes
Post-expand include size: 60805 bytes
Template argument size: 33828 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3766-1!1!0!!en!2 and timestamp 20120724122421 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\button.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Button</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.</p>
<p>In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons: Their associated label is styled to appear as the button, while the underlying input is updated on click.</p>
<p>In order to group radio buttons, Button also provides an additional widget-method, called Buttonset. Its used by selecting a container element (which contains the radio buttons) and calling buttonset(). Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendents and applying button() to them. You can enable and disable a buttonset, which will enable and disable all contained buttons. Destroying a buttonset also calls the button's destroy method.</p>
<p>When using an input of type button, submit or reset, support is limited to plain text labels with no icons.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="300">
A simple jQuery UI Button.<br />
</p>
<pre>$(&quot;button&quot;).button();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;button&quot;).button();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;button&gt;Button label&lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
<div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<div id="demo" class="tabs-container" rel="300">
A simple jQuery UI Button.<br />
</p>
<pre>$(&quot;#radio&quot;).buttonset();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#radio&quot;).buttonset();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;radio&quot;&gt;
	&lt;input type=&quot;radio&quot; id=&quot;radio1&quot; name=&quot;radio&quot; /&gt;&lt;label for=&quot;radio1&quot;&gt;Choice 1&lt;/label&gt;
	&lt;input type=&quot;radio&quot; id=&quot;radio2&quot; name=&quot;radio&quot; checked=&quot;checked&quot; /&gt;&lt;label for=&quot;radio2&quot;&gt;Choice 2&lt;/label&gt;
	&lt;input type=&quot;radio&quot; id=&quot;radio3&quot; name=&quot;radio&quot; /&gt;&lt;label for=&quot;radio3&quot;&gt;Choice 3&lt;/label&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the button. Can be set when initialising (first creating) the button.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a button with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).button({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).button( "option", "disabled" );
//setter
$( ".selector" ).button( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-text">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-text">text</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Whether to show any text - when set to false (display no text), icons (see icons option) must be enabled, otherwise it'll be ignored.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a button with the <code>text</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).button({ text: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>text</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var text = $( ".selector" ).button( "option", "text" );
//setter
$( ".selector" ).button( "option", "text", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-icons">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-icons">icons</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Options</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">{ primary: null, secondary: null }</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Icons to display, with or without text (see text option). The primary icon is displayed by default on the left of the label text, the secondary by default is on the right. Value for the primary and secondary properties must be a classname (String), eg. "ui-icon-gear". For using only one icon: icons: {primary:'ui-icon-locked'}. For using two icons: icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a button with the <code>icons</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).button({ icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} });</code></pre>
</dd>

    
<dt>
  Get or set the <code>icons</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var icons = $( ".selector" ).button( "option", "icons" );
//setter
$( ".selector" ).button( "option", "icons", {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-label">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-label">label</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">HTML content of the button, or value attribute</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Text to show on the button. When not specified (null), the element's html content is used, or its value attribute when it's an input element of type submit or reset; or the html content of the associated label element if its an input of type radio or checkbox</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a button with the <code>label</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).button({ label: "custom label" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>label</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var label = $( ".selector" ).button( "option", "label" );
//setter
$( ".selector" ).button( "option", "label", "custom label" );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">buttoncreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when button is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).button({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>buttoncreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;buttoncreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

</p>
<p>There are no events for this plugin.</p>
    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the button functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>

<p>
<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the button.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the button.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any button option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple button options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-button element.</p>
  </div>
</li>


<li class="method" id="method-refresh">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( "refresh"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Button plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.button.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;button class=&quot;<strong>ui-button ui-button-text-only</strong> ui-widget ui-state-default ui-corner-all&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;span class=&quot;<strong>ui-button-text</strong>&quot;&gt;Button Label&lt;/span&gt;<br />&lt;/button&gt;
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the button plugin, not markup you should use to create a button. The only markup needed for that is &lt;button&gt;Button Label&lt;/button&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 24542 bytes
Post-expand include size: 31799 bytes
Template argument size: 14018 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3767-1!1!0!!en!2 and timestamp 20120724065026 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\datepicker.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Datepicker</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.</p>
<p>By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.
</p><p>You can use keyboard shortcuts to drive the datepicker:
</p>
<ul>
 <li>page up/down - previous/next month</li>
 <li>ctrl+page up/down - previous/next year</li>
 <li>ctrl+home - current month or open when closed</li>
 <li>ctrl+left/right - previous/next day</li>
 <li>ctrl+up/down - previous/next week</li>
 <li>enter - accept the selected date</li>
 <li>ctrl+end - close and erase the date</li>
 <li>escape - close the datepicker without selection</li>
</ul>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.8/Datepicker?section=1" title="Edit section: Utility functions">edit</a>]</div><a name="Utility_functions"></a><h3 id="utility-functions">Utility functions</h3>
<ul>
 <li><a href="http://docs.jquery.com/UI/Datepicker/setDefaults" title="UI/Datepicker/setDefaults">$.datepicker.setDefaults( settings )</a> - Set settings for all datepicker instances.</li>
 <li><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">$.datepicker.formatDate( format, date, settings )</a> - Format a date into a string value with a specified format.</li>
 <li><a href="http://docs.jquery.com/UI/Datepicker/parseDate" title="UI/Datepicker/parseDate">$.datepicker.parseDate( format, value, settings ) </a> - Extract a date from a string value with a specified format.</li>
 <li><a href="http://docs.jquery.com/UI/Datepicker/iso8601Week" title="UI/Datepicker/iso8601Week">$.datepicker.iso8601Week( date )</a> - Determine the week of the year for a given date: 1 to 53.</li>
 <li><a href="http://docs.jquery.com/UI/Datepicker/noWeekends" title="UI/Datepicker/noWeekends">$.datepicker.noWeekends</a> - Set as beforeShowDay function to prevent selection of weekends.</li>
</ul>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.8/Datepicker?section=2" title="Edit section: Localization">edit</a>]</div><a name="Localization"></a><h3>Localization</h3>
<p>Datepicker provides support for localizing its content to cater for different languages
	and date formats. Each localization is contained within its own file with the 
	language code appended to the name, e.g. <code>jquery.ui.datepicker-fr.js</code> for French.
	The desired localization file should be included after the main datepicker code. They add their settings to the set
	of available localizations and automatically apply them as defaults for all instances.</p>
<p>The <code>$.datepicker.regional</code> attribute holds an array of localizations,
	indexed by language code, with &quot;&quot; referring to the default (English). Each entry is
	an object with the following attributes: <code>closeText</code>, <code>prevText</code>,
	<code>nextText</code>, <code>currentText</code>, <code>monthNames</code>,
	<code>monthNamesShort</code>, <code>dayNames</code>, <code>dayNamesShort</code>, 
	<code>dayNamesMin</code>, <code>weekHeader</code>, <code>dateFormat</code>,
	<code>firstDay</code>, <code>isRTL</code>, <code>showMonthAfterYear</code>,
	and <code>yearSuffix</code>.</p>
<p>You can restore the default localizations with:</p>
<p><code>$.datepicker.setDefaults($.datepicker.regional[&quot;&quot;]);</code>
</p>
<p>And can then override an individual datepicker for a specific locale:</p>
<p><code>$(selector).datepicker($.datepicker.regional['fr']);</code>
</p>
The localization files are included when using the <a href="http://jqueryui.com/download/" class="external text" title="http://jqueryui.com/download/">jQuery UI download builder</a>.
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="220">
A simple jQuery UI Datepicker.<br />
</p>
<pre>$(&quot;#datepicker&quot;).datepicker();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#datepicker&quot;).datepicker();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;datepicker&quot;&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the datepicker. Can be set when initialising (first creating) the datepicker.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).datepicker( "option", "disabled" );
//setter
$( ".selector" ).datepicker( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-altField">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-altField">altField</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector, jQuery, Element</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">&quot;&quot;</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-altFormat" title="UI/Datepicker">altFormat</a></code> setting to change the format of the date within this field. Leave as blank for no alternate field.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>altField</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ altField: "#actualDate" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>altField</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var altField = $( ".selector" ).datepicker( "option", "altField" );
//setter
$( ".selector" ).datepicker( "option", "altField", "#actualDate" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-altFormat">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-altFormat">altFormat</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">&quot;&quot;</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> to be used for the <code><a href="http://docs.jquery.com/UI/Datepicker#option-altField" title="UI/Datepicker">altField</a></code> option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the <a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a> function</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>altFormat</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ altFormat: "yy-mm-dd" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>altFormat</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var altFormat = $( ".selector" ).datepicker( "option", "altFormat" );
//setter
$( ".selector" ).datepicker( "option", "altFormat", "yy-mm-dd" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-appendText">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-appendText">appendText</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">&quot;&quot;</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The text to display after each date field, e.g. to show the required format.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>appendText</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ appendText: "(yyyy-mm-dd)" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>appendText</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var appendText = $( ".selector" ).datepicker( "option", "appendText" );
//setter
$( ".selector" ).datepicker( "option", "appendText", "(yyyy-mm-dd)" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-autoSize">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-autoSize">autoSize</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set to true to automatically resize the input field to accommodate dates in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>autoSize</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ autoSize: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>autoSize</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var autoSize = $( ".selector" ).datepicker( "option", "autoSize" );
//setter
$( ".selector" ).datepicker( "option", "autoSize", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-buttonImage">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-buttonImage">buttonImage</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">&quot;&quot;</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The URL for the popup button image. If set, <code><a href="http://docs.jquery.com/UI/Datepicker#option-buttonText" title="UI/Datepicker">buttonText</a></code> becomes the <i>alt</i> value and is not directly displayed.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>buttonImage</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ buttonImage: "/images/datepicker.gif" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>buttonImage</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" );
//setter
$( ".selector" ).datepicker( "option", "buttonImage", "/images/datepicker.gif" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-buttonImageOnly">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-buttonImageOnly">buttonImageOnly</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set to true to place an image after the field to use as the trigger without it appearing on a button.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>buttonImageOnly</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ buttonImageOnly: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>buttonImageOnly</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" );
//setter
$( ".selector" ).datepicker( "option", "buttonImageOnly", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-buttonText">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-buttonText">buttonText</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"..."</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The text to display on the trigger button. Use in conjunction with <code><a href="http://docs.jquery.com/UI/Datepicker#option-showOn" title="UI/Datepicker">showOn</a></code> equal to 'button' or 'both'.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>buttonText</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ buttonText: "Choose" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>buttonText</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var buttonText = $( ".selector" ).datepicker( "option", "buttonText" );
//setter
$( ".selector" ).datepicker( "option", "buttonText", "Choose" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-calculateWeek">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-calculateWeek">calculateWeek</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Function</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">$.datepicker.iso8601Week</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>calculateWeek</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ calculateWeek: myWeekCalc });</code></pre>
</dd>

    
<dt>
  Get or set the <code>calculateWeek</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" );
//setter
$( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-changeMonth">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-changeMonth">changeMonth</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Allows you to change the month by selecting from a drop-down list. You can enable this feature by setting the attribute to true.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>changeMonth</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ changeMonth: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>changeMonth</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" );
//setter
$( ".selector" ).datepicker( "option", "changeMonth", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-changeYear">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-changeYear">changeYear</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Allows you to change the year by selecting from a drop-down list. You can enable this feature by setting the attribute to true. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-yearRange" title="UI/Datepicker">yearRange</a></code> option to control which years are made available for selection.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>changeYear</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ changeYear: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>changeYear</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );
//setter
$( ".selector" ).datepicker( "option", "changeYear", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-closeText">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-closeText">closeText</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"Done"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The text to display for the close link. This attribute is one of the regionalisation attributes. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-showButtonPanel" title="UI/Datepicker">showButtonPanel</a></code> to display this button.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>closeText</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ closeText: "X" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>closeText</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var closeText = $( ".selector" ).datepicker( "option", "closeText" );
//setter
$( ".selector" ).datepicker( "option", "closeText", "X" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-constrainInput">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-constrainInput">constrainInput</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>When true entry in the input field is constrained to those characters allowed by the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>constrainInput</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ constrainInput: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>constrainInput</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" );
//setter
$( ".selector" ).datepicker( "option", "constrainInput", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-currentText">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-currentText">currentText</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"Today"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The text to display for the current day link. This attribute is one of the regionalisation attributes. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-showButtonPanel" title="UI/Datepicker">showButtonPanel</a></code> to display this button.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>currentText</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ currentText: "Now" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>currentText</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var currentText = $( ".selector" ).datepicker( "option", "currentText" );
//setter
$( ".selector" ).datepicker( "option", "currentText", "Now" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-dateFormat">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-dateFormat">dateFormat</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"mm/dd/yy"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the <code><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a></code> function.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>dateFormat</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>dateFormat</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-dayNames">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-dayNames">dayNames</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The list of long day names, starting from Sunday, for use as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>dayNames</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ dayNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>dayNames</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var dayNames = $( ".selector" ).datepicker( "option", "dayNames" );
//setter
$( ".selector" ).datepicker( "option", "dayNames", ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-dayNamesMin">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-dayNamesMin">dayNamesMin</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. This attribute is one of the regionalisation attributes.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>dayNamesMin</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>dayNamesMin</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" );
//setter
$( ".selector" ).datepicker( "option", "dayNamesMin", ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-dayNamesShort">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-dayNamesShort">dayNamesShort</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The list of abbreviated day names, starting from Sunday, for use as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. This attribute is one of the regionalisation attributes.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>dayNamesShort</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ dayNamesShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>dayNamesShort</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" );
//setter
$( ".selector" ).datepicker( "option", "dayNamesShort", ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-defaultDate">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-defaultDate">defaultDate</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Date, Number, String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>defaultDate</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ defaultDate: +7 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>defaultDate</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
//setter
$( ".selector" ).datepicker( "option", "defaultDate", +7 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-duration">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-duration">duration</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"normal"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast").</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>duration</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ duration: "slow" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>duration</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var duration = $( ".selector" ).datepicker( "option", "duration" );
//setter
$( ".selector" ).datepicker( "option", "duration", "slow" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-firstDay">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-firstDay">firstDay</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>firstDay</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ firstDay: 1 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>firstDay</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var firstDay = $( ".selector" ).datepicker( "option", "firstDay" );
//setter
$( ".selector" ).datepicker( "option", "firstDay", 1 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-gotoCurrent">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-gotoCurrent">gotoCurrent</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>When true the current day link moves to the currently selected date instead of today.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>gotoCurrent</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ gotoCurrent: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>gotoCurrent</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" );
//setter
$( ".selector" ).datepicker( "option", "gotoCurrent", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-hideIfNoPrevNext">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Normally the previous and next links are disabled when not applicable (see <code><a href="http://docs.jquery.com/UI/Datepicker#option-minDate" title="UI/Datepicker">minDate</a></code>/<code><a href="http://docs.jquery.com/UI/Datepicker#option-maxDate" title="UI/Datepicker">maxDate</a></code>). You can hide them altogether by setting this attribute to true.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>hideIfNoPrevNext</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ hideIfNoPrevNext: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>hideIfNoPrevNext</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" );
//setter
$( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-isRTL">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-isRTL">isRTL</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>True if the current language is drawn from right to left. This attribute is one of the regionalisation attributes.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>isRTL</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ isRTL: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>isRTL</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var isRTL = $( ".selector" ).datepicker( "option", "isRTL" );
//setter
$( ".selector" ).datepicker( "option", "isRTL", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-maxDate">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-maxDate">maxDate</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Date, Number, String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set a maximum selectable date via a Date object or as a string in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +1w'), or null for no limit.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>maxDate</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ maxDate: "+1m +1w" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>maxDate</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
//setter
$( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-minDate">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-minDate">minDate</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Date, Number, String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set a minimum selectable date via a Date object or as a string in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>minDate</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });</code></pre>
</dd>

    
<dt>
  Get or set the <code>minDate</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
//setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-monthNames">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-monthNames">monthNames</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The list of full month names, for use as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. This attribute is one of the regionalisation attributes.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>monthNames</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ monthNames: ["Januar","Februar","Marts","April","Maj","Juni","Juli","August","September","Oktober","November","December"] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>monthNames</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var monthNames = $( ".selector" ).datepicker( "option", "monthNames" );
//setter
$( ".selector" ).datepicker( "option", "monthNames", ["Januar","Februar","Marts","April","Maj","Juni","Juli","August","September","Oktober","November","December"] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-monthNamesShort">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-monthNamesShort">monthNamesShort</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The list of abbreviated month names, as used in the month header on each datepicker and as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. This attribute is one of the regionalisation attributes.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>monthNamesShort</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ monthNamesShort: ["Jan","Feb","Mar","Apr","Maj","Jun","Jul","Aug","Sep","Okt","Nov","Dec"] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>monthNamesShort</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var monthNamesShort = $( ".selector" ).datepicker( "option", "monthNamesShort" );
//setter
$( ".selector" ).datepicker( "option", "monthNamesShort", ["Jan","Feb","Mar","Apr","Maj","Jun","Jul","Aug","Sep","Okt","Nov","Dec"] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-navigationAsDateFormat">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-navigationAsDateFormat">navigationAsDateFormat</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>When true the <code><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a></code> function is applied to the <code><a href="http://docs.jquery.com/UI/Datepicker#option-prevText" title="UI/Datepicker">prevText</a></code>, <code><a href="http://docs.jquery.com/UI/Datepicker#option-nextText" title="UI/Datepicker">nextText</a></code>, and <code><a href="http://docs.jquery.com/UI/Datepicker#option-currentText" title="UI/Datepicker">currentText</a></code> values before display, allowing them to display the target month names for example.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>navigationAsDateFormat</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ navigationAsDateFormat: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>navigationAsDateFormat</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateFormat" );
//setter
$( ".selector" ).datepicker( "option", "navigationAsDateFormat", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-nextText">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-nextText">nextText</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"Next"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The text to display for the next month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>nextText</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ nextText: "Later" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>nextText</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var nextText = $( ".selector" ).datepicker( "option", "nextText" );
//setter
$( ".selector" ).datepicker( "option", "nextText", "Later" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-numberOfMonths">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-numberOfMonths">numberOfMonths</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number, Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>numberOfMonths</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ numberOfMonths: [2, 3] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>numberOfMonths</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" );
//setter
$( ".selector" ).datepicker( "option", "numberOfMonths", [2, 3] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-prevText">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-prevText">prevText</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"Prev"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The text to display for the previous month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>prevText</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ prevText: "Earlier" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>prevText</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var prevText = $( ".selector" ).datepicker( "option", "prevText" );
//setter
$( ".selector" ).datepicker( "option", "prevText", "Earlier" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-selectOtherMonths">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-selectOtherMonths">selectOtherMonths</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>When true days in other months shown before or after the current month are selectable. This only applies if <code><a href="http://docs.jquery.com/UI/Datepicker#option-showOtherMonths" title="UI/Datepicker">showOtherMonths</a></code> is also true.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>selectOtherMonths</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ selectOtherMonths: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>selectOtherMonths</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" );
//setter
$( ".selector" ).datepicker( "option", "selectOtherMonths", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-shortYearCutoff">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-shortYearCutoff">shortYearCutoff</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"+10"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set the cutoff year for determining the century for a date (used in conjunction with <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>shortYearCutoff</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ shortYearCutoff: 50 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>shortYearCutoff</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" );
//setter
$( ".selector" ).datepicker( "option", "shortYearCutoff", 50 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-showAnim">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-showAnim">showAnim</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"show"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', any of the show/hide <a href="http://docs.jquery.com/UI/Effects" class="external text" title="http://docs.jquery.com/UI/Effects">jQuery UI effects</a>, or &quot;&quot; for no animation.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>showAnim</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ showAnim: "fold" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>showAnim</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var showAnim = $( ".selector" ).datepicker( "option", "showAnim" );
//setter
$( ".selector" ).datepicker( "option", "showAnim", "fold" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-showButtonPanel">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-showButtonPanel">showButtonPanel</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Whether to show the button panel.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>showButtonPanel</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ showButtonPanel: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>showButtonPanel</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" );
//setter
$( ".selector" ).datepicker( "option", "showButtonPanel", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-showCurrentAtPos">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-showCurrentAtPos">showCurrentAtPos</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specify where in a <a href="http://docs.jquery.com/UI/Datepicker#option-numberOfMonths" title="UI/Datepicker">multi-month</a> display the current month shows, starting from 0 at the top/left.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>showCurrentAtPos</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ showCurrentAtPos: 3 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>showCurrentAtPos</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" );
//setter
$( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-showMonthAfterYear">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-showMonthAfterYear">showMonthAfterYear</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Whether to show the month after the year in the header. This attribute is one of the regionalisation attributes.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>showMonthAfterYear</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ showMonthAfterYear: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>showMonthAfterYear</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" );
//setter
$( ".selector" ).datepicker( "option", "showMonthAfterYear", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-showOn">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-showOn">showOn</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"focus"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Have the datepicker appear automatically when the field receives focus ("focus"), appear only when a button is clicked ("button"), or appear when either event taks place ("both").</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>showOn</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ showOn: "both" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>showOn</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var showOn = $( ".selector" ).datepicker( "option", "showOn" );
//setter
$( ".selector" ).datepicker( "option", "showOn", "both" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-showOptions">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-showOptions">showOptions</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Options</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">{}</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If using one of the jQuery UI effects for <code><a href="http://docs.jquery.com/UI/Datepicker#option-showAnim" title="UI/Datepicker">showAnim</a></code>, you can provide additional settings for that animation via this option.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>showOptions</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ showOptions: {direction: 'up'}  });</code></pre>
</dd>

    
<dt>
  Get or set the <code>showOptions</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var showOptions = $( ".selector" ).datepicker( "option", "showOptions" );
//setter
$( ".selector" ).datepicker( "option", "showOptions", {direction: 'up'}  );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-showOtherMonths">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-showOtherMonths">showOtherMonths</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use <code><a href="http://docs.jquery.com/UI/Datepicker#option-selectOtherMonths" title="UI/Datepicker">selectOtherMonths</a></code>.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>showOtherMonths</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ showOtherMonths: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>showOtherMonths</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" );
//setter
$( ".selector" ).datepicker( "option", "showOtherMonths", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-showWeek">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-showWeek">showWeek</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>When true a column is added to show the week of the year. The <code><a href="http://docs.jquery.com/UI/Datepicker#option-calculateWeek" title="UI/Datepicker">calculateWeek</a></code> option determines how the week of the year is calculated. You may also want to change the <code><a href="http://docs.jquery.com/UI/Datepicker#option-firstDay" title="UI/Datepicker">firstDay</a></code> option.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>showWeek</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ showWeek: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>showWeek</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var showWeek = $( ".selector" ).datepicker( "option", "showWeek" );
//setter
$( ".selector" ).datepicker( "option", "showWeek", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-stepMonths">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-stepMonths">stepMonths</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set how many months to move when clicking the Previous/Next links.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>stepMonths</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ stepMonths: 3 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>stepMonths</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" );
//setter
$( ".selector" ).datepicker( "option", "stepMonths", 3 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-weekHeader">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-weekHeader">weekHeader</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"Wk"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The text to display for the week of the year column heading. This attribute is one of the regionalisation attributes. Use <code><a href="http://docs.jquery.com/UI/Datepicker#option-showWeek" title="UI/Datepicker">showWeek</a></code> to display this column.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>weekHeader</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ weekHeader: "W" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>weekHeader</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" );
//setter
$( ".selector" ).datepicker( "option", "weekHeader", "W" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-yearRange">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-yearRange">yearRange</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"c-10:c+10"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Control the range of years displayed in the year drop-down: either relative to today's year (-nn:+nn), relative to the currently selected year (c-nn:c+nn), absolute (nnnn:nnnn), or combinations of these formats (nnnn:-nn). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-minDate" title="UI/Datepicker">minDate</a></code> and/or <code><a href="http://docs.jquery.com/UI/Datepicker#option-maxDate" title="UI/Datepicker">maxDate</a></code> options.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>yearRange</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ yearRange: "2000:2010" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>yearRange</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var yearRange = $( ".selector" ).datepicker( "option", "yearRange" );
//setter
$( ".selector" ).datepicker( "option", "yearRange", "2000:2010" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-yearSuffix">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-yearSuffix">yearSuffix</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">&quot;&quot;</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Additional text to display after the year in the month headers. This attribute is one of the regionalisation attributes.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a datepicker with the <code>yearSuffix</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).datepicker({ yearSuffix: "CE" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>yearSuffix</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" );
//setter
</p>
$( ".selector" ).datepicker( "option", "yearSuffix", "CE" );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      <p><b>Known issue: Datepicker does not trigger a create event.</b></p>
<li class="event" id="event-beforeShow">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-beforeShow">beforeShow</a></h3>
    <dl>
      <dt class="event-type-label"></dt>
        <dd class="event-type">function(input, inst)</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Can be a function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>beforeShow</code> event as an init option.
</dt>
<dd>
<pre><code>$('.selector').datepicker({
   beforeShow: function(input, inst) { ... }
});</code></pre>
</dd>

    </dl>
  </div>
</li>

<p>
<li class="event" id="event-beforeShowDay">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-beforeShowDay">beforeShowDay</a></h3>
    <dl>
      <dt class="event-type-label"></dt>
        <dd class="event-type">function(date)</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or &quot;&quot; for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>beforeShowDay</code> event as an init option.
</dt>
<dd>
<pre><code>$('.selector').datepicker({
   beforeShowDay: function(date) { ... }
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-onChangeMonthYear">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-onChangeMonthYear">onChangeMonthYear</a></h3>
    <dl>
      <dt class="event-type-label"></dt>
        <dd class="event-type">function(year, month, inst)</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Allows you to define your own event when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>onChangeMonthYear</code> event as an init option.
</dt>
<dd>
<pre><code>$('.selector').datepicker({
   onChangeMonthYear: function(year, month, inst) { ... }
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-onClose">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-onClose">onClose</a></h3>
    <dl>
      <dt class="event-type-label"></dt>
        <dd class="event-type">function(dateText, inst)</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Allows you to define your own event when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text (&quot;&quot; if none) and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>onClose</code> event as an init option.
</dt>
<dd>
<pre><code>$('.selector').datepicker({
   onClose: function(dateText, inst) { ... }
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-onSelect">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-onSelect">onSelect</a></h3>
    <dl>
      <dt class="event-type-label"></dt>
        <dd class="event-type">function(dateText, inst)</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>onSelect</code> event as an init option.
</dt>
<dd>
<pre><code>$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the datepicker functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the datepicker.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the datepicker.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any datepicker option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple datepicker options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-datepicker element.</p>
  </div>
</li>


<li class="method" id="method-dialog">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-dialog">dialog</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "dialog"

, date

, <span class="optional">[</span>onSelect<span class="optional">] </span>

, <span class="optional">[</span>settings<span class="optional">] </span>

, <span class="optional">[</span>pos<span class="optional">] </span>)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Open a datepicker in a "dialog" box.
</p><p>dateText: the initial date for the date picker as either a Date or a string in the current date format.
</p><p>onSelect: A callback function when a date is selected. The function receives the date text and date picker instance as parameters.
</p><p>settings: The new settings for the date picker.
</p><p>pos: The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.</p>
  </div>
</li>


<li class="method" id="method-isDisabled">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-isDisabled">isDisabled</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "isDisabled"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Determine whether a date picker has been disabled.</p>
  </div>
</li>


<li class="method" id="method-hide">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-hide">hide</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "hide"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Close a previously opened date picker.</p>
  </div>
</li>


<li class="method" id="method-show">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-show">show</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "show"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Call up a previously attached date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.</p>
  </div>
</li>


<li class="method" id="method-refresh">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "refresh"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Redraw a date picker, after having made some external modifications.</p>
  </div>
</li>


<li class="method" id="method-getDate">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-getDate">getDate</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "getDate"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the current date for the datepicker or null if no date has been selected.</p>
  </div>
</li>


<li class="method" id="method-setDate">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-setDate">setDate</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.datepicker( "setDate"

, date





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Sets the current date for the datepicker. The new date may be a Date object or a string in the current <a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">date format</a> (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.datepicker.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;div id=&quot;ui-datepicker-div&quot; class=&quot;<strong>ui-datepicker</strong> ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-datepicker-header</strong> ui-widget-header ui-helper-clearfix ui-corner-all&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;<strong>ui-datepicker-prev</strong> ui-corner-all&quot; title=&quot;Prev&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-w&quot;&gt;Prev&lt;/span&gt;&lt;/a&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;<strong>ui-datepicker-next</strong> ui-corner-all&quot; title=&quot;Next&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-e&quot;&gt;Next&lt;/span&gt;&lt;/a&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-datepicker-title</strong>&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;<strong>ui-datepicker-month</strong>&quot;&gt;January&lt;/span&gt;&lt;span class=&quot;<strong>ui-datepicker-year</strong>&quot;&gt;2009&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;table class=&quot;<strong>ui-datepicker-calendar</strong>&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th class=&quot;<strong>ui-datepicker-week-end</strong>&quot;&gt;&lt;span title=&quot;Sunday&quot;&gt;Su&lt;/span&gt;&lt;/th&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/thead&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;&lt;tr&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class=&quot;<strong>ui-datepicker-week-end ui-datepicker-other-month</strong> &quot;&gt;&nbsp;1&nbsp;&lt;/td&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tbody&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;/table&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-datepicker-buttonpane</strong> ui-widget-content&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;<strong>ui-datepicker-current</strong> ui-state-default ui-priority-secondary ui-corner-all&quot;&gt;Today&lt;/button&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;<strong>ui-datepicker-close</strong> ui-state-default ui-priority-primary ui-corner-all&quot;&gt;Done&lt;/button&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&lt;/div&gt;<br />
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the datepicker plugin, not markup you should use to create a datepicker. The only markup needed for that is &lt;input type="text" /&gt; or &lt;div&gt;&lt;/div&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 97232 bytes
Post-expand include size: 193557 bytes
Template argument size: 121057 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3774-1!1!0!!en!2 and timestamp 20120724110022 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\dialog.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Dialog</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.</p>
<p>If the content length exceeds the maximum height, a scrollbar will automatically appear.</p>
<p>A bottom button bar and semi-transparent modal overlay layer are common options that can be added.</p>
<p>A call to <code>$(foo).dialog()</code> will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: <code>$(foo).dialog({ autoOpen: false })</code> and open it with <code>$(foo).dialog('open')</code>. To close it, use <code>$(foo).dialog('close')</code>. A more in-depth explanation with a full demo is available on <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/" class="external text" title="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/">the Nemikor blog</a>.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Position</li>
<li>UI Widget</li>
<li>UI Mouse (Optional; only needed if using UI Draggable or UI Resizable)</li>
<li>UI Draggable (Optional)</li>
<li>UI Resizable (Optional)</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="300">
A simple jQuery UI Dialog.<br />
</p>
<pre>$(&quot;#dialog&quot;).dialog();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#dialog&quot;).dialog();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;dialog&quot; title=&quot;Dialog Title&quot;&gt;I'm in a dialog&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the dialog. Can be set when initialising (first creating) the dialog.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).dialog( "option", "disabled" );
//setter
$( ".selector" ).dialog( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-autoOpen">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-autoOpen">autoOpen</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>When <i>autoOpen</i> is <i>true</i> the dialog will open automatically when <i>dialog</i> is called. If <i>false</i> it will stay hidden until <i>.dialog("open")</i> is called on it.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>autoOpen</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ autoOpen: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>autoOpen</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
//setter
$( ".selector" ).dialog( "option", "autoOpen", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-buttons">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-buttons">buttons</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Object</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">{ }</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked.  The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.
</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>buttons</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ buttons: { &quot;Ok&quot;: function() { $(this).dialog(&quot;close&quot;); } } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>buttons</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
//setter
$( ".selector" ).dialog( "option", "buttons", { &quot;Ok&quot;: function() { $(this).dialog(&quot;close&quot;); } } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-buttons">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-buttons">buttons</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">[ ]</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button.
</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>buttons</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ buttons: [
    {
        text: &quot;Ok&quot;,
        click: function() { $(this).dialog(&quot;close&quot;); }
    }
] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>buttons</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
//setter
$( ".selector" ).dialog( "option", "buttons", [
    {
        text: &quot;Ok&quot;,
        click: function() { $(this).dialog(&quot;close&quot;); }
    }
] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-closeOnEscape">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-closeOnEscape">closeOnEscape</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>closeOnEscape</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ closeOnEscape: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>closeOnEscape</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
//setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-closeText">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-closeText">closeText</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">&quot;close&quot;</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>closeText</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ closeText: 'hide' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>closeText</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var closeText = $( ".selector" ).dialog( "option", "closeText" );
//setter
$( ".selector" ).dialog( "option", "closeText", 'hide' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-dialogClass">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-dialogClass">dialogClass</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">&quot;&quot;</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The specified class name(s) will be added to the dialog, for additional theming.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>dialogClass</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ dialogClass: "alert" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>dialogClass</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
//setter
$( ".selector" ).dialog( "option", "dialogClass", "alert" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-draggable">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-draggable">draggable</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, the dialog will be draggable will be draggable by the titlebar.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>draggable</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ draggable: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>draggable</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var draggable = $( ".selector" ).dialog( "option", "draggable" );
//setter
$( ".selector" ).dialog( "option", "draggable", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-height">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-height">height</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"auto"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>height</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ height: 530 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>height</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var height = $( ".selector" ).dialog( "option", "height" );
//setter
$( ".selector" ).dialog( "option", "height", 530 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-hide">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-hide">hide</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The effect to be used when the dialog is closed.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>hide</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ hide: "slide" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>hide</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var hide = $( ".selector" ).dialog( "option", "hide" );
//setter
$( ".selector" ).dialog( "option", "hide", "slide" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-hide">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-hide">hide</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Object</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The effect to be used when the dialog is closed.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>hide</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ hide: { effect: 'drop', direction: "down" } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>hide</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var hide = $( ".selector" ).dialog( "option", "hide" );
//setter
$( ".selector" ).dialog( "option", "hide", { effect: 'drop', direction: "down" } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-maxHeight">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-maxHeight">maxHeight</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The maximum height to which the dialog can be resized, in pixels.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>maxHeight</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ maxHeight: 400 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>maxHeight</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
//setter
$( ".selector" ).dialog( "option", "maxHeight", 400 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-maxWidth">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-maxWidth">maxWidth</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The maximum width to which the dialog can be resized, in pixels.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>maxWidth</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ maxWidth: 600 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>maxWidth</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
//setter
$( ".selector" ).dialog( "option", "maxWidth", 600 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-minHeight">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-minHeight">minHeight</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">150</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The minimum height to which the dialog can be resized, in pixels.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>minHeight</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ minHeight: 300 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>minHeight</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
//setter
$( ".selector" ).dialog( "option", "minHeight", 300 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-minWidth">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-minWidth">minWidth</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">150</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The minimum width to which the dialog can be resized, in pixels.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>minWidth</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ minWidth: 400 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>minWidth</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
//setter
$( ".selector" ).dialog( "option", "minWidth", 400 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-modal">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-modal">modal</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>modal</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ modal: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>modal</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var modal = $( ".selector" ).dialog( "option", "modal" );
//setter
$( ".selector" ).dialog( "option", "modal", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-position">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-position">position</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"center"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specifies where the dialog should be displayed. Possible values: <br />1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'. <br />2) an array containing an <em>x,y</em> coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]) <br />3) an array containing <em>x,y</em> position string values (e.g. ['right','top'] for top right corner).</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>position</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ position: "top" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>position</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", "top" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-resizable">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-resizable">resizable</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, the dialog will be resizable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>resizable</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ resizable: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>resizable</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var resizable = $( ".selector" ).dialog( "option", "resizable" );
//setter
$( ".selector" ).dialog( "option", "resizable", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-show">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-show">show</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The effect to be used when the dialog is opened.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>show</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ show: "slide" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>show</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var show = $( ".selector" ).dialog( "option", "show" );
//setter
$( ".selector" ).dialog( "option", "show", "slide" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-show">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-show">show</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Object</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The effect to be used when the dialog is opened.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>show</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ show: { effect: 'drop', direction: "up" } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>show</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var show = $( ".selector" ).dialog( "option", "show" );
//setter
$( ".selector" ).dialog( "option", "show", { effect: 'drop', direction: "up" } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-stack">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-stack">stack</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>stack</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ stack: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>stack</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var stack = $( ".selector" ).dialog( "option", "stack" );
//setter
$( ".selector" ).dialog( "option", "stack", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-title">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-title">title</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">&quot;&quot;</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>title</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ title: "Dialog Title" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>title</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var title = $( ".selector" ).dialog( "option", "title" );
//setter
$( ".selector" ).dialog( "option", "title", "Dialog Title" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-width">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-width">width</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">300</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The width of the dialog, in pixels.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>width</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ width: 460 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>width</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var width = $( ".selector" ).dialog( "option", "width" );
//setter
$( ".selector" ).dialog( "option", "width", 460 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-zIndex">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1000</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The starting z-index for the dialog.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a dialog with the <code>zIndex</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).dialog({ zIndex: 3999 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>zIndex</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var zIndex = $( ".selector" ).dialog( "option", "zIndex" );
//setter
$( ".selector" ).dialog( "option", "zIndex", 3999 );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogcreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when dialog is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>dialogcreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogcreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-beforeClose">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-beforeClose">beforeClose</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogbeforeclose</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>beforeClose</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   beforeClose: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>beforeClose</code> event by type: <code>dialogbeforeclose</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogbeforeclose&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-open">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-open">open</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogopen</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when dialog is opened.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>open</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   open: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>open</code> event by type: <code>dialogopen</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogopen&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-focus">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-focus">focus</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogfocus</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the dialog gains focus.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>focus</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   focus: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>focus</code> event by type: <code>dialogfocus</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogfocus&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-dragStart">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-dragStart">dragStart</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogdragstart</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered at the beginning of the dialog being dragged.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>dragStart</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   dragStart: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>dragStart</code> event by type: <code>dialogdragstart</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogdragstart&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-drag">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-drag">drag</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogdrag</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the dialog is dragged.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>drag</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   drag: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>drag</code> event by type: <code>dialogdrag</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogdrag&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-dragStop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-dragStop">dragStop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogdragstop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered after the dialog has been dragged.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>dragStop</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   dragStop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>dragStop</code> event by type: <code>dialogdragstop</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogdragstop&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-resizeStart">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-resizeStart">resizeStart</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogresizestart</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered at the beginning of the dialog being resized.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>resizeStart</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   resizeStart: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>resizeStart</code> event by type: <code>dialogresizestart</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogresizestart&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-resize">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-resize">resize</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogresize</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the dialog is resized. <a href="http://www.jsfiddle.net/Jp7TM/18/" class="external text" title="http://www.jsfiddle.net/Jp7TM/18/">demo</a></p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>resize</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   resize: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>resize</code> event by type: <code>dialogresize</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogresize&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-resizeStop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-resizeStop">resizeStop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogresizestop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered after the dialog has been resized.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>resizeStop</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   resizeStop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>resizeStop</code> event by type: <code>dialogresizestop</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogresizestop&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-close">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-close">close</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dialogclose</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the dialog is closed.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>close</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).dialog({
   close: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>close</code> event by type: <code>dialogclose</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogclose&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the dialog functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the dialog.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the dialog.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any dialog option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple dialog options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-dialog element.</p>
  </div>
</li>


<li class="method" id="method-close">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-close">close</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "close"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Close the dialog.</p>
  </div>
</li>


<li class="method" id="method-isOpen">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-isOpen">isOpen</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "isOpen"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns true if the dialog is currently open.</p>
  </div>
</li>


<li class="method" id="method-moveToTop">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-moveToTop">moveToTop</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "moveToTop"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Move the dialog to the top of the dialogs stack.</p>
  </div>
</li>


<li class="method" id="method-open">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-open">open</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.dialog( "open"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Open the dialog.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;div class=&quot;<strong>ui-dialog</strong> ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-dialog-titlebar</strong> ui-widget-header ui-corner-all ui-helper-clearfix&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;<strong>ui-dialog-title-dialog</strong>&quot; class=&quot;ui-dialog-title&quot;&gt;Dialog title&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;<strong>ui-dialog-titlebar-close</strong> ui-corner-all&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-closethick&quot;&gt;close&lt;/span&gt;&lt;/a&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;div style=&quot;height: 200px; min-height: 109px; width: auto;&quot; class=&quot;<strong>ui-dialog-content</strong> ui-widget-content&quot; id=&quot;dialog&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Dialog content goes here.&lt;/p&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&lt;/div&gt;<br />
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 69635 bytes
Post-expand include size: 118811 bytes
Template argument size: 65296 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3775-1!1!0!!en!2 and timestamp 20120724101052 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\draggable.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Draggable</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>The jQuery UI Draggable plugin makes selected elements draggable by mouse.</p>
<p>Draggable elements gets a class of <code>ui-draggable</code>. During drag the element also gets a class of <code>ui-draggable-dragging</code>. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.</p>
<p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>
<ul>
<li><b>ui.helper</b> - the jQuery object representing the helper that's being dragged</li>
<li><b>ui.position</b> - current position of the helper as { top, left } object, relative to the offset element</li>
<li><b>ui.offset</b> - current absolute position of the helper as { top, left } object, relative to page</li>
</ul>
<p><br />
</p>
<p>To manipulate the position of a draggable during drag, you can either <a href="http://jsbin.com/etako/edit" class="external text" title="http://jsbin.com/etako/edit">use a wrapper as the draggable helper</a> and position the wrapped element with absolute positioning, or  you can correct internal values like so: <code>$(this).data('draggable').offset.click.top -= x</code>.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
<li>UI Mouse</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="170">
Initialize a draggable with default options.<br />
</p>
<pre>$(&quot;#draggable&quot;).draggable();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;style type=&quot;text/css&quot;&gt;
    #draggable { width: 100px; height: 70px; background: silver; }
  &lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#draggable&quot;).draggable();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;draggable&quot;&gt;Drag me&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the draggable. Can be set when initialising (first creating) the draggable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-addClasses">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-addClasses">addClasses</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to false, will prevent the <code>ui-draggable</code> class from being added. This may be desired as a performance optimization when calling <code>.draggable()</code> init on many hundreds of elements.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>addClasses</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ addClasses: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>addClasses</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
//setter
$( ".selector" ).draggable( "option", "addClasses", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-appendTo">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Element, Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"parent"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The element passed to or selected by the <code>appendTo</code> option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>appendTo</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ appendTo: "body" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>appendTo</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
//setter
$( ".selector" ).draggable( "option", "appendTo", "body" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-axis">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-axis">axis</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>axis</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ axis: "x" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>axis</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var axis = $( ".selector" ).draggable( "option", "axis" );
//setter
$( ".selector" ).draggable( "option", "axis", "x" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cancel">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">":input,option"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Prevents dragging from starting on specified elements.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>cancel</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ cancel: "button" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cancel</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cancel = $( ".selector" ).draggable( "option", "cancel" );
//setter
$( ".selector" ).draggable( "option", "cancel", "button" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-connectToSortable">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-connectToSortable">connectToSortable</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Allows the draggable to be dropped onto the specified sortables. If this option is used (<code>helper</code> must be set to 'clone' in order to work flawlessly), a draggable can be dropped onto a sortable list and then becomes part of it.
</p><p>Note: Specifying this option as an array of selectors has been removed.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>connectToSortable</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ connectToSortable: "ul#myList" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>connectToSortable</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );
//setter
$( ".selector" ).draggable( "option", "connectToSortable", "ul#myList" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-containment">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-containment">containment</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector, Element, String, Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>containment</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ containment: "parent" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>containment</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var containment = $( ".selector" ).draggable( "option", "containment" );
//setter
$( ".selector" ).draggable( "option", "containment", "parent" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cursor">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"auto"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The css cursor during the drag operation.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>cursor</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ cursor: "crosshair" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cursor</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
//setter
$( ".selector" ).draggable( "option", "cursor", "crosshair" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cursorAt">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Object</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: <code>{ top, left, right, bottom }</code>.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>cursorAt</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ cursorAt: { left: 5 } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cursorAt</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );
//setter
$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-delay">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-delay">delay</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>delay</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ delay: 500 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>delay</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var delay = $( ".selector" ).draggable( "option", "delay" );
//setter
$( ".selector" ).draggable( "option", "delay", 500 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-distance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-distance">distance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>distance</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ distance: 30 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>distance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var distance = $( ".selector" ).draggable( "option", "distance" );
//setter
$( ".selector" ).draggable( "option", "distance", 30 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-grid">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-grid">grid</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y]</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>grid</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ grid: [50, 20] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>grid</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var grid = $( ".selector" ).draggable( "option", "grid" );
//setter
$( ".selector" ).draggable( "option", "grid", [50, 20] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-handle">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-handle">handle</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Element, Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If specified, restricts drag start click to the specified element(s).</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>handle</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ handle: "h2" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>handle</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var handle = $( ".selector" ).draggable( "option", "handle" );
//setter
$( ".selector" ).draggable( "option", "handle", "h2" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-helper">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-helper">helper</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Function</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"original"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Allows for a helper element to be used for dragging display. Possible values: 'original', 'clone', Function. If a function is specified, it must return a DOMElement.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>helper</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ helper: "clone" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>helper</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var helper = $( ".selector" ).draggable( "option", "helper" );
//setter
$( ".selector" ).draggable( "option", "helper", "clone" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-iframeFix">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-iframeFix">iframeFix</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean, Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>iframeFix</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ iframeFix: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>iframeFix</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
//setter
$( ".selector" ).draggable( "option", "iframeFix", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-opacity">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Float</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Opacity for the helper while being dragged.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>opacity</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ opacity: 0.35 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>opacity</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var opacity = $( ".selector" ).draggable( "option", "opacity" );
//setter
$( ".selector" ).draggable( "option", "opacity", 0.35 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-refreshPositions">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-refreshPositions">refreshPositions</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>refreshPositions</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ refreshPositions: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>refreshPositions</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
//setter
$( ".selector" ).draggable( "option", "refreshPositions", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-revert">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-revert">revert</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean, String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>revert</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ revert: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>revert</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var revert = $( ".selector" ).draggable( "option", "revert" );
//setter
$( ".selector" ).draggable( "option", "revert", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-revertDuration">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-revertDuration">revertDuration</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">500</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The duration of the revert animation, in milliseconds. Ignored if revert is false.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>revertDuration</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ revertDuration: 1000 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>revertDuration</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
//setter
$( ".selector" ).draggable( "option", "revertDuration", 1000 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scope">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scope">scope</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"default"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>scope</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ scope: "tasks" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scope</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scope = $( ".selector" ).draggable( "option", "scope" );
//setter
$( ".selector" ).draggable( "option", "scope", "tasks" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scroll">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, container auto-scrolls while dragging.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>scroll</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ scroll: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scroll</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scroll = $( ".selector" ).draggable( "option", "scroll" );
//setter
$( ".selector" ).draggable( "option", "scroll", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scrollSensitivity">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>scrollSensitivity</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ scrollSensitivity: 40 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scrollSensitivity</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
//setter
$( ".selector" ).draggable( "option", "scrollSensitivity", 40 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scrollSpeed">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The speed at which the window should scroll once the mouse pointer gets within the <code>scrollSensitivity</code> distance.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>scrollSpeed</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ scrollSpeed: 40 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scrollSpeed</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
//setter
$( ".selector" ).draggable( "option", "scrollSpeed", 40 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-snap">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-snap">snap</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean, Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to a selector or to true (equivalent to '.ui-draggable'), the draggable will snap to the edges of the selected elements when near an edge of the element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>snap</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ snap: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>snap</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var snap = $( ".selector" ).draggable( "option", "snap" );
//setter
$( ".selector" ).draggable( "option", "snap", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-snapMode">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-snapMode">snapMode</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"both"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>snapMode</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ snapMode: "outer" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>snapMode</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
//setter
$( ".selector" ).draggable( "option", "snapMode", "outer" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-snapTolerance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-snapTolerance">snapTolerance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>snapTolerance</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ snapTolerance: 40 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>snapTolerance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
//setter
$( ".selector" ).draggable( "option", "snapTolerance", 40 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-stack">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-stack">stack</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Controls the z-Index of the set of elements that match the selector, always brings to front the dragged item. Very useful in things like window managers.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>stack</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ stack: &quot;.products&quot; });</code></pre>
</dd>

    
<dt>
  Get or set the <code>stack</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var stack = $( ".selector" ).draggable( "option", "stack" );
//setter
$( ".selector" ).draggable( "option", "stack", &quot;.products&quot; );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-zIndex">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>z-index for the helper while being dragged.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>zIndex</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).draggable({ zIndex: 2700 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>zIndex</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
//setter
$( ".selector" ).draggable( "option", "zIndex", 2700 );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dragcreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when draggable is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).draggable({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>dragcreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dragcreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-start">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-start">start</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dragstart</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when dragging starts.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>start</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).draggable({
   start: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>start</code> event by type: <code>dragstart</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dragstart&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-drag">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-drag">drag</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">drag</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the mouse is moved during the dragging.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>drag</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).draggable({
   drag: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>drag</code> event by type: <code>drag</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;drag&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-stop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-stop">stop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dragstop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when dragging stops.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>stop</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).draggable({
   stop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>stop</code> event by type: <code>dragstop</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dragstop&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the draggable functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the draggable.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the draggable.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any draggable option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple draggable options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-draggable element.</p>
  </div>
</li>


    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Draggable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.draggable.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;div class=&quot;<strong>ui-draggable</strong>&quot;&gt;&lt;/div&gt;
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the draggable plugin, not markup you should use to create a draggable. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 61392 bytes
Post-expand include size: 107565 bytes
Template argument size: 58710 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3768-1!1!0!!en!2 and timestamp 20120724123244 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\droppable.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Droppable</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.</p>
<p>All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>
<ul>
 <li> <b>ui.draggable</b> - current draggable element, a jQuery object.</li>
 <li> <b>ui.helper</b> - current draggable helper, a jQuery object</li>
 <li> <b>ui.position</b> - current position of the draggable helper { top: , left: }</li>
 <li> <b>ui.offset</b> - current absolute position of the draggable helper { top: , left: }</li>
</ul>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
<li>UI Mouse</li>
<li><a href="http://docs.jquery.com/UI/Draggable" title="UI/Draggable">UI Draggable</a></li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="100">
Makes the div droppable (a drop target for a draggable).<br />
</p>
<pre>$(&quot;#draggable&quot;).draggable();
    $(&quot;#droppable&quot;).droppable({
      drop: function() { alert('dropped'); }
    });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;style type=&quot;text/css&quot;&gt;
    #draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
    #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }
  &lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#draggable&quot;).draggable();
    $(&quot;#droppable&quot;).droppable({
      drop: function() { alert('dropped'); }
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;droppable&quot;&gt;Drop here&lt;/div&gt;
&lt;div id=&quot;draggable&quot;&gt;Drag me&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the droppable. Can be set when initialising (first creating) the droppable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a droppable with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).droppable({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
//setter
$( ".selector" ).droppable( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-accept">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-accept">accept</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector, Function</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"*"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a droppable with the <code>accept</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).droppable({ accept: ".special" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>accept</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var accept = $( ".selector" ).droppable( "option", "accept" );
//setter
$( ".selector" ).droppable( "option", "accept", ".special" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-activeClass">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-activeClass">activeClass</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If specified, the class will be added to the droppable while an acceptable draggable is being dragged.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a droppable with the <code>activeClass</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).droppable({ activeClass: "ui-state-highlight" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>activeClass</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
//setter
$( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-addClasses">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-addClasses">addClasses</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a droppable with the <code>addClasses</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).droppable({ addClasses: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>addClasses</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
//setter
$( ".selector" ).droppable( "option", "addClasses", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-greedy">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-greedy">greedy</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If true, will prevent event propagation on nested droppables.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a droppable with the <code>greedy</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).droppable({ greedy: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>greedy</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var greedy = $( ".selector" ).droppable( "option", "greedy" );
//setter
$( ".selector" ).droppable( "option", "greedy", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-hoverClass">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-hoverClass">hoverClass</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If specified, the class will be added to the droppable while an acceptable draggable is being hovered.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a droppable with the <code>hoverClass</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).droppable({ hoverClass: "drophover" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>hoverClass</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
//setter
$( ".selector" ).droppable( "option", "hoverClass", "drophover" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scope">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scope">scope</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"default"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a droppable with the <code>scope</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).droppable({ scope: "tasks" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scope</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scope = $( ".selector" ).droppable( "option", "scope" );
//setter
$( ".selector" ).droppable( "option", "scope", "tasks" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-tolerance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"intersect"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'.
</p>
<ul>
<li><b>fit</b>: draggable overlaps the droppable entirely</li>
<li><b>intersect</b>: draggable overlaps the droppable at least 50%</li>
<li><b>pointer</b>: mouse pointer overlaps the droppable</li>
<li><b>touch</b>: draggable overlaps the droppable any amount</li>
</ul>
<p></p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a droppable with the <code>tolerance</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).droppable({ tolerance: "fit" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>tolerance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
//setter
$( ".selector" ).droppable( "option", "tolerance", "fit" );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dropcreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when droppable is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).droppable({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>dropcreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dropcreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-activate">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-activate">activate</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dropactivate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>activate</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).droppable({
   activate: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>activate</code> event by type: <code>dropactivate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dropactivate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-deactivate">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dropdeactivate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered any time an accepted draggable stops dragging.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>deactivate</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).droppable({
   deactivate: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>deactivate</code> event by type: <code>dropdeactivate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dropdeactivate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-over">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-over">over</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dropover</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>over</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).droppable({
   over: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>over</code> event by type: <code>dropover</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dropover&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-out">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-out">out</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dropout</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>out</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).droppable({
   out: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>out</code> event by type: <code>dropout</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dropout&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-drop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-drop">drop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">drop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on.
ui.draggable represents the draggable.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>drop</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).droppable({
   drop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>drop</code> event by type: <code>drop</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;drop&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.droppable( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the droppable functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.droppable( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the droppable.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.droppable( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the droppable.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.droppable( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any droppable option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.droppable( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple droppable options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.droppable( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-droppable element.</p>
  </div>
</li>


    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Droppable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.droppable.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;div class=&quot;<strong>ui-droppable</strong>&quot;&gt;&lt;/div&gt;
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the droppable plugin, not markup you should use to create a droppable. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 33687 bytes
Post-expand include size: 52676 bytes
Template argument size: 26565 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3769-1!1!0!!en!2 and timestamp 20120724045715 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\effect.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI effect</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/effect?section=1" title="Edit section: effect( effect, [options], [speed], [callback] )">edit</a>]</div><a name="effect.28_effect.2C_.5Boptions.5D.2C_.5Bspeed.5D.2C_.5Bcallback.5D_.29"></a><h3>effect( effect, <span class="optional">[</span>options<span class="optional">]</span>, <span class="optional">[</span>speed<span class="optional">]</span>, <span class="optional">[</span>callback<span class="optional">]</span> )</h3>
<p>Uses a specific effect on an element (without the show/hide logic).</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>Effects Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="170">
Apply the effect explode if you click on the element.<br />
</p>
<pre>$(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(&quot;div&quot;).<strong class="selflink">effect</strong>(&quot;explode&quot;);
    });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.explode.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
  div { margin: 0 auto; width: 100px; height: 80px; background: blue; position: relative; }
&lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(&quot;div&quot;).<strong class="selflink">effect</strong>(&quot;explode&quot;);
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;p&gt;Click me&lt;/p&gt;&lt;div&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Arguments</h2>
    <ul class="options-list">
      
<li class="option" id="option-effect">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-effect">effect</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The effect to be used. Possible values: 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'.</p>
  </div>
</li>


<li class="option" id="option-options">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-options">options</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Hash</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A object/hash including specific options for the effect.</p>
  </div>
</li>


<li class="option" id="option-speed">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-speed">speed</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
  </div>
</li>


<li class="option" id="option-callback">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-callback">callback</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Function</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A function that is called after the effect is completed.</p>
  </div>
</li>

    </ul>
  </div>
</div>

</p><!-- 
Pre-expand include size: 6364 bytes
Post-expand include size: 8780 bytes
Template argument size: 5498 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2612-1!1!0!!en!2 and timestamp 20120724021520 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\hide.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI hide</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/hide?section=1" title="Edit section: hide( effect, [options], [speed], [callback] )">edit</a>]</div><a name="hide.28_effect.2C_.5Boptions.5D.2C_.5Bspeed.5D.2C_.5Bcallback.5D_.29"></a><h3>hide( effect, <span class="optional">[</span>options<span class="optional">]</span>, <span class="optional">[</span>speed<span class="optional">]</span>, <span class="optional">[</span>callback<span class="optional">]</span> )</h3>
<p>The enhanced hide method optionally accepts jQuery UI advanced effects.</p>
<p>Uses a specific effect on an element to hide the element if the first argument is an effect string.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>Effects Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="170">
Apply the effect slide if you click on the p to hide a div.<br />
</p>
<pre>$(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(&quot;div&quot;).<strong class="selflink">hide</strong>(&quot;slide&quot;, {}, 1000);
    });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.slide.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
  div { margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
&lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(&quot;div&quot;).<strong class="selflink">hide</strong>(&quot;slide&quot;, {}, 1000);
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;p&gt;Click me&lt;/p&gt;&lt;div&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Arguments</h2>
    <ul class="options-list">
      
<li class="option" id="option-effect">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-effect">effect</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.</p>
  </div>
</li>


<li class="option" id="option-options">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-options">options</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Hash</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A object/hash including specific options for the effect.</p>
  </div>
</li>


<li class="option" id="option-speed">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-speed">speed</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
  </div>
</li>


<li class="option" id="option-callback">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-callback">callback</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Function</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A function that is called after the effect is completed.</p>
  </div>
</li>

    </ul>
  </div>
</div>

</p><!-- 
Pre-expand include size: 6354 bytes
Post-expand include size: 8727 bytes
Template argument size: 5453 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2614-1!1!0!!en!2 and timestamp 20120724021325 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\position.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Position Utility</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>Utility script for positioning any widget relative to the window, document, a particular element, or the cursor/mouse.</p>
<p><em>Note: jQuery UI does not support positioning hidden elements.</em></p>
<p>Does not need ui.core.js or effects.core.js.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li><i>none (only jQuery core)</i></li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="300">
Clicking on the green element transfers to the other.<br />
</p>
<pre>
$(&quot;#position1&quot;).position({
  my: &quot;center&quot;,
  at: &quot;center&quot;,
  of: &quot;#targetElement&quot;
});
$(&quot;#position2&quot;).position({
  my: &quot;left top&quot;,
  at: &quot;left top&quot;,
  of: &quot;#targetElement&quot;
});
$(&quot;#position3&quot;).position({
  my: &quot;right center&quot;,
  at: &quot;right bottom&quot;,
  of: &quot;#targetElement&quot;
});
$(document).mousemove(function(ev){
  $(&quot;#position4&quot;).position({
    my: &quot;left bottom&quot;,
    of: ev,
    offset: &quot;3 -3&quot;,
    collision: &quot;fit&quot;
  });
});

</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;style type=&quot;text/css&quot;&gt;
#targetElement { width:240px;height:200px;background-color:#999;margin:30px auto; }
.positionDiv { width:50px;height:50px;opacity:0.6; }
#position1 {background-color:#F00;}
#position2 {background-color:#0F0;}
#position3 {background-color:#00F;}
#position4 {background-color:#FF0;}
&lt;/style&gt;

  &lt;script&gt;
  $(document).ready(function() {
    
$(&quot;#position1&quot;).position({
  my: &quot;center&quot;,
  at: &quot;center&quot;,
  of: &quot;#targetElement&quot;
});
$(&quot;#position2&quot;).position({
  my: &quot;left top&quot;,
  at: &quot;left top&quot;,
  of: &quot;#targetElement&quot;
});
$(&quot;#position3&quot;).position({
  my: &quot;right center&quot;,
  at: &quot;right bottom&quot;,
  of: &quot;#targetElement&quot;
});
$(document).mousemove(function(ev){
  $(&quot;#position4&quot;).position({
    my: &quot;left bottom&quot;,
    of: ev,
    offset: &quot;3 -3&quot;,
    collision: &quot;fit&quot;
  });
});

  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;targetElement&quot;&gt;
  &lt;div class=&quot;positionDiv&quot; id=&quot;position1&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;positionDiv&quot; id=&quot;position2&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;positionDiv&quot; id=&quot;position3&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;positionDiv&quot; id=&quot;position4&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Arguments</h2>
    <ul class="options-list">
      
<li class="option" id="option-my">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-my">my</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"center"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Defines which position on <b>the element being positioned</b> to align with the target element: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"</p>
  </div>
</li>


<li class="option" id="option-at">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-at">at</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"center"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Defines which position on <b>the target element</b> to align the positioned element against: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"</p>
  </div>
</li>


<li class="option" id="option-of">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-of">of</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector, Element, jQuery, Event</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Element to position against. If you provide a selector, the first matching element will be used. If you provide a jQuery object, the first element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu"</p>
  </div>
</li>


<li class="option" id="option-offset">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-offset">offset</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Add these left-top values to the calculated position, eg. "50 50" (left top) A single value such as "50" will apply to both.</p>
  </div>
</li>


<li class="option" id="option-collision">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-collision">collision</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"flip"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, eg. "flip", "fit", "fit flip", "fit none".
</p>
<ul><li> <b>flip</b>: to the opposite side and the collision detection is run again to see if it will fit. Whichever side allows more of the element to be visible will be used.
</li><li> <b>fit</b>: so the element keeps in the desired direction, but is re-positioned so it fits.
</li><li> <b>none</b>: not do collision detection.
</li></ul>
<p></p>
  </div>
</li>


<li class="option" id="option-using">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-using">using</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Function</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>When specified the actual property setting is delegated to this callback. Receives a single parameter which is a hash of top and left values for the position that should be set.</p>
  </div>
</li>

    </ul>
  </div>
</div>

</p><!-- 
Pre-expand include size: 7638 bytes
Post-expand include size: 12524 bytes
Template argument size: 8194 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3784-1!1!0!!en!2 and timestamp 20120724101048 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\progressbar.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Progressbar</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>
The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default.
</p>
<p>
This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete. A determinate progress bar should never fill from left to right, then loop back to empty for a single process -- if the actual percent complete status cannot be calculated, an indeterminate progress bar (coming soon) or spinner animation is a better way to provide user feedback.
</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="100">
A simple jQuery UI Progressbar.<br />
</p>
<pre>$(&quot;#progressbar&quot;).progressbar({ value: 37 });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#progressbar&quot;).progressbar({ value: 37 });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;progressbar&quot;&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the progressbar. Can be set when initialising (first creating) the progressbar.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a progressbar with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).progressbar({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).progressbar( "option", "disabled" );
//setter
$( ".selector" ).progressbar( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-value">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-value">value</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The value of the progressbar.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a progressbar with the <code>value</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).progressbar({ value: 37 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>value</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var value = $( ".selector" ).progressbar( "option", "value" );
//setter
$( ".selector" ).progressbar( "option", "value", 37 );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">progressbarcreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when progressbar is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).progressbar({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>progressbarcreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;progressbarcreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-change">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-change">change</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">progressbarchange</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the value of the progressbar changes.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>change</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).progressbar({
   change: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>change</code> event by type: <code>progressbarchange</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;progressbarchange&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-complete">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-complete">complete</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">progressbarcomplete</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the value of the progressbar reaches the maximum value of 100.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>complete</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).progressbar({
   complete: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>complete</code> event by type: <code>progressbarcomplete</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;progressbarcomplete&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.progressbar( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the progressbar functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.progressbar( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the progressbar.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.progressbar( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the progressbar.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.progressbar( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any progressbar option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.progressbar( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple progressbar options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.progressbar( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-progressbar element.</p>
  </div>
</li>


<li class="method" id="method-value">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-value">value</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.progressbar( "value"

, <span class="optional">[</span>value<span class="optional">] </span>





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>This method gets or sets the current value of the progressbar.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Progressbar plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.progressbar.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;div class=&quot;<strong>ui-progressbar </strong>ui-widget ui-widget-content ui-corner-all&quot;&gt;<br />
	&nbsp;&nbsp;&nbsp;&lt;div style=&quot;width: 37%;&quot; class=&quot;<strong>ui-progressbar-value</strong> ui-widget-header ui-corner-left&quot;&gt;&lt;/div&gt;<br />
	&lt;/div&gt;
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the progressbar plugin, not markup you should use to create a progressbar. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 21686 bytes
Post-expand include size: 27328 bytes
Template argument size: 10881 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3780-1!1!0!!en!2 and timestamp 20120724075855 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\removeClass.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI removeClass</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/removeClass?section=1" title="Edit section: removeClass( [class], [duration] )">edit</a>]</div><a name="removeClass.28_.5Bclass.5D.2C_.5Bduration.5D_.29"></a><h3>removeClass( <span class="optional">[</span>class<span class="optional">]</span>, <span class="optional">[</span>duration<span class="optional">]</span> )</h3>
<p>Removes all or specified class from each of the set of matched elements with an optional transition between the states.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>Effects Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="100">
Removes the class 'selected' from the matched elements with a one second transition.<br />
</p>
<pre>$(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(this).<strong class="selflink">removeClass</strong>(&quot;selected&quot;, 1000);
    });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
  p { cursor: pointer; font-size: 1.2em; }
  .selected { color:red; }
&lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(this).<strong class="selflink">removeClass</strong>(&quot;selected&quot;, 1000);
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;p class=&quot;selected&quot;&gt;Click me to remove 'selected' class.&lt;/p&gt;
&lt;p class=&quot;selected&quot;&gt;Click me to remove 'selected' class.&lt;/p&gt;
&lt;p class=&quot;selected&quot;&gt;Click me to remove 'selected' class.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Arguments</h2>
    <ul class="options-list">
      
<li class="option" id="option-class">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-class">class</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>CSS classes to remove from the elements.</p>
  </div>
</li>


<li class="option" id="option-duration">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-duration">duration</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
  </div>
</li>

    </ul>
  </div>
</div>

</p><!-- 
Pre-expand include size: 5297 bytes
Post-expand include size: 7164 bytes
Template argument size: 4498 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2607-1!1!0!!en!2 and timestamp 20120724022159 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\resizable.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Resizable</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.</p>
<p>All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object.  The ui object has the following fields:</p>
<ul>
<li><b>ui.helper</b> - a jQuery object containing the helper element</li>
<li><b>ui.originalPosition</b> - {top, left} before resizing started</li>
<li><b>ui.originalSize</b> - {width, height} before resizing started</li>
<li><b>ui.position</b> - {top, left} current position</li>
<li><b>ui.size</b> - {width, height} current size</li>
</ul>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
<li>UI Mouse</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="250">
A simple jQuery UI Resizable.<br />
</p>
<pre>$(&quot;#resizable&quot;).resizable();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;style type=&quot;text/css&quot;&gt;
    #resizable { width: 100px; height: 100px; background: silver; }
  &lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#resizable&quot;).resizable();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;resizable&quot;&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the resizable. Can be set when initialising (first creating) the resizable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
//setter
$( ".selector" ).resizable( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-alsoResize">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-alsoResize">alsoResize</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector, jQuery, Element</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Resize these elements synchronous when resizing.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>alsoResize</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ alsoResize: ".other" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>alsoResize</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
//setter
$( ".selector" ).resizable( "option", "alsoResize", ".other" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-animate">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-animate">animate</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Animates to the final size after resizing.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>animate</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ animate: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>animate</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var animate = $( ".selector" ).resizable( "option", "animate" );
//setter
$( ".selector" ).resizable( "option", "animate", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-animateDuration">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-animateDuration">animateDuration</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer, String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"slow"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>animateDuration</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ animateDuration: 500 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>animateDuration</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
//setter
$( ".selector" ).resizable( "option", "animateDuration", 500 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-animateEasing">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-animateEasing">animateEasing</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"swing"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Easing effect for animating.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>animateEasing</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ animateEasing: "swing" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>animateEasing</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
//setter
$( ".selector" ).resizable( "option", "animateEasing", "swing" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-aspectRatio">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-aspectRatio">aspectRatio</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean, Float</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, resizing is constrained by the original aspect ratio. Otherwise a custom aspect ratio can be specified, such as 9 / 16, or 0.5.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>aspectRatio</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ aspectRatio: .75 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>aspectRatio</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
//setter
$( ".selector" ).resizable( "option", "aspectRatio", .75 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-autoHide">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-autoHide">autoHide</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, automatically hides the handles except when the mouse hovers over the element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>autoHide</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ autoHide: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>autoHide</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
//setter
$( ".selector" ).resizable( "option", "autoHide", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cancel">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">":input,option"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Prevents resizing if you start on elements matching the selector.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>cancel</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ cancel: ":input,option" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cancel</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
//setter
$( ".selector" ).resizable( "option", "cancel", ":input,option" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-containment">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-containment">containment</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Element, Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>containment</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ containment: "parent" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>containment</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var containment = $( ".selector" ).resizable( "option", "containment" );
//setter
$( ".selector" ).resizable( "option", "containment", "parent" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-delay">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-delay">delay</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>delay</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ delay: 20 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>delay</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var delay = $( ".selector" ).resizable( "option", "delay" );
//setter
$( ".selector" ).resizable( "option", "delay", 20 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-distance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-distance">distance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>distance</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ distance: 20 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>distance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var distance = $( ".selector" ).resizable( "option", "distance" );
//setter
$( ".selector" ).resizable( "option", "distance", 20 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-ghost">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-ghost">ghost</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, a semi-transparent helper element is shown for resizing.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>ghost</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ ghost: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>ghost</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
//setter
$( ".selector" ).resizable( "option", "ghost", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-grid">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-grid">grid</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>grid</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ grid: [50, 50] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>grid</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var grid = $( ".selector" ).resizable( "option", "grid" );
//setter
$( ".selector" ).resizable( "option", "grid", [50, 50] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-handles">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-handles">handles</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Object</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"e, s, se"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin.
</p><p>If specified as an object, the following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>handles</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ handles: "n, e, s, w" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>handles</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-helper">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-helper">helper</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>helper</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ helper: "ui-state-highlight" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>helper</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var helper = $( ".selector" ).resizable( "option", "helper" );
//setter
$( ".selector" ).resizable( "option", "helper", "ui-state-highlight" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-maxHeight">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-maxHeight">maxHeight</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>This is the maximum height the resizable should be allowed to resize to.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>maxHeight</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ maxHeight: 300 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>maxHeight</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
//setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-maxWidth">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-maxWidth">maxWidth</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>This is the maximum width the resizable should be allowed to resize to.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>maxWidth</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ maxWidth: 250 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>maxWidth</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
//setter
$( ".selector" ).resizable( "option", "maxWidth", 250 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-minHeight">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-minHeight">minHeight</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">10</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>This is the minimum height the resizable should be allowed to resize to.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>minHeight</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ minHeight: 150 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>minHeight</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
//setter
$( ".selector" ).resizable( "option", "minHeight", 150 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-minWidth">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-minWidth">minWidth</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">10</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>This is the minimum width the resizable should be allowed to resize to.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a resizable with the <code>minWidth</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).resizable({ minWidth: 75 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>minWidth</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
//setter
$( ".selector" ).resizable( "option", "minWidth", 75 );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">resizecreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when resizable is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).resizable({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>resizecreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;resizecreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-start">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-start">start</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">resizestart</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered at the start of a resize operation.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>start</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).resizable({
   start: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>start</code> event by type: <code>resizestart</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;resizestart&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-resize">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-resize">resize</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">resize</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered during the resize, on the drag of the resize handler.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>resize</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).resizable({
   resize: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>resize</code> event by type: <code>resize</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;resize&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-stop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-stop">stop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">resizestop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered at the end of a resize operation.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>stop</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).resizable({
   stop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>stop</code> event by type: <code>resizestop</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;resizestop&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.resizable( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the resizable functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.resizable( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the resizable.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.resizable( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the resizable.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.resizable( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any resizable option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.resizable( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple resizable options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.resizable( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-resizable element.</p>
  </div>
</li>


    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Resizable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.resizable.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;div class=&quot;<strong>ui-resizable</strong>&quot;&gt;<br />
&#160;&#160;&#160;&lt;div style=&quot;-moz-user-select: none;&quot; unselectable=&quot;on&quot; class=&quot;<strong>ui-resizable-handle ui-resizable-e</strong>&quot;&gt;&lt;/div&gt;<br />
&#160;&#160;&#160;&lt;div style=&quot;-moz-user-select: none;&quot; unselectable=&quot;on&quot; class=&quot;<strong>ui-resizable-handle ui-resizable-s</strong>&quot;&gt;&lt;/div&gt;<br />
&#160;&#160;&#160;&lt;div unselectable=&quot;on&quot; style=&quot;z-index: 1001; -moz-user-select: none;&quot; class=&quot;<strong>ui-resizable-handle ui-resizable-se</strong> ui-icon ui-icon-gripsmall-diagonal-se&quot;&gt;&lt;/div&gt;<br />
&lt;/div&gt;
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the resizable plugin, not markup you should use to create a resizable. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 47687 bytes
Post-expand include size: 80197 bytes
Template argument size: 42354 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3770-1!1!0!!en!2 and timestamp 20120724122439 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\selectable.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Selectable</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
<li>UI Mouse</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="">
A simple jQuery UI Selectable.<br />
</p>
<pre>$(&quot;#selectable&quot;).selectable();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;style type=&quot;text/css&quot;&gt;
#selectable .ui-selecting {
	background: silver;
}
#selectable .ui-selected {
	background: gray;
}
&lt;/style&gt;

  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#selectable&quot;).selectable();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;ul id=&quot;selectable&quot;&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
&lt;li&gt;Item 4&lt;/li&gt;
&lt;li&gt;Item 5&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the selectable. Can be set when initialising (first creating) the selectable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a selectable with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).selectable({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).selectable( "option", "disabled" );
//setter
$( ".selector" ).selectable( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-autoRefresh">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-autoRefresh">autoRefresh</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a selectable with the <code>autoRefresh</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).selectable({ autoRefresh: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>autoRefresh</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
//setter
$( ".selector" ).selectable( "option", "autoRefresh", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cancel">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">":input,option"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Prevents selecting if you start on elements matching the selector.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a selectable with the <code>cancel</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).selectable({ cancel: ":input,option" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cancel</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cancel = $( ".selector" ).selectable( "option", "cancel" );
//setter
$( ".selector" ).selectable( "option", "cancel", ":input,option" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-delay">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-delay">delay</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Time in milliseconds to define when the selecting should start. It helps preventing unwanted selections when clicking on an element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a selectable with the <code>delay</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).selectable({ delay: 20 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>delay</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var delay = $( ".selector" ).selectable( "option", "delay" );
//setter
$( ".selector" ).selectable( "option", "delay", 20 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-distance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-distance">distance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until after mouse is dragged beyond distance.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a selectable with the <code>distance</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).selectable({ distance: 20 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>distance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var distance = $( ".selector" ).selectable( "option", "distance" );
//setter
$( ".selector" ).selectable( "option", "distance", 20 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-filter">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-filter">filter</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"*"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The matching child elements will be made selectees (able to be selected).</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a selectable with the <code>filter</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).selectable({ filter: "li" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>filter</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var filter = $( ".selector" ).selectable( "option", "filter" );
//setter
$( ".selector" ).selectable( "option", "filter", "li" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-tolerance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"touch"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Possible values: 'touch', 'fit'.
</p>
<ul>
<li><b>fit</b>: draggable overlaps the droppable entirely</li>
<li><b>touch</b>: draggable overlaps the droppable any amount</li>
</ul>
<p></p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a selectable with the <code>tolerance</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).selectable({ tolerance: "fit" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>tolerance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
//setter
$( ".selector" ).selectable( "option", "tolerance", "fit" );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">selectablecreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when selectable is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).selectable({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>selectablecreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectablecreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-selected">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-selected">selected</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">selectableselected</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered at the end of the select operation, on each element added to the selection.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>selected</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).selectable({
   selected: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>selected</code> event by type: <code>selectableselected</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectableselected&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-selecting">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-selecting">selecting</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">selectableselecting</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered during the select operation, on each element added to the selection.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>selecting</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).selectable({
   selecting: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>selecting</code> event by type: <code>selectableselecting</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectableselecting&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-start">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-start">start</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">selectablestart</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered at the beginning of the select operation.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>start</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).selectable({
   start: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>start</code> event by type: <code>selectablestart</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectablestart&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-stop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-stop">stop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">selectablestop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered at the end of the select operation.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>stop</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).selectable({
   stop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>stop</code> event by type: <code>selectablestop</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectablestop&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-unselected">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-unselected">unselected</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">selectableunselected</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered at the end of the select operation, on each element removed from the selection.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>unselected</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).selectable({
   unselected: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>unselected</code> event by type: <code>selectableunselected</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectableunselected&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-unselecting">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-unselecting">unselecting</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">selectableunselecting</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered during the select operation, on each element removed from the selection.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>unselecting</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).selectable({
   unselecting: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>unselecting</code> event by type: <code>selectableunselecting</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectableunselecting&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.selectable( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the selectable functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.selectable( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the selectable.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.selectable( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the selectable.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.selectable( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any selectable option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.selectable( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple selectable options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.selectable( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-selectable element.</p>
  </div>
</li>


<li class="method" id="method-refresh">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.selectable( "refresh"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Selectable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.selectable.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;ul class=&quot;<strong>ui-selectable</strong>&quot;&gt;<br />
&#160;&#160;&#160;&lt;li class=&quot;<strong>ui-selectee</strong>&quot;&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li class=&quot;<strong>ui-selectee</strong>&quot;&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li class=&quot;<strong>ui-selectee</strong>&quot;&gt;&lt;/li&gt;<br />
&lt;/ul&gt;
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the selectable plugin, not markup you should use to create a selectable. The only markup needed for that is <br />&lt;ul&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&lt;/ul&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 34703 bytes
Post-expand include size: 54220 bytes
Template argument size: 27222 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3771-1!1!0!!en!2 and timestamp 20120724122437 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\show.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI show</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/show?section=1" title="Edit section: show( effect, [options], [speed], [callback] )">edit</a>]</div><a name="show.28_effect.2C_.5Boptions.5D.2C_.5Bspeed.5D.2C_.5Bcallback.5D_.29"></a><h3>show( effect, <span class="optional">[</span>options<span class="optional">]</span>, <span class="optional">[</span>speed<span class="optional">]</span>, <span class="optional">[</span>callback<span class="optional">]</span> )</h3>
<p>The enhanced show method optionally accepts jQuery UI advanced effects.</p>
<p>Uses a specific effect on an element to show the element if the first argument is a effect string.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>Effects Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="170">
Apply the effect slide if you click on the p to show a div.<br />
</p>
<pre>$(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(&quot;div&quot;).<strong class="selflink">show</strong>(&quot;slide&quot;, {}, 1000);
    });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.slide.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
  div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
&lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(&quot;div&quot;).<strong class="selflink">show</strong>(&quot;slide&quot;, {}, 1000);
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;p&gt;Click me&lt;/p&gt;&lt;div&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Arguments</h2>
    <ul class="options-list">
      
<li class="option" id="option-effect">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-effect">effect</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.</p>
  </div>
</li>


<li class="option" id="option-options">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-options">options</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Hash</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A object/hash including specific options for the effect.</p>
  </div>
</li>


<li class="option" id="option-speed">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-speed">speed</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
  </div>
</li>


<li class="option" id="option-callback">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-callback">callback</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Function</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A function that is called after the effect is completed.</p>
  </div>
</li>

    </ul>
  </div>
</div>

</p><!-- 
Pre-expand include size: 6354 bytes
Post-expand include size: 8726 bytes
Template argument size: 5452 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2613-1!1!0!!en!2 and timestamp 20120724021927 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\slider.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Slider</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.</p>
<p>The start, slide, and stop callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):
</p><p>The slider widget will create handle elements with the class 'ui-slider-handle' on initialization. You can specify custom handle elements by creating and appending the elements and adding the 'ui-slider-handle' class before init. It will only create the number of handles needed to match the length of value/values. For example, if you specify 'values: [1, 5, 18]' and create one custom handle, the plugin will create the other two.
</p>
<ul>
  <li><b>ui.handle</b>: DOMElement - the current focused handle</li>
  <li><b>ui.value</b>: Integer - the current handle's value</li>
</ul>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
<li>UI Mouse</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="">
A simple jQuery UI Slider.<br />
</p>
<pre>$(&quot;#slider&quot;).slider();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
    &lt;style type=&quot;text/css&quot;&gt;
    #slider { margin: 10px; }
  &lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#slider&quot;).slider();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;slider&quot;&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the slider. Can be set when initialising (first creating) the slider.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a slider with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).slider({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).slider( "option", "disabled" );
//setter
$( ".selector" ).slider( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-animate">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-animate">animate</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean, String, Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a slider with the <code>animate</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).slider({ animate: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>animate</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var animate = $( ".selector" ).slider( "option", "animate" );
//setter
$( ".selector" ).slider( "option", "animate", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-max">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-max">max</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">100</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The maximum value of the slider.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a slider with the <code>max</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).slider({ max: 7 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>max</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var max = $( ".selector" ).slider( "option", "max" );
//setter
$( ".selector" ).slider( "option", "max", 7 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-min">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-min">min</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The minimum value of the slider.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a slider with the <code>min</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).slider({ min: -7 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>min</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var min = $( ".selector" ).slider( "option", "min" );
//setter
$( ".selector" ).slider( "option", "min", -7 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-orientation">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-orientation">orientation</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"horizontal"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a slider with the <code>orientation</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).slider({ orientation: "vertical" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>orientation</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var orientation = $( ".selector" ).slider( "option", "orientation" );
//setter
$( ".selector" ).slider( "option", "orientation", "vertical" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-range">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-range">range</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean, String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a slider with the <code>range</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).slider({ range: 'min' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>range</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var range = $( ".selector" ).slider( "option", "range" );
//setter
$( ".selector" ).slider( "option", "range", 'min' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-step">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-step">step</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a slider with the <code>step</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).slider({ step: 5 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>step</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var step = $( ".selector" ).slider( "option", "step" );
//setter
$( ".selector" ).slider( "option", "step", 5 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-value">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-value">value</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a slider with the <code>value</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).slider({ value: 37 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>value</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var value = $( ".selector" ).slider( "option", "value" );
//setter
$( ".selector" ).slider( "option", "value", 37 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-values">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-values">values</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a slider with the <code>values</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).slider({ values: [1,5,9] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>values</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var values = $( ".selector" ).slider( "option", "values" );
//setter
$( ".selector" ).slider( "option", "values", [1,5,9] );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">slidecreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when slider is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).slider({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>slidecreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;slidecreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-start">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-start">start</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">slidestart</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the user starts sliding.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>start</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).slider({
   start: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>start</code> event by type: <code>slidestart</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;slidestart&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-slide">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-slide">slide</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">slide</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.
</p><p>Return false in order to prevent a slide, based on ui.value.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>slide</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).slider({
   slide: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>slide</code> event by type: <code>slide</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;slide&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-change">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-change">change</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">slidechange</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered on slide stop, or if the value is changed programmatically (by the <code>value</code> method).  Takes arguments event and ui.  Use event.originalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>change</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).slider({
   change: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>change</code> event by type: <code>slidechange</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;slidechange&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-stop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-stop">stop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">slidestop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the user stops sliding.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>stop</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).slider({
   stop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>stop</code> event by type: <code>slidestop</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;slidestop&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.slider( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the slider functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.slider( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the slider.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.slider( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the slider.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.slider( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any slider option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.slider( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple slider options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.slider( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-slider element.</p>
  </div>
</li>


<li class="method" id="method-value">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-value">value</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.slider( "value"

, <span class="optional">[</span>value<span class="optional">] </span>





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Gets or sets the value of the slider. For single handle sliders.</p>
  </div>
</li>


<li class="method" id="method-values">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-values">values</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.slider( "values"

, index

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Gets or sets the values of the slider. For multiple handle or range sliders.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Slider plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;div class=&quot;ui-slider<strong> ui-slider-horizontal</strong> ui-widget ui-widget-content ui-corner-all&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;a style=&quot;left: 0%;&quot; class=&quot;<strong>ui-slider-handle</strong> ui-state-default ui-corner-all&quot; href=&quot;#&quot;&gt;&lt;/a&gt;<br />
&lt;/div&gt;<br />
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the slider plugin, not markup you should use to create a slider. The only markup needed for that is &lt;div&gt;&lt;div&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 36451 bytes
Post-expand include size: 55617 bytes
Template argument size: 27679 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3776-1!1!0!!en!2 and timestamp 20120724123246 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\sortable.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Sortable</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.</p>
<p>All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>
<ul>
<li><b>ui.helper</b> - the current helper element (most often a clone of the item)</li>
<li><b>ui.position</b> - current position of the helper</li>
<li><b>ui.offset</b> - current absolute position of the helper</li>
<li><b>ui.item</b> - the current dragged element</li>
<li><b>ui.placeholder</b> - the placeholder (if you defined one)</li>
<li><b>ui.sender</b> - the sortable where the item comes from (only exists if you move from one connected list to another)</li>
</ul>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
<li>UI Mouse</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="100">
A simple jQuery UI Sortable.<br />
</p>
<pre>$(&quot;#sortable&quot;).sortable();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#sortable&quot;).sortable();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;ul id=&quot;sortable&quot;&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
&lt;li&gt;Item 4&lt;/li&gt;
&lt;li&gt;Item 5&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the sortable. Can be set when initialising (first creating) the sortable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
//setter
$( ".selector" ).sortable( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-appendTo">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'parent'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>appendTo</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ appendTo: 'body' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>appendTo</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
//setter
$( ".selector" ).sortable( "option", "appendTo", 'body' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-axis">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-axis">axis</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If defined, the items can be dragged only horizontally or vertically. Possible values:'x', 'y'.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>axis</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ axis: 'x' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>axis</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var axis = $( ".selector" ).sortable( "option", "axis" );
//setter
$( ".selector" ).sortable( "option", "axis", 'x' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cancel">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">':input,button'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Prevents sorting if you start on elements matching the selector.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>cancel</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ cancel: 'button' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cancel</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
//setter
$( ".selector" ).sortable( "option", "cancel", 'button' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-connectWith">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-connectWith">connectWith</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Takes a jQuery selector with items that also have sortables applied. If used, the sortable is now connected to the other one-way, so you can drag from this sortable to the other.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>connectWith</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ connectWith: '.otherlist' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>connectWith</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
//setter
$( ".selector" ).sortable( "option", "connectWith", '.otherlist' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-containment">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-containment">containment</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Element, String, Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document', 'window', or a jQuery selector.
</p><p>Note: the element specified for containment must have a calculated width and height (though it need not be explicit), so for example, if you have float:left sortable children and specify containment:'parent' be sure to have float:left on the sortable/parent container as well or it will have height: 0, causing undefined behavior.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>containment</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ containment: 'parent' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>containment</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var containment = $( ".selector" ).sortable( "option", "containment" );
//setter
$( ".selector" ).sortable( "option", "containment", 'parent' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cursor">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'auto'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Defines the cursor that is being shown while sorting.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>cursor</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ cursor: 'crosshair' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cursor</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
//setter
$( ".selector" ).sortable( "option", "cursor", 'crosshair' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cursorAt">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Object</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: <code>{ top, left, right, bottom }</code>.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>cursorAt</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ cursorAt: { left: 5 } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cursorAt</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
//setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-delay">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-delay">delay</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>delay</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ delay: 500 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>delay</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var delay = $( ".selector" ).sortable( "option", "delay" );
//setter
$( ".selector" ).sortable( "option", "delay", 500 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-distance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-distance">distance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>distance</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ distance: 30 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>distance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var distance = $( ".selector" ).sortable( "option", "distance" );
//setter
$( ".selector" ).sortable( "option", "distance", 30 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-dropOnEmpty">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-dropOnEmpty">dropOnEmpty</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If false items from this sortable can't be dropped to an empty linked sortable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>dropOnEmpty</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ dropOnEmpty: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>dropOnEmpty</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
//setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-forceHelperSize">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-forceHelperSize">forceHelperSize</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If true, forces the helper to have a size.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>forceHelperSize</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ forceHelperSize: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>forceHelperSize</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
//setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-forcePlaceholderSize">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-forcePlaceholderSize">forcePlaceholderSize</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If true, forces the placeholder to have a size.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>forcePlaceholderSize</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ forcePlaceholderSize: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>forcePlaceholderSize</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
//setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-grid">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-grid">grid</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [x, y]</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>grid</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ grid: [50, 20] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>grid</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var grid = $( ".selector" ).sortable( "option", "grid" );
//setter
$( ".selector" ).sortable( "option", "grid", [50, 20] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-handle">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-handle">handle</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector, Element</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Restricts sort start click to the specified element.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>handle</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ handle: 'h2' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>handle</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var handle = $( ".selector" ).sortable( "option", "handle" );
//setter
$( ".selector" ).sortable( "option", "handle", 'h2' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-helper">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-helper">helper</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Function</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'original'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Allows for a helper element to be used for dragging display. The supplied function receives the event and the element being sorted, and should return a DOMElement to be used as a custom proxy helper. Possible values: 'original', 'clone'</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>helper</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ helper: 'clone' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>helper</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var helper = $( ".selector" ).sortable( "option", "helper" );
//setter
$( ".selector" ).sortable( "option", "helper", 'clone' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-items">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-items">items</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'&gt; *'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Specifies which items inside the element should be sortable.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>items</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ items: 'li' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>items</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var items = $( ".selector" ).sortable( "option", "items" );
//setter
$( ".selector" ).sortable( "option", "items", 'li' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-opacity">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Float</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Defines the opacity of the helper while sorting. From 0.01 to 1</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>opacity</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ opacity: 0.6 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>opacity</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
//setter
$( ".selector" ).sortable( "option", "opacity", 0.6 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-placeholder">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-placeholder">placeholder</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Class that gets applied to the otherwise white space.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>placeholder</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ placeholder: 'ui-state-highlight' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>placeholder</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
//setter
$( ".selector" ).sortable( "option", "placeholder", 'ui-state-highlight' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-revert">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-revert">revert</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean/Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, the item will be reverted to its new DOM position with a smooth animation. Optionally, it can also be set to a number that controls the duration of the animation in ms.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>revert</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ revert: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>revert</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var revert = $( ".selector" ).sortable( "option", "revert" );
//setter
$( ".selector" ).sortable( "option", "revert", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scroll">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If set to true, the page scrolls when coming to an edge.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>scroll</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ scroll: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scroll</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
//setter
$( ".selector" ).sortable( "option", "scroll", false );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scrollSensitivity">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Defines how near the mouse must be to an edge to start scrolling.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>scrollSensitivity</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ scrollSensitivity: 40 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scrollSensitivity</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
//setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 40 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scrollSpeed">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>scrollSpeed</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ scrollSpeed: 40 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scrollSpeed</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
//setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-tolerance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'intersect'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural.
</p>
<ul>
<li><b>intersect</b>: draggable overlaps the droppable at least 50%</li>
<li><b>pointer</b>: mouse pointer overlaps the droppable</li>
</ul>
<p></p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>tolerance</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ tolerance: 'pointer' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>tolerance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
//setter
$( ".selector" ).sortable( "option", "tolerance", 'pointer' );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-zIndex">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1000</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Z-index for element/helper while being sorted.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a sortable with the <code>zIndex</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).sortable({ zIndex: 5 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>zIndex</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
//setter
$( ".selector" ).sortable( "option", "zIndex", 5 );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortcreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when sortable is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>sortcreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortcreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-start">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-start">start</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortstart</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when sorting starts.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>start</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   start: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>start</code> event by type: <code>sortstart</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortstart&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-sort">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-sort">sort</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sort</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered during sorting.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>sort</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   sort: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>sort</code> event by type: <code>sort</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sort&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-change">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-change">change</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortchange</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered during sorting, but only when the DOM position has changed.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>change</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   change: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>change</code> event by type: <code>sortchange</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortchange&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-beforeStop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-beforeStop">beforeStop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortbeforestop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when sorting stops, but when the placeholder/helper is still available.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>beforeStop</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   beforeStop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>beforeStop</code> event by type: <code>sortbeforestop</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortbeforestop&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-stop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-stop">stop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortstop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when sorting has stopped.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>stop</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   stop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>stop</code> event by type: <code>sortstop</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortstop&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-update">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-update">update</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortupdate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when the user stopped sorting and the DOM position has changed.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>update</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   update: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>update</code> event by type: <code>sortupdate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortupdate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-receive">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-receive">receive</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortreceive</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a connected sortable list has received an item from another list.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>receive</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   receive: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>receive</code> event by type: <code>sortreceive</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortreceive&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-remove">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-remove">remove</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortremove</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a sortable item has been dragged out from the list and into another.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>remove</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   remove: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>remove</code> event by type: <code>sortremove</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortremove&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-over">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-over">over</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortover</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a sortable item is moved into a connected list.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>over</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   over: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>over</code> event by type: <code>sortover</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortover&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-out">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-out">out</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortout</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a sortable item is moved away from a connected list.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>out</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   out: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>out</code> event by type: <code>sortout</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortout&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-activate">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-activate">activate</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortactivate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when using connected lists, every connected list on drag start receives it.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>activate</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   activate: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>activate</code> event by type: <code>sortactivate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortactivate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-deactivate">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">sortdeactivate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when sorting was stopped, is propagated to all possible connected lists.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>deactivate</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).sortable({
   deactivate: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>deactivate</code> event by type: <code>sortdeactivate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortdeactivate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the sortable functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the sortable.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the sortable.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any sortable option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple sortable options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-sortable element.</p>
  </div>
</li>


<li class="method" id="method-serialize">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-serialize">serialize</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "serialize"

, <span class="optional">[</span>options<span class="optional">] </span>





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Serializes the sortable's item id's into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.
</p><p>It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&amp;setname[]=number".
</p><p>You can also give in a option hash as second argument to custom define how the function works. The possible options are: 'key' (replaces part1[] with whatever you want), 'attribute' (test another attribute than 'id') and 'expression' (use your own regexp).
</p><p>If serialize returns an empty string, make sure the id attributes include an underscore.  They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&amp;foo[]=5&amp;foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number.  For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.</p>
  </div>
</li>


<li class="method" id="method-toArray">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-toArray">toArray</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "toArray"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Serializes the sortable's item id's into an array of string. If you have
</p>
<pre>
&lt;ul id=&quot;a_sortable&quot;&gt;&lt;br&gt;
&lt;li id=&quot;hello&quot;&gt;Hello&lt;/li&gt;&lt;br&gt;
&lt;li id=&quot;goodbye&quot;&gt;Good bye&lt;/li&gt;&lt;br&gt;
&lt;/ul&gt;
</pre>
<p>and do
</p>
<pre>var result = $('#a_sortable').sortable('toArray');</pre>
<p>then
</p>
<pre>result[0] will contain &quot;hello&quot; and result[1] will contain &quot;goodbye&quot;.</pre></p>
  </div>
</li>

<p>
<li class="method" id="method-refresh">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "refresh"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Refresh the sortable items. Custom trigger the reloading of all sortable items, causing new items to be recognized.</p>
  </div>
</li>


<li class="method" id="method-refreshPositions">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-refreshPositions">refreshPositions</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "refreshPositions"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Refresh the cached positions of the sortables' items. Calling this method refreshes the cached item positions of all sortables. This is usually done automatically by the script and slows down performance. Use wisely.</p>
  </div>
</li>


<li class="method" id="method-cancel">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-cancel">cancel</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.sortable( "cancel"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Cancels a change in the current sortable and reverts it back to how it was before the current sort started. Useful in the stop and receive callback functions.
</p><p>If the sortable item is not being moved from one connected sortable to another:
</p>
<pre>$(this).sortable('cancel');</pre>
<p>will cancel the change.
</p><p>If the sortable item is being moved from one connected sortable to another:
</p>
<pre>$(ui.sender).sortable('cancel');</pre>
<p>will cancel the change. Useful in the 'receive' callback.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Sortable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.sortable.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;ul class=&quot;<strong>ui-sortable</strong>&quot;&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li class=&quot;<strong>ui-sortable-helper</strong>&quot;&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li class=&quot;<strong>ui-sortable-placeholder</strong>&quot;&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&lt;/ul&gt;
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the sortable plugin, not markup you should use to create a sortable. The only markup needed for that is <br />&lt;ul&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&lt;/ul&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 75037 bytes
Post-expand include size: 131765 bytes
Template argument size: 74139 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3772-1!1!0!!en!2 and timestamp 20120724123245 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\switchClass.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI switchClass</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/switchClass?section=1" title="Edit section: switchClass( remove, add, [duration] )">edit</a>]</div><a name="switchClass.28_remove.2C_add.2C_.5Bduration.5D_.29"></a><h3>switchClass( remove, add, <span class="optional">[</span>duration<span class="optional">]</span> )</h3>
<p>Switches from the class defined in the first argument to the class defined as second argument, using an optional transition.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>Effects Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="170">
Switch the class 'highlight' to 'blue' when a paragraph is clicked with a one second transition.<br />
</p>
<pre>$(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(this).<strong class="selflink">switchClass</strong>(&quot;highlight&quot;, &quot;blue&quot;, 1000);
    });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
  p { margin: 4px; font-size:16px; font-weight:bolder; 
      cursor:pointer; }
  .blue { background: blue; }
  .highlight { background:yellow; }
&lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(this).<strong class="selflink">switchClass</strong>(&quot;highlight&quot;, &quot;blue&quot;, 1000);
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;p class=&quot;highlight&quot;&gt;Click to switch&lt;/p&gt;
&lt;p class=&quot;highlight&quot;&gt;to blue&lt;/p&gt;
&lt;p class=&quot;highlight&quot;&gt;on these&lt;/p&gt;
&lt;p class=&quot;highlight&quot;&gt;paragraphs&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Arguments</h2>
    <ul class="options-list">
      
<li class="option" id="option-remove">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-remove">remove</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The CSS class that will be removed.</p>
  </div>
</li>


<li class="option" id="option-add">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-add">add</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The CSS class that will be added.</p>
  </div>
</li>


<li class="option" id="option-duration">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-duration">duration</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
  </div>
</li>

    </ul>
  </div>
</div>

</p><!-- 
Pre-expand include size: 5818 bytes
Post-expand include size: 7682 bytes
Template argument size: 4812 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2609-1!1!0!!en!2 and timestamp 20120724021125 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\tabs.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Tabs</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.</p>
<p>By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.</p>
<p><em>NOTE: Tabs created dynamically using .tabs( "add", ... ) are given an id of ui-tabs-NUM, where NUM is an auto-incrementing id. If you use this naming convention for your own elements, you may encounter problems.</em></p>
<table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1"><a href="#Events"><span class="tocnumber">1</span> <span class="toctext">Events</span></a></li>
<li class="toclevel-1"><a href="#Ajax_mode"><span class="tocnumber">2</span> <span class="toctext">Ajax mode</span></a>
<ul>
<li class="toclevel-2"><a href="#Back_button_and_bookmarking"><span class="tocnumber">2.1</span> <span class="toctext">Back button and bookmarking</span></a></li>
</ul>
</li>
<li class="toclevel-1"><a href="#How_to..."><span class="tocnumber">3</span> <span class="toctext">How to...</span></a>
<ul>
<li class="toclevel-2"><a href="#...retrieve_the_index_of_the_currently_selected_tab"><span class="tocnumber">3.1</span> <span class="toctext">...retrieve the index of the currently selected tab</span></a></li>
<li class="toclevel-2"><a href="#...open_links_in_the_current_tab_instead_of_leaving_the_page"><span class="tocnumber">3.2</span> <span class="toctext">...open links in the current tab instead of leaving the page</span></a></li>
<li class="toclevel-2"><a href="#...select_a_tab_from_a_text_link_instead_of_clicking_a_tab_itself"><span class="tocnumber">3.3</span> <span class="toctext">...select a tab from a text link instead of clicking a tab itself</span></a></li>
<li class="toclevel-2"><a href="#...prevent_switching_to_the_tab_on_click_depending_on_form_validation"><span class="tocnumber">3.4</span> <span class="toctext">...prevent switching to the tab on click depending on form validation</span></a></li>
<li class="toclevel-2"><a href="#...immediately_select_a_just_added_tab"><span class="tocnumber">3.5</span> <span class="toctext">...immediately select a just added tab</span></a></li>
<li class="toclevel-2"><a href="#...prevent_a_FOUC_.28Flash_of_Unstyled_Content.29_before_tabs_are_initialized"><span class="tocnumber">3.6</span> <span class="toctext">...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized</span></a></li>
</ul>
</li>
<li class="toclevel-1"><a href="#Why_does..."><span class="tocnumber">4</span> <span class="toctext">Why does...</span></a>
<ul>
<li class="toclevel-2"><a href="#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F"><span class="tocnumber">4.1</span> <span class="toctext">...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?</span></a></li>
</ul>
</li>
</ul>
</td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=1" title="Template:UIAPIPlugin">edit</a>]</div><a name="Events"></a><h2>Events</h2>
<p>A series of events fire when interacting with a tabs interface:
</p>
<ul><li> tabsselect, tabsload, tabsshow (in that order)
</li><li> tabsadd, tabsremove
</li><li> tabsenable, tabsdisable
</li></ul>
<p>Event binding example:
</p>
<pre>$('#example').bind('tabsselect', function(event, ui) {

    // Objects available in the function context:
    ui.tab     // anchor element of the selected (clicked) tab
    ui.panel   // element, that contains the selected/clicked tab contents
    ui.index   // zero-based index of the selected (clicked) tab

});</pre>
<p>Note that if a handler for the tabsselect event returns false, the clicked tab will not become selected (useful for example if switching to the next tab requires a form validation).
</p>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=2" title="Template:UIAPIPlugin">edit</a>]</div><a name="Ajax_mode"></a><h2> Ajax mode </h2>
<p>Tabs supports loading tab content via Ajax in an unobtrusive manner.
</p><p>The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers' markup is going to be created on the fly:
</p>
<pre>
&lt;div id=&quot;example&quot;&gt;
     &lt;ul&gt;
         &lt;li&gt;&lt;a href=&quot;ahah_1.html&quot;&gt;&lt;span&gt;Content 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;ahah_2.html&quot;&gt;&lt;span&gt;Content 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;ahah_3.html&quot;&gt;&lt;span&gt;Content 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled.
</p><p>Note that if you wish to reuse an existing container, you
could do so by matching a title attribute and the container's id:
</p>
<pre>
&lt;li&gt;&lt;a href=&quot;hello/world.html&quot; title=&quot;Todo Overview&quot;&gt; ... &lt;/a&gt;&lt;/li&gt;
</pre>
<p>and a container like:
</p>
<pre>
&lt;div id=&quot;Todo_Overview&quot;&gt; ... &lt;/div&gt;
</pre>
<p>(Note how white space is replaced with an underscore)
</p><p>This is useful if you want a human readable hash in the URL instead of
a cryptic generated one.
</p>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=3" title="Template:UIAPIPlugin">edit</a>]</div><a name="Back_button_and_bookmarking"></a><h3>Back button and bookmarking</h3>
<p>Tabs 2 already supported this functionality, although the history plugin needs a rewrite first (it doesn't support Safari 3 and is in general a little inflexible) before it can be build back into the tabs. It is planned and Klaus is working on it whenever he finds the time. Actual bugs in the UI Tabs plugin itself always have higher priority though.
</p>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=4" title="Template:UIAPIPlugin">edit</a>]</div><a name="How_to..."></a><h2>How to...</h2>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=5" title="Template:UIAPIPlugin">edit</a>]</div><a name="...retrieve_the_index_of_the_currently_selected_tab"></a><h3>...retrieve the index of the currently selected tab</h3>
<pre>var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // =&gt; 0</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=6" title="Template:UIAPIPlugin">edit</a>]</div><a name="...open_links_in_the_current_tab_instead_of_leaving_the_page"></a><h3>...open links in the current tab instead of leaving the page</h3>
<p>"Hijax" links after tab content has been loaded:
</p>
<pre>$('#example').tabs({
    load: function(event, ui) {
        $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href);
            event.preventDefault();
        });
    }
});</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=7" title="Template:UIAPIPlugin">edit</a>]</div><a name="...select_a_tab_from_a_text_link_instead_of_clicking_a_tab_itself"></a><h3>...select a tab from a text link instead of clicking a tab itself</h3>
<pre>var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=8" title="Template:UIAPIPlugin">edit</a>]</div><a name="...prevent_switching_to_the_tab_on_click_depending_on_form_validation"></a><h3>...prevent switching to the tab on click depending on form validation</h3>
<p>Returning false in the tabs select handler prevents the clicked tab from becoming selected.
</p>
<pre>$('#example').tabs({
    select: function(event, ui) {
        var isValid = ... // form validation returning true or false
        return isValid;
    }
});</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=9" title="Template:UIAPIPlugin">edit</a>]</div><a name="...immediately_select_a_just_added_tab"></a><h3>...immediately select a just added tab</h3>
<pre>var $tabs = $('#example').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=10" title="Template:UIAPIPlugin">edit</a>]</div><a name="...prevent_a_FOUC_.28Flash_of_Unstyled_Content.29_before_tabs_are_initialized"></a><h3>...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized</h3>
<p>Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will <b>not</b> degrade gracefully with JavaScript being disabled:
</p>
<pre>&lt;div id=&quot;example&quot; class=&quot;ui-tabs&quot;&gt;
  ...
  &lt;div id=&quot;a-tab-panel&quot; class=&quot;ui-tabs-hide&quot;&gt; &lt;/div&gt;
  ...
&lt;/div&gt;</pre>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=11" title="Template:UIAPIPlugin">edit</a>]</div><a name="Why_does..."></a><h2>Why does...</h2>
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=12" title="Template:UIAPIPlugin">edit</a>]</div><a name="...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F"></a><h3>...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?</h3>
<p>Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via <code>display: none</code> so that any elements inside won't report their actual width and height (0 in most browsers).
</p><p>There's an easy workaround. Use the <em>off-left technique</em> for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with
</p>
<pre>.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}</pre>
<p>For Google maps you can also resize the map once the tab is displayed like this:
</p>
<pre>$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == &quot;map-tab&quot;) {
        resizeMap();
    }
});</pre>
resizeMap() will call Google Maps' checkResize() on the particular map.
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
<li><strong>Optional:</strong> <a href="https://github.com/carhartl/jquery-cookie" class="external text" title="https://github.com/carhartl/jquery-cookie">jquery.cookie.js</a> for use with <a href="http://jqueryui.com/demos/tabs/#option-cookie" class="external text" title="http://jqueryui.com/demos/tabs/#option-cookie">cookie option</a> (also included in development-bundle&gt;external folder.)</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="295">
A simple jQuery UI Tabs.<br />
</p>
<pre>$(&quot;#tabs&quot;).tabs();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;#tabs&quot;).tabs();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;div id=&quot;tabs&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#fragment-1&quot;&gt;&lt;span&gt;One&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#fragment-2&quot;&gt;&lt;span&gt;Two&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#fragment-3&quot;&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id=&quot;fragment-1&quot;&gt;
        &lt;p&gt;First tab is active by default:&lt;/p&gt;
        &lt;pre&gt;&lt;code&gt;$('#example').tabs();&lt;/code&gt;&lt;/pre&gt;
    &lt;/div&gt;
    &lt;div id=&quot;fragment-2&quot;&gt;
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    &lt;/div&gt;
    &lt;div id=&quot;fragment-3&quot;&gt;
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Disables (true) or enables (false) the tabs. Can be set when initialising (first creating) the tabs.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ disabled: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).tabs( "option", "disabled" );
//setter
$( ".selector" ).tabs( "option", "disabled", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-ajaxOptions">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-ajaxOptions">ajaxOptions</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Options</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Additional Ajax options to consider when loading tab content (see $.ajax).</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>ajaxOptions</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ ajaxOptions: { async: false } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>ajaxOptions</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var ajaxOptions = $( ".selector" ).tabs( "option", "ajaxOptions" );
//setter
$( ".selector" ).tabs( "option", "ajaxOptions", { async: false } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cache">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cache">cache</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Whether or not to cache remote tabs content, e.g. load only once or with every click. Cached content is being lazy loaded, e.g once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag to ajaxOptions.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>cache</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ cache: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cache</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cache = $( ".selector" ).tabs( "option", "cache" );
//setter
$( ".selector" ).tabs( "option", "cache", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-collapsible">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-collapsible">collapsible</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Set to true to allow an already selected tab to become unselected again upon reselection.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>collapsible</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ collapsible: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>collapsible</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var collapsible = $( ".selector" ).tabs( "option", "collapsible" );
//setter
$( ".selector" ).tabs( "option", "collapsible", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cookie">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cookie">cookie</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Object</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Store the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the <i>selected</i> option is not defined. Requires <a href="http://plugins.jquery.com/project/cookie" class="external text" title="http://plugins.jquery.com/project/cookie">cookie plugin</a>, which can also be found in the development-bundle&gt;external folder from the download builder. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options (example): &#123; expires: 7, path: '/', domain: 'jquery.com', secure: true &#125;. Since jQuery UI 1.7 it is also possible to define the cookie name being used via <i>name</i> property.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>cookie</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ cookie: { expires: 30 } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cookie</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cookie = $( ".selector" ).tabs( "option", "cookie" );
//setter
$( ".selector" ).tabs( "option", "cookie", { expires: 30 } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-deselectable">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-deselectable">deselectable</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>deprecated in jQuery UI 1.7, use collapsible.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>deselectable</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ deselectable: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>deselectable</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var deselectable = $( ".selector" ).tabs( "option", "deselectable" );
//setter
$( ".selector" ).tabs( "option", "deselectable", true );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-disabled">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Array&lt;Number&gt;</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">[]</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>An array containing the position of the tabs (zero-based index) that should be disabled on initialization.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>disabled</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ disabled: [1, 2] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>disabled</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var disabled = $( ".selector" ).tabs( "option", "disabled" );
//setter
$( ".selector" ).tabs( "option", "disabled", [1, 2] );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-event">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-event">event</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"click"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The type of event to be used for selecting a tab.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>event</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ event: "mouseover" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>event</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var event = $( ".selector" ).tabs( "option", "event" );
//setter
$( ".selector" ).tabs( "option", "event", "mouseover" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-fx">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-fx">fx</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Options, Array&lt;Options&gt;</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">null</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Enable animations for hiding and showing tab panels. The duration option can be a string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run an animation (default is "normal").</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>fx</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ fx: { opacity: 'toggle' } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>fx</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var fx = $( ".selector" ).tabs( "option", "fx" );
//setter
$( ".selector" ).tabs( "option", "fx", { opacity: 'toggle' } );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-idPrefix">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-idPrefix">idPrefix</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"ui-tabs-"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>idPrefix</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ idPrefix: "ui-tabs-primary" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>idPrefix</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var idPrefix = $( ".selector" ).tabs( "option", "idPrefix" );
//setter
$( ".selector" ).tabs( "option", "idPrefix", "ui-tabs-primary" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-panelTemplate">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-panelTemplate">panelTemplate</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"&lt;div&gt;&lt;/div&gt;"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>HTML template from which a new tab panel is created in case of adding a tab with the add method or when creating a panel for a remote tab on the fly.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>panelTemplate</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ panelTemplate: "&lt;li&gt;&lt;/li&gt;" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>panelTemplate</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var panelTemplate = $( ".selector" ).tabs( "option", "panelTemplate" );
//setter
$( ".selector" ).tabs( "option", "panelTemplate", "&lt;li&gt;&lt;/li&gt;" );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-selected">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-selected">selected</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Number</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Zero-based index of the tab to be selected on initialization. To set all tabs to unselected pass -1 as value.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>selected</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ selected: 3 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>selected</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var selected = $( ".selector" ).tabs( "option", "selected" );
//setter
$( ".selector" ).tabs( "option", "selected", 3 );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-spinner">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-spinner">spinner</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"&lt;em&gt;Loading&amp;#8230;&lt;/em&gt;"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior. An span element must be present in the A tag of the title, for the spinner content to be visible.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>spinner</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ spinner: "Retrieving data..." });</code></pre>
</dd>

    
<dt>
  Get or set the <code>spinner</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var spinner = $( ".selector" ).tabs( "option", "spinner" );
//setter
$( ".selector" ).tabs( "option", "spinner", "Retrieving data..." );</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-tabTemplate">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-tabTemplate">tabTemplate</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">"&lt;li&gt;&lt;a href&#61;"#&#123;href&#125;"&gt;&lt;span&gt;#&#123;label&#125;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;"</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>HTML template from which a new tab is created and added. The placeholders #&#123;href&#125; and #&#123;label&#125; are replaced with the url and tab label that are passed as arguments to the add method.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a tabs with the <code>tabTemplate</code> option specified.
</dt>
<dd>
<pre><code>$( ".selector" ).tabs({ tabTemplate: "&lt;div&gt;&lt;a href&#61;"#&#123;href&#125;"&gt;&lt;span&gt;#&#123;label&#125;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>tabTemplate</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var tabTemplate = $( ".selector" ).tabs( "option", "tabTemplate" );
//setter
$( ".selector" ).tabs( "option", "tabTemplate", "&lt;div&gt;&lt;a href&#61;"#&#123;href&#125;"&gt;&lt;span&gt;#&#123;label&#125;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;" );</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-create">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-create">create</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">tabscreate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when tabs is created.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>create</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).tabs({
   create: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>create</code> event by type: <code>tabscreate</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabscreate&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-select">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-select">select</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">tabsselect</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when clicking a tab.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>select</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).tabs({
   select: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>select</code> event by type: <code>tabsselect</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsselect&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-load">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-load">load</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">tabsload</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered after the content of a remote tab has been loaded.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>load</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).tabs({
   load: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>load</code> event by type: <code>tabsload</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsload&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-show">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-show">show</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">tabsshow</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a tab is shown.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>show</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).tabs({
   show: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>show</code> event by type: <code>tabsshow</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsshow&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-add">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-add">add</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">tabsadd</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a tab is added.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>add</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).tabs({
   add: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>add</code> event by type: <code>tabsadd</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsadd&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-remove">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-remove">remove</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">tabsremove</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a tab is removed.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>remove</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).tabs({
   remove: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>remove</code> event by type: <code>tabsremove</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsremove&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-enable">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-enable">enable</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">tabsenable</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a tab is enabled.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>enable</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).tabs({
   enable: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>enable</code> event by type: <code>tabsenable</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsenable&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-disable">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-disable">disable</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">tabsdisable</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>This event is triggered when a tab is disabled.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>disable</code> event as an init option.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).tabs({
   disable: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>disable</code> event by type: <code>tabsdisable</code>.
</dt>
<dd>
<pre><code>$( &quot;.selector&quot; ).bind( &quot;tabsdisable&quot;, function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "destroy"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the tabs functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "disable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the tabs.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "enable"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the tabs.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "option"

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any tabs option. If no value is specified, will act as a getter.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "option"

, options





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set multiple tabs options at once by providing an options object.</p>
  </div>
</li>


<li class="method" id="method-widget">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "widget"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Returns the .ui-tabs element.</p>
  </div>
</li>


<li class="method" id="method-add">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-add">add</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "add"

, url

, label

, <span class="optional">[</span>index<span class="optional">] </span>

)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Add a new tab. The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.</p>
  </div>
</li>


<li class="method" id="method-remove">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-remove">remove</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "remove"

, index





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove a tab. The second argument is the zero-based index of the tab to be removed. Instead of an index, the href of the tab may be passed.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "enable"

, index





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable a disabled tab.  To enable more than one tab at once reset the disabled property like: <code>$('#example').tabs("option","disabled",[]);</code>. The second argument is the zero-based index of the tab to be enabled. Instead of an index, the href of the tab may be passed.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "disable"

, index





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable a tab. The selected tab cannot be disabled. To disable more than one tab at once use: <code>$('#example').tabs("option","disabled", [1, 2, 3]);</code>  The second argument is the zero-based index of the tab to be disabled. Instead of an index, the href of the tab may be passed.</p>
  </div>
</li>


<li class="method" id="method-select">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-select">select</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "select"

, index





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).</p>
  </div>
</li>


<li class="method" id="method-load">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-load">load</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "load"

, index





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Reload the content of an Ajax tab programmatically. This method always loads the tab content from the remote location, even if cache is set to true. The second argument is the zero-based index of the tab to be reloaded.</p>
  </div>
</li>


<li class="method" id="method-url">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-url">url</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "url"

, index

, url



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Change the url from which an Ajax (remote) tab will be loaded. The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab.  The second argument is the zero-based index of the tab of which its URL is to be updated.  The third is a URL the content of the tab is loaded from.</p>
  </div>
</li>


<li class="method" id="method-length">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-length">length</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "length"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Retrieve the number of tabs of the first matched tab pane.</p>
  </div>
</li>


<li class="method" id="method-abort">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-abort">abort</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "abort"







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Terminate all running tab ajax requests and animations.</p>
  </div>
</li>


<li class="method" id="method-rotate">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-rotate">rotate</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.tabs( "rotate"

, ms

, <span class="optional">[</span>continuing<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Set up an automatic rotation through tabs of a tab pane.  The second argument is an amount of time in milliseconds until the next tab in the cycle gets activated. Use 0 or null to stop the rotation.  The third controls whether or not to continue the rotation after a tab has been selected by a user. Default: false.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Tabs plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.tabs.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;div class=&quot;<strong>ui-tabs</strong> ui-widget ui-widget-content ui-corner-all&quot; id=&quot;tabs&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;<strong>ui-tabs-nav</strong> ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-state-default ui-corner-top ui-tabs-selected ui-state-active&quot;&gt;&lt;a href=&quot;#tabs-1&quot;&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-state-default ui-corner-top&quot;&gt;&lt;a href=&quot;#tabs-2&quot;&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-tabs-panel</strong> ui-widget-content ui-corner-bottom&quot; id=&quot;tabs-1&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Tab one content goes here.&lt;/p&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp; ...<br />
&lt;/div&gt;<br />
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the tabs plugin, not markup you should use to create a tabs. The only markup needed for that is <br />&lt;div id=&quot;tabs&quot;&gt;<br />
&#160;&#160;&#160;&lt;ul&gt;<br />
&#160;&#160;&#160;&#160;&#160;&#160;&lt;li&gt;&lt;a href=&quot;#tabs-1&quot;&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&#160;&#160;&#160;&lt;li&gt;&lt;a href=&quot;#tabs-2&quot;&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&#160;&#160;&#160;&lt;li&gt;&lt;a href=&quot;#tabs-3&quot;&gt;Aenean lacinia&lt;/a&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;/ul&gt;<br />
&#160;&#160;&#160;&lt;div id=&quot;tabs-1&quot;&gt;<br />
&#160;&#160;&#160;&#160;&#160;&#160;&lt;p&gt;Tab 1 content&lt;/p&gt;<br />
&#160;&#160;&#160;&lt;/div&gt;<br />
&#160;&#160;&#160;&lt;div id=&quot;tabs-2&quot;&gt;<br />
&#160;&#160;&#160;&#160;&#160;&#160;&lt;p&gt;Tab 2 content&lt;/p&gt;<br />
&#160;&#160;&#160;&lt;/div&gt;<br />
&#160;&#160;&#160;&lt;div id=&quot;tabs-3&quot;&gt;<br />
&#160;&#160;&#160;&#160;&#160;&#160;&lt;p&gt;Tab 3 content&lt;/p&gt;<br />
&#160;&#160;&#160;&lt;/div&gt;<br />
&lt;/div&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 57666 bytes
Post-expand include size: 97531 bytes
Template argument size: 57634 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3777-1!1!0!!en!2 and timestamp 20120724123246 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\toggle.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI toggle</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/toggle?section=1" title="Edit section: toggle( effect, [options], [speed], [callback] )">edit</a>]</div><a name="toggle.28_effect.2C_.5Boptions.5D.2C_.5Bspeed.5D.2C_.5Bcallback.5D_.29"></a><h3>toggle( effect, <span class="optional">[</span>options<span class="optional">]</span>, <span class="optional">[</span>speed<span class="optional">]</span>, <span class="optional">[</span>callback<span class="optional">]</span> )</h3>
<p>The enhanced toggle method optionally accepts jQuery UI advanced effects.</p>
<p>Uses a specific effect on an element to toggle the element if the first argument is an effect string.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>Effects Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="170">
Apply the effect slide if you click on the p to toggle a div.<br />
</p>
<pre>$(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(&quot;div&quot;).<strong class="selflink">toggle</strong>(&quot;slide&quot;, {}, 1000);
    });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.slide.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
  div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
&lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(&quot;div&quot;).<strong class="selflink">toggle</strong>(&quot;slide&quot;, {}, 1000);
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;p&gt;Click me&lt;/p&gt;&lt;div&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Arguments</h2>
    <ul class="options-list">
      
<li class="option" id="option-effect">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-effect">effect</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.</p>
  </div>
</li>


<li class="option" id="option-options">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-options">options</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Hash</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A object/hash including specific options for the effect.</p>
  </div>
</li>


<li class="option" id="option-speed">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-speed">speed</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
  </div>
</li>


<li class="option" id="option-callback">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-callback">callback</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Function</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A function that is called after the effect is completed.</p>
  </div>
</li>

    </ul>
  </div>
</div>

</p><!-- 
Pre-expand include size: 6372 bytes
Post-expand include size: 8797 bytes
Template argument size: 5515 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2615-1!1!0!!en!2 and timestamp 20120724021138 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter17\development-bundle\docs\toggleClass.html

<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI toggleClass</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/toggleClass?section=1" title="Edit section: toggleClass( class, [duration] )">edit</a>]</div><a name="toggleClass.28_class.2C_.5Bduration.5D_.29"></a><h3>toggleClass( class, <span class="optional">[</span>duration<span class="optional">]</span> )</h3>
<p>Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.</p>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>Effects Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="100">
Adds the 'selected' class if it is not present, and removes the 'selected' class if it is present.<br />
</p>
<pre>$(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(this).<strong class="selflink">toggleClass</strong>(&quot;selected&quot;, 1000);
    });
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
  p { cursor: pointer; font-size: 1.2em; }
  .selected { color:red; }
&lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
    $(&quot;p&quot;).<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
      $(this).<strong class="selflink">toggleClass</strong>(&quot;selected&quot;, 1000);
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;p&gt;Click me to toggle 'selected' class.&lt;/p&gt;
&lt;p class=&quot;selected&quot;&gt;Click me to toggle 'selected' class.&lt;/p&gt;
&lt;p&gt;Click me to toggle 'selected' class.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Arguments</h2>
    <ul class="options-list">
      
<li class="option" id="option-class">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-class">class</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A CSS class to toggle on the elements.</p>
  </div>
</li>


<li class="option" id="option-duration">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-duration">duration</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String, Number</dd>
      
      <dt class="option-optional-label">Optional</dt>
      
    </dl>
  </div>
  <div class="option-description">
    <p>A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
  </div>
</li>

    </ul>
  </div>
</div>

</p><!-- 
Pre-expand include size: 5271 bytes
Post-expand include size: 7027 bytes
Template argument size: 4437 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2608-1!1!0!!en!2 and timestamp 20120724021105 -->



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\footerbar.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
        href="jquery.mobile-1.1.1.css">
    <script type="text/javascript"
        src="jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript"
        src="jquery.mobile-1.1.1.js">
    </script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Navbar Page</h1>
	</div>
	<div data-role="content">
		<p>Content.  Yay!</p>
	</div>
	<div data-role="footer">
		<div data-role="navbar">
			<ul>
	 			<li><a data-icon="home" data-iconpos="top" href="#">Link 1</a></li>
				<li><a data-icon="star" data-iconpos="top" href="#">Link 2</a></li>
			</ul>
		</div>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\footerbarb.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
        href="jquery.mobile-1.1.1.css">
    <script type="text/javascript"
        src="jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript"
        src="jquery.mobile-1.1.1.js">
    </script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Navbar Page</h1>
	</div>
	<div data-role="content">
		<p>Content.  Yay!</p>
	</div>
	<div data-role="footer">
		<div data-role="navbar">
			<ul>
	 			<li><a data-theme="b" data-icon="home" data-iconpos="top" href="#">Link 1</a></li>
				<li><a data-theme="b" data-icon="star" data-iconpos="top" href="#">Link 2</a></li>
			</ul>
		</div>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\headerbutton.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
        href="jquery.mobile-1.1.1.css">
    <script type="text/javascript"
        src="jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript"
        src="jquery.mobile-1.1.1.js">
    </script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<a href="#" data-icon="back">Go Back</a>
		<h1>My Buttons</h1>
		<a href="#" data-icon="forward">Go Forward</a>
	</div>
	<div data-role="content">
		<p>Content.  Yay!</p>
	</div>
	<div data-role="footer">
		<div data-role="navbar">
			<ul>
	 			<li><a data-icon="home" data-iconpos="top" href="#">Link 1</a></li>
				<li><a data-icon="star" data-iconpos="top" href="#">Link 2</a></li>
			</ul>
		</div>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\link.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet"
        href="jquery.mobile-1.1.1.css">
    <script type="text/javascript"
        src="jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript"
        src="jquery.mobile-1.1.1.js">
    </script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Link Page</h1>
	</div>
	<div data-role="content">
		<p><a href="test.html" data-transition="none">Load the test page</a></p>
	</div>
	<div data-role="footer">
		<h2>Footer content</h2>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\links.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
        href="jquery.mobile-1.1.1.css">
    <script type="text/javascript"
        src="jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript"
        src="jquery.mobile-1.1.1.js">
    </script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Link Page</h1>
	</div>
	<div data-role="content">
		<p><a href="test.html">Load the test page</a> (default behavior)</p>
		<p><a href="test.html" data-ajax="false">Load the test page</a> (data-ajax = false)</p>
		<p><a href="test.html" rel="external">Load the test page</a> (rel = external)</p>
		<p><a href="test.html" target="_blank">Load the test page</a> (in new tab)</p>
		<p><a href="http://www.braingia.org">Braingia.org</a></p>
	</div>
	<div data-role="footer">
		<h2>Footer content</h2>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\navbar.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
        href="jquery.mobile-1.1.1.css">
    <script type="text/javascript"
        src="jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript"
        src="jquery.mobile-1.1.1.js">
    </script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Navbar Page</h1>
		<div data-role="navbar">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
			</ul>
		</div>
	</div>
	<div data-role="content">
		<p>Content.  Yay!</p>
	</div>
	<div data-role="footer">
		<h2>Footer content</h2>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\pers-active.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
        href="jquery.mobile-1.1.1.css">
    <script type="text/javascript"
        src="jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript"
        src="jquery.mobile-1.1.1.js">
    </script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Persistent Footer</h1>
	</div>
	<div data-role="content">
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
	</div>
	<div data-role="footer" data-id="persistent" data-position="fixed">
		<div data-role="navbar">
			<ul>
	 			<li><a class="ui-btn-active ui-state-persist" data-icon="home" data-iconpos="top" href="#">Link 1</a></li>
				<li><a data-icon="star" data-iconpos="top" href="#">Link 2</a></li>
			</ul>
		</div>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\pers-full.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
        href="jquery.mobile-1.1.1.css">
    <script type="text/javascript"
        src="jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript"
        src="jquery.mobile-1.1.1.js">
    </script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Persistent Footer</h1>
	</div>
	<div data-role="content">
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
	</div>
	<div data-role="footer" data-id="persistent" data-position="fixed">
		<div data-role="navbar">
			<ul>
	 			<li><a data-icon="home" data-iconpos="top" href="#">Link 1</a></li>
				<li><a data-icon="star" data-iconpos="top" href="#">Link 2</a></li>
			</ul>
		</div>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\pers.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
        href="jquery.mobile-1.1.1.css">
    <script type="text/javascript"
        src="jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript"
        src="jquery.mobile-1.1.1.js">
    </script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Persistent Footer</h1>
	</div>
	<div data-role="content">
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
		<p>I love creating content.</p>
	</div>
	
	<!-- To do:  Add HTML here -->

</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\test-full.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" 
		href="jquery.mobile-1.1.1.css">
	<script type="text/javascript" 
		src="jquery-1.7.2.min.js">
	</script>
	<script type="text/javascript" 
		src="jquery.mobile-1.1.1.js">
	</script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Test Page</h1>
	</div>
	<div data-role="content">
		<p>This is some nice content.</p>
	</div>
	<div data-role="footer">
		<h2>Footer content</h2>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\test.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	
	<!-- TODO:  Add code here -->

</head>
<body>

<!-- TODO:  Add HTML here -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\themee.html
<!doctype html>
<html>
<head>
	<title>Test Page for jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" 
		href="jquery.mobile-1.1.1.css">
	<script type="text/javascript" 
		src="jquery-1.7.2.min.js">
	</script>
	<script type="text/javascript" 
		src="jquery.mobile-1.1.1.js">
	</script>
</head>
<body>
<div data-role="page">
	<div data-theme="e" data-role="header">
		<h1>Test Page</h1>
	</div>
	<div data-role="content">
		<p>This is some nice content.</p>
	</div>
	<div data-role="footer">
		<h2>Footer content</h2>
	</div>
</div>  <!-- end page div -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile: Demos and Documentation</title>
	<link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
	<script src="js/jquery.js"></script>
	<script src="docs/_assets/js/jqm-docs.js"></script>
	<script src="js/jquery.mobile-1.1.1.js"></script>
	
</head>
<body>
<div data-role="page" class="type-home">
	<div data-role="content">
		<p class="jqm-version"></p>


		<div class="content-secondary">

			<div id="jqm-homeheader">
				<h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1>
				<p>A Touch-Optimized UI Framework built with jQuery and HTML5.</p>
			</div>


			<p class="intro"><strong>Welcome.</strong> jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet and desktop devices. For jQuery 1.6.4 and 1.7.1.</p>

			<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
				<li data-role="list-divider">Overview</li>
				<li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li>
				<li><a href="docs/about/getting-started.html">Quick start guide</a></li>
				<li><a href="docs/about/features.html">Features</a></li>
				<li><a href="docs/about/accessibility.html">Accessibility</a></li>
				<li><a href="docs/about/platforms.html">Supported platforms</a></li>
			</ul>

		</div><!--/content-primary-->

		<div class="content-primary">
			<nav>


				<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
					<li data-role="list-divider">Components</li>
					<li><a href="docs/pages/index.html">Pages &amp; dialogs</a></li>
					<li><a href="docs/toolbars/index.html">Toolbars</a></li>
					<li><a href="docs/buttons/index.html">Buttons</a></li>
					<li><a href="docs/content/index.html">Content formatting</a></li>
					<li><a href="docs/forms/index.html">Form elements</a></li>
					<li><a href="docs/lists/index.html">List views</a></li>

					<li data-role="list-divider">API</li>
					<li><a href="docs/api/globalconfig.html">Configuring defaults</a></li>
					<li><a href="docs/api/events.html">Events</a></li>
					<li><a href="docs/api/methods.html">Methods &amp; Utilities</a></li>
					<li><a href="docs/api/data-attributes.html">Data attribute reference</a></li>
					<li><a href="docs/api/themes.html">Theme framework</a></li>


				</ul>
			</nav>
		</div>



	</div>

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile: Demos and Documentation</title>
	<link rel="stylesheet"  href="../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="_assets/css/jqm-docs.css"/>

	<script src="../js/jquery.js"></script>
	<script src="../docs/_assets/js/jqm-docs.js"></script>
	<script src="../js/jquery.mobile-1.1.1.js"></script>
	<!-- Need to get a proper redirect hooked up. Blech. -->
	<meta http-equiv="refresh" content="0;url=../index.html">
</head> 
<body> 
	<div data-role="page" class="type-index">

<div data-role="header" data-theme="f">
	<h1>jQuery Mobile Docs</h1>
	<a href="../index.html" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
</div>

<div data-role="content">   
	
<p>Nothing to see here folks.</p>
<a href="../index.html" data-role="button">View the documentation home page</a>

</div>

</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\nav.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Mobile Framework - Documentation</title>
	<link rel="stylesheet"  href="../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="_assets/css/jqm-docs.css"/>

	<script src="../js/jquery.js"></script>
	<script src="../docs/_assets/js/jqm-docs.js"></script>
	<script src="../js/jquery.mobile-1.1.1.js"></script>
	
</head> 
<body> 
	<div data-role="page" data-theme="a" class="nav-search">
		
	<div data-role="content">   

	<style>

		.nav-search .ui-content {
			margin-top:16px;
		}
		.nav-search .ui-corner-top {
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
			border-radius: 0;
		}
		.nav-search .ui-bar-a {
			background-image:none;
			background-color:#555;
		}
		.nav-search .ui-btn-up-a {
			background-image:none;
			background-color:#333333;
		}
		.nav-search .ui-btn-inner {
			border-top: 1px solid #888;
			border-color: rgba(255, 255, 255, .1);
		}
	</style>
	
	<script>
		$('body').delegate('.nav-search', 'pageshow', function( e ) {
			$('.ui-input-text').attr("autofocus", true)
		});			
	</script>
	
	<ul data-role="listview" data-theme="a" data-divider-theme="a" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search documentation...">
			<li data-filtertext="wai-aria voiceover accessibility screen reader">
				<a href="about/accessibility.html">Accessibility</a>
			</li>
			<li data-filtertext="accordions collapsible set collapsible-set collapsed">
				<a href="content/content-collapsible-set.html">Accordions</a>
			</li>
			<li data-filtertext="ajax navigation model hashchange changePage pushstate replacestate history popstate rel=external ajaxEnabled changepage basetag data-url sub-hash subpageidentifier target Application Cache ajaxPrefilter responseText isLocal subPageUrlKey silentscroll page parameters router backbone">
				<a href="pages/page-navmodel.html">Ajax navigation model</a>
			</li>
			<li data-filtertext="anatomy of page viewport meta tag disable enable zoom width=device-width, initial-scale=1 header content footer single multipage template boilerplate">
				<a href="pages/page-anatomy.html">Anatomy of a page</a>
			</li>
			<li data-filtertext="events api animationComplete transition css">
				<a href="api/events.html">Animation events</a>
			</li>
			<li data-filtertext="button link submit cancel image reset mini buttonmarkup enable disable">
				<a href="buttons/buttons-types.html">Buttons</a>
			</li>
			<li data-filtertext="button icon sprite png arrow delete plus minus check gear refresh forward back grid star alert info home search positioning iconpos top bottom left right notext custom disc white black">
				<a href="buttons/buttons-icons.html">Button icons</a>
			</li>
			<li data-filtertext="data-prefetch loadpage domCache data-dom-cache size clear cleanup pagehide lazyload spinner loader">
				<a href="pages/page-cache.html">Caching pages</a>
			</li>
			<li data-filtertext="input forms multi select checkbox checks grouped horizontal toggle legend">
				<a href="forms/checkboxes/">Checkbox</a>
			</li>
			<li data-filtertext="collapsible expandable content block spindown disclosure triangle tree nested">
				<a href="content/content-collapsible.html">Collapsible content</a>
			</li>		
			<li data-filtertext="data attribute guide api list help reference">
				<a href="api/data-attributes.html">Data attribute reference</a>
			</li>
			<li data-filtertext="page dialog modal overlay theme data-rel=dialog transition rel=back closeBtnText button history">
				<a href="pages/page-dialogs.html">Dialogs</a>
			</li>
			<li data-filtertext="forms constrain css disable disabling enable ui-disabled class style">
				<a href="forms/docs-forms.html">Disabling form elements</a>
			</li>
			<li data-filtertext="dynamically injecting pages changePage pagebeforechange preventDefault json query params scripting generate markup manual backbone api hash templating mvc">
				<a href="pages/page-dynamic.html">Dynamically injecting pages</a>
			</li>
			<li data-filtertext="events api document.ready pageinit touch tap taphold swipe swipeleft swiperight virtual mouse vmouseover vmousedown vmousemove vmouseup vclick vmousecancel orientationchange scrollstart scrollstop pageload pagebeforeload pageloadfailed pagebeforechange pagechange pagechangefailed pagebeforeshow change load transition pagebeforehide pageshow pagehide initialization pagebeforecreate pagecreate pageinit pageremove updatelayout animationcomplete transitions">
				<a href="api/events.html">Events API</a>
			</li>
			<li data-filtertext="input forms flip toggle switch on off select slider">
				<a href="forms/switch/">Flip switch</a>
			</li>
			<li data-filtertext="introduction help features overview">
				<a href="about/features.html">Features overview</a>
			</li>
			<li data-filtertext="toolbars fixed headers footers scroll tap to hide show toggle">
				<a href="toolbars/bars-fixed.html">Fixed toolbars</a>
			</li>
			<li data-filtertext="forms markup conventions introduction action label hide accessibly mini disabling fieldcontainer fieldset legend auto-initialization">
				<a href="forms/docs-forms.html">Forms intro</a>
			</li>
			<li data-filtertext="all forms elements gallery preview sample preview">
				<a href="forms/forms-all.html">Form element gallery</a>
			</li>
			<li data-filtertext="toolbars fixed headers footers scroll tap to hide show toggle">
				<a href="toolbars/bars-fullscreen.html">Fullscreen toolbars</a>
			</li>
			<li data-filtertext="toolbars fixed footers scroll tap to hide show toggle">
				<a href="toolbars/docs-footers.html">Footer toolbars</a>
			</li>
			<li data-filtertext="global optionss settings document.ready mobileinit ns namespace autoInitializePage subPageUrlKey activePageClass activeBtnClass ajaxEnabled linkBindingEnabled hashListeningEnabled pushStateEnabled defaultPageTransition touchOverflowEnabled defaultDialogTransition minScrollBack loadingMessage loadingMessageTheme pageLoadErrorMessage pageLoadErrorMessageTheme loadingMessageTextVisible gradeA ignoreContentEnabled">
				<a href="api/globalconfig.html">Global options (mobileinit)</a>
			</li>
			<li data-filtertext="grouped buttons toggle side">
				<a href="buttons/buttons-grouped.html">Grouped buttons</a>
			</li>
			<li data-filtertext="toolbars fixed headers scroll tap to hide show toggle heading">
				<a href="toolbars/docs-headers.html">Header toolbars</a>
			</li>
			<li data-filtertext="accessibility accessibly forms labels hide hiding">
				<a href="forms/docs-forms.html">Hiding elements accessibly</a>
			</li>
			<li data-filtertext="html default styles formatting semantics markup">
				<a href="content/content-html.html">HTML formatting</a>
			</li>
			<li data-filtertext="button inline smaller less wide narrow">
				<a href="buttons/buttons-inline.html">Inline buttons</a>
			</li>
			<li data-filtertext="listview link inset styled padding rounded">
				<a href="lists/lists-inset.html">Inset styled listviews</a>
			</li>
			<li data-filtertext="introduction jquery mobile help getting started">
				<a href="about/intro.html">Intro to jQuery Mobile</a>
			</li>
			<li data-filtertext="events api updatelayout hide show height scroll remove inject">
				<a href="api/events.html">Layout events</a>
			</li>
			<li data-filtertext="layout grid columns side-by-side flow positioning block float left right center">
				<a href="content/content-grids.html">Layout grids (columns)</a>
			</li>
			<li data-filtertext="link tel mailto target external rel ajax">
				<a href="pages/page-links.html">Links</a>
			</li>
			<li data-filtertext="listview link">
				<a href="lists/lists-ul.html">Linked list</a>
			</li>
			<li data-filtertext="listview link count bubble">
				<a href="lists/lists-count.html">Listview count bubble</a>
			</li>
			<li data-filtertext="listview link divider grouping read only header">
				<a href="lists/lists-divider.html">Listview dividers</a>
			</li>
			<li data-filtertext="listview link icon 16 pixel">
				<a href="lists/lists-icons.html">Listview icons</a>
			</li>
			<li data-filtertext="listview link markup overview conventions types">
				<a href="lists/index.html">Listview overview</a>
			</li>
			<li data-filtertext="listview link thumbnail images large square">
				<a href="lists/lists-thumbnails.html">Listview thumbnails</a>
			</li>
			<li data-filtertext="methods api mobile changePage loadPage jqmData jqmRemoveData showPageLoadingMsg hidePageLoadingMsg fixedToolbars.show fixedToolbars.hide path.parseUrl path.makePathAbsolute path.makeUrlAbsolute path.isSameDomain path.isRelativeUrl path.isAbsoluteUrl base silentScroll activePage jqmEnhanceable">
				<a href="api/methods.html">Methods API</a>
			</li>
			<li data-filtertext="forms smaller compact mini toolbars">
				<a href="forms/forms-all-mini.html">Mini form elements</a>
			</li>
			<li data-filtertext="forms native not styled role none">
				<a href="forms/forms-all-native.html">Native form elements</a>
			</li>
			<li data-filtertext="link navbar navigation tabs icons">
				<a href="toolbars/docs-navbar.html">Navbars</a>
			</li>
			<li data-filtertext="listview link nested ul ol drilldown">
				<a href="lists/lists-nested.html">Nested lists</a>
			</li>
			<li data-filtertext="numbered list link ol ordered numbered">
				<a href="lists/lists-ol.html">Numbered lists</a>
			</li>
			<li data-filtertext="events api orientationchange orientationChangeEnabled portrait landscape window.orientation">
				<a href="api/events.html">Orientation events</a>
			</li>
			<li data-filtertext="events api pagebeforechange pagechange pagechangefailed ajax nav">
				<a href="api/events.html">Page change events</a>
			</li>
			<li data-filtertext="events api pagebeforecreate pagecreate pageinit $(document).ready() ajax nav">
				<a href="api/events.html">Page initialization events</a>
			</li>
			<li data-filtertext="events api pagebeforeload pageload pageloadfailed ajax nav">
				<a href="api/events.html">Page load events</a>
			</li>
			<li data-filtertext="pages overview boilerplate getting started setup">
				<a href="pages/index.html">Pages overview</a>
			</li>
			<li data-filtertext="events api pageremove ajax nav">
				<a href="api/events.html">Page remove events</a>
			</li>
			<li data-filtertext="pages multipage template boilerplate anchor link">
				<a href="pages/multipage-template.html">Page template, multipage</a>
			</li>
			<li data-filtertext="pages single ajax nav template boilerplate anchor link">
				<a href="pages/page-template.html">Page template, single page</a>
			</li>
			<li data-filtertext="page title head">
				<a href="pages/page-titles.html">Page titles</a>
			</li>
			<li data-filtertext="events api pagebeforeshow pagebeforehide pageshow pagehide ajax nav">
				<a href="api/events.html">Page transition events</a>
			</li>
			<li data-filtertext="toolbars fixed persistent tab bar footer header">
				<a href="toolbars/footer-persist-a.html">Persistent toolbars</a>
			</li>
			<li data-filtertext="phonegap compile appstore export device api XSS mobileinit pushstate loadUrlTimeoutValue allowCrossDomainPages local file:// URL support.cors UIWebView native iOS">
				<a href="pages/phonegap.html">PhoneGap</a>
			</li>
			<li data-filtertext="navigation model ajax prefetch preload lazyload loader loadPage">
				<a href="pages/page-cache.html">Prefetching pages</a>
			</li>
			<li data-filtertext="pushstate ajax navigation model hashchange popstate">
				<a href="pages/page-navmodel.html">PushState</a>
			</li>
			<li data-filtertext="introduction help quick start guide ">
				<a href="about/getting-started.html">Quick start guide</a>
			</li>
			<li data-filtertext="input forms single select radio button grouped horizontal toggle legend">
				<a href="forms/radiobuttons/">Radio buttons</a>
			</li>
			<li data-filtertext="read only display not linked listviews">
				<a href="lists/lists-readonly.html">Read only listviews</a>
			</li>
			<li data-filtertext="refresh forms elements property change update programatically checked selectedindex value update widget input text slider switch select button checkbox radiobutton">
				<a href="forms/docs-forms.html">Refreshing form elements</a>
			</li>
			<li data-filtertext="scripting pages loading scripts executing scripts document.ready() api developer firing fire pagecreate pageinit changing pages loading enhancing create refresh scolling silentscroll binding to mouse touch events passing url parameters backbone router">
				<a href="pages/page-scripting.html">Scripting pages</a>
			</li>
			<li data-filtertext="events api scrollstart scrollstop flick">
				<a href="api/events.html">Scroll events</a>
			</li>
			<li data-filtertext="listview search filter autocomplete refine">
				<a href="lists/lists-search.html">Search filter</a>
			</li>
			<li data-filtertext="listview search filter hidden extra meta data">
				<a href="lists/lists-search-filtertext.html">Search filter hidden data</a>
			</li>
			<li data-filtertext="input forms single select option selected index placeholder fullscreen optgroup grouped horizontal custom menu">
				<a href="forms/selects/">Select menu</a>
			</li>
			<li data-filtertext="input forms range slider highlight step min max value">
				<a href="forms/slider/">Slider</a>
			</li>
			<li data-filtertext="link listview multiple button splitbutton secondary action">
				<a href="lists/lists-split.html">Split button list</a>
			</li>
			<li data-filtertext="forms submit method action post get ajax navigation">
				<a href="forms/forms-sample.html">Submitting forms</a>
			</li>
			<li data-filtertext="supported platforms device matrix compatibility ios android blackberry playbook wp7 bada webod palm symbian meego firefox chrome internet explorer ie chrome safari graded support">
				<a href="about/platforms.html">Supported Platforms</a>
			</li>
			<li data-filtertext="input forms text textarea password number email url tel time date month week datetime color">
				<a href="forms/textinputs/">Text inputs &amp; Textareas</a>
			</li>
			<li data-filtertext="theme themeroller swatch css styles bars blocks buttons forms">
				<a href="api/themes.html">Theming system overview</a>
			</li>
			<li data-filtertext="theme themeroller import export download css styles">
				<a href="api/themes.html">ThemeRoller</a>
			</li>
			<li data-filtertext="toolbars header footer bar fixed">
				<a href="toolbars/index.html">Toolbars</a>
			</li>
			<li data-filtertext="events api touch mouse vmouseover vmousedown vmousemove vmouseup vclick vmousecancel touchend target">
				<a href="api/events.html">Touch events</a>
			</li>
			<li data-filtertext="">
				<a href="pages/touchoverflow.html">TouchOverflow (deprecated)</a>
			</li>
			<li data-filtertext="animations page css keyframe transitions flip fade pop turn flow slide slideup slidedown none data-transition data-direction reverse defaultDialogTransition webkit moz o fallback 3d fallbackTransition max width custom transitionHandlers scroll position">
				<a href="pages/page-transitions.html">Transitions</a>
			</li>
			<li data-filtertext="events api touch tap taphold swipe swipeleft swipe left swiperight swipe right">
				<a href="api/events.html">Virtual mouse event API</a>
			</li>
		</ul>
	</div><!-- /content -->

</div><!-- /page -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\accessibility.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Accessibility</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Accessibility</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		
		<div class="content-primary">
			
			<h2>Accessibility</h2>
			<p>jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a> specification.</p> 
			
			<p>By utilizing these techniques, we do our best to ensure an accessible experience to users with disabilities such as blindness, who may use screen readers (like <em>VoiceOver</em>, on Apple's iPhone device) or other assistive technology to access the web.</p>
						
		</div>		
		
		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">
						<li data-role="list-divider">Overview</li>
						<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
						<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>				
						<li><a href="../../docs/about/features.html">Features</a></li>
						<li data-theme="a"><a href="../../docs/about/accessibility.html">Accessibility</a></li>
						<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>

					
					</ul>
			</div>
		</div>
				

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\features.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Features</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior"> 

	<div data-role="header" data-theme="f">
		<h1>Features</h1>	
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<div class="content-primary">
			
				<h2>Key features:</h2>
				<ul>
					<li><strong>Built on jQuery core</strong> for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.</li>
					<li><strong>Compatible with all major mobile, tablet, e-reader & desktop platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook and all modern browsers with graded levels of support.</li>
					<li><strong>Lightweight size</strong> and minimal image dependencies for speed.</li>
					<li><strong>Modular architecture</strong> for creating custom builds that are optimized to only include the features needed for a particular application.</li>
					<li><strong>HTML5 Markup-driven configuration</strong> of pages and behavior for fast development and minimal required scripting.</li>
					<li><strong>Progressive enhancement</strong> approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.</li>
					<li><strong>Responsive design</strong> techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens.</li>
					<li><strong>Powerful Ajax-powered navigation system</strong> to enable animated page transitions while maintaining back button, bookmarking and clean URLs through pushState.</li>
					<li><strong>Accessibility</strong> features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.</li>
					<li><strong>Touch and mouse event support</strong> streamline the process of supporting touch, mouse and cursor focus-based user input methods with a simple API. </li>
					<li><strong>Unified UI widgets</strong> for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.</li>
					<li><strong>Powerful theming framework</strong> and the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> application make highly-branded experiences easy to build.</li>

				</ul>

		</div>
		
		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">
						<li data-role="list-divider">Overview</li>
						<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
						<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>	
						<li data-theme="a"><a href="../../docs/about/features.html">Features</a></li>
						<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
						<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>				


	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\getting-started.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Quick start</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Quick start guide</h1>
		
		
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<div class="content-primary">
		
		<h2>Getting Started with jQuery Mobile</h2>

		<p>jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy, here's how:</p>
		
		<h2>Create a basic page template</h2>	
		<p>Pop open your favorite text editor, paste in the <a href="../pages/page-anatomy.html" id="" title="page-anatomy">page template</a> below, save and open in a browser. You are now a mobile developer!</p>
		<p>Here's what's in the template. In the <code>head</code>, a meta <code>viewport</code> tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. jQuery Mobile 1.1 works with both 1.6.4 and 1.7.1 versions of jQuery core. </p>
		<p>In the <code>body</code>, a div with a <code>data-role</code> of <code>page</code> is the wrapper used to delineate a page, and the header bar (<code>data-role="header"</code>) and content region (<code>data-role="content"</code>) are added inside to create a basic page (these are both optional). These <code>data-</code> attributes are HTML5  attributes are used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.</p> 

<pre><code>
&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
	&lt;head&gt; 
	&lt;title&gt;My Page&lt;/title&gt; 
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; 
	&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css&quot; /&gt;
	&lt;script src=&quot;http://code.jquery.com/jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt; 
&lt;body&gt; 

&lt;div <strong>data-role=&quot;page&quot;</strong>&gt;

	&lt;div <strong>data-role=&quot;header&quot;</strong>&gt;
		&lt;h1&gt;My Title&lt;/h1&gt;
	&lt;/div&gt;&lt;!-- /header --&gt;

	&lt;div <strong>data-role=&quot;content&quot;</strong>&gt;	
		&lt;p&gt;Hello world&lt;/p&gt;		
	&lt;/div&gt;&lt;!-- /content --&gt;

&lt;/div&gt;&lt;!-- /page --&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

		
		<h2>Add your content</h2>
		<p>Inside your content container, you can add any standard <a href="../content/content-html.html">HTML elements</a> - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the <code>head</code> after the jQuery Mobile stylesheet.</p> 
		
		<h2>Make a listview</h2>
		<p>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" id="" title="docs-lists">listviews</a> that are coded as lists with a <code>data-role="listview"</code> added. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filter with the <code>data-filter="true"</code> attributes.</p>

<pre><code>
&lt;ul <strong>data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-filter=&quot;true&quot</strong>&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Cadillac&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Ferrari&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</code></pre>
		<ul data-role="listview" data-inset="true" data-filter="true">
			<li><a href="#">Acura</a></li>
			<li><a href="#">Audi</a></li>
			<li><a href="#">BMW</a></li>
			<li><a href="#">Cadillac</a></li>
			<li><a href="#">Ferrari</a></li>
		</ul>



		
		<h2>Add a slider</h2>
		<p>The framework contains a full set of <a href="../forms/forms-all.html">form elements</a> that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no <code>data-role</code> needed. Be sure to wrap these in a <code>form</code> element and always properly associate a <code>label</code> to every form element.</p> 
		
<pre><code>
&lt;form&gt;
   &lt;label for=&quot;slider-0&quot;&gt;Input slider:&lt;/label&gt;
   &lt;input <strong>type=&quot;range&quot;</strong> name=&quot;slider&quot; id=&quot;slider-0&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot;  /&gt;
&lt;/form&gt;
</code></pre>
		
		<form>
			<label for="slider-0">Input slider:</label>
			<input type="range" name="slider-1" id="slider-0" value="25" min="0" max="100"  />
		</form>
		

		
		<h2>Make a button</h2>
		<p>There are a few ways to make <a href="../buttons/buttons-types.html" title="buttons-types">buttons</a>, but lets turn a link into a button so it's easy to click. Just start with a link and add a <code>data-role="button"</code> attribute to it.  You can add an <a href="../buttons/buttons-icons.html">icon</a> with the <code>data-icon</code> attribute and optionally set its position with the <code>data-iconpos</code> attribute.</p>

<pre><code>
&lt;a href=&quot;#&quot; <strong>data-role=&quot;button&quot; data-icon=&quot;star&quot;</strong>&gt;Star button&lt;/a&gt;
</code></pre>

		<a href="#" data-role="button" data-icon="star">Star button</a>


		
		<h2>Play with theme swatches</h2>
		<p>jQuery Mobile has a robust <a href="../api/themes.html" id="">theme framework</a> that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters in default theme from a-e to mix and match swatches. </p>
		<p>Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme (headers and footers don't inherit, they default to swatch "a").</p>
		
<code>&lt;a href=&quot;#&quot; data-role=&quot;button&quot; data-icon=&quot;star&quot; <strong>data-theme=&quot;a&quot;</strong>&gt;Button&lt;/a&gt;</code>
		
		<a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a>
		<a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a>
		<a href="#" data-role="button" data-icon="star" data-theme="c">data-theme="c"</a>
		<a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a>
		<a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a>
	
	<p>When you're ready to build a custom theme, use <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> to drag and drop, then download a custom theme.</p>
	
	<h2>Go forth and build stuff</h2>
	<p>This is just scratching the surface of all the cool things you can build with jQuery Mobile with little effort. Be sure to explore <a href="../pages/page-links.html" id="" title="page-links">linking pages</a>, <a href="../pages/page-transitions.html" id="" title="page-transitions">adding animated page transitions</a>, and <a href="../pages/page-dialogs.html" id="" title="page-dialogs">creating dialogs</a>. Use the <a href="../api/data-attributes.html" id="" title="data-attributes">data-attribute reference</a> to try out some of the other <code>data-</code> attributes you can play with. </p>
	
	<p><strong>More of a developer?</strong> Great, forget everything we just covered (kidding). If you don't want to use the <code>data-</code> attribute configuration system, you can take full control of everything and call plugins directly because these are all just standard jQuery plugins built with the UI widget factory. Be sure to dig into <a href="../api/globalconfig.html" id="" title="globalconfig">global configuration</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a>. Then read up on <a href="../pages/page-scripting.html" id="" title="page-scripting">scripting pages</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generating dynamic pages</a>, and <a href="../pages/phonegap.html" id="" title="phonegap">building PhoneGap apps</a>.</p>
		</div><!--/content-primary -->		
		
		<div class="content-secondary">
			
			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
				
					<h3>More in this section</h3>
					
					<ul data-role="listview"  data-theme="c" data-dividertheme="d">
						<li data-role="list-divider">Overview</li>
						<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
						<li data-theme="a"><a href="../../docs/about/getting-started.html">Quick start guide</a></li>				
						<li><a href="../../docs/about/features.html">Features</a></li>
						<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
						<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
					</ul>
			</div>
		</div>		

	</div><!-- /content -->
	
	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>	
	
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Mobile Framework - About</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body> 

	<div data-role="page" class="type-index">

<div data-role="header" data-theme="f">
	<h1>About jQuery Mobile</h1>
	<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div>

<div data-role="content">
	
	<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
		<li data-role="list-divider">Overview</li>
		<li><a href="intro.html">Intro to jQuery Mobile</a></li>
		<li><a href="getting-started.html">Quick start guide</a></li>	
		<li><a href="features.html">Features</a></li>
		<li><a href="accessibility.html">Accessibility</a></li>
		<li><a href="platforms.html">Supported platforms</a></li>
	</ul>

</div>

</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\intro.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Intro</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Introduction</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<div class="content-primary">
		
		<h2>jQuery Mobile Overview</h2>

		<p>jQuery’s mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a <a href="features.html">feature-rich</a> but lightweight codebase built on progressive enhancement with a flexible, <a href="../api/themes.html">theming system</a> and <a href="http://www.jquerymobile.com/themeroller" target="_new">ThemeRoller tool</a>. </p>
		<p>The framework includes an <a href="../pages/page-navmodel.html">Ajax navigation</a> system that brings animated page <a href="../pages/page-transitions.html">transitions</a> and a core set of UI widgets: <a href="../pages/page-anatomy.html">pages</a>, <a href="../pages/page-dialogs.html">dialogs</a>, <a href="../toolbars/docs-bars.html">toolbars</a>, <a href="../lists/docs-lists.html">listviews</a>, <a href="../buttons/buttons-types.html">buttons</a> with <a href="../buttons/buttons-icons.html">icons</a>, <a href="../forms/forms-all.html">form elements</a>, <a href="../content/content-collapsible-set.html">accordions</a>, <a href="../content/content-collapsible.html">collapsibles</a>, and more.</p>

		<p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we’re targeting</a> with jQuery Mobile so no browser or device is left behind. We've also focused on making jQuery Mobile <a href="getting-started.html">easy to learn</a> with a simple, <a href="../api/data-attributes.html">markup-based system</a> to applying behavior and theming. For more advanced developers, there is a rich API of <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a> to <a href="../pages/page-scripting.html" id="" title="page-scripting">apply scripting</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generate dynamic pages</a>, and even <a href="../pages/phonegap.html" id="" title="phonegap">build native apps</a> with tools like PhoneGap.</p>
		
		<p>To make this broad support possible, all pages in jQuery Mobile are built on a foundation of <strong>clean, semantic HTML</strong> to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies <strong>progressive enhancement techniques</strong> to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. <a href="accessibility.html">Accessibility features</a> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
			

		</div><!--/content-primary -->		
		
		<div class="content-secondary">
			
			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
				
					<h3>More in this section</h3>
					
					<ul data-role="listview"  data-theme="c" data-dividertheme="d">
						<li data-role="list-divider">Overview</li>
						<li data-theme="a"><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
						<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>	
						<li><a href="../../docs/about/features.html">Features</a></li>
						<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
						<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>

				
					</ul>
			</div>
		</div>		

	</div><!-- /content -->
	
	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>	
	
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\about\platforms.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Supported platforms</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Supported platforms</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<style>
			li { margin:9px 0; }
			</style>
		
			<div class="content-primary">
				<h2 id="platforms">jQuery Mobile Supported Platforms</h2>
				<p>jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.</p>

				<p>We use a 3-level graded platform support system: <strong>A</strong> (full), <strong>B</strong> (full minus Ajax), <strong>C</strong> (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that's the nature of the web.</p>
				
				<h3 style="display: block; font-size: 16px !important; font-weight: normal; background: #e6e6e6; border-left: 7px solid #74B64A; padding: 5px 0 5px 8px;"><strong> A-grade</strong> - Full enhanced experience with Ajax-based animated page transitions.</h3>
				<ul>
					<li><strong>Apple iOS 3.2-5.1</strong> - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)</li>
					<li><strong>Android 2.1-2.3</strong> - Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 &amp; 1.6 but performance may be sluggish, tested on Google G1 (1.5)</li>
					<li><strong>Android 3.1 (Honeycomb) </strong> - Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM</li>
					<li><strong>Android 4.0 (ICS) </strong> - Tested on a Galaxy Nexus. Note: transition performance can be poor on <em>upgraded</em> devices</li>
					<li><strong>Windows Phone 7-7.5</strong> - Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800</li>
					<li><strong>Blackberry 6.0</strong> - Tested on the Torch 9800 and Style 9670</li>
					<li><strong>Blackberry 7</strong> - Tested on BlackBerry® Torch 9810</li>
					<li><strong>Blackberry Playbook (1.0-2.0)</strong> - Tested on PlayBook</li>
					<li><strong>Palm WebOS (1.4-2.0)</strong> - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)</li>
					<li><strong>Palm WebOS 3.0 </strong> - Tested on HP TouchPad</li>
					<li><strong>Firefox Mobile (10 Beta)</strong> - Tested on Android 2.3 device</li>
					<li><strong>Chrome for Android (Beta)</strong> - Tested on Android 4.0 device</li>
					<li><strong>Skyfire 4.1</strong> - Tested on Android 2.3 device</li>
					<li><strong>Opera Mobile 11.5-12</strong>: Tested on Android 2.3</li>
					<li><strong>Meego 1.2</strong> - Tested on Nokia 950 and N9</li>
					<li><strong>Samsung bada 2.0</strong> - Tested on a Samsung Wave 3, Dolphin browser</li>
					<li><strong>UC Browser</strong> - Tested on Android 2.3 device</li>
					<li><strong>Kindle 3 and Fire </strong> - Tested on the built-in WebKit browser for each</li>
					<li><strong>Nook Color 1.4.1</strong> - Tested on original Nook Color, not Nook Tablet</li>
					<li><strong>Chrome <strong>Desktop </strong>11-19</strong> - Tested on OS X 10.7 and Windows 7</li>
					<li><strong>Safari <strong>Desktop </strong>4-5</strong> - Tested on OS X 10.7 and Windows 7</li>
					<li><strong>Firefox Desktop 4-13</strong> - Tested on OS X 10.7 and Windows 7</li>
					<li><strong>Internet Explorer 7-9</strong> - Tested on Windows XP, Vista and 7</li>
					<li><strong>Opera Desktop 10-12</strong> - Tested on OS X 10.7 and Windows 7</li>
				</ul>
				<h3 style="display: block; font-size: 16px !important; font-weight: normal; background: #e6e6e6; border-left: 7px solid #6699cc; padding: 5px 0 5px 8px;"><strong>B-grade</strong> - Enhanced experience except without Ajax navigation features.</h3>
				<ul>
					<li><strong>Blackberry 5.0</strong>: Tested on the Storm 2 9550, Bold 9770</li>
					<li><strong>Opera Mini (5.0-6.5)</strong> - Tested on iOS 3.2/4.3 and Android 2.3</li>
					<li><strong>Nokia Symbian^3 </strong>- Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)</li>
				</ul>
				<h3 style="display: block; font-size: 16px !important; font-weight: normal; background: #e6e6e6; border-left: 7px solid #FFCC33; padding: 5px 0 5px 8px;"><strong>C<strong>-grade</strong></strong> - Basic, non-enhanced HTML experience that is still functional</h3>
				<ul>
					<li><strong>Blackberry 4.x</strong> - Tested on the Curve 8330</li>
					<li><strong>Windows Mobile</strong> - Tested on the HTC Leo (WinMo 5.2)</li>
					<li><strong>All older smartphone platforms and featurephones</strong> - Any device that doesn't support media queries will receive the basic, C grade experience</li>
				</ul>

				
				</div>

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">
								<li data-role="list-divider">Overview</li>
								<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
								<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>	
								<li><a href="../../docs/about/features.html">Features</a></li>
								<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
								<li data-theme="a"><a href="../../docs/about/platforms.html">Supported platforms</a></li>

						
							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>				
			
	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\data-attributes.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Data Attribute Reference</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Data Attributes</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content" data-theme="c">

		<div class="content-primary">
			<h2>Data-attribute reference</h2>
			<p>The jQuery Mobile framework uses HTML5 <code>data-</code> attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use <code>data-</code> attributes, set a custom namespace by modifying the <a href="globalconfig.html"><code>ns</code> global option</a>.<p>

				<style>
					table { width:100%; border-bottom:1px solid #ccc; }
					th { text-align:left; width: 170px; }
					th, td { vertical-align:top; border-top:1px solid #ccc; padding: 6px 10px 4px 0; }
				</style>

			<h2><a href="../buttons/buttons-types.html">Button</a></h2>
			<p>Links with <code>data-role="button"</code>. Input-based buttons and button elements are auto-enhanced, no <code>data-role</code> required</p>
			<table>
				<tr>
					<th>data-corners</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-icon</th>
					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
				</tr>
				<tr>
					<th>data-iconpos</th>
					<td><strong>left</strong> | right | top | bottom |  notext</td>
				</tr>
				<tr>
					<th>data-iconshadow</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-inline</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version</td>
				</tr>
				<tr>
					<th>data-shadow</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
			</table>
			<p>Multiple buttons can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the buttons to sit side-by-side. Add the <code>data-mini="true"</code> to get the mini/compact sized version for all the buttons that appear in the controlgroup. </p>

			<h2><a href="../forms/checkboxes/">Checkbox</a></h2>
			<p>Pairs of labels and inputs with <code>type="checkbox"</code> are auto-enhanced, no <code>data-role</code> required</p>
			<table>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version</td>
				</tr>
				<tr>
					<th>data-role</th>
					<td>none (prevents auto-enhancement to use native control)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z) - Added to the form element</td>
				</tr>
			</table>
			<p>Multiple checkboxes can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the checkboxes to sit side-by-side. Add the <code>data-mini="true"</code> to get the mini/compact sized version for all the checkboxes that appear in the controlgroup. </p>

			<h2><a href="../content/content-collapsible.html">Collapsible</a></h2>
			<p>A heading and content wrapped in a container with the <code>data-role="collapsible"</code></p>
			<table>
				<tr>
					<th>data-collapsed</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-content-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
				<tr>
					<th>data-iconpos</th>
					<td><strong>left</strong> | right | top | bottom</td>
				</tr>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
			</table>

			<h2><a href="../content/content-collapsible-set.html">Collapsible set</a></h2>
			<p>A number of collapsibles wrapped in a container with the <code>data-role="collapsible-set"</code></p>
			<table>
				<tr>
					<th>data-content-theme</th>
					<td>swatch letter (a-z) - Sets all collapsibles in set</td>
				</tr>
				<tr>
					<th>data-iconpos</th>
					<td><strong>left</strong> | right | top | bottom |  notext</td>
				</tr>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z) - Sets all collapsibles in set</td>
				</tr>
			</table>

			<h2><a href="../pages/page-anatomy.html">Content</a></h2>
			<p>Container with <code>data-role="content"</code></p>
			<table>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
			</table>

			<h2><a href="../buttons/buttons-grouped.html">Controlgroup</a></h2>
			<p>DIV or FIELDSET container with <code>data-role="controlgroup"</code>. Visually integrate multiple button-styled inputs of a single type (<a href="../forms/checkboxes/">checkboxes</a>, <a href="../buttons/buttons-types.html">link-based buttons</a>, <a href="../forms/radiobuttons/">radio buttons</a>, <a href="../forms/selects/">selects</a>) into a group. For grouping form checkboxes and radio buttons, the <code>fieldset</code> container is recommended inside a div container with the <code>data-role="fieldcontain"</code>, to improve label styling.</p>
			<table>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version for all items in the controlgroup</td>
				</tr>
				<tr>
					<th>data-type</th>
					<td>horizontal | <strong>vertical</strong> - For horizontal or vertical item alignment</td>
				</tr>
			</table>

			<h2><a href="../pages/page-dialogs.html">Dialog</a></h2>
			<p>Container with <code>data-role="dialog"</code> or linked to with <code>data-rel="dialog"</code> on the anchor.</p>
			<table>
				<tr>
					<th>data-close-btn-text</th>
					<td>string (text for the close button, dialog only)</td>
				</tr>
				<tr>
					<th>data-dom-cache</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-overlay-theme</th>
					<td>swatch letter (a-z) - overlay theme when the page is opened in a dialog</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
				<tr>
					<th>data-title</th>
					<td>string (title used when page is shown)</td>
				</tr>
			</table>

			<h2><a href="globalconfig.html">Enhancement</a></h2>
			<p>Container with <code>data-enhance="false"</code> or <code>data-ajax="false"</code></p>
			<table>
				<tr>
					<th>data-enhance</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-ajax</th>
					<td><strong>true</strong> | false</td>
				</tr>
			</table>
			<p>Any DOM elements inside a <code>data-enhance="false"</code> container, save for <code>data-role="page|dialog"</code> elements, will be ignored during initial enhancement and subsequent <code>create</code> events provided that the <code>$.mobile.ignoreContentEnabled</code> flag is set prior to the enhancement (eg in a <code>mobileinit</code> binding).</p>

			<p>Any link or form elements inside <code>data-enhance="false"</code> containers will be ignored by the framework's navigation functionality when <code>$.mobile.ignoreContentEnabled</code> is set to true.</p>

			<h2><a href="../forms/docs-forms.html">Field container</a></h2>
			<p>Container with <code>data-role="fieldcontain"</code> wrapped around label/form element pair</p>

			<h2><a href="../toolbars/bars-fixed.html">Fixed Toolbar</a></h2>
			<p>Container with <code>data-role="header"</code> or <code>data-role="footer"</code> plus the attribute <code>data-position="fixed"</code></p>
			<table>
				<tr>
					<th>data-disable-page-zoom</th>
					<td><strong>true</strong> | false - User-scaling-ability for pages with fixed toolbars</td>
				</tr>
				<tr>
					<th>data-fullscreen</th>
					<td>true | <strong>false</strong> - Setting toolbars <strong>over</strong> the page-content</td>
				</tr>
				<tr>
					<th>data-tap-toggle</th>
					<td><strong>true</strong> | false - Ability to toggle toolbar-visibility on user tap/click</td>
				</tr>
				<tr>
					<th>data-transition</th>
					<td><strong>slide</strong> | fade | none - Show/hide-transition when a tap/click occurs</td>
				</tr>
				<tr>
					<th>data-update-page-padding</th>
					<td><strong>true</strong> | false - Have the page top/bottom padding updated on other events than when page is shown as well (resize, transition, "updatelayout")</td>
				</tr>
				<tr>
					<th>data-visible-on-page-show</th>
					<td><strong>true</strong> | false - Toolbar-visibility when parent page is shown</td>
				</tr>
			</table>

			<h2><a href="../forms/switch/">Flip toggle switch</a></h2>
			<p>Select with <code>data-role="slider"</code>, two options only</p>
			<table>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version</td>
				</tr>
				<tr>
					<th>data-role</th>
					<td>none (prevents auto-enhancement to use native control)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z) - Added to the form element</td>
				</tr>
				<tr>
					<th>data-track-theme</th>
					<td>swatch letter (a-z) - Added to the form element</td>
				</tr>
			</table>

			<h2><a href="../toolbars/docs-footers.html">Footer</a></h2>
			<p>Container with <code>data-role="footer"</code></p>
			<table>
				<tr>
					<th>data-id</th>
					<td>string (unique id, useful in persistent footers)</td>
				</tr>
				<tr>
					<th>data-position</th>
					<td>fixed</td>
				</tr>
				<tr>
					<th>data-fullscreen</th>
					<td>true (used in conjunction with fixed toolbars)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
			</table>

			<h2><a href="../toolbars/docs-headers.html">Header</a></h2>
			<p>Container with <code>data-role="header"</code></p>
			<table>
				<tr>
					<th>data-id</th>
					<td>string (unique id, useful in persistent headers)</td>
				</tr>
				<tr>
					<th>data-position</th>
					<td>fixed</td>
				</tr>
				<tr>
					<th>data-fullscreen</th>
					<td>true (used in conjunction with fixed toolbars)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
			</table>

			<h2><a href="../pages/page-links.html">Link</a></h2>
			<p>Links, including those with a <code>data-role="button"</code>, and form submit buttons share these attributes</p>
			<table>
				<tr>
					<th>data-ajax</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-direction</th>
					<td>reverse (reverse page transition animation)</td>
				</tr>
				<tr>
					<th>data-dom-cache</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-prefetch</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-rel</th>
					<td>back (to move one step back in history)<br />
						dialog (to open link styled as dialog, not tracked in history)<br />
						external (for linking to another domain)</td>
				</tr>
				<tr>
					<th>data-transition</th>
					<td><strong>fade</strong> | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none</td>
				</tr>
			</table>

			<h2><a href="../lists/docs-lists.html">Listview</a></h2>
			<p>OL or UL with <code>data-role="listview"</code></p>
			<table>
				<tr>
					<th>data-count-theme</th>
					<td>swatch letter (a-z) (default "c" if unset)</td>
				</tr>
				<tr>
					<th>data-divider-theme</th>
					<td>swatch letter (a-z) (default "b" if unset)</td>
				</tr>
				<tr>
					<th>data-filter</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-filter-placeholder</th>
					<td>string</td>
				</tr>
				<tr>
					<th>data-filter-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
				<tr>
					<th>data-header-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
				<tr>
					<th>data-inset</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-split-icon</th>
					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | <strong>arrow-r</strong> | arrow-l | minus | refresh | forward | back | alert | info | search</td>
				</tr>
				<tr>
					<th>data-split-theme</th>
					<td>swatch letter (a-z) (default "b" if unset)<td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
			</table>

			<h2><a href="../lists/docs-lists.html">Listview item</a></h2>
			<p>LI within a listview</p>
			<table>
				<tr>
					<th>data-filtertext</th>
					<td>string (filter by this value instead of inner text)</td>
				</tr>
				<tr>
					<th>data-icon</th>
					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false</td>
				</tr>
				<tr>
					<th>data-role</th>
					<td>list-divider</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z) - can also be set on individual LIs</td>
				</tr>
			</table>
			<p>The <code>data-icon</code> attribute is only applicable for a listview item, if it contains a link.</p>

			<h2><a href="../toolbars/docs-navbar.html">Navbar</a></h2>
			<p>A number of LIs wrapped in a container with <code>data-role="navbar"</code></p>
			<table>
				<tr>
					<th>data-iconpos</th>
					<td><strong>left</strong> | right | top | bottom |  notext</td>
				</tr>
			</table>
			<p>To add icons to the navbar items, the <code>data-icon</code> attribute is used, specifying a standard mobile icon for each item.</p>
			<p>Navbars inherit the theme-swatch from their parent container. Setting the <code>data-theme</code> attribute to a navbar is not supported. The <code>data-theme</code> attribute can be set individually to the links inside a navbar.</p>
			
			<h2><a href="../pages/page-anatomy.html">Page</a></h2>
			<p>Container with <code>data-role="page"</code></p>
			<table>
				<tr>
					<th>data-add-back-btn</th>
					<td>true | <strong>false</strong> (auto add back button, header only)</td>
				</tr>
				<tr>
					<th>data-back-btn-text</th>
					<td>string</td>
				</tr>
				<tr>
					<th>data-back-btn-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
				<tr>
					<th>data-close-btn-text</th>
					<td>string (text for the close button, dialog only)</td>
				</tr>
				<tr>
					<th>data-dom-cache</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-fullscreen</th>
					<td>true (used in conjunction with fixed toolbars) <p class="ui-bar-e">Deprecated in 1.1 - use on header and footer instead.</p></td>
				</tr>
				<tr>
					<th>data-overlay-theme</th>
					<td>swatch letter (a-z) - overlay theme when the page is opened in a dialog</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
				<tr>
					<th>data-title</th>
					<td>string (title used when page is shown)</td>
				</tr>
				<tr>
					<th>data-url</th>
					<td>url (value for updating the URL, instead of the url used to request the page)</td>
				</tr>
			</table>

			<h2><a href="../forms/radiobuttons/">Radio button</a></h2>
			<p>Pairs of labels and inputs with <code>type="radio"</code> are auto-enhanced, no <code>data-role</code> required</p>
			<table>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version</td>
				</tr>
				<tr>
					<th>data-role</th>
					<td>none (prevents auto-enhancement to use native control)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z) - Added to the form element</td>
				</tr>
			</table>
						<p>Multiple radion buttons can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the radio buttons to sit side-by-side. Add the <code>data-mini="true"</code> to get the mini/compact sized version for all the radio buttons that appear in the controlgroup. </p>

			<h2><a href="../forms/selects/">Select</a></h2>
			<p>All <code>select</code> form elements are auto-enhanced, no <code>data-role</code> required</p>
			<table>
				<tr>
					<th>data-icon</th>
					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
				</tr>
				<tr>
					<th>data-iconpos</th>
					<td><strong>left</strong> | right | top | bottom |  notext</td>
				</tr>
				<tr>
					<th>data-inline</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version</td>
				</tr>
				<tr>
					<th>data-native-menu</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-overlay-theme</th>
					<td>swatch letter (a-z) - overlay theme for non-native selects</td>
				</tr>
				<tr>
					<th>data-placeholder</th>
					<td>true | false - Add to the Option</td>
				</tr>
				<tr>
					<th>data-role</th>
					<td>none (prevents auto-enhancement to use native control)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z) - Added to the form element</td>
				</tr>
			</table>
			<p>Multiple selects can be wrapped in a fieldset with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the selects to sit side-by-side.</p>

			<h2><a href="../forms/slider/">Slider</a></h2>
			<p>Inputs with <code>type="range"</code> are auto-enhanced, no <code>data-role</code> required</p>
			<table>
				<tr>
					<th>data-highlight</th>
					<td>true | <strong>false</strong> - Adds an active state fill on track to handle</td>
				</tr>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version</td>
				</tr>
				<tr>
					<th>data-role</th>
					<td>none (prevents auto-enhancement to use native control)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z) - Added to the form element</td>
				</tr>
				<tr>
					<th>data-track-theme</th>
					<td>swatch letter (a-z) - Added to the form element</td>
				</tr>
			</table>

			<h2><a href="../forms/textinputs/">Text input &amp; Textarea</a></h2>
			<p>Input <code>type="text|number|search|etc."</code> or <code>textarea</code> elements are auto-enhanced, no <code>data-role</code> required</p>
			<table>
				<tr>
					<th>data-mini</th>
					<td>true | <strong>false</strong> - Compact sized version</td>
				</tr>
				<tr>
					<th>data-role</th>
					<td>none (prevents auto-enhancement to use native control)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z) - Added to the form element</td>
				</tr>
			</table>

		</div><!--/content -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview"  data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">API</li>
					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
					<li><a href="../../docs/api/events.html">Events</a></li>
					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
					<li data-theme="a"><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
					<li><a href="../../docs/api/themes.html">Theme framework</a></li>
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>

</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\events-nav.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Events</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>
	
</head>
<body>

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Events</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<h2>Framework, Page, and Navigation Events</h2>
		<p>jQuery Mobile's widget and navigation system has a full set of events at each stage of the page load and page change process that can be tapped into to take full control. This page will highlight the most commonly used events and what they do, and also provide chronologies of when these events are triggered during load and transitions.</p>
		
		
		<h3>Framework events</h3>
		
		<p>When jQuery Mobile initializes, it triggers an event on the <code>document</code> that is specifically designed for overriding framework and plugin defaults. That event is called <code>mobileinit</code>, and by binding to it, you can ensure that any global or plugin configuration options are overridden to any value you'd like before they are used by the framework's initial execution. </p>
		

			<pre>
				<code>
$(document).bind("mobileinit", function(){
  //apply overrides here
});
				</code>
			</pre>
		
		<p>The tricky aspect of mobileinit is that you need to bind to it before jQuery Mobile executes, so a typical mobileinit workflow would occur in a script that is referenced after jQuery itself, but before jQuery Mobile.</p>
		
		<p>It should be noted that while you can bind to other events from within a <code>mobileinit</code> callback, it is likely that you'll get undesirable results in doing so. This is because many events, such as the page events below, are intended for external developers to use <em>after</em> jQuery Mobile's plugins have loaded.</p>
		
		<h3>Page creation events</h3>
		
		<p>In a jQuery Mobile application, each  view is known as a page. Pages generally begin as a regular HTML element with a <code>data-role="page"</code> attribute, and the framework's page widget enhances that element into a jQuery Mobile page control. In the process of enhancing that page, the widget dispatches several events that allow you to access that page and its child elements at different stages of creation.</p>
		
			<p>These events are:</p>
		
		<dl>
				<dt>pagecreate</dt>
				
				<dd>This event is triggered on a page when it is first initialized by the page plugin. <code>pagecreate</code> is the most useful event for progressively enhancing a page's markup when it first loads, and because of this, many of jQuery Mobile's standard widgets bind to <code>pagecreate</code> to enhance markup within pages as well! If you bind to <code>pagecreate</code> in any script that is referenced after the jQuery Mobile framework, any native jQuery Mobile widgets in that page will be enhanced before your event callback executes. In other words, you'll be dealing with enhanced jQuery Mobile components.</dd>
				
				<dt>pagebeforecreate</dt>
				
				<dd>This event is triggered on a page element just before it is created by the page plugin. While the <code>pagecreate</code> event generally allows you to work with a page <strong>after</strong> its markup has been enhanced by jQuery Mobile, <code>pagebeforecreate</code> gives you access when the markup has not yet been enhanced. <code>pagebeforecreate</code> is useful for modifying markup before jQuery Mobile's widgets </dd>
				
				<dt>pageinit</dt>
				
				<dd><code>pageinit</code> is very similar to <code>pagecreate</code>, except that none of jQuery Mobile's standard widgets bind to it, and it is guaranteed to execute after all bound <code>pagecreate</code> callbacks have finished. If you need to bind to a page creation-time event via a script that is referenced before jQuery Mobile, binding to <code>pageinit</code> will ensure that you deal with enhanced page controls (whereas <code>pagecreate</code> will not, in that specific case.)</dd>
				
				
		</dl>
		
		
		<h3>Page navigation events</h3>
		<p>After pages are created, they are often shown and hidden one or many times throughout the use of a jQuery Mobile app. For A-grade browsers with Ajax navigation support, the jQM navigation model manages these page behaviors and dispatches useful events at different steps in the process of showing, hiding, and changing.</p>
		
		<h4>Page showing events</h4>
		<p>The page showing events (<code>pagebeforeshow</code> and <code>pageshow</code>) are guaranteed to fire every time a page is shown, whether you're opening a single page, or transitioning between two pages. The target of the event is the page that is being shown.</p>
		
		<dl> 
			
			<dt>pagebeforeshow</dt>
			<dd>An event triggered on a page before it is shown.</dd>
			
		
			<dt>pageshow</dt>
			<dd>An event triggered on the page after it is shown.</dd>
		</dl>	
		
		<h4>Page hiding events</h4>
		<p>The page hiding events (<code>pagebeforehide</code> and <code>pagehide</code>) only fire when transitioning between two pages, when an outgoing page is being hidden in favor of a new one. The target of the event is the page that is being shown.</p>
		<dl>	
			<dt>pagebeforehide</dt>
			<dd>An event triggered on a page before it is hidden.</dd>
			
			
			<dt>pagehide</dt>
			<dd>An event triggered on a page after it is hidden.</dd>
			
		<dl>
			
			
		<p>When a single page is being shown, and no page is hidden, only the	<code>pagebeforeshow</code> and <code>pageshow</code> events will fire, and in that order.</p>
		
		<p>During a transition between two pages, all 4 of the events above will fire, in this order:</p>
		<style>
		.nav-flow ol,  .nav-flow li { margin:0; list-style-type: none; text-align:center; line-height:150%; }
		.nav-flow h3 { margin:0; }
		.nav-flow em { color:#999; }
		</style>	
		
		<ol class="nav-flow">
			<li><h3>pagebeforehide</h3></li>
			<li>&darr;</li>
			<li><h3>pagebeforeshow</h3></li>
			<li>&darr;</li>
			<li><h3>pagehide</h3></li>
			<li>&darr;</li>
			<li><h3>pageshow</h3></li>
		</ol>
		
		
		
			
		
		<h3>Chronology</h3>
		
		
		
		
		<p>Here is an overview of the event chronology for a page change</p>
		
		
		
		
		<ol class="nav-flow">
			<li><h3>mobileinit</h3> <em>Set global options here</em></li>
			<li>&darr;</li>
			<li><h3>pagebeforechange</h3></li>
			<li><h3>pagebeforeload</h3></li>
			<li>&darr;</li>
			<li><em>Page loads via AJAX</em></li>
			<li>&darr;</li>
			<li><h3>pagebeforecreate</h3></li>
			<li><h3>pagecreate</h3></li>
			<li>&darr;</li>
			<li><em>Page enhancements run</em></li>
			<li>&darr;</li>
			<li><h3>pageinit</h3><em> Our document.ready</em></li>
			<li>&darr;</li>
			<li><h3>pageload</h3></li>
			<li><h3>pagebeforechange</h3></li>
			<li><h3>pagebeforehide</h3></li>
			<li><h3>pagebeforeshow</h3></li>
			<li>&darr;</li>
			<li><em>Page transition</em></li>
			<li>&darr;</li>
			<li><h3>pagehide</h3></li>
			<li><h3>pageshow</h3></li>
			<li><h3>pagechange</h3></li>
			<li>&darr;</li>
			<li><em>Complete</em></li>
		</ol>

		<p>You can bind to these events like you would with other jQuery events, using <code>live()</code> or <code>bind()</code>.</p>

			<div class="ui-body ui-body-e">
		<h4 style="margin:.5em 0">Important: Use <code>pageInit()</code>, not <code>$(document).ready()</code></h4>
		<p>The first thing you learn in jQuery is to call code inside the <code>$(document).ready()</code> function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the <code>pageinit</code> event. This event is explained in detail at the bottom of this page.</p></div>

      <p> &nbsp;</p>
		<div class="ui-body ui-body-e">
		<h4 style="margin:.5em 0">Important: <code>pageCreate()</code> vs <code>pageInit()</code></h4>
   <p> Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code>pagecreate</code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code>pagecreate</code> event in place of direct calls to the widget methods. As a result, users binding to the <code>pagecreate</code> from within <code>mobileinit</code> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code>pageinit</code> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects.</p>
</div>

		

		<h2>Page load events</h2>
        <p>Whenever an external page is loaded into the application DOM, 2 events are fired. The first is <code>pagebeforeload</code>. The 2nd event will be either <code>pageload</code> or <code>pageloadfailed</code>.</p>
		<dl>
			<dt><code>pagebeforeload</code></dt>
			<dd><p>Triggered before any load request is made. Callbacks bound to this event can call <code>preventDefault()</code> on the event to indicate that they are handling the load request. Callbacks that do this *MUST* make sure they call <code>resolve()</code> or <code>reject()</code> on the deferred object reference contained in the data object passed to the callback.</p>
			<p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
            <ul>
            	<li><code>url</code> (string)
<ul>
           	    <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
          	    </ul>
            	</li>
            	<li><code>absUrl</code> (string)
            	  <ul>
            	    <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
          	    </ul>
            	</li>
            	<li><code>dataUrl</code> (string)
            	  <ul>
            	    <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
          	    </ul>
            	</li>
            	<li><code>deferred</code> (object)
            	  <ul>
            	    <li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
                    <pre><code>
$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){

	// Let the framework know we're going to handle the load.

	event.preventDefault();

	// ... load the document then insert it into the DOM ...
	// at some point, either in this callback, or through
	// some other async means, call resolve, passing in
	// the following args, plus a jQuery collection object
	// containing the DOM element for the page.

	data.deferred.resolve( data.absUrl, data.options, page );

});</code></pre>
                    <p>or rejected like this:
                    <pre><code>
$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){

	// Let the framework know we're going to handle the load.

	event.preventDefault();

	// ... load the document then insert it into the DOM ...
	// at some point, if the load fails, either in this
	// callback, or through some other async means, call
	// reject like this:

	data.deferred.reject( data.absUrl, data.options );

});</code></pre>
                    </li>
          	    </ul>
            	</li>
            	<li><code>options</code> (object)
            	  <ul>
            	    <li>This object contains the options that were passed into $.mobile.loadPage().</li>
          	    </ul>
            	</li>
           	  </ul>
            </dd>
			<dt><code>pageload</code></dt>
			<dd>Triggered after the page is successfully loaded and inserted into the DOM. Callbacks bound to this event will be passed a data object as its 2nd arg. This object contains the following information:
            <ul>
            	<li><code>url</code> (string)
<ul>
           	    <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
          	    </ul>
            	</li>
            	<li><code>absUrl</code> (string)
            	  <ul>
            	    <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
          	    </ul>
            	</li>
            	<li><code>dataUrl</code> (string)
            	  <ul>
            	    <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
          	    </ul>
            	</li>
            	<li><code>options</code> (object)
            	  <ul>
            	    <li>This object contains the options that were passed into $.mobile.loadPage().</li>
          	    </ul>
            	</li>
            	<li><code>xhr</code> (object)
            	  <ul>
            	    <li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the 3rd argument to the framework's $.ajax() success callback.</li>
          	    </ul>
            	</li>
            	<li><code>textStatus</code> (null or string)
            	  <ul>
            	    <li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, this will be a string describing the status. This is what gets passed as the 2nd argument to the framework's $.ajax() error callback.</li>
          	    </ul>
            	</li>
           	  </ul>
            </dd>
			<dt><code>pageloadfailed</code></dt>
			<dd>Triggered if the page load request failed. By default, after dispatching this event, the framework will display a page failed message and call reject() on the deferred object contained within the event's data object. Callbacks can prevent this default behavior from executing by calling preventDefault() on the event.
			  <p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
              <ul>
            	<li><code>url</code> (string)
<ul>
           	    <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
          	    </ul>
            	</li>
            	<li><code>absUrl</code> (string)
            	  <ul>
            	    <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
          	    </ul>
            	</li>
            	<li><code>dataUrl</code> (string)
            	  <ul>
            	    <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
          	    </ul>
            	</li>
            	<li><code>deferred</code> (object)
            	  <ul>
            	    <li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
                    <pre><code>
$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){

	// Let the framework know we're going to handle things.

	event.preventDefault();

	// ... attempt to load some other page ...
	// at some point, either in this callback, or through
	// some other async means, call resolve, passing in
	// the following args, plus a jQuery collection object
	// containing the DOM element for the page.

	data.deferred.resolve( data.absUrl, data.options, page );

});</code></pre>
                    <p>or rejected like this:
                    <pre><code>
$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){

	// Let the framework know we're going to handle things.

	event.preventDefault();

	// ... attempt to load some other page ...
	// at some point, if the load fails, either in this
	// callback, or through some other async means, call
	// reject like this:

	data.deferred.reject( data.absUrl, data.options );

});</code></pre>
                    </li>
          	    </ul>
            	</li>
            	<li><code>options</code> (object)
            	  <ul>
            	    <li>This object contains the options that were passed into $.mobile.loadPage().</li>
          	    </ul>
            	</li>
            	<li><code>xhr</code> (object)
            	  <ul>
            	    <li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the first argument to the framework's $.ajax() error callback.</li>
          	    </ul>
            	</li>
            	<li><code>textStatus</code> (null or string)
            	  <ul>
            	    <li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, possible values for this property, aside from null, are &quot;timeout&quot;, &quot;error&quot;, &quot;abort&quot;, and &quot;parsererror&quot;. This is what gets passed as the 2nd argument to the framework's $.ajax() error callback.</li>
          	    </ul>
            	</li>
            	<li><code>errorThrown</code> (null, string, object)
            	  <ul>
            	    <li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, this property may be an exception object if one occured, or if an HTTP error occured this will be set to the textual portion of the HTTP status. This is what gets passed as the 3rd argument to the framework's $.ajax() error callback.</li>
          	    </ul>
            	</li>
           	  </ul>
			</dd>
		</dl>
		<h2>Page change events</h2>
		<p>Navigating between pages in the application is usually accomplished through a call to <code>$.mobile.changePage()</code>. This function is responsible for making sure that the page we are navigating to is loaded and inserted into the DOM, and then kicking off the transition animations between the current active page, and the page the caller wants to to make active. During this process, which is usually asynchronous, changePage() will fire off 2 events. The first is <code>pagebeforechange</code>. The second event depends on the success or failure of the change request. It will either be <code>pagechange</code> or <code>pagechangefailed</code>.</p>
		<dl>
			<dt><code>pagebeforechange</code></dt>
			<dd>This event is triggered prior to any page loading or transition. Callbacks can prevent execution of the changePage() function by calling preventDefault on the event object passed into the callback. The callback also receives a data object as its 2nd arg. The data object has the following properties:
            <ul>
				<li><code>toPage</code> (object or string)
					<ul>
						<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
					</ul>
				</li>
				<li><code>options</code> (object)
					<ul>
						<li>This object contains the configuration options to be used for the current changePage() call.</li>
					</ul>
				</li>
			</ul>
              <p>It should be noted that callbacks can modify both the <code>toPage</code> and <code>options</code> properties to alter the behavior of the current <code>changePage()</code> call. So for example, the <code>toPage</code> can be mapped to a different url from within a callback to do a sort of redirect.</p>
            </dd>
			<dt><code>pagechange</code></dt>
			<dd>This event is triggered after the <code>changePage()</code> request has finished loading the page into the DOM and all page transition animations have completed. Note that any pageshow or pagehide events will have fired *BEFORE* this event is triggered. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
            <ul>
				<li><code>toPage</code> (object or string)
					<ul>
						<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
					</ul>
				</li>
				<li><code>options</code> (object)
					<ul>
						<li>This object contains the configuration options to be used for the current changePage() call.</li>
					</ul>
				</li>
			</ul>
            </dd>
			<dt><code>pagechangefailed</code></dt>
			<dd>This event is triggered when the <code>changePage()</code> request fails to load the page. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
            <ul>
				<li><code>toPage</code> (object or string)
					<ul>
						<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
					</ul>
				</li>
				<li><code>options</code> (object)
					<ul>
						<li>This object contains the configuration options to be used for the current changePage() call.</li>
					</ul>
				</li>
			</ul>
            </dd>
            </dl>
		<h2>Page transition events</h2>
		<p>Page transitions are used to animate the change from the current active page (fromPage) to a new page (toPage). Events are triggered before and after these transitions so that observers can be notified whenever pages are shown or hidden. The events triggered are as follows:</p>
		<dl>
			<dt><code>pagebeforeshow</code></dt>
			<dd>Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off. Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it:
			<ul>
				<li><code>prevPage</code> (object)
					<ul>
						<li>A jQuery collection object that contains the page DOM element that we are transitioning away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
					</ul>
				</li>
			</ul>
            </dd>

			<dt><code>pagebeforehide</code></dt>
			<dd>Triggered on the "fromPage" we are transitioning away from, before the actual transition animation is kicked off. Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it:
			<ul>
				<li><code>nextPage</code> (object)
					<ul>
						<li>A jQuery collection object that contains the page DOM element that we are transitioning to.</li>
					</ul>
				</li>
			</ul>
			<p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
          </dd>

			<dt><code>pageshow</code></dt>
			<dd>Triggered on the "toPage" after the transition animation has completed. Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it:
			<ul>
				<li><code>prevPage</code> (object)
					<ul>
						<li>A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
					</ul>
				</li>
			</ul>
          </dd>

			<dt><code>pagehide</code></dt>
			<dd>Triggered on the "fromPage" after the transition animation has completed. Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it:
			<ul>
				<li><code>nextPage</code> (object)
					<ul>
						<li>A jQuery collection object that contains the page DOM element that we just transitioned to.</li>
					</ul>
				</li>
			</ul>
			<p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
          </dd>

		</dl>

		<p>You can access the <code>prevPage</code> or <code>nextPage</code> properties via the second argument of a bound callback function. For example: </p>
<pre><code>
$( 'div' ).live( 'pageshow',function(event, ui){
  alert( 'This page was just hidden: '+ ui.prevPage);
});

$( 'div' ).live( 'pagehide',function(event, ui){
  alert( 'This page was just shown: '+ ui.nextPage);
});
</code></pre>
		<p>Also, for these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes.  This can be done in the <code>mobileinit</code> handler, as described on the <a href="globalconfig.html">global config</a> page.
		<h2>Page initialization events</h2>

		<p>Internally, jQuery Mobile auto-initializes plugins based on the markup conventions found in a given "page". For example, an <code>input</code> element with a <code>type</code> of <code>range</code> will automatically generate a custom slider control.</p>

		<p>This auto-initialization is controlled by the "page" plugin, which dispatches events before and after it executes, allowing you to manipulate a page either pre-or-post initialization, or even provide your own intialization behavior and prevent the auto-initializations from occuring. Note that these events will only fire once per "page", as opposed to the show/hide events, which fire every time a page is shown and hidden.</p>

		<dl>
			<dt><code>pagebeforecreate</code></dt>
			<dd>
				<p>Triggered on the page being initialized, before most plugin auto-initialization occurs.</p>
<pre><code>
$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
  alert( 'This page was just inserted into the dom!' );
});
</code></pre>
				<p>Note that by binding to <code>pagebeforecreate</code>, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. For example, say you want to add data-attributes via JavaScript instead of in the HTML source, this is the event you'd use.</p>

<pre><code>
$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
  // manipulate this page before its widgets are auto-initialized
});
</code></pre>
			</dd>

			<dt><code>pagecreate</code></dt>
			<dd>
				<p>Triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. This event is most useful for user's wishing to create their own custom widgets for child markup enhancement as the jquery mobile widgets do.</p>
<pre><code>
$( '#aboutPage' ).live( 'pagecreate',function(event){
  ( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
});
</code></pre>
			</dd>

			<dt><code>pageinit</code></dt>
			<dd>
				<p>Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.</p>
<pre><code>
$( '#aboutPage' ).live( 'pageinit',function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});
</code></pre>
			</dd>
		</dl>



		<h2>Page remove events</h2>
		<p>By default, the framework removes any non active dynamically loaded external pages from the DOM as soon as the user navigates away to a different page. The <code>pageremove</code> event is dispatched just before the framework attempts to remove the a page from the DOM.</p>
		<dl>
			<dt><code>pageremove</code></dt>
			<dd>This event is triggered just before the framework attempts to remove an external page from the DOM. Event callbacks can call preventDefault on the event object to prevent the page from being removed.
			</dd>
		</dl>


    </div><!--/content-secondary -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview" data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">API</li>
					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
					<li data-theme="a"><a href="../../docs/api/events.html">Events</a></li>
					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
					<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
					<li><a href="../../docs/api/themes.html">Theme framework</a></li>

				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>

</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Events</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Events</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<p>jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. Note that these events employ various touch, mouse, and window events, depending on event existence, so you can bind to them for use in both handheld and desktop environments. You can bind to these events like you would with other jQuery events, using <code>live()</code> or <code>bind()</code>.</p>

			<div class="ui-body ui-body-e">
		<h4 style="margin:.5em 0">Important: Use <code>$(document).bind('pageinit')</code>, not <code>$(document).ready()</code></h4>
		<p>The first thing you learn in jQuery is to call code inside the <code>$(document).ready()</code> function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the <code>pageinit</code> event. This event is explained in detail at the bottom of this page.</p></div>

      <p> &nbsp;</p>
		<div class="ui-body ui-body-e">
		<h4 style="margin:.5em 0">Important: <code>$(document).bind('pagecreate')</code> vs <code>$(document).bind('pageinit')</code></h4>
   <p> Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code>pagecreate</code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code>pagecreate</code> event in place of direct calls to the widget methods. As a result, users binding to the <code>pagecreate</code> in <code>mobileinit</code> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code>pageinit</code> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects.

		In short, if you were previously using <code>pagecreate</code> to manipulate the enhanced markup before the page was shown, it's very likely you'll want to migrate to 'pageinit'.
		</p></div>

		<h2>Touch events</h2>
		<dl>
			<dt><code>tap</code></dt>
			<dd><p>Triggers after a quick, complete touch event.</p>
			</dd>

			<dt><code>taphold</code></dt>
			<dd><p>Triggers after a held complete touch event (close to one second).</p>
			<ul>
				<li><code>$.event.special.tap.tapholdThreshold</code> (default: 750ms) – This value dictates how long the user must hold their tap before the taphold event is fired on the target element.</li>
			</ul>
			</dd>

			<dt><code>swipe</code></dt>
			<dd><p>Triggers when a horizontal drag of 30px or more (and less than 75px vertically) occurs within 1 second duration but these can be configured:</p>
			  <ul>
			  	<li><code>$.event.special.swipe.scrollSupressionThreshold</code> (default: 10px) – More than this horizontal displacement, and we will suppress scrolling.</li>
			  	<li><code>$.event.special.swipe.durationThreshold</code> (default: 1000ms) – More time than this, and it isn’t a swipe.</li>
			  	<li><code>$.event.special.swipe.horizontalDistanceThreshold</code> (default: 30px) – Swipe horizontal displacement must be more than this.</li>
			  	<li><code>$.event.special.swipe.verticalDistanceThreshold</code> (default: 75px) – Swipe vertical displacement must be less than this.</li>
			  	</ul>
			</dd>

			<dt><code>swipeleft</code></dt>
			<dd>Triggers when a swipe event occurred moving in the left direction.</dd>

			<dt><code>swiperight</code></dt>
			<dd>Triggers when a swipe event occurred moving in the right direction.</dd>
			</dl>

			<h2>Virtual mouse events</h2>
			<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
			<dl>
				<dt><code>vmouseover</code></dt>
				<dd>Normalized event for handling touch or <code>mouseover</code> events</dd>

				<dt><code>vmouseout</code></dt>
				<dd>Normalized event for handling touch or <code>mouseout</code> events</dd>

				<dt><code>vmousedown</code></dt>
				<dd>Normalized event for handling touchstart or <code>mousedown</code> events</dd>

				<dt><code>vmousemove</code></dt>
				<dd>Normalized event for handling touchmove or <code>mousemove</code> events</dd>

				<dt><code>vmouseup</code></dt>
				<dd>Normalized event for handling touchend or <code>mouseup</code> events</dd>

				<dt><code>vclick</code></dt>
				<dd>Normalized event for handling touchend or mouse <code>click</code> events. On touch devices, this event is dispatched *AFTER* vmouseup. </dd>

				<dt><code>vmousecancel</code></dt>
				<dd>Normalized event for handling touch or mouse <code>mousecancel</code> events</dd>
			</dl>

			<div class="ui-body ui-body-e">
				<h4 style="margin:.5em 0">Warning: Use vclick with caution</h4>
				<p> Use vclick with caution on touch devices. Webkit based browsers synthesize <code>mousedown</code>, <code>mouseup</code>, and <code>click</code> events roughly 300ms after the <code>touchend</code> event is dispatched. The target of the synthesized mouse events are calculated at the time they are dispatched and are based on the location of the touch events and, in some cases, the implementation specific heuristics which leads to different target calculations on different devices and even different OS versions for the same device. This means the target element within the original touch events could be different from the target element within the synthesized mouse events.</p>
	            <p>We recommend using <code>click</code> instead of <code>vclick</code> anytime the action being triggered has the possibility of changing the content underneath the point that was touched on screen. This includes page transitions and other behaviors such as collapse/expand that could result in the screen shifting or content being completely replaced.</p>
			</div>
			<p>&nbsp;</p>
			<div class="ui-body ui-body-e">
				<h4 style="margin:.5em 0">Canceling an elements default click behavior</h4>
				<p>Applications can call <code>preventDefault()</code> on a <code>vclick</code> event to cancel an element's default click behavior. On mouse based devices, calling <code>preventDefault()</code> on a <code>vclick</code> event equates to calling <code>preventDefault()</code> on the real <code>click</code> event during the bubble event phase. On touch based devices, it's a bit more complicated since the actual <code>click</code> event is dispatched about 300ms after the <code>vclick</code> event is dispatched. For touch devices, calling <code>preventDefault()</code> on a <code>vclick</code> event triggers some code in the vmouse plugin that attempts to catch the next <code>click</code> event that gets dispatched by the browser, during the capture event phase, and calls <code>preventDefault()</code> and <code>stopPropagation()</code> on it. As mentioned in the warning above, it is sometimes difficult to match up a touch event with its corresponding mouse event because the targets can differ. For this reason, the vmouse plugin also falls back to attempting to identify a corresponding <code>click</code> event by coordinates. There are still cases where both target and coordinate identification fail, which results in the <code>click</code> event being dispatched and either triggering the default action of the element, or in the case where content has been shifted or replaced, triggering a click on a different element. If this happens on a regular basis for a given element/control, we suggest you use <code>click</code> for triggering your action.</p>
			</div>

		<h2>Orientation change event</h2>
		<dl>
			<dt><code>orientationchange</code></dt>
			<dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, the callback function has one argument, the event object. The event object contains an <code>orientation</code> property equal to either "portrait" or "landscape". Note that we currently bind to the resize event when <code>orientationchange</code> is not natively supported, or when <code>$.mobile.orientationChangeEnabled</code> is set to false.</dd>
			<div class="ui-body ui-body-e">
				<h4>orientationchange timing</h4>

			<p>	The timing of the <code>orientationchange</code> with relation to the change of the client height and width is different between browsers, though the current implementation will give you the correct value for <code>event.orientation</code> derived from <code>window.orientation</code>. This means that if your bindings are dependent on the height and width values you may want to disable <code>orientationChange</code> all together with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.</p>
			</div>
		</dl>

		<h2>Scroll events</h2>
		<dl>
			<dt><code>scrollstart</code></dt>
			<dd>Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.</dd>
		</dl>
		<dl>
			<dt><code>scrollstop</code></dt>
			<dd>Triggers when a scroll finishes.</dd>
		</dl>

		<h2>Page load events</h2>
        <p>Whenever an external page is loaded into the application DOM, 2 events are fired. The first is <code>pagebeforeload</code>. The 2nd event will be either <code>pageload</code> or <code>pageloadfailed</code>.</p>
		<dl>
			<dt><code>pagebeforeload</code></dt>
			<dd><p>Triggered before any load request is made. Callbacks bound to this event can call <code>preventDefault()</code> on the event to indicate that they are handling the load request. Callbacks that do this *MUST* make sure they call <code>resolve()</code> or <code>reject()</code> on the deferred object reference contained in the data object passed to the callback.</p>
			<p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
            <ul>
            	<li><code>url</code> (string)
<ul>
           	    <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
          	    </ul>
            	</li>
            	<li><code>absUrl</code> (string)
            	  <ul>
            	    <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
          	    </ul>
            	</li>
            	<li><code>dataUrl</code> (string)
            	  <ul>
            	    <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
          	    </ul>
            	</li>
            	<li><code>deferred</code> (object)
            	  <ul>
            	    <li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
                    <pre><code>
$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){

	// Let the framework know we're going to handle the load.

	event.preventDefault();

	// ... load the document then insert it into the DOM ...
	// at some point, either in this callback, or through
	// some other async means, call resolve, passing in
	// the following args, plus a jQuery collection object
	// containing the DOM element for the page.

	data.deferred.resolve( data.absUrl, data.options, page );

});</code></pre>
                    <p>or rejected like this:
                    <pre><code>
$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){

	// Let the framework know we're going to handle the load.

	event.preventDefault();

	// ... load the document then insert it into the DOM ...
	// at some point, if the load fails, either in this
	// callback, or through some other async means, call
	// reject like this:

	data.deferred.reject( data.absUrl, data.options );

});</code></pre>
                    </li>
          	    </ul>
            	</li>
            	<li><code>options</code> (object)
            	  <ul>
            	    <li>This object contains the options that were passed into $.mobile.loadPage().</li>
          	    </ul>
            	</li>
           	  </ul>
            </dd>
			<dt><code>pageload</code></dt>
			<dd>Triggered after the page is successfully loaded and inserted into the DOM. Callbacks bound to this event will be passed a data object as its 2nd arg. This object contains the following information:
            <ul>
            	<li><code>url</code> (string)
<ul>
           	    <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
          	    </ul>
            	</li>
            	<li><code>absUrl</code> (string)
            	  <ul>
            	    <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
          	    </ul>
            	</li>
            	<li><code>dataUrl</code> (string)
            	  <ul>
            	    <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
          	    </ul>
            	</li>
            	<li><code>options</code> (object)
            	  <ul>
            	    <li>This object contains the options that were passed into $.mobile.loadPage().</li>
          	    </ul>
            	</li>
            	<li><code>xhr</code> (object)
            	  <ul>
            	    <li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the 3rd argument to the framework's $.ajax() success callback.</li>
          	    </ul>
            	</li>
            	<li><code>textStatus</code> (null or string)
            	  <ul>
            	    <li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, this will be a string describing the status. This is what gets passed as the 2nd argument to the framework's $.ajax() error callback.</li>
          	    </ul>
            	</li>
           	  </ul>
            </dd>
			<dt><code>pageloadfailed</code></dt>
			<dd>Triggered if the page load request failed. By default, after dispatching this event, the framework will display a page failed message and call reject() on the deferred object contained within the event's data object. Callbacks can prevent this default behavior from executing by calling preventDefault() on the event.
			  <p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
              <ul>
            	<li><code>url</code> (string)
<ul>
           	    <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
          	    </ul>
            	</li>
            	<li><code>absUrl</code> (string)
            	  <ul>
            	    <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
          	    </ul>
            	</li>
            	<li><code>dataUrl</code> (string)
            	  <ul>
            	    <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
          	    </ul>
            	</li>
            	<li><code>deferred</code> (object)
            	  <ul>
            	    <li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
                    <pre><code>
$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){

	// Let the framework know we're going to handle things.

	event.preventDefault();

	// ... attempt to load some other page ...
	// at some point, either in this callback, or through
	// some other async means, call resolve, passing in
	// the following args, plus a jQuery collection object
	// containing the DOM element for the page.

	data.deferred.resolve( data.absUrl, data.options, page );

});</code></pre>
                    <p>or rejected like this:
                    <pre><code>
$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){

	// Let the framework know we're going to handle things.

	event.preventDefault();

	// ... attempt to load some other page ...
	// at some point, if the load fails, either in this
	// callback, or through some other async means, call
	// reject like this:

	data.deferred.reject( data.absUrl, data.options );

});</code></pre>
                    </li>
          	    </ul>
            	</li>
            	<li><code>options</code> (object)
            	  <ul>
            	    <li>This object contains the options that were passed into $.mobile.loadPage().</li>
          	    </ul>
            	</li>
            	<li><code>xhr</code> (object)
            	  <ul>
            	    <li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the first argument to the framework's $.ajax() error callback.</li>
          	    </ul>
            	</li>
            	<li><code>textStatus</code> (null or string)
            	  <ul>
            	    <li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, possible values for this property, aside from null, are &quot;timeout&quot;, &quot;error&quot;, &quot;abort&quot;, and &quot;parsererror&quot;. This is what gets passed as the 2nd argument to the framework's $.ajax() error callback.</li>
          	    </ul>
            	</li>
            	<li><code>errorThrown</code> (null, string, object)
            	  <ul>
            	    <li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, this property may be an exception object if one occurred, or if an HTTP error occurred this will be set to the textual portion of the HTTP status. This is what gets passed as the 3rd argument to the framework's $.ajax() error callback.</li>
          	    </ul>
            	</li>
           	  </ul>
			</dd>
		</dl>
		<h2>Page change events</h2>
		<p>Navigating between pages in the application is usually accomplished through a call to <code>$.mobile.changePage()</code>. This function is responsible for making sure that the page we are navigating to is loaded and inserted into the DOM, and then kicking off the transition animations between the current active page, and the page the caller wants to make active. During this process, which is usually asynchronous, changePage() will fire off 2 events. The first is <code>pagebeforechange</code>. The second event depends on the success or failure of the change request. It will either be <code>pagechange</code> or <code>pagechangefailed</code>.</p>
		<dl>
			<dt><code>pagebeforechange</code></dt>
			<dd>This event is triggered prior to any page loading or transition. Callbacks can prevent execution of the changePage() function by calling preventDefault on the event object passed into the callback. The callback also recieves a data object as its 2nd arg. The data object has the following properties:
            <ul>
				<li><code>toPage</code> (object or string)
					<ul>
						<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
					</ul>
				</li>
				<li><code>options</code> (object)
					<ul>
						<li>This object contains the configuration options to be used for the current changePage() call.</li>
					</ul>
				</li>
			</ul>
              <p>It should be noted that callbacks can modify both the <code>toPage</code> and <code>options</code> properties to alter the behavior of the current <code>changePage()</code> call. So for example, the <code>toPage</code> can be mapped to a different url from within a callback to do a sort of redirect.</p>
            </dd>
			<dt><code>pagechange</code></dt>
			<dd>This event is triggered after the <code>changePage()</code> request has finished loading the page into the DOM and all page transition animations have completed. Note that any pageshow or pagehide events will have fired *BEFORE* this event is triggered. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
            <ul>
				<li><code>toPage</code> (object or string)
					<ul>
						<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
					</ul>
				</li>
				<li><code>options</code> (object)
					<ul>
						<li>This object contains the configuration options to be used for the current changePage() call.</li>
					</ul>
				</li>
			</ul>
            </dd>
			<dt><code>pagechangefailed</code></dt>
			<dd>This event is triggered when the <code>changePage()</code> request fails to load the page. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
            <ul>
				<li><code>toPage</code> (object or string)
					<ul>
						<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
					</ul>
				</li>
				<li><code>options</code> (object)
					<ul>
						<li>This object contains the configuration options to be used for the current changePage() call.</li>
					</ul>
				</li>
			</ul>
            </dd>
            </dl>
		<h2>Page transition events</h2>
		<p>Page transitions are used to animate the change from the current active page (fromPage) to a new page (toPage). Events are triggered before and after these transitions so that observers can be notified whenever pages are shown or hidden. The events triggered are as follows:</p>
		<dl>
			<dt><code>pagebeforeshow</code></dt>
			<dd>Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off. Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it:
			<ul>
				<li><code>prevPage</code> (object)
					<ul>
						<li>A jQuery collection object that contains the page DOM element that we are transitioning away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
					</ul>
				</li>
			</ul>
            </dd>

			<dt><code>pagebeforehide</code></dt>
			<dd>Triggered on the "fromPage" we are transitioning away from, before the actual transition animation is kicked off. Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it:
			<ul>
				<li><code>nextPage</code> (object)
					<ul>
						<li>A jQuery collection object that contains the page DOM element that we are transitioning to.</li>
					</ul>
				</li>
			</ul>
			<p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
          </dd>

			<dt><code>pageshow</code></dt>
			<dd>Triggered on the "toPage" after the transition animation has completed. Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it:
			<ul>
				<li><code>prevPage</code> (object)
					<ul>
						<li>A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
					</ul>
				</li>
			</ul>
          </dd>

			<dt><code>pagehide</code></dt>
			<dd>Triggered on the "fromPage" after the transition animation has completed. Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it:
			<ul>
				<li><code>nextPage</code> (object)
					<ul>
						<li>A jQuery collection object that contains the page DOM element that we just transitioned to.</li>
					</ul>
				</li>
			</ul>
			<p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
          </dd>

		</dl>

		<p>You can access the <code>prevPage</code> or <code>nextPage</code> properties via the second argument of a bound callback function. For example: </p>
<pre><code>
$( 'div' ).live( 'pageshow',function(event, ui){
  alert( 'This page was just hidden: '+ ui.prevPage);
});

$( 'div' ).live( 'pagehide',function(event, ui){
  alert( 'This page was just shown: '+ ui.nextPage);
});
</code></pre>
		<p>Also, for these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes.  This can be done in the <code>mobileinit</code> handler, as described on the <a href="globalconfig.html">global config</a> page.
		<h2>Page initialization events</h2>

		<p>Internally, jQuery Mobile auto-initializes plugins based on the markup conventions found in a given "page". For example, an <code>input</code> element with a <code>type</code> of <code>range</code> will automatically generate a custom slider control.</p>

		<p>This auto-initialization is controlled by the "page" plugin, which dispatches events before and after it executes, allowing you to manipulate a page either pre-or-post initialization, or even provide your own initialization behavior and prevent the auto-initializations from occurring. Note that these events will only fire once per "page", as opposed to the show/hide events, which fire every time a page is shown and hidden.</p>

		<dl>
			<dt><code>pagebeforecreate</code></dt>
			<dd>
				<p>Triggered on the page being initialized, before most plugin auto-initialization occurs.</p>
<pre><code>
$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
  alert( 'This page was just inserted into the dom!' );
});
</code></pre>
				<p>Note that by binding to <code>pagebeforecreate</code>, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. For example, say you want to add data-attributes via JavaScript instead of in the HTML source, this is the event you'd use.</p>

<pre><code>
$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
  // manipulate this page before its widgets are auto-initialized
});
</code></pre>
			</dd>

			<dt><code>pagecreate</code></dt>
			<dd>
				<p>Triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. This event is most useful for user's wishing to create their own custom widgets for child markup enhancement as the jquery mobile widgets do.</p>
<pre><code>
$( '#aboutPage' ).live( 'pagecreate',function(event){
  ( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
});
</code></pre>
			</dd>

			<dt><code>pageinit</code></dt>
			<dd>
				<p>Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.</p>
<pre><code>
$( '#aboutPage' ).live( 'pageinit',function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});
</code></pre>
			</dd>
		</dl>



		<h2>Page remove events</h2>
		<p>By default, the framework removes any non active dynamically loaded external pages from the DOM as soon as the user navigates away to a different page. The <code>pageremove</code> event is dispatched just before the framework attempts to remove the a page from the DOM.</p>
		<dl>
			<dt><code>pageremove</code></dt>
			<dd>This event is triggered just before the framework attempts to remove an external page from the DOM. Event callbacks can call preventDefault on the event object to prevent the page from being removed.
			</dd>
		</dl>

		<h2>Layout events</h2>
		<p>Some components within the framework, such as collapsible and listview search, dynamically hide and show content based on user events. This hiding/showing of content affects the size of the page and may result in the browser adjusting/scrolling the viewport to accommodate the new page size. Since this has the potential to affect other components such as fixed headers and footers, components like collapsible and listview trigger a custom <code>updatelayout</code> event to notify other components that they may need to adjust their layouts in response to their content changes. Developers who are building dynamic applications that  inject, hide, or remove content from the page, or manipulate it in any way that affects the dimensions of the page, can also manually trigger this <code>updatelayout</code> event to ensure components on the page update in response to the changes.</p>
		<dl>
			<dt><code>updatelayout</code></dt>
			<dd>This event is triggered by components within the framework that dynamically show/hide content, and is meant as a generic mechanism to notify other components that they may need to update their size or position. Within the framework, this event is fired on the component element whose content was shown/hidden, and bubbles all the way up to the document element.
<pre><code>
$( '#foo' ).hide().trigger( 'updatelayout' );
</code></pre>
            </dd>
        </dl>

		<h2>Animation Events</h2>
		<p>jQuery Mobile exposes the <code>animationComplete</code> plugin, which you can utilize after adding or removing a class that applies a CSS transition. It can be used with page transition events. For example:</p>
<pre><code>
$(document).bind("pagehide", function(event, ui) {
  $(ui.nextPage).animationComplete(function() {
    alert('Animation completed');
  });
});
</pre></code>

    </div><!--/content-secondary -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview" data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">API</li>
					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
					<li data-theme="a"><a href="../../docs/api/events.html">Events</a></li>
					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
					<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
					<li><a href="../../docs/api/themes.html">Theme framework</a></li>

				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>

</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\globalconfig.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Configuring default settings</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Configuring Defaults</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content" data-theme="c">
		<div class="content-primary">

			<h2>Working with jQuery Mobile's Auto-initialization</h2>
			<p>Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before the <code>document.ready</code> event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.</p>

			<h3>The mobileinit event</h3>
			<p>When jQuery Mobile starts, it triggers a <code>mobileinit</code> event on the <code>document</code> object. To override default settings, bind to <code>mobileinit</code>.</p>

			<pre>
				<code>
$(document).bind("mobileinit", function(){
  //apply overrides here
});
				</code>
			</pre>

			<p>Because the <code>mobileinit</code> event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:</p>

			<pre>
				<code>
&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
<strong>&lt;script src=&quot;custom-scripting.js&quot;&gt;&lt;/script&gt;</strong>
&lt;script src=&quot;jquery-mobile.js&quot;&gt;&lt;/script&gt;
				</code>
			</pre>

			<p>You can override default settings by extending the <code>$.mobile</code> object using jQuery's <code>$.extend</code> method.</p>

			<pre>
				<code>
$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
    <strong>foo: bar</strong>
  });
});
				</code>
			</pre>

			<p>Alternatively, you can set them using object property notation.</p>
			<pre>
				<code>
$(document).bind("mobileinit", function(){
  <strong>$.mobile.foo = bar;</strong>
});
				</code>
			</pre>

		<p>To explore the effects of global configuration options, see the <a href="../config/index.html">config test pages</a>.</p>

		<h2>Configurable options</h2>
		<p>The following defaults are configurable via the <code>$.mobile</code> object:</p>

<dl>
	<dt><code>activeBtnClass</code> <em>string</em>, default: "ui-btn-active"</dt>
	<dd>The CSS class used for "active" button state.</dd>

	<dt><code>activePageClass</code> <em>string</em>, default: "ui-page-active"</dt>
	<dd>The CSS class used for the page currently in view or in a transition.</dd>

	<dt><code>ajaxEnabled</code> <em>boolean</em>, default: true</dt>
	<dd>jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, URL hash listening will be disabled as well, and URLs will load as ordinary HTTP requests.</dd>

	<dt><code>allowCrossDomainPages</code> <em>boolean</em>, default: false</dt>
	<dd>When jQuery Mobile attempts to load an external page, the request runs through <code>$.mobile.loadPage()</code>. This will only allow cross-domain requests if <code>$.mobile.allowCrossDomainPages</code> is set to true. Because the jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for a cross-site scripting (XSS) attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of its choice. This is the main reason that the default setting for $.mobile.allowCrossDomainPages is set to false. In PhoneGap apps that must "phone home" by loading assets off a remote server, both the <code>$.support.cors</code> AND <code>$.mobile.allowCrossDomainPages</code> must be set to true.</dd>

	<dt><code>autoInitializePage</code> <em>boolean</em>, default: true</dt>
	<dd>When the DOM is ready, the framework should automatically call <code>$.mobile.initializePage</code>. If false, the page will not initialize and will be visually hidden until <code>$.mobile.initializePage</code> is manually called.</dd>

	<dt><code>buttonMarkup.hoverDelay</code> <em>integer</em>, default: 200</dt>
	<dd>Set the delay for touch devices to add the hover and down classes on touch interactions for buttons throughout the framework. Reducing the delay here results in a more responsive feeling ui, but will often result in the downstate being applied during page scrolling.</dd>

	<dt><code>defaultDialogTransition</code> <em>string</em>, default: 'pop'</dt>
	<dd>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions.</dd>

	<dt><code>defaultPageTransition</code> <em>string</em>, default: 'fade'</dt>
	<dd>Set the default transition for page changes that use Ajax. Note: default changed from 'slide' to 'fade' in 1.1. Set to 'none' for no transitions.</dd>

	<dt><code>gradeA</code> <em>function that returns a boolean</em>, default: a function returning the value of $.support.mediaquery</dt>
	<dd>Any support conditions that must be met in order to proceed.</dd>

	<dt><code>hashListeningEnabled</code> <em>boolean</em>, default: true</dt>
	<dd>jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself or use simple deep-links within a document that scroll to a particular id.</dd>

	<dt><code>ignoreContentEnabled</code> <em>boolean</em>, default: false</dt>
	<dd><em>Warning:</em> Setting this property to true will cause performance degradation on enhancement. Once set, all automatic enhancements made by the framework to each enhanceable element of the user's markup will first check for a <code>data-enhance=false</code> parent node. If one is found the markup will be ignored. This setting and the accompanying data attribute provide a mechanism through which users can prevent enhancement over large sections of markup.</dd>

	<dt><code>linkBindingEnabled</code> <em>boolean</em>, default: true</dt>
	<dd>jQuery Mobile will automatically bind the clicks on anchor tags in your document. Setting this options to false will prevent all anchor click handling <em>including</em> the addition of active button state and alternate link bluring. This should only be used when attempting to delegate the click management to another library or custom code.</dd>

	<dt><code>loadingMessage</code> <em>string</em>, default: "loading"</dt>
	<dd>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</dd>

	<dt><code>loadingMessageTextVisible</code> <em>boolean</em>, default: false</dt>
	<dd>Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.</dd>

	<dt><code>loadingMessageTheme</code> <em>string</em>, default: "a"</dt>
	<dd>The theme that the loading message box uses when text is visible.</dd>

	<dt><code>minScrollBack</code> <em>integer</em>, default: 250</dt>
	<dd>Minimum scroll distance that will be remembered when returning to a page.</dd>

	<dt><code>ns</code> <em>string</em>, default: ""</dt>
	<dd>The namespace used in data- attributes (e.g., data-role). Can be set to any string, including a blank string which is the default. When using, it's clearest if you include a trailing dash, such as "mynamespace-" which maps to <code>data-mynamespace-foo="..."</code>.
		<p>If you use data- namespacing, you will need to update/override one selector in the theme CSS. The following data selectors should incorporate the namespace you're using:
		<pre><code>
.ui-mobile [data-<strong>mynamespace-</strong>role=page], .ui-mobile [data-<strong>mynamespace-</strong>role=dialog], .ui-page { ...
		</code></pre>
		</p>
	</dd>

	<dt><code>pageLoadErrorMessage</code> <em>string</em>, default: "Error Loading Page"</dt>
	<dd>Set the text that appears when a page fails to load through Ajax.</dd>

	<dt><code>pageLoadErrorMessageTheme</code> <em>string</em>, default: "e"</dt>
	<dd>Set the theme that the error message box uses.</dd>

	<dt><code>pushStateEnabled</code> <em>boolean</em>, default: true</dt>
	<dd>Enhancement to use <code>history.replaceState</code> in supported browsers, to convert the hash-based Ajax URL into the full document path. Note that we <a href="../pages/page-navmodel.html">recommend</a> disabling this feature if Ajax is disabled or if extensive use of external links are used.</dd>

	<dt><code>subPageUrlKey</code> <em>string</em>, default: "ui-page"</dt>
	<dd>The url parameter used for referencing widget-generated sub-pages (such as those generated by nested listviews). Translates to <em>example.html<strong>&ui-page=</strong>subpageIdentifier</em>. The hash segment before &ui-page= is used by the framework for making an Ajax request to the URL where the sub-page exists.</dd>

	<dt><code>touchOverflowEnabled</code> <em>boolean</em>, default: false</dt>
	<dd>
	Enable smoother page transitions and true fixed toolbars in devices that support both the <code>overflow:</code> and <code>overflow-scrolling: touch; </code> CSS properties.
	<p class="ui-bar-e">Deprecated in 1.1.0</p>
	</dd>

</dl>
	</div><!--/content-secondary -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview"  data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">API</li>
					<li data-theme="a"><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
					<li><a href="../../docs/api/events.html">Events</a></li>
					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
					<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
					<li><a href="../../docs/api/themes.html">Theme framework</a></li>
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>

</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Mobile Framework - API</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 
<div data-role="page" class="type-index">

<div data-role="header" data-theme="f">
	<h1>API</h1>
	<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div>

<div data-role="content">
	
		
		<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
			<li data-role="list-divider">API</li>
			<li><a href="globalconfig.html">Configuring defaults</a></li>
			<li><a href="events.html">Events</a></li>
			<li><a href="methods.html">Methods &amp; Utilities</a></li>
			<li><a href="data-attributes.html">Data attribute reference</a></li>
			<li><a href="themes.html">Theme framework</a></li>
		</ul>

</div>

</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\mediahelpers.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Responsive Layout Helpers</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Responsive Layout Helpers</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content" data-theme="c">
			
			<div class="content-primary">
			<h2>Media Query Helper Classes</h2>
<p class="ui-bar-e ui-body"><strong>Note: This feature was deprecated in beta, and removed in 1.0rc1. We recommend using CSS3 Media Queries instead.</strong> To support older versions of Internet Explorer, check out <a href="https://github.com/scottjehl/Respond">respond.js</a>, a fast &amp; lightweight polyfill for min/max-width CSS3 Media Queries.</p>
			<p class="ui-bar-e ui-body">If you still need this feature, you can find the code here: <a href="https://raw.github.com/jquery/jquery-mobile/38d7ad8848f00b0921bf4ae723f3ad199eb851c1/js/jquery.mobile.media.classes.js">jquery.mobile.media.classes.js</a></p>
			
			<p>jQuery Mobile adds classes to the <code>HTML</code> element that mimic browser orientation and common min/max-width CSS media queries. These classes are updated on load, resize and orientationchange, allowing you to key off these classes in your CSS, to create <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive layouts</a> - even in browsers that don't support media queries! </p>
			
			<h3>Orientation Classes </h3>

			<p>The HTML element will always have a class of either <code>"portrait"</code> or <code>"landscape"</code>, depending on the orientation of the browser or device. You can utilize these in your CSS like this:</p>
			<pre>
			<code>
.portrait {
	/* portrait orientation changes go here! */
}
.landscape {
	/* landscape orientation changes go here! */
}			
			</code>
			</pre>
			
			<h3>Min/Max Width Breakpoint Classes</h3>
			<p>By default, we create min and max breakpoint classes at the following widths: <code>320</code>,<code>480</code>,<code>768</code>,<code>1024</code>. These translate to classes that look like this: <code>"min-width-320px"</code>, <code>"max-width-480px"</code>, and are meant to be used as a replacement of (or in addition to) the media query equivalents they mimic.</p>
<pre>
			<code>
.myelement { 
	float: none;
}			
.min-width-480px .myelement {
	float: left;
}		
			</code>
</pre>		
			
			<p>Many plugins in jQuery Mobile leverage these width breakpoints. For example, form elements float beside their labels when the browser is wider than 480 pixels. The CSS to support this behavior for form text inputs looks like this:</p>
			
<pre>
			<code>
label.ui-input-text { 
	display: block; 
}
.min-width-480px label.ui-input-text { 
	display: inline-block; 
}
			</code>
</pre>		

			<h3>Adding Width Breakpoints</h3>
		<p>To utilize width breakpoints of your own, jQuery Mobile exposes the <code>$.mobile.addResolutionBreakpoints </code> function, which accepts either a single number or array of numbers that will be added to the min/max breakpoints whenever they apply.</p>
<pre>
			<code>
//add a min/max class for 1200 pixel widths			
$.mobile.addResolutionBreakpoints(1200);

//add min/max classes for 1200, and 1440 pixel widths			
$.mobile.addResolutionBreakpoints([1200, 1440]);
			</code>
</pre>	

<h3>Running Media Queries</h3>
<p>jQuery Mobile provides a function that allows you to test whether a particular CSS Media Query applies. Simple call <code>$.mobile.media()</code> and pass a media type or query. If the browser supports that type or query, and it currently applies, the function will return true. If not, it'll return false.</p>

<pre>
			<code>
//test for screen media type
$.mobile.media("screen");

//test  a min-width media query
$.mobile.media("screen and (min-width: 480px)");

//test for iOS retina display
$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");

			</code>
</pre>
					
	</div><!--/content-secondary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview"  data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">API</li>
					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
					<li><a href="../../docs/api/events.html">Events</a></li>
					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
					<li data-theme="a"><a href="../../docs/api/mediahelpers.html">Responsive Layout</a></li> 
					<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
					<li><a href="../../docs/api/themes.html">Theme framework</a></li>
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Methods</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Methods</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
	<div class="content-primary">

	  <p>jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.</p>


		<dl>
			<dt><code>$.mobile.changePage</code> (<em>method</em>)</dt>
			<dd>Programmatically change from one page to another. This method is used internally for the page loading and transitioning that occurs as a result of clicking a link or submitting a form, when those features are enabled.</dd>

			<dd>

				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>to</code> (<em>string or object</em>, required)
<ul>
				<li>String: Absolute or relative URL. (&quot;about/us.html&quot;)</li>
							<li>Object: jQuery collection object. (<code>$("#about")</code>)</li>
						</ul>
					</dd>

					<dd><code>options</code> (<em>object</em>, optional)
						<ul>
							<li>Properties:
								<ul>
									<li><code>allowSamePageTransition</code> (<em>boolean</em>,	default:	false) By default, changePage() ignores requests to change to the current active page. Setting this option to true, allows the request to execute. Developers should note that some of the page transitions assume that the fromPage and toPage of a changePage request are different, so they may not animate as expected. Developers are responsible for either providing a proper transition, or turning it off for this specific case.</li>
									<li><code>changeHash</code> (<em>boolean</em>,	default:	true) Decides if the hash in the location bar should be updated. </li>
									<li><code>data</code> (<em>object</em> or	string,	default: undefined) The data to send with an Ajax page request.
										<ul>
											<li>Used only when the 'to' argument of changePage() is a URL.</li>
										</ul>
								  </li>
									<li><code>dataUrl</code> (string,	default: undefined) The URL to use when updating the browser location upon changePage completion.
								  If not specified, the value of the data-url attribute of the page element is used.</li>
									<li><code>pageContainer</code> (jQuery collection,	default:	$.mobile.pageContainer) Specifies the element that should contain the page. </li>
									<li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.
										<ul>
											<li>Used only when the 'to' argument of changePage() is a URL.</li>
										</ul>
									</li>
								  <li><code>reverse</code> (<em>boolean</em>,	default:	false) Decides what direction the transition will run when showing the page. </li>
									<li><code>role</code> (<em>string</em>,	default:	undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
									<li><code>showLoadMsg</code> (<em>boolean</em>,	default:	true) Decides whether or not to show the loading message when loading external pages.</li>									
									<li><code>transition</code> (<em>string</em>,	default:	$.mobile.defaultPageTransition)	The transition to use when showing the page. </li>
									<li><code>type</code> (<em>string</em>, default: &quot;get&quot;) Specifies the method ("get" or "post") to use when making a page request.
										<ul>
											<li>Used only when the 'to' argument of changePage() is a URL.</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</dd>

				</dl>
			</dd>

			<dd>Examples:
			<pre>
			<code>
<strong>//transition to the "about us" page with a slideup transition</strong>
$.mobile.changePage( "about/us.html", { transition: "slideup"} );

<strong>//transition to the "search results" page, using data from a form with an id of "search"</strong>
$.mobile.changePage( "searchresults.php", {
	type: "post",
	data: $("form#search").serialize()
});

<strong>//transition to the "confirm" page with a "pop" transition without tracking it in history	</strong>
$.mobile.changePage( "../alerts/confirm.html", {
	transition: "pop",
	reverse: false,
	changeHash: false
});

			</code>
			</pre>

			</dd>


			<dt><code>$.mobile.loadPage</code> (<em>method</em>)</dt>
			<dd>Load an external page, enhance its content, and insert it into the DOM. This method is called internally by the changePage() function when its first argument is a URL. This function does not affect the current active page so it can be used to load pages in the background. The function returns a deferred promise object that gets resolved after the page has been enhanced and inserted into the document.</dd>

			<dd>

				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>url</code> (<em>string or object</em>, required) A relative or absolute URL.</dd>

					<dd><code>options</code> (<em>object</em>, optional)
						<ul>
							<li>Properties:
								<ul>
									<li><code>data</code> (<em>object</em> or	string,	default: undefined) The data to send with an Ajax page request. </li>
									<li><code>loadMsgDelay</code> (<em>number (in ms)</em>, default: 50) Forced delay before the loading message is shown. This is meant to allow time for a page that has already been visited to be fetched from cache without a loading message.</li>
									<li><code>pageContainer</code> (jQuery collection,	default:	$.mobile.pageContainer) Specifies the element that should contain the page after it is loaded. </li>
									<li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container. </li>
									<li><code>role</code> (<em>string</em>,	default:	undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
									<li><code>type</code> (<em>string</em>, default: &quot;get&quot;) Specifies the method ("get" or "post") to use when making a page request.
									</li>
								</ul>
							</li>
						</ul>
					</dd>

				</dl>
			</dd>

			<dd>Examples:
			<pre>
			<code>
<strong>//load the "about us" page into the DOM</strong>
$.mobile.loadPage( "about/us.html" );

<strong>//load a "search results" page, using data from a form with an id of "search"</strong>
$.mobile.loadPage( "searchresults.php", {
	type: "post",
	data: $("form#search").serialize()
});
			</code>
			</pre>

			</dd>

			<dt><code>$.fn.jqmData(), $.fn.jqmRemoveData()</code> (<em>method</em>)</dt>
			<dd>When working with jQuery Mobile, <code>jqmData</code> and <code>jqmRemoveData</code> should be used in place of jQuery core's <code>data</code> and <code>removeData</code> methods (note that this includes $.fn.data, $.fn.removeData, and the $.data, $.removeData, and $.hasData utilities), as they automatically incorporate getting and setting of namespaced data attributes (even if no namespace is currently in use).</dd>
			<dd>
				<dl>
					<dt><code>&#183;</code> Arguments:</dt>
					<dd>See jQuery's <a href="http://api.jquery.com/jQuery.data/">data</a> and <a href="http://api.jquery.com/jQuery.removeData/">removeData</a> methods</dd>
					<strong>Note: </strong>Calling jqmData() with no argument will return <code>undefined</code>. This behavior is subject to change in future versions.
					<dt><code>&#183;</code> Also:</dt>
					<dd>When finding elements by their jQuery Mobile data attribute, please use the custom selector <code>:jqmData()</code>, as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling <code>$("div[data-role='page']")</code>, you should use <code>$("div:jqmData(role='page')")</code>, which internally maps to <code>$("div[data-"+ $.mobile.ns +"role='page']")</code> without forcing you to concatenate a namespace into your selectors manually.</dd>
				</dl>
			</dd>


			<dt><code>$.fn.jqmEnhanceable()</code> (<em>method</em>)</dt>
			<dd>For users that wish to respect <code>data-enhance=false</code> parent elements during manual enhancement or custom plugin authoring jQuery Mobile provides the <code>$.fn.jqmEnhanceable</code> filter method.</dd>
			<dd>
				<dl>
					<dt><code>&#183;</code> Settings:</dt>
					<dd>If, and only if, <code>$.mobile.ignoreContentEnabled</code> is set to true, this method will traverse the parent nodes for each DOM element in the jQuery object and where it finds a <code>data-enhance=false</code> parent the child will be removed from the set.</dd>
					<dt><code>&#183;</code> Warning:</dt>
					<dd>The operation of traversing all parent elements can be expensive for even small jQuery object sets.</dd>
				</dl>
			</dd>

			<dt><code>$.fn.jqmHijackable()</code> (<em>method</em>)</dt>
			<dd>For users that wish to respect <code>data-ajax=false</code> parent elements during custom form and link binding jQuery Mobile provides the <code>$.fn.jqmHijackable</code> filter method.</dd>
			<dd>
				<dl>
					<dt><code>&#183;</code> Settings:</dt>
					<dd>If, and only if, <code>$.mobile.ignoreContentEnabled</code> is set to true, this method will traverse the parent nodes for each DOM element in the jQuery object and where it finds a <code>data-ajax=false</code> parent the child form or link will be removed from the set.</dd>
					<dt><code>&#183;</code> Warning:</dt>
					<dd>The operation of traversing all parent elements can be expensive for even small jQuery object sets.</dd>
				</dl>
			</dd>

			<dt><code>$.mobile.showPageLoadingMsg</code> (<em>method</em>)</dt>
			<dd>Show the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
			<dd>
				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>theme</code> (<em>string</em>, default: "a") The theme swatch for the message.</dd>
					<dd><code>msgText</code> (<em>string</em>, default: "loading") The text of the message.</dd>
					<dd><code>textonly</code> (<em>boolean</em>, default: false) If true, the "spinner" image will be hidden when the message is shown.</dd>
				</dl>
			</dd>
			<dd>Examples:
			<pre>
			<code>
<strong>//cue the page loader</strong>
$.mobile.showPageLoadingMsg();

<strong>//use theme swatch "b", a custom message, and no spinner</strong>
$.mobile.showPageLoadingMsg("b", "This is only a test", true);
			</code>
			</pre>

			</dd>




			<dt><code>$.mobile.hidePageLoadingMsg</code> (<em>method</em>)</dt>
			<dd>Hide the page loading message, which is configurable via $.mobile.loadingMessage.</dd>

			<dd>Example:
			<pre>
			<code>
<strong>//hide the page loader</strong>
$.mobile.hidePageLoadingMsg();
			</code>
			</pre>

			</dd>

			<dt><code>$.mobile.fixedToolbars.show</code> (<em>method</em>)</dt>
			<dd>Utility method for displaying the fixed header and/or footer of the current active page within the viewport. Note that fixed headers/footers are never really hidden. Toggling the show/hide state of a toolbar is really toggling whether or not they are inline within the page content, or displayed within the viewport as if they were fixed.</dd>
			<dd>
				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>immediately</code> (<em>boolean</em>, optional) If true, any fixed header or footer for the current active page is displayed immediately within the viewport. If false or unspecified, the fixed header/footer will fade-in after a 100 millisecond delay. Note that other events such as a document resize or scroll event can result in an additional delay before the start of the header/footer display animation.</dd>
				</dl>
			</dd>
			<dd>Example:
			<pre>
			<code>
<strong>// Show fixed header/footer with a fade animation.</strong>
$.mobile.fixedToolbars.show();

<strong>// Show fixed header/footer immediately.</strong>
$.mobile.fixedToolbars.show(true);
			</code>
			</pre>

			</dd>

			<dt><code>$.mobile.fixedToolbars.hide</code> (<em>method</em>)</dt>
			<dd>Utility method for hiding the fixed header and/or footer of the current active page.</dd>
			<dd>
				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>immediately</code> (<em>boolean</em>, optional) If true, any fixed header or footer for the current active page is immediately placed inline (back in flow) with the page content, which means it will scroll along with the content and will only be visible when viewing the top or bottom of the page within the viewport. If false or unspecified, the fixed header/footer will fade-out after a 100 millisecond delay. Note that other events such as a document resize or scroll event can result in the header/footer being immediately hidden.</dd>
				</dl>
			</dd>
			<dd>Example:
			<pre>
			<code>
<strong>// Hide fixed header/footer with a fade animation.</strong>
$.mobile.fixedToolbars.hide();

<strong>// Hide fixed header/footer immediately.</strong>
$.mobile.fixedToolbars.hide(true);
			</code>
			</pre>

			</dd>

			<dt><code>$.mobile.path.parseUrl</code> (<em>method</em>)</dt>
			<dd>Utility method for parsing a URL and its relative variants into an object that makes accessing the components of the URL easy. When parsing relative variants, the resulting object will contain empty string values for missing components (like protocol, host, etc). Also, when parsing URLs that have no authority, such as tel: urls, the pathname property of the object will contain the data after the protocol/scheme colon.</dd>

			<dd>

				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>

					<dt><code>&#183;</code> Return Value</dt>
					<dd>
						<p>This function returns an object that contains the various components of the URL as strings. The properties on the object mimic the browser's location object:</p>
						<dl>
							<dt><code>hash</code></dt>
							<dd>The fragment component of the URL, including the leading '#' character.</dd>
							<dt><code>host</code></dt>
							<dd>The host and port number of the URL.</dd>
							<dt><code>hostname</code></dt>
							<dd>The name of the host within the URL.</dd>
							<dt><code>href</code></dt>
							<dd>The original URL that was parsed.</dd>
							<dt><code>pathname</code></dt>
							<dd>The path of the file or directory referenced by the URL.</dd>
							<dt><code>port</code></dt>
							<dd>The port specified within the URL. Most URLs rely on the default port for the protocol used, so this may be an empty string most of the time.</dd>
							<dt><code>protocol</code></dt>
							<dd>The protocol for the URL including the trailing ':' character.</dd>
							<dt><code>search</code></dt>
							<dd>The query component of the URL including the leading '?' character.</dd>
						</dl>
						<p>But it also contains additional properties that provide access to additional components as well as some common forms of the URL developers access:</p>
						<dl>
							<dt><code>authority</code></dt>
							<dd>The username, password, and host components of the URL</dd>
							<dt><code>directory</code></dt>
							<dd>The directory component of the pathname, minus any filename.</dd>
							<dt><code>domain</code></dt>
							<dd>The protocol and authority components of the URL.</dd>
							<dt><code>filename</code></dt>
							<dd>The filename within the pathname component, minus the directory.</dd>
							<dt><code>hrefNoHash</code></dt>
							<dd>The original URL minus the fragment (hash) components.</dd>
							<dt><code>hrefNoSearch</code></dt>
							<dd>The original URL minus the query (search) and fragment (hash) components.</dd>
							<dt><code>password</code></dt>
							<dd>The password contained within the authority component.</dd>
							<dt><code>username</code></dt>
							<dd>The username contained within the authority component.</dd>
						</dl>
					</dd>

				</dl>
			</dd>

			<dd>Examples:
			<pre>
			<code>
<strong>// Parsing the Url below results an object that is returned with the
// following properties:
//
//  obj.href:         http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&amp;type=unread#msg-content
//  obj.hrefNoHash:   http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&amp;type=unread
//  obj.hrefNoSearch: http://jblas:password@mycompany.com:8080/mail/inbox
//  obj.domain:       http://jblas:password@mycompany.com:8080
//  obj.protocol:     http:
//  obj.authority:    jblas:password@mycompany.com:8080
//  obj.username:     jblas
//  obj.password:     password
//  obj.host:         mycompany.com:8080
//  obj.hostname:     mycompany.com
//  obj.port:         8080
//  obj.pathname:     /mail/inbox
//  obj.directory:    /mail/
//  obj.filename:     inbox
//  obj.search:       ?msg=1234&amp;type=unread
//  obj.hash:         #msg-content</strong>

var obj = $.mobile.path.parseUrl("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234");
			</code>
			</pre>

			</dd>


			<dt><code>$.mobile.path.makePathAbsolute</code> (<em>method</em>)</dt>
			<dd>Utility method for converting a relative file or directory path into an absolute path.</dd>
			<dd>
				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>relPath</code> (<em>string</em>, required) A relative file or directory path.</dd>
					<dd><code>absPath</code> (<em>string</em>, required) An absolute file or relative path to resolve against.</dd>

					<dt><code>&#183;</code> Return Value</dt>
					<dd>This function returns a string that is an absolute version of the relative path passed in.</dd>

				</dl>
			</dd>
			<dd>Examples:
			<pre>
			<code>
<strong>// Returns: /a/b/c/file.html</strong>
var absPath = $.mobile.path.makePathAbsolute("file.html", "/a/b/c/bar.html");

<strong>// Returns: /a/foo/file.html</strong>
var absPath = $.mobile.path.makePathAbsolute("../../foo/file.html", "/a/b/c/bar.html");

			</code>
			</pre>
			</dd>


			<dt><code>$.mobile.path.makeUrlAbsolute</code> (<em>method</em>)</dt>
			<dd>Utility method for converting a relative URL to an absolute URL.</dd>
			<dd>

				<dl>
					<dt>Arguments</dt>
					<dd><code>relUrl</code> (<em>string</em>, required) A relative URL.</dd>
					<dd><code>absUrl</code> (<em>string</em>, required) An absolute URL to resolve against.</dd>

					<dt>Return Value</dt>
					<dd>This function returns a string that is an absolute version of the relative URL passed in.</dd>

				</dl>
			</dd>
			<dd>Examples:
			<pre>
			<code>
<strong>// Returns: http://foo.com/a/b/c/file.html</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("file.html", "http://foo.com/a/b/c/test.html");

<strong>// Returns: http://foo.com/a/foo/file.html</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("../../foo/file.html", "http://foo.com/a/b/c/test.html");

<strong>// Returns: http://foo.com/bar/file.html</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("//foo.com/bar/file.html", "http://foo.com/a/b/c/test.html");

<strong>// Returns: http://foo.com/a/b/c/test.html?a=1&amp;b=2</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&amp;b=2", "http://foo.com/a/b/c/test.html");

<strong>// Returns: http://foo.com/a/b/c/test.html#bar</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("#bar", "http://foo.com/a/b/c/test.html");

			</code>
			</pre>

			</dd>


			<dt><code>$.mobile.path.isSameDomain</code> (<em>method</em>)</dt>
			<dd>Utility method for comparing the domain of 2 URLs.</dd>
			<dd>

				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>url1</code> (<em>string</em>, required) A relative URL.</dd>
					<dd><code>url2</code> (<em>string</em>, required) An absolute URL to resolve against.</dd>

					<dt>Return Value</dt>
					<dd>This function returns a boolean true if the domains match, false if they don't.</dd>

				</dl>
			</dd>
			<dd>Examples:
			<pre>
			<code>
<strong>// Returns: true</strong>
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");

<strong>// Returns: false</strong>
var same = $.mobile.path.isSameDomain("file://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");

<strong>// Returns: false</strong>
var same = $.mobile.path.isSameDomain("https://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");

<strong>// Returns: false</strong>
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://bar.com/a/b/c/test.html");

			</code>
			</pre>

			</dd>


			<dt><code>$.mobile.path.isRelativeUrl</code> (<em>method</em>)</dt>
			<dd>Utility method for determining if a URL is a relative variant.</dd>
			<dd>

				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>

					<dt><code>&#183;</code> Return Value</dt>
					<dd>This function returns a boolean true if the URL is relative, false if it is absolute.</dd>

				</dl>
			</dd>
			<dd>Examples:
			<pre>
			<code>
<strong>// Returns: false</strong>
var isRel = $.mobile.path.isRelativeUrl("http://foo.com/a/file.html");

<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("//foo.com/a/file.html");

<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("/a/file.html");

<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("file.html");

<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("?a=1&amp;b=2");

<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("#foo");


			</code>
			</pre>

			</dd>


			<dt><code>$.mobile.path.isAbsoluteUrl</code> (<em>method</em>)</dt>
			<dd>Utility method for determining if a URL is absolute.</dd>
			<dd>

				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>

					<dt><code>&#183;</code> Return Value</dt>
					<dd>This function returns a boolean true if the URL is absolute, false if not.</dd>

				</dl>
			</dd>
			<dd>Examples:
			<pre>
			<code>
<strong>// Returns: true</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("http://foo.com/a/file.html");

<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("//foo.com/a/file.html");

<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("/a/file.html");

<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("file.html");

<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("?a=1&amp;b=2");

<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("#foo");


			</code>
			</pre>

			</dd>

			<dt><code>$.mobile.path.get</code> (<em>method</em>)</dt>
			<dd>Utility method for determining the directory portion of an URL. If the URL has no trailing slash, the last component of the URL is considered to be a file.</dd>
			<dd>

				<dl>
					<dt><code>&#183;</code> Arguments</dt>
					<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>

					<dt><code>&#183;</code> Return Value</dt>
					<dd>This function returns the directory portion of a given URL.</dd>

				</dl>
			</dd>
			<dd>Examples:
			<pre>
			<code>
<strong>// Returns: http://foo.com/a/</strong>
var dirName = $.mobile.path.get("http://foo.com/a/file.html");

<strong>// Returns: http://foo.com/a/</strong>
var dirName = $.mobile.path.get("http://foo.com/a/");

<strong>// Returns: http://foo.com/a</strong>
var dirName = $.mobile.path.get("http://foo.com/a");

<strong>// Returns: //foo.com/a/</strong>
var dirName = $.mobile.path.get("//foo.com/a/file.html");

<strong>// Returns: /a/</strong>
var dirName = $.mobile.path.get("/a/file.html");

<strong>// Returns: ""</strong>
var dirName = $.mobile.path.get("file.html");

<strong>// Returns: /</strong>
var dirName = $.mobile.path.get("/file.html");

<strong>// Returns: ?a=1&amp;b=2</strong>
var dirName = $.mobile.path.get("?a=1&amp;b=2");

<strong>// Returns: foo</strong>
var dirName = $.mobile.path.isAbsoluteUrl("#foo");


			</code>
			</pre>

			</dd>

			<dt><code>$.mobile.base</code> (<em>methods, properties</em>)</dt>
			<dd>Utilities for working with generated base element. TODO: document as public API is finalized.</dd>



			<dt><code>$.mobile.silentScroll</code> (<em>method</em>)</dt>
			<dd>Scroll to a particular Y position without triggering scroll event listeners.</dd>
			<dd>
				<dl>
					<dt><code>&#183;</code> Arguments:</dt>
					<dd><code>yPos</code> (<em>number</em>, defaults to 0). Pass any number to scroll to that Y location.</dd>
				</dl>
			</dd>

			<dd>Examples:
			<pre>
			<code>
<strong>//scroll to Y 100px</strong>
$.mobile.silentScroll(100);
			</code>
			</pre>

			</dd>





			<dt><code>$.mobile.activePage</code> (<em>property</em>)</dt>
			<dd>Reference to the page currently in view.</dd>




		</dl>
	</div><!--/content-secondary -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview"  data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">API</li>
					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
					<li><a href="../../docs/api/events.html">Events</a></li>
					<li data-theme="a"><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
					<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
					<li><a href="../../docs/api/themes.html">Theme framework</a></li>
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>

</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\api\themes.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Static Containers, States</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Themes</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>

	<div data-role="content">
	
	<div class="content-primary">
		<h2>Theming overview</h2>
		
			<p>The theming system used in jQuery Mobile is similar to the ThemeRoller system in jQuery UI with a few important improvements:</p> 

			<ul> 
				<li>It takes advantage of <strong>CSS3 properties</strong> to add rounded corners, box and text shadow and gradients instead of images, allowing the theme file to be very lightweight and reducing server requests.</li>
				<li>Themes include multiple <strong>color "swatches"</strong> &mdash; each consisting of a header bar, content body, and button states that can be freely mixed and matched to create visual texture &mdash; to make richer designs possible.</li> 
				<li><strong>Open-ended theming</strong> allows for up to 26 unique swatches per theme, to add almost unlimited variety to designs.</li> 
				<li>All backgrounds now use <strong>CSS3 gradients</strong> to dramatically reduce file size and number of server requests.</li> 
				<li>There is a <strong>simplified icon set</strong> in a sprite to reduce image weight.</li> 
			</ul>
			
		<h2>ThemeRoller</h2>
		<a href="http://www.jquerymobile.com/themeroller" rel="external"><img src="../_assets/images/themroller-mobile-logo.png" width="250" style="float:right; margin-left:25px;" alt="Themroller Mobile Logo"></a>
		The easiest way to create custom themes is with the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller tool</a>. It allows you to build a theme, then download a custom CSS file, ready to be dropped into your project.

		<h2>jQuery Mobile default theming</h2>

		<p>If no theme swatch letter is set at all, the framework uses the <strong>a</strong> swatch for headers and footers and, for best contrast, the <strong>c</strong> swatch for the content of a page. All items in this containers inherit the swatch from its parents. One exception is the listdivider in listviews. This always defaults to the <strong>b</strong> (blue in the default theme). Also there is an swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. For more information about that, read <strong>Global "Active" state</strong> on this page.</p>

		<h2>Themes &amp; swatches</h2>
		
		<p>The theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects. </p>
		
		<p>Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font <code>text-shadow</code>. </p>
		
		<p>The default theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an accent swatch.  Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations. </p>
		
		<p>Most theme changes can be done using ThemeRoller, but it's also simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit.</p>
		
		
		<h3>Bars</h3>
		<p>The default theme contains the following five bar styles:</p>
		
		<div class="swatch-preview">
			<div class="ui-bar ui-bar-a">Bar A - <a href="#" data-role="none" class="ui-link">Link</a></div>
			<div class="ui-bar ui-bar-b">Bar B - <a href="#" data-role="none" class="ui-link">Link</a></div>
			<div class="ui-bar ui-bar-c">Bar C - <a href="#" data-role="none" class="ui-link">Link</a></div>
			<div class="ui-bar ui-bar-d">Bar D - <a href="#" data-role="none" class="ui-link">Link</a></div>
			<div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></div>
		</div><!-- end swatch-bars -->
		
		<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
		
		
		
		<h3>Content Blocks</h3>
		<p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme. </p>
		
		<div class="swatch-preview">	
			<div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
			<div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
			<div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
			<div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
			<div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
		</div><!-- end swatch-bars -->


		<p>If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a", as shown here:</p>
					
			<div data-role="header">
				<a href="#" data-icon="arrow-l">Back</a>
				<h1>Default Header</h1>
			</div>
			<div class="ui-body ui-body-c">
				<h3>Default Theme Content Header</h3>
				<p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
					<label for="slider1">Input slider:</label>
				 	<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" />
				     <fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
				     	<legend>Cache settings:</legend>
				         	<input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
				         	<label for="radio-choice-a1">On</label>
				         	<input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off"  />
				         	<label for="radio-choice-b1">Off</label>
				    </fieldset>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			<div class="ui-bar ui-bar-a">
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a>
				</div><!-- /controlgroup -->
			</div>


		<p>Learn more about <a href="../content/content-themes.html">content theming</a>.</p>
		

		<h2>Lists &amp; Buttons</h2>
		<p>Each swatch also includes default styles for interactive elements like list items and buttons.</p>
		<ul data-role="listview" data-inset="true" data-theme="a">
			<li><a href="index.html">List item</a></li>
			<li><a href="index.html">List item</a></li>
		</ul>
		
		<ul data-role="listview" data-inset="true" data-theme="b">
			<li><a href="index.html">List item</a></li>
			<li><a href="index.html">List item</a></li>
		</ul>
		
		<ul data-role="listview" data-inset="true" data-theme="c">
			<li><a href="index.html">List item</a></li>
			<li><a href="index.html">List item</a></li>
		</ul>
		
		<ul data-role="listview" data-inset="true" data-theme="d">
			<li><a href="index.html">List item</a></li>
			<li><a href="index.html">List item</a></li>
		</ul>
		
		<ul data-role="listview" data-inset="true" data-theme="e">
			<li><a href="index.html">List item</a></li>
			<li><a href="index.html">List item</a></li>
		</ul>
		
		
		<p>A button is included for each swatch in the theme. Each button has styles for normal, hover/focus and pressed states.</p>
		
		<div class="swatch-preview">
			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Button A</a>
			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Button B</a>
			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Button C</a>
			<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Button D</a>
			<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l">Button E</a>
		</div><!-- end swatch-bars -->
		
		
		<p>By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box. Thus, the button is visually integrated into the parent theme as shown here:</p>
		
		<div class="swatch-preview">
			<div data-role="header" data-theme="a"><h1>Bar A</h1><a href="index.html" data-icon="arrow-l">Button A</a></div>
			<div data-role="header" data-theme="b"><h1>Bar B</h1><a href="index.html" data-icon="arrow-l">Button B</a></div>
			<div data-role="header" data-theme="c"><h1>Bar C</h1><a href="index.html" data-icon="arrow-l">Button C</a></div>
			<div data-role="header" data-theme="d"><h1>Bar D</h1><a href="index.html" data-icon="arrow-l">Button D</a></div>
			<div data-role="header" data-theme="e"><h1>Bar E</h1><a href="index.html" data-icon="arrow-l">Button E</a></div>
		</div><!-- end swatch-bars -->
		
		<p>This default behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container.</p>
			
		<p>If you want to add visual emphasis to a button, an alternate swatch color can be set by adding a <code> data-theme="a"</code> to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.</p>
		
		<div class="swatch-bars">
			<div class="ui-bar ui-bar-a">
				Bar A
				<div><!-- wrapper div to have control over butttons -->
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">Button A</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">Button B</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">Button C</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">Button D</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">Button E</a>
				</div>
			</div>
			<div class="ui-bar ui-bar-b">
				Bar B
				<div><!-- wrapper div to have control over butttons -->
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">Button A</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">Button B</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">Button C</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">Button D</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">Button E</a>
				</div>
			</div>
			<div class="ui-bar ui-bar-c">
				Bar C
				<div><!-- wrapper div to have control over butttons -->
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">Button A</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">Button B</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">Button C</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">Button D</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">Button E</a>
				</div>
			</div>
			<div class="ui-bar ui-bar-d">
				Bar D
				<div><!-- wrapper div to have control over butttons -->
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">Button A</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">Button B</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">Button C</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">Button D</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">Button E</a>
				</div>
			</div>
			<div class="ui-bar ui-bar-e">
				Bar E
				<div><!-- wrapper div to have control over butttons -->
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">Button A</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">Button B</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">Button C</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">Button D</a>
					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">Button E</a>
				</div>
			</div>
			
		</div><!-- end swatch-bars -->

<p>Learn more about <a href="../lists/lists-themes.html">list theming</a> and <a href="../buttons/buttons-themes.html">button theming</a>.</p>

		<h3>Global "Active" state</h3>
		<p>The jQuery Mobile framework uses a swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the <code>ui-btn-active</code> style rules.</p>
		
		<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
	     	<legend>Active is used for the on state of these toggles:</legend>
	         	<input type="radio" name=" radio-choice-a" id="radio-choice-a" value="on" checked="checked" />
	         	<label for="radio-choice-a">On</label>
	         	<input type="radio" name=" radio-choice-a" id="radio-choice-b" value="off"  />
	         	<label for="radio-choice-b">Off</label>
	    </fieldset>

		
		<h3>Icons</h3>
		<p>There is a core set of <a href="../buttons/buttons-icons.html">standard icons</a> included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>

		<h3>Theme classes</h3>
		<p>Assigning color swatches through the <code> data-theme</code> attribute is one way to leverage the theme system, but it's also possible to apply any of the theme swatches directly to your markup through classes to apply the colors, textures and font formatting of your theme to any markup. This is especially useful when creating your own custom layout elements or UI widgets. Here are a few common theme classes, but many more are available in the theme stylesheet:</p>
		<dl>
			<dt><code>ui-bar-(a-z)</code></dt>
			<dd>Applies the toolbar theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-bar</code> structural class to add the standard bar padding styles.</dd>
			<dt><code>ui-body-(a-z)</code></dt>
			<dd>Applies the content body theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-body</code> structural class to add the standard content block padding styles. </dd>
			<dt><code>ui-btn-up-(a-z)</code></dt>
			<dd>Applies the button/clickable element theme styles for the selected swatch letter. Commonly used in with the <code>ui-btn-hover-(a-z)</code> and <code>ui-btn-down-(a-z)</code> interaction class states to provide visual feedback and <code>ui-btn-active</code> to indicate the selected or "on" state.</dd>
			<dt><code>ui-corner-all</code></dt>
			<dd>Applies the theme's global border-radius for rounded corners and is used for container or grouped items in the framework (inset lists, radiobutton sets). There are additional classes for all the possible combinations of rounded corners, for example: <code>ui-corner-tl</code> (top left only), <code>-top</code> (both top corners), <code>-left</code> (both left corners),  etc. A second full set of corner classes is provided for buttons so these can have a different corner radius. These use classes with a similar naming convention, but with "btn-corner" instead of "corner", like this: <code>.ui-<strong>btn-corner</strong>-all</code>.</dd>
			<dt><code>ui-shadow</code></dt>
			<dd>Applies the theme's global drop shadow to any element using CSS <code>box-shadow</code> property. </dd>
			<dt><code>ui-disabled</code></dt>
			<dd>Applies the disabled look and feel which essentially reduces the opacity of any element with this class to 30%, hides the cursor, and sets <code>pointer-events: none;</code> which prevents any interaction in many modern browsers.</dd>
		</dl>

			<h3>Overriding themes</h3>
			<p>The themes are meant as a solid starting point, but are meant to be customized. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of possible selectors to target style overrides against. We recommend adding an external stylesheet to the <code>head</code>, placed <strong>after</strong> the structure and theme stylesheet references, that contain all your style overrides. This allows you to easily update to newer versions of the library because overrides are kept separate from the library code.</p>
			
			
		<p><strong>Learn more</strong> about theming individual components:</p>
		<ul data-role="listview" data-inset="true">
			<li><a href="../pages/pages-themes.html">Page theming</a></li>
			<li><a href="../toolbars/bars-themes.html">Toolbar theming</a></li>
			<li><a href="../content/content-themes.html">Content theming</a></li>
			<li><a href="../buttons/buttons-themes.html">Button theming</a></li>
            <li><a href="../forms/forms-themes.html">Form theming</a></li>
            <li><a href="../lists/lists-themes.html">List theming</a></li>
		</ul>
	</div><!--/content-secondary -->		
	
	<div class="content-secondary ui-body-d">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
			
					<li data-role="list-divider">API</li>
					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
					<li><a href="../../docs/api/events.html">Events</a></li>
					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
					<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
					<li data-theme="a"><a href="../../docs/api/themes.html">Theme framework</a></li>
	
					</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\api-buttons.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Buttons</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Button API</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content" data-theme="c">
			
			<h2>Dependencies</h2>
			<p>To be documented</p>
			
			<h2>Options</h2>
			<p>To be documented</p>
			
			<h2>Methods</h2>
			<p>To be documented</p>
			
			<h2>Known Issues</h2>
			<p>To be documented</p>
			
			
		
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Button events</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Button basics</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Button basics</h2>		
		
      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
			<li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
			<li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
			<li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
			<li><a href="buttons-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
		</ul>	
			
			<p>Bind events directly to the <code>a</code>, <code>input</code>, or <code>button</code> element.  Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code> 
$( ".myButton" ).bind( "click", function(event, ui) {
  ...
});
</code></pre> 
			
			<p>The <strong>form button</strong> plugin has the following custom events:</p>

	<dl>
				
		<dt><code>create</code> triggered when a form button is created</dt>
		<dd>

			<pre><code>
$('[type="submit"]').button({
   create: function(event, ui) { ... }
});		
			</code></pre>
			</dd>
			
	</dl>
	    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">				
					<li data-role="list-divider">Buttons</li>
					<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
					<li><a href="buttons-icons.html">Button icons</a></li>
					<li><a href="buttons-inline.html">Inline buttons</a></li>
					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
					<li><a href="buttons-themes.html">Theming buttons</a></li>	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-grouped.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Grouped Buttons</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> 

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Grouped</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<h2>Grouped buttons</h2>
		<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
<pre><code>
&lt;div data-role=&quot;controlgroup&quot;&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Yes&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;No&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Maybe&lt;/a&gt;
&lt;/div&gt;
</code></pre>

		<p>By default, grouped buttons are presented as a vertical list:</p>
		
		<div data-role="controlgroup">
			<a href="index.html" data-role="button">Yes</a>
			<a href="index.html" data-role="button">No</a>
			<a href="index.html" data-role="button">Maybe</a>
		</div>
		
		<p>By adding the <code>data-type="horizontal"</code> attribute to the <code>controlgroup</code> container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)
		
		<p>Horizontal grouped buttons:</p>
		<div data-role="controlgroup" data-type="horizontal">
			<a href="index.html" data-role="button">Yes</a>
			<a href="index.html" data-role="button">No</a>
			<a href="index.html" data-role="button">Maybe</a>
		</div>
		
		<p>Mini horizontal grouped buttons by adding <code>data-mini="true"</code> to the controlgroup:</p>
		<div data-role="controlgroup" data-type="horizontal" data-mini="true">
			<a href="index.html" data-role="button">Yes</a>
			<a href="index.html" data-role="button">No</a>
			<a href="index.html" data-role="button">Maybe</a>
		</div>
			
		<p>Horizontal grouped buttons with icons:</p>
		<div data-role="controlgroup" data-type="horizontal" >
			<a href="index.html" data-role="button" data-icon="plus">Add</a>
			<a href="index.html" data-role="button" data-icon="delete">Delete</a>
		</div>
		
		<p>Mini horizontal grouped buttons with icons by adding <code>data-mini="true"</code> to the controlgroup::</p>
		<div data-role="controlgroup" data-type="horizontal" data-mini="true">
			<a href="index.html" data-role="button" data-icon="plus">Add</a>
			<a href="index.html" data-role="button" data-icon="delete">Delete</a>
		</div>
		
		<p>Horizontal grouped buttons, icon only:</p>
		<div data-role="controlgroup" data-type="horizontal" >
			<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
			<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
		</div>
		
		
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Buttons</li>
					<li><a href="buttons-types.html">Button basics</a></li>
					<li><a href="buttons-icons.html">Button icons</a></li>
					<li><a href="buttons-inline.html">Inline buttons</a></li>
					<li data-theme="a"><a href="buttons-grouped.html">Grouped buttons</a></li>
					<li><a href="buttons-themes.html">Theming buttons</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-icons.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Button icons</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Button icons</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<h2>Adding Icons to Buttons</h2>
		<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p> 
		
			
			<p>An icon can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display.  For example, the following markup:</p> 
			
			<code>
			&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; <strong> data-icon=&quot;delete&quot;</strong>&gt;Delete&lt;/a&gt;
			</code>
			
			<p>Creates this button with an icon:</p>
			<a href="index.html" data-role="button" data-icon="delete">Delete</a>
			
			<p>A more compact button with the <code> data-mini="true"</code> attribute added to the button:</p>
			<a href="index.html" data-role="button" data-icon="delete" data-mini="true">Delete</a>
			
			<h2>Icon set</h2>
			
			<p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:</p>
			
			<p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
			<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
			<p><strong>Right arrow</strong> - data-icon="arrow-r"</p>
			<a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
			<p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
			<a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
			<p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
			<a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
			<p><strong>Delete</strong> - data-icon="delete"</p>
			<a href="index.html" data-role="button" data-icon="delete">My button</a>
			<p><strong>Plus</strong> - data-icon="plus"</p>
			<a href="index.html" data-role="button" data-icon="plus">My button</a>
			<p><strong>Minus</strong> - data-icon="minus"</p>
			<a href="index.html" data-role="button" data-icon="minus">My button</a>
			<p><strong>Check</strong> - data-icon="check"</p>
			<a href="index.html" data-role="button" data-icon="check">My button</a>
			<p><strong>Gear</strong> - data-icon="gear"</p>
			<a href="index.html" data-role="button" data-icon="gear">My button</a>
			<p><strong>Refresh</strong> - data-icon="refresh"</p>
			<a href="index.html" data-role="button" data-icon="refresh">My button</a>
			<p><strong>Forward</strong> - data-icon="forward"</p>
			<a href="index.html" data-role="button" data-icon="forward">My button</a>
			<p><strong>Back</strong> - data-icon="back"</p>
			<a href="index.html" data-role="button" data-icon="back">My button</a>
			<p><strong>Grid</strong> - data-icon="grid"</p>
			<a href="index.html" data-role="button" data-icon="grid">My button</a>
			<p><strong>Star</strong> - data-icon="star"</p>
			<a href="index.html" data-role="button" data-icon="star">My button</a>
			<p><strong>Alert</strong> - data-icon="alert"</p>
			<a href="index.html" data-role="button" data-icon="alert">My button</a>
			<p><strong>Info</strong> - data-icon="info"</p>
			<a href="index.html" data-role="button" data-icon="info">My button</a>
			<p><strong>Home</strong> - data-icon="home"</p>
			<a href="index.html" data-role="button" data-icon="home">My button</a>
			<p><strong>Search</strong> - data-icon="search"</p>
			<a href="index.html" data-role="button" data-icon="search">My button</a>
			

		<h2>Icon positioning</h2>
		<p>By default, all icons in buttons are placed to the left of the button text. </p>
		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Delete</a>
		
		<p>This default may be overridden using the <code> data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p> 

<code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;right&quot;</strong>&gt;Delete&lt;/a&gt;
</code>

		<p>Creates this button with right-aligned icon:</p>
		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

		<p>Icons can also be positioned above the text by specifying <code> data-iconpos="top"</code></p>
		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Delete</a>
		
		<p>Or icons can also be positioned below the text by specifying <code> data-iconpos="bottom"</code></p>
		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Delete</a>
		
		<p>You can also create an icon-only button, by setting the <code> data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code> data-iconpos="notext"</code>:</p>

<code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;notext&quot;</strong>&gt;Delete&lt;/a&gt;
</code>

		<p>Creates this icon-only button:</p>
			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>



			<h2>Mini &amp; Inline</h2>
			<p>The <a href="../forms/forms-all-mini.html">mini</a> and <a href="buttons-inline.html">inline</a> attributes can be added to produce more compact buttons:<p>
			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left" data-mini="true" data-inline="true">Delete</a>
			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right" data-mini="true" data-inline="true">Delete</a>
			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top" data-mini="true" data-inline="true">Delete</a>
			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom" data-mini="true" data-inline="true">Delete</a>
			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-mini="true" data-inline="true">Delete</a>
			
			
		<h2>Custom Icons</h2>
		<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code> data-icon</code> value and apply it to the button: <code>ui-icon-myapp-email</code>. </p>
		<p>You can then write a CSS rule in your stylesheet that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
		<p> In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.</p>
		
<pre><code>.ui-icon-myapp-email {
	background-image: url("app-icon-email.png");
}</code></pre>

		<p>This will create the standard resolution icon, but many devices now have very high resolution displays, like the retina display on the iPhone 4. To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second a rule that uses the <code>-webkit-min-device-pixel-ratio: 2</code> media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules:</p>
<pre><code>
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-myapp-email {
		background-image: url("app-icon-email-highres.png");
		background-size: 18px 18px;
	}
	...more HD icon rules go here...
}
</code></pre>			
		 	
		<h2>Icons and themes</h2>
		<p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches with <a href="buttons-themes.html">themed buttons</a>.</p>
		
		<!-- A themed -->
		<p><strong>Swatch "a"</strong> themed buttons</p>
		<div data-role="controlgroup"  data-type="horizontal">
		<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		</div>
		<div data-role="controlgroup"  data-type="horizontal">
		<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
		</div>
		
		<!-- B themed -->
		<p><strong>Swatch "b"</strong> themed buttons</p>
		<div data-role="controlgroup"  data-type="horizontal">
		<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		</div>
		<div data-role="controlgroup"  data-type="horizontal">
		<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
		</div>
		
		<!-- C themed -->
		<p><strong>Swatch "c"</strong> themed buttons</p>
		<div data-role="controlgroup"  data-type="horizontal">
		<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		</div>
		<div data-role="controlgroup"  data-type="horizontal">
		<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
		</div>
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Buttons</li>
					<li><a href="buttons-types.html">Button basics</a></li>
					<li data-theme="a"><a href="buttons-icons.html">Button icons</a></li>
					<li><a href="buttons-inline.html">Inline buttons</a></li>
					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
					<li><a href="buttons-themes.html">Theming buttons</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-inline.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Inline buttons</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Inline buttons</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<h2>Inline buttons</h2>
		<p>By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:</p>
		
		<a href="index.html" data-role="button">Button</a>
		
			
		<p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code> data-inline="true"</code> attribute to the button:</p>
		
		
		<a href="index.html" data-role="button" data-inline="true">Button</a>
		
		<p>If you have multiple buttons that should sit side-by-side on the same line, add the <code> data-inline="true"</code> attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
			
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
</code></pre>

		<p>The result is this:</p>

			<a href="index.html" data-role="button" data-inline="true">Cancel</a>
			<a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>
			
		<p>Adding the <code>data-mini="true"</code> to the inline buttons creates a more compact version:</p>

			<a href="index.html" data-role="button" data-inline="true" data-mini="true">Cancel</a>
			<a href="index.html" data-role="button" data-theme="b" data-inline="true" data-mini="true">Save</a>

		
		<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="../content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</p>	
		
		<h2>Icon example</h2>
		<p>When an <a href="buttons-icons.html">icon</a> is added to an inline button, the button will grow wider to accommodate the icon:<p>
			
			<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
			<a href="index.html" data-role="button" data-icon="check" data-theme="b" data-inline="true">Save</a>
			
			<p>A mini version of the same:<p>
				
			<a href="index.html" data-role="button" data-icon="delete" data-inline="true" data-mini="true">Cancel</a>
			<a href="index.html" data-role="button" data-icon="check" data-theme="b" data-inline="true" data-mini="true">Save</a>
		
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">Buttons</li>
						<li><a href="buttons-types.html">Button basics</a></li>
						<li><a href="buttons-icons.html">Button icons</a></li>
						<li data-theme="a"><a href="buttons-inline.html">Inline buttons</a></li>
						<li><a href="buttons-grouped.html">Grouped buttons</a></li>
						<li><a href="buttons-themes.html">Theming buttons</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Button methods</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Button basics</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Button basics</h2>		
		
      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
			<li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
			<li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
			<li><a href="buttons-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
			<li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
		</ul>	
			
			<p>The following methods apply only to <strong>form buttons</strong>.  Link-based buttons do not have any associated methods.</p>

		<dl>
						
			<dt><code>enable</code> enable a disabled form button</dt>
			<dd>
				<pre><code>
$('[type="submit"]').button('enable');			
				</code></pre>
			</dd>
			
			<dt><code>disable</code> disable a form button</dt>
			<dd>
				<pre><code>
$('[type="submit"]').button('disable');			
				</code></pre>
			</dd>
			
			<dt><code>refresh</code> update the form button</dt>
			<dd>
			<p>If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.</p> 				
			
			<pre><code>		
$('[type="submit"]').button('refresh');
				</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">				
					<li data-role="list-divider">Buttons</li>
					<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
					<li><a href="buttons-icons.html">Button icons</a></li>
					<li><a href="buttons-inline.html">Inline buttons</a></li>
					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
					<li><a href="buttons-themes.html">Theming buttons</a></li>	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-options.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Button options</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Button basics</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Button basics</h2>		
		
         <ul data-role="controlgroup" data-type="horizontal" class="localnav">
   			<li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
   			<li><a href="buttons-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
   			<li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
   			<li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
   		</ul>	
			
			<p>The following options apply to <strong>all buttons</strong>:</p>

		<dl>			
			<dt><code>corners</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>Applies the theme button border-radius if set to true. This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;</code></p>
				<pre><code>$('a').buttonMarkup(<strong>{ corners: "false" }</strong>);</code></pre>
				<a href="#" data-role="button" data-corners="false">No rounded corners</a>
			</dd>			
			<dt><code>icon</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null</p>
				<p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a>. This option is also exposed as a data attribute: <code>data-icon=&quot;star&quot;</code></p>
				<pre><code>$('a').buttonMarkup(<strong>{ icon: "star" }</strong>);</code></pre>
				<a href="#" data-role="button" data-icon="star">Star icon</a>
			</dd>
			
			<dt><code>iconpos</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "left"</p>
				<p>Positions the icon in the button. Possible values: left, right, top, bottom, none, notext. The notext value will display an icon-only button with no text feedback. This option is also exposed as a data attribute: <code>data-iconpos=&quot;left&quot;</code></p>
				<pre><code>$('a').buttonMarkup(<strong>{ iconpos: "right" }</strong>);</code></pre>
				<a href="#" data-role="button" data-icon="star" data-iconpos="right">Star icon</a>
			</dd>
			
			<dt><code>iconshadow</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>Applies the theme shadow to the button's icon if set to true. This option is also exposed as a data attribute: <code>data-iconshadow=&quot;false&quot;</code></p>
				<pre><code>$('a').buttonMarkup(<strong>{ iconshadow: "false" }</strong>);</code></pre>
				<a href="#" data-role="button"  data-icon="star" data-iconshadow="false">No icon shadow</a>
			</dd>
			
			<dt><code>inline</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: null (false)</p>
				<p>If set to true, this will make the button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the button is full width, regardless of the feedback content. Possible values: true, false. This option is also exposed as a data attribute: <code>data-inline=&quot;true&quot;</code></p>
				<pre><code>$('a').buttonMarkup(<strong>{ inline: "true" }</strong>);</code></pre>
				<a href="#" data-role="button" data-inline="true">Inline</a>
			</dd>
			
			<dt><code>mini</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: null (false)</p>
				<p>If set to true, this will display a more compact version of the button that uses less vertical height. Possible values: true, false. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>
				<pre><code>$('a').buttonMarkup(<strong>{ mini: "true" }</strong>);</code></pre>
				<a href="#" data-role="button" data-mini="true">Inline</a>
			</dd>
			
			<dt><code>shadow</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>Applies the drop shadow style to the button if set to true. This option is also exposed as a data attribute: <code>data-shadow=&quot;false&quot;</code></p>
				<pre><code>$('a').buttonMarkup(<strong>{ shadow: "false" }</strong>);</code></pre>
				<a href="#" data-role="button" data-shadow="false">No button shadow</a>
			</dd>
			
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>			
				<pre><code>$('a').buttonMarkup(<strong>{ theme: "a" }</strong>);</code></pre>
				<a href="#" data-role="button" data-theme="a">Theme A</a>
			</dd>					
		</dl>	
		
		<div class="ui-body ui-body-e">
		<p>The following option applies only to <strong>form buttons</strong>, which are automatically initialized by the framework:</p>
		</div>
				
		<dl>
			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: "button, [type='button'], [type='submit'], [type='reset']"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
   <strong>$.mobile.button.prototype.options.initSelector = ".myButtons";</strong>
});
</code></pre>
			</dd>			
		</dl>	
		
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">				
					<li data-role="list-divider">Buttons</li>
					<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
					<li><a href="buttons-icons.html">Button icons</a></li>
					<li><a href="buttons-inline.html">Inline buttons</a></li>
					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
					<li><a href="buttons-themes.html">Theming buttons</a></li>	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-themes.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming buttons</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Theming buttons</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			
			<h2>Theming buttons</h2>
			
			<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
			
			<div class="ui-body ui-body-a"><h4>Swatch "a"</h4><a href="index.html" data-role="button">Button</a></div>
			<div class="ui-body ui-body-b"><h4>Swatch "b"</h4><a href="index.html" data-role="button">Button</a></div>
			<div class="ui-body ui-body-c"><h4>Swatch "c"</h4><a href="index.html" data-role="button">Button</a></div>
			<div class="ui-body ui-body-d"><h4>Swatch "d"</h4><a href="index.html" data-role="button">Button</a></div>
			<div class="ui-body ui-body-e"><h4>Swatch "e"</h4><a href="index.html" data-role="button">Button</a></div>
			
			<h2>Assigning theme swatches</h2>
			<p>Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>

<pre><code>			
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Swatch a&lt;/a&gt;			
</code></pre>
				
		<p>Here are 5 buttons with icons that have a different swatch letter assigned via the <code> data-theme</code> attribute.</p>
	
		<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
		<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
		<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
		<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
		<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
		
		<h2>Theme variations</h2>
		
		<p><strong>Swatch "a"</strong> on container with themed buttons inside</p>
		<div class="ui-body ui-body-a">
			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
			<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
			<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
		</div>
		
		<p><strong>Swatch "b"</strong> on container with themed buttons inside</p>
		<div class="ui-body ui-body-b">
			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
			<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
			<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
		</div>
		
		<p><strong>Swatch "c"</strong> on container with themed buttons inside</p>
		<div class="ui-body ui-body-c">
			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
			<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
			<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
		</div>
		
		<p><strong>Swatch "d"</strong> on container with themed buttons inside</p>
		<div class="ui-body ui-body-d">
			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
			<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
			<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
		</div>
		
		<p><strong>Swatch "e"</strong> on container with themed buttons inside</p>
		<div class="ui-body ui-body-e">
			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
			<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
			<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
			<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
			<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
		</div>
		
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Buttons</li>
					<li><a href="buttons-types.html">Button basics</a></li>
					<li><a href="buttons-icons.html">Button icons</a></li>
					<li><a href="buttons-inline.html">Inline buttons</a></li>
					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
					<li data-theme="a"><a href="buttons-themes.html">Theming buttons</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\buttons-types.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Button types</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Button basics</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		 <h2>Button basics</h2>		
		
         <ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="buttons-types.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>	
			
			
   <p>Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device.  Use anchor links (<code>a</code> elements) to mark up navigation buttons, and <code>input</code> or <code>button</code> elements for form submission.</p>
 	<p>View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes for buttons including adding <a href="buttons-icons.html">icons</a> or displaying them <a href="buttons-inline.html">inline</a> or <a href="buttons-grouped.html">grouped</a>.</p>
	
		<h2>Styling links as buttons</h2>

		<p>In the main content block of a page, you can style any anchor link as a button by adding the <code>data-role="button"</code> attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup: </p>

<code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a&gt;
</code>

		<p>Produces this <strong>link-based</strong> button:</p>
		<a href="index.html" data-role="button">Link button</a>
		
		<p><strong>Note:</strong> Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the <code>button</code> plugin and only just use the underlying <code>buttonMarkup</code> plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.</p>
		
		<h2>Mini size</h2>

		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the button to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>

<pre><code>	
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; <strong>data-mini=&quot;true&quot;</strong>&gt;Link button&lt;/a&gt;
</code></pre>

		<p>This will produce a search input that a not as tall as the standard version and has a smaller text size.</p>
         <a href="index.html" data-role="button" data-mini="true">Link button</a>
		
		
		
		<h2>Form buttons</h2>
		<p>For ease of styling, the framework automatically converts any <code>button</code> or <code>input</code> element with a <code>type</code> of <code>submit</code>, <code>reset</code>, or <code>button</code> into a custom styled button &mdash; there is no need to add the <code> data-role="button"</code> attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:</p>

<code>
$('[type="submit"]').button();
</code>

		<p>To preserve events bound to the original <code>button</code> or <code>input</code>, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the custom-styled button, they're actually clicking on the original element. To prevent a form button from being converted into an enhanced button, add the <code>data-role="none"</code> attribute and the native control will be rendered.</p>

		<p><strong>Button</strong> based button:</p>
<pre><code>	
&lt;button&gt;Button element&lt;/button&gt;
</code></pre>
		<button>Button element</button>
	
		<p><strong>Input type="button"</strong> based button:</p>
<pre><code>	
&lt;input type=&quot;button&quot; value=&quot;Button&quot; /&gt;
</code></pre>
		<input type="button" value="Button" />
		
		<p><strong>Input type="submit"</strong> based button:</p>
<pre><code>
&lt;input type=&quot;submit&quot; value=&quot;Submit Button&quot; /&gt;
</code></pre>
		<input type="submit" value="Submit Button" />
		
		<p><strong>Input type="reset"</strong> based button:</p>
<pre><code>
&lt;input type=&quot;reset&quot; value=&quot;Reset Button&quot; /&gt;
</code></pre>
		<input type="reset" value="Reset Button" />
		
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">				
					<li data-role="list-divider">Buttons</li>
					<li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
					<li><a href="buttons-icons.html">Button icons</a></li>
					<li><a href="buttons-inline.html">Inline buttons</a></li>
					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
					<li><a href="buttons-themes.html">Theming buttons</a></li>	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\buttons\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Buttons</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-index">

	<div data-role="header" data-theme="f">
		<h1>Buttons</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<p>Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins.</p>

			<ul data-role="listview" data-inset="true">
					<li><a href="buttons-types.html">Button basics</a></li>
					<li><a href="buttons-icons.html">Button icons</a></li>
					<li><a href="buttons-inline.html">Inline buttons</a></li>
					<li><a href="buttons-grouped.html">Grouped buttons</a></li>
					<li><a href="buttons-themes.html">Theming buttons</a></li>
			</ul>
		</div>
	</div><!-- /content -->



	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\dialogTransition.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>

	<script>
		$(document).bind("mobileinit", function(){
			$.mobile.defaultDialogTransition = 'flip';
		});
	</script>
	
	<script src="../../js/jquery.mobile-1.1.1.js"></script>
	

</head> 
<body> 

	<div data-role="page">

		<div data-role="header" data-theme="f">
		<h1>Config applied</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<h2>defaultDialogTransition is now "flip"</h2>
		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
		<a href="../pages/dialog.html" data-role="button" data-rel="dialog">Or open a basic dialog</a>

		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-index">

		<div data-role="header" data-theme="f">
		<h1>Pages</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
				<h2>Global config tests</h2>
				<p>The following links will cause a full page refresh so that the global options configuration can take effect. Each link below will tweak a different option for quick testing.</p>

			
		<ul data-role="listview" data-inset="true">
			<li>
				<a href="pushState.html" data-ajax="false">
				<h3>pushStateEnabled - False</h3>
				<p>Enhancement to use history.replaceState in supported browsers, to convert the hash-based Ajax URL into the full document path. </p>
				</a>
			</li>
			<li>
				<a href="pageTransition.html" data-ajax="false">
				<h3>defaultPageTransition - Flow</h3>
				<p>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</p>
				</a>
			</li>
			<li>
				<a href="dialogTransition.html" data-ajax="false">
				<h3>defaultDialogTransition - Flip</h3>
				<p>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</p>
				</a>
			</li>
			<li>
				<a href="minScrollBack.html" data-ajax="false">
				<h3>minScrollBack - 999</h3>
				<p>Minimum scroll distance that will be remembered when returning to a page.</p>
				</a>
			</li>
			<li>
				<a href="loadingMessage.html" data-ajax="false">
				<h3>loadingMessage - false</h3>
				<p>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</p>
				</a>
			</li>
			<li>
				<a href="loadingMessageTextVisible.html" data-ajax="false">
				<h3>loadingMessageTextVisible - true</h3>
				<p>Show text in the page loader.  This page also demonstrates options for ad hoc message generation.</p>
				</a>
			</li>
			<li>
				<a href="pageLoadErrorMessage.html" data-ajax="false">
				<h3>pageLoadErrorMessage - "Yikes, we broke the internet!"</h3>
				<p>Set the text that appears when a page fails to load through Ajax.</p>
				</a>
			</li>
			<li>
				<a href="iOSFullscreen.html" data-ajax="false">
				<h3>apple-mobile-web-app-capable meta tag</h3>
				<p>View the docs without browser chrome in iOS.</p>
				</a>
			</li>
		</ul>
		

		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\iOSFullscreen.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="apple-touch-icon" href="../_assets/images/ios_icon.png"/>
	<link rel="apple-touch-startup-image" href="../_assets/images/ios_startup.png" />
	<title>jQuery Mobile Docs - Configuration</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	
	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>

	<script>
	$(document).bind("mobileinit", function() {
		if (!!window.navigator.standalone) {
			$.mobile.page.prototype.options.addBackBtn = true;
		}
	});
	</script>
	
	<script src="../../js/jquery.mobile-1.1.1.js"></script>
	

</head>
<body>

	<div data-role="page">

		<div data-role="header" data-theme="f">
		<h1>jQuery Mobile</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>

	<div data-role="content">

		<h2>Fullscreen docs in iOS</h2>
		<p>First, hit Add to Home Screen to create a new shortcut icon on the home screen.  Next, open the new shortcut and hit the button below to browse the docs as a fullscreen web app.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>

	</div>
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\jq17b1.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="http://code.jquery.com/jquery-1.7b1.js"></script>
	
	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page">

		<div data-role="header" data-theme="f">
		<h1>jQuery version</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<h2>jQuery core version 1.7 Beta 1</h2>
		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>


		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\loadingMessage.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	
	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>

	<script>
	$(document).bind("mobileinit", function(){
	  $.mobile.loadingMessage = false;
	});
	</script>
	
	<script src="../../js/jquery.mobile-1.1.1.js"></script>
	
</head> 
<body> 

	<div data-role="page">

		<div data-role="header" data-theme="f">
		<h1>Config applied</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<h2>loadingMessage is now disabled</h2>
		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>


		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\loadingMessageTextVisible.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Configuration</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script>
	$(document).bind("mobileinit", function(){
		$.mobile.loadingMessageTextVisible = true;
	});
	</script>
	
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page">
	<script>
		$(document).on("click", ".show-page-loading-msg", function() {
			var $this = $( this ),
				theme = $this.jqmData("theme") || $.mobile.loadingMessageTheme,
				msgText = $this.jqmData("msgtext") || $.mobile.loadingMessage,
				textonly = !!$this.jqmData("textonly");
			$.mobile.showPageLoadingMsg(theme, msgText, textonly);
		})
		.on("click", ".hide-page-loading-msg", function() {
			$.mobile.hidePageLoadingMsg();
		});
	</script>

	<div data-role="header" data-theme="f">
		<h1>Config applied</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">

		<h2>loadingMessage text is now visible</h2>
		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>

		<p>To display the loading message on demand:</p>
		<pre><code>$.mobile.showPageLoadingMsg();</code></pre>
		<p>Click the buttons below to show and hide the loading message with the default options.</p>
		<div data-role="controlgroup">
			<button class="show-page-loading-msg" data-inline="false" data-icon="arrow-r" data-iconpos="right">Show</button>
			<button class="hide-page-loading-msg" data-inline="false" data-icon="delete" data-iconpos="right">Hide</button>
		</div>

		<h2>Theming the loading message</h2>
		<p>To display the loading message with a different theme and message:</p>
		<pre><code>$.mobile.showPageLoadingMsg(<strong>"a", "Loading theme a..."</strong>);</code></pre>
		<p>The theme and message can be changed on the fly by calling the method again.  Click the buttons below to see the loading message with the indicated theme.</p>
		<div data-role="controlgroup">
			<button class="show-page-loading-msg" data-theme="a" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme a...">Theme a</button>
			<button class="show-page-loading-msg" data-theme="b" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme b...">Theme b</button>
			<button class="show-page-loading-msg" data-theme="c" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme c...">Theme c</button>
			<button class="show-page-loading-msg" data-theme="d" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme d...">Theme d</button>
			<button class="show-page-loading-msg" data-theme="e" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme e...">Theme e</button>
			<button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Hide</button>
		</div>

		<h2>Text only messages</h2>
		<p>To display the loading message with no spinner:</p>
		<pre><code>$.mobile.showPageLoadingMsg("a", "No spinner", <strong>true</strong>);</code></pre>
		<p>Click the button below to see the loading message with no spinner.</p>
		<div data-role="controlgroup">
			<button class="show-page-loading-msg" data-textonly="true" data-msgtext="Look Ma, no spinner!" data-icon="arrow-r" data-iconpos="right">Show</button>
			<button class="hide-page-loading-msg" data-inline="false" data-icon="delete" data-iconpos="right">Hide</button>
		</div>


		</div><!-- /ui-body wrapper -->
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\minScrollBack.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	
	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>

	<script>
	$(document).bind("mobileinit", function(){
	  $.mobile.minScrollBack = 999;
	});
	</script>

	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page">

		<div data-role="header" data-theme="f">
		<h1>Config applied</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<h2>minScrollBack is now set to 999 (disabled)</h2>
		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>


		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\pageLoadErrorMessage.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	
	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>

	<script>
	$(document).bind("mobileinit", function(){
	  $.mobile.pageLoadErrorMessage = 'Yikes, we broke the internet!';
	});
	</script>
	
	<script src="../../js/jquery.mobile-1.1.1.js"></script>
	

</head> 
<body> 

	<div data-role="page">

		<div data-role="header" data-theme="f">
		<h1>Config applied</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<h2>pageLoadErrorMessage is now "Yikes, we broke the internet!"</h2>
		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
		<a href="broken.html" data-role="button" data-rel="dialog">Or try this broken link</a>


		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\pageTransition.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>

	<script>
		$(document).bind("mobileinit", function(){
			$.mobile.defaultPageTransition = 'flow';
		});
	</script>
	
	<script src="../../js/jquery.mobile-1.1.1.js"></script>
	

</head> 
<body> 

	<div data-role="page">

		<div data-role="header" data-theme="f">
		<h1>Config applied</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<h2>defaultPageTransition is now "flow"</h2>
		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>

		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\pushState.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	
	
	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>

	<script>
	$(document).bind("mobileinit", function(){
	  $.mobile.pushStateEnabled = false;
	});
	</script>
	
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page">

		<div data-role="header" data-theme="f">
		<h1>Config applied</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<h2>pushStateEnabled is now disabled</h2>
		<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>


		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\config\touchOverflow.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	
	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>

	<script>
	$(document).bind("mobileinit", function(){
	  $.mobile.touchOverflowEnabled = true;
	});
	</script>
	
	<script src="../../js/jquery.mobile-1.1.1.js"></script>
	

</head> 
<body> 

	<div data-role="page">

		<div data-role="header" data-theme="f" data-position="fixed">
		<h1>Config applied</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<h2>touchOverflowEnabled is now active</h2>
		<p>The toolbar on this page should now be fixed, like a native toolbar. To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
		<a href="../pages/touchoverflow.html" data-role="button" data-icon="arrow-r" data-iconpos="right">touchOverflow docs</a>
	
		<h3>Some good pages to test out:</h3>
			<a href="../toolbars/bars-fixed.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed toolbars</a>
			<a href="../toolbars/bars-fullscreen.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fullscreen toolbars</a>
			<a href="../toolbars/footer-persist-a.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed persistent footer</a>
			<a href="../pages/page-dialogs.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Dialogs &amp; transitions</a>
			
			
		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\api-content.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Content formatting</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Content formatting API</h1>
	</div><!-- /header -->

	<div data-role="content" data-theme="c">
			
			<h2>Dependencies</h2>
			<p>To be documented</p>
			
			<h2>Options</h2>
			<p>To be documented</p>
			
			<h2>Methods</h2>
			<p>To be documented</p>
			
			<h2>Known Issues</h2>
			<p>To be documented</p>
			
			
		
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-events.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Content</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
			<h1>Collapsible</h1>
			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
			<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
		</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<h2>Collapsible content</h2>
		
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="content-collapsible.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="content-collapsible-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			</ul>

			<p>Bind events directly to the container, typically a <code>div</code> element.  Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code>
$( ".selector" ).bind( "collapse", function(event, ui) {
  ...
});
</code></pre>

			<p>The collapsible plugin has the following custom events:</p>

	<dl>

		<dt><code>create</code> triggered when a collapsible is created</dt>
		<dd>

			<pre><code>
$( ".selector" ).collapsible({
   create: function(event, ui) { ... }
});
			</code></pre>
		</dd>

		<dt><code>collapse</code> triggered when a collapsible is collapsed</dt>
		<dd>

			<pre><code>
$( ".selector" ).collapsible({
   collapse: function(event, ui) { ... }
});
			</code></pre>
		</dd>

		<dt><code>expand</code> triggered when a collapsible is expanded</dt>
		<dd>

			<pre><code>
$( ".selector" ).collapsible({
   expand: function(event, ui) { ... }
});
			</code></pre>
		</dd>

	</dl>

	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-methods.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Content</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
			<h1>Collapsible</h1>
			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
			<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
		</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<h2>Collapsible content</h2>
		
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="content-collapsible.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
				<li><a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

			<p>The collapsible plugin has no public methods.</p>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-options.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Content</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
			<h1>Collapsible</h1>
			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
			<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
		</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<h2>Collapsible content</h2>
		
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="content-collapsible.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="content-collapsible-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
				<li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

			<p>The collapsible plugin has the following options:</p>

		<dl>
			<dt><code>collapsed</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>When false, the container is initially expanded with a minus icon in the header. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.collapsed = false;</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-collapsed=&quot;false&quot;</code>.</p>
			</dd>

			<dt><code>collapseCueText</code> <em>string</em></dt>
			<dd>
				<p class="default">default: " click to collapse contents"</p>
				<p>This text is used to provide audible feedback for users with screen reader software. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.collapseCueText = " collapse with a click";</strong>
});
</code></pre>
			</dd>

			<dt><code>contentTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for the collapsible content block. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.contentTheme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-content-theme=&quot;a&quot;</code>.</p>
			</dd>

			<dt><code>expandCueText</code> <em>string</em></dt>
			<dd>
				<p class="default">default: " click to expand contents"</p>
				<p>This text is used to provide audible feedback for users with screen reader software. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.expandCueText = " expand with a click";</strong>
});
</code></pre>
			</dd>

			<dt><code>heading</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "h1,h2,h3,h4,h5,h6,legend"</p>
				<p>Within the collapsible container, the first immediate child element that matches this selector will be used as the header for the collapsible. To change the selector, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.heading = ".mycollapsibleheading";</strong>
});
</code></pre>
			</dd>

			<dt><code>iconpos</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "left"</p>
				<p>Positions the icon in the collapsible header. Possible values: left, right, top, bottom, none, notext.</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.iconpos = "right";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-iconpos=&quot;right&quot;</code>.</p>
			</dd>

<!--
			<dt><code>iconTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "d"</p>
				<p>Sets the color scheme (swatch) for the collapsible header icon. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.iconTheme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-icon-theme=&quot;a&quot;</code>.</p>
			</dd>
-->

			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: ":jqmData(role='collapsible')"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as collapsibles. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.initSelector = ".mycollapsible";</strong>
});
</code></pre>
			</dd>

			<dt><code>mini</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the size of the element to a more compact, <a href="../forms/forms-all-mini.html">mini version</a>. If the value is false for an individual collapsible container, but that container is part of a collapsible set, then the value is inherited from the parent collapsible set. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.mini = true;</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code>.</p>
			</dd>
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for the collapsible. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsible.prototype.options.theme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code>.</p>
			</dd>


		</dl>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-set-events.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Content</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
			<h1>Collapsible set</h1>
			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
			<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
		</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<h2>Collapsible sets</h2>
		
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="content-collapsible-set.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			</ul>

			<p>Bind events directly to the set container, typically a <code>div</code> element.  Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code>
$( ".selector" ).bind( "create", function(event, ui) {
  ...
});
</code></pre>

			<p>The collapsible set plugin has the following custom event:</p>

	<dl>

		<dt><code>create</code> triggered when a collapsible set is created</dt>
		<dd>

			<pre><code>
$( ".selector" ).collapsibleset({
   create: function(event, ui) { ... }
});
			</code></pre>
		</dd>

	</dl>

	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-set-methods.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Sets</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
			<h1>Collapsible set</h1>
			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
			<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
		</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<h2>Collapsible sets</h2>
		
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="content-collapsible-set.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
				<li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

			<p>The collapsible set plugin has the following method:</p>

		<dl>
			<dt><code>refresh</code> update the collapsible set</dt>
			<dd>
			<p>If you manipulate a collapsible set via JavaScript (e.g. add new collapsible containers), you must call the refresh method on it to update the visual styling.</p>

			<pre><code>
$('.selector').collapsibleset('refresh');
				</code></pre>
			</dd>

		</dl>

	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-set-options.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Sets</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
			<h1>Collapsible set</h1>
			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
			<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
		</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<h2>Collapsible sets</h2>
		
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="content-collapsible-set.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
				<li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

			<p>The collapsible plugin has the following options:</p>

		<dl>
			<dt><code>iconpos</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "left"</p>
				<p>Positions the icons in the collapsible headers. Possible values: left, right, top, bottom, none, notext.</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsibleset.prototype.options.iconpos = "right";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-iconpos=&quot;right&quot;</code>.</p>
			</dd>

			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: ":jqmData(role='collapsible-set')"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as collapsible sets. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsibleset.prototype.options.initSelector = ".mycollapsibleset";</strong>
});
</code></pre>
			</dd>

			<dt><code>mini</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the size of the element to a more compact, <a href="../forms/forms-all-mini.html">mini version</a>. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsibleset.prototype.options.mini = true;</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code>.</p>
			</dd>
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for the collapsible set. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.collapsibleset.prototype.options.theme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code>.</p>
			</dd>

		</dl>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible-set.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Content</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Collapsible set</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<h2>Collapsible set (accordion)</h2>

		<ul data-role="controlgroup" data-type="horizontal" class="localnav">
			<li><a href="content-collapsible-set.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
			<li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade">Options</a></li>
			<li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade">Methods</a></li>
			<li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade">Events</a></li>
		</ul>

		<p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a>. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsible sets.</p>
		<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>

	<pre><code>		
<strong>&lt;div data-role="collapsible-set"&gt;</strong>

	&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;</strong>&gt;
	&lt;h3&gt;Section 1&lt;/h3&gt;
	&lt;p&gt;I&#x27;m the collapsible set content for section 1.&lt;/p&gt;
	&lt;/div&gt;
	
	&lt;div data-role=&quot;collapsible&quot;&gt;
	&lt;h3&gt;Section 2&lt;/h3&gt;
	&lt;p&gt;I&#x27;m the collapsible set content for section 2.&lt;/p&gt;
	&lt;/div&gt;
	
<strong>&lt;/div&gt;</strong>
	</code></pre>	
	

		<p>Here is an example of a collapsible set with 5 sections.</p>
		
		<div data-role="collapsible-set">
			<div data-role="collapsible" data-collapsed="false">
				<h3>Section 1</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 2</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 3</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 4</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 5</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
			</div>
		</div>

		<h2>Mini collapsible sets</h2>

		<p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
		
		<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
			<div data-role="collapsible">
				<h3>Section 1</h3>
				<p>Collapsible content</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 2</h3>
				<p>Collapsible content</p>

			</div>
			<div data-role="collapsible">
				<h3>Section 3</h3>
				<p>Collapsible content</p>
			</div>
		</div>
		
		<h2>Icon positioning</h2>
		<p>Collapsible headings’ default icon positioning can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
		
		<div data-role="collapsible-set" data-theme="c" data-iconpos="right">
			<div data-role="collapsible">
				<h3>Section 1</h3>
				<p>Inherits icon positioning from <code>data-iconpos="right"</code> attribute on parent.</p>
			</div>
			<div data-role="collapsible" data-iconpos="left">
				<h3>Section 2</h3>
				<p>data-iconpos="left"</p>
			</div>
			<div data-role="collapsible" data-iconpos="bottom">
				<h3>Section 3</h3>
				<p>data-iconpos="bottom"</p>
			</div>
			<div data-role="collapsible" data-iconpos="top">
				<h3>Section 4</h3>
				<p>data-iconpos="top"</p>
			</div>
		</div>
		
		
		
		<h2>Theming collapsible content</h2>
		<p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>


<pre><code>		
&lt;div data-role=&quot;collapsible-set&quot; <strong>data-theme=&quot;c&quot; data-content-theme=&quot;d&quot;</strong>&gt;
</code></pre>	


		<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
			<div data-role="collapsible">
				<h3>Section 1</h3>
				<p>Collapsible content</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 2</h3>
				<p>Collapsible content</p>

			</div>
			<div data-role="collapsible">
				<h3>Section 3</h3>
				<p>Collapsible content</p>
			</div>
		</div>

		<h2>Theming individual sections</h2>
		<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>

		<div data-role="collapsible-set" data-content-theme="c">
			<div data-role="collapsible" data-theme="b" data-content-theme="b">
				<h3>Section header, swatch B</h3>
				<p>Collapsible content, swatch "b"</p>
			</div>
			<div data-role="collapsible" data-theme="a" data-content-theme="a">
				<h3>Section header, swatch A</h3>
				<p>Collapsible content, swatch "a"></p>
			</div>
			<div data-role="collapsible" data-theme="e" data-content-theme="d">
				<h3>Section header, swatch E</h3>
				<p>Collapsible content, swatch "d"</p>
			</div>
		</div>
		
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-collapsible.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Content</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
			<h1>Collapsible</h1>
			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
			<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
		</div><!-- /header -->

		<div data-role="content">
			<div class="content-primary">
			<h2>Collapsible content</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

			<p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute. Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsibles.</p>

			<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
		
			<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
			
			<p>By default, the content will be collapsed.</p>
<pre><code>		
&lt;div <strong>data-role=&quot;collapsible&quot;</strong>&gt;
   &lt;h3&gt;I&#x27;m a header&lt;/h3&gt;
   &lt;p&gt;I&#x27;m the collapsible content. By default I'm closed, but you can click the header to open me.&lt;/p&gt;
&lt;/div&gt;
</code></pre>	
	

			<div data-role="collapsible">
				<h3>I'm a header</h3>
				<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
			</div>

	<h2>Expanding collapsibles on load</h2>
			
	<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>

<code>		
&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;&gt;</strong>
</code>

		<p>This code will create a collapsible widget like this:</p>
	

			<div data-role="collapsible" data-collapsed="false">
				<h3>I'm a header</h3>
				<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
			</div>
	
			<h2>Mini collapsibles</h2>

			<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>

		<code>		
		&lt;div data-role=&quot;collapsible&quot; <strong>data-mini=&quot;true&quot;&gt;</strong>
		</code>

		<p>This code will create a mini collapsible widget:</p>

		<div data-role="collapsible" data-mini="true">
			<h3>I'm a mini header</h3>
			<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
		</div>
		
		<h2>Icon positioning</h2>
		<p>Collapsible headings’ default icon positioning can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
		
		<div data-role="collapsible" data-iconpos="right">
			<h3>I'm a header</h3>
			<p><code>data-iconpos="right"</code></p>
		</div>
		
					
	<h2>Theming collapsible content</h2>
	
		
		<p>Collapsible content is minimally styled &mdash; we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
		
		<p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
		
<pre><code>		
&lt;div data-role=&quot;collapsible&quot; <strong>data-content-theme=&quot;c&quot;</strong>&gt;
   &lt;h3&gt;Header&lt;/h3&gt;
   &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "c".&lt;/p&gt;
&lt;/div&gt;
</code></pre>
		
		<div data-role="collapsible" data-content-theme="c">
			<h3>Header</h3>
			<p>I'm the collapsible content with a themed content block set to "c".</p>
		</div>
		
		<h2>Theming collapsible headers</h2>
		<p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>

<pre><code>		
&lt;div data-role=&quot;collapsible&quot; <strong>data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;</strong>&gt;
   &lt;h3&gt;Header swatch A&lt;/h3&gt;
   &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "a".&lt;/p&gt;
&lt;/div&gt;
</code></pre>
		
		<div data-role="collapsible" data-theme="a" data-content-theme="a">
			<h3>Header swatch A</h3>
			<p>I'm the collapsible content with a themed content block set to "a".</p>
		</div>


		
		<div data-role="collapsible" data-theme="b" data-content-theme="d">
			<h3>Header swatch B</h3>
			<p>I'm the collapsible content with a themed content block set to "d".</p>
		</div>

		
		
		<h2>Nested Collapsibles</h2>
		
		<p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.</p>
		<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
			<h3>I'm a header</h3>
			<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			
			<div data-role="collapsible" data-theme="c" data-content-theme="c">
				<h3>I'm a nested collapsible with a child collapsible</h3>
				<p>I'm a child collapsible.</p>
					<div data-role="collapsible" data-theme="d" data-content-theme="d">
						<h3>Nested inside again.</h3>
						<p>Three levels deep now.</p>
					</div><!-- /section 1A -->
			</div><!-- /section 1 -->

			
			<div data-role="collapsible" data-content-theme="c">
				<h3>Section 3: Form elements</h3>
				<form action="#" method="get">
					<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
					</div>
					<div data-role="fieldcontain">
						<label for="slider">Input slider:</label>
					 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
					</div>
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
				    </fieldset>
				</form>
			</div><!-- /section 2 -->

			<div data-role="collapsible" data-content-theme="c">
				<h3>Section 4: Collapsed list</h3>
				<p>Here is an inset list:</p>
				<ul data-role="listview" data-inset="true" data-theme="d">
					<li><a href="index.html">Acura</a></li>
					<li><a href="index.html">Audi</a></li>
					<li><a href="index.html">BMW</a></li>
					<li><a href="index.html">Cadillac</a></li>
					<li><a href="index.html">Chrysler</a></li>
					<li><a href="index.html">Dodge</a></li>
					<li><a href="index.html">Ferrari</a></li>
					<li><a href="index.html">Ford</a></li>
				</ul>
			</div><!-- /section 3 -->
		</div>
		
		
		
		<h2>Collapsible sets (accordions)</h2>
		<p>It's possible to combine multiple collapsibles into a grouped sets that acts like an <a href="content-collapsible-set.html">accordion widget</a>.</p>
		
		
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-grids.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Content Grids</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Layout grids</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
		
		<p>The jQuery Mobile framework provides a simple way to build CSS-based columns through a  block style class convention called <code>ui-grid</code>. </p>
		
		<p>There are four preset configurations layouts  that can be used in any situation that requires columns:</p>
		<ul>
			<li><strong>two</strong>-column (using the <code>ui-grid-a</code> class)</li>
			<li><strong>three</strong>-column (using the <code>ui-grid-b</code> class)</li>
			<li><strong>four</strong>-column (using the <code>ui-grid-c</code> class)</li>
			<li><strong>five</strong>-column (using the <code>ui-grid-d</code> class)</li>
		</ul>

		<p>Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. </p>
		<p>Within the grid container, child elements are assigned <code>ui-block-a/b/c/d/e</code> in a sequential manner which makes each "block" element float side-by-side, forming the grid. The <code>ui-block-a</code> class essentially clears the floats which will start a new line (see multiple row grids, below).</p>
			
		<h2>Two column grids</h2>
		<p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>

<pre><code>
&lt;div class=&quot;ui-grid-a&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;strong&gt;I'm Block A&lt;/strong&gt; and text inside will wrap&lt;/div&gt;
	&lt;div class=&quot;ui-block-b&quot;&gt;&lt;strong&gt;I'm Block B&lt;/strong&gt; and text inside will wrap&lt;/div&gt;
&lt;/div&gt;&lt;!-- /grid-a --&gt;
</code></pre>


		
		<p>The above markup produces the following content layout:</p>
		
		<div class="ui-grid-a">
			<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
			<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
		</div><!-- /grid-a -->
		
		<p>As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.</p>
		
		<p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the container of each of the two buttons inside to stretch them each to 50% of the screen width:</p>

<pre><code>
&lt;fieldset class=&quot;ui-grid-a&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;button type=&quot;submit&quot; data-theme=&quot;c&quot;&gt;Cancel&lt;/button&gt;&lt;/div&gt;
	&lt;div class=&quot;ui-block-b&quot;&gt;&lt;button type=&quot;submit&quot; data-theme=&quot;b&quot;&gt;Submit&lt;/button&gt;&lt;/div&gt;	   
&lt;/fieldset&gt;
</code></pre>
	
		<fieldset class="ui-grid-a">
			<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
			<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
		</fieldset>

		<p>Please note that the framework adds left and right margin to buttons in a grid. For a single button you can use a container with class <code>ui-grid-solo</code> and wrap the button in a div with class <code>ui-block-a</code> like the example below. This way the button will get the same margin.</p>
		 
<pre><code>
&lt;div class=&quot;ui-grid-a&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;button type=&quot;button&quot; data-theme=&quot;c&quot;&gt;Previous&lt;/button&gt;&lt;/div&gt;
	&lt;div class=&quot;ui-block-b&quot;&gt;&lt;button type=&quot;button&quot; data-theme=&quot;c&quot;&gt;Next&lt;/button&gt;&lt;/div&gt;	   
&lt;/div&gt;
&lt;div class=&quot;ui-grid-solo&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;&lt;button type=&quot;v&quot; data-theme=&quot;b&quot;&gt;More&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

		<div class="ui-grid-a">
			<div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
			<div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>	   
		</div>

		<div class="ui-grid-solo">
			<div class="ui-block-a"><button type="button" data-theme="b">More</button></div>
		</div>
	    
		<p>Theme classes (not data-theme attributes) from the <a href="../api/themes.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>
			
		<div class="ui-grid-a">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
		</div><!-- /grid-a -->

		<h2>Three-column grids</h2>
		<p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
	
<pre><code>
&lt;div class=&quot;ui-grid-b&quot;&gt;
	&lt;div class=&quot;ui-block-a&quot;&gt;Block A&lt;/div&gt;
	&lt;div class=&quot;ui-block-b&quot;&gt;Block B&lt;/div&gt;
	&lt;div class=&quot;ui-block-c&quot;&gt;Block C&lt;/div&gt;
&lt;/div&gt;&lt;!-- /grid-b --&gt;
</code></pre>
		
		<p>This will produce a 33/33/33% grid for our content.</p>
			
		<div class="ui-grid-b">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
		</div><!-- /grid-b -->
		
		<p>And an example of a 3 column grid with buttons inside:</p>

		<fieldset class="ui-grid-b">
			<div class="ui-block-a"><button type="submit" data-theme="c">Hmm</button></div>
			<div class="ui-block-b"><button type="submit" data-theme="a">No</button></div>	 
			<div class="ui-block-c"><button type="submit" data-theme="b">Yes</button></div>  
		</fieldset>
		
		<h2>Four-column grids</h2>
		
		<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
			
		<div class="ui-grid-c">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
			<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
		</div><!-- /grid-c -->
		
		<h2>Five-column grids</h2>
		<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fifth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
			
		<div class="ui-grid-d">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
			<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
			<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
		</div><!-- /grid-c -->
		
		<h2>Multiple row grids</h2>
		
		<p>Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the <code>class=ui-block-a</code> is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:</p>
			
		<div class="ui-grid-b">
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
		</div><!-- /grid-c -->
		
		
		<h2>Grids in toolbars</h2>
		<p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 4 column grid.</p>
		<!--  NOTE: Inline styles are for demo purposes only, please use external styles -->
		<div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
			<div class="ui-block-a"><h3 style="margin-top:10px;">Settings</h3></div>
			<div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label></div>
			<div class="ui-block-c"><input id="value" value="5,000"></div>	 
			<div class="ui-block-d">
				<div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div>
			</div>
		</div><!-- /footer -->
	
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
						<li data-role="list-divider">Content Formatting</li>
						<li><a href="content-html.html">Basic HTML styles</a></li>
						<li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
						<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-html.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - HTML formatting</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>HTML Formatting</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<style>
			table { width:100%; }
			table caption { text-align:left;  }
			table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
			table th, td { text-align:left; padding:6px;} 
		</style>
		
		
	
		
		<p>The default approach to styling content in jQuery Mobile is simple: Use a light hand.  Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the <a href="../api/themes.html">theming system</a>  to apply the font family and colors. </p>
		<p>Taking a light hand with content styling gives designers and developers a clean slate to work with, instead of fighting against a lot of complex style overhead.</p>
		
		<h2>Default HTML markup styling</h2>
		<p>By default, jQuery Mobile themes use standard HTML styles and sizes for standard markup elements like headers, paragraph content, block quotes, anchor links, standard ordered, unordered and definition lists, and tables &mdash; as shown in the examples below:</p>
		<hr>
		
		<h1>H1 Heading</h1>
		<h2>H2 Heading</h2>
		<h3>H3 Heading</h3>
		<h4>H4 Heading</h4>
		<h5>H5 Heading</h5>
		<h6>H6 Heading</h6>
		
		<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
		
		<blockquote>How about some blockquote action with a <cite>cite</cite></blockquote>
		
		<p>This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.</p>
		
		<p>We add a few styles to <code>tables</code> and <code>fieldsets</code> to make them more legible, which are easily overridden with customs styles.</p>
		
		<ul>
			<li>Unordered list item 1</li>
			<li>Unordered list item 1</li>
			<li>Unordered list item 1</li>
		</ul>
		
		<ol>
			<li>Ordered list item 1</li>
			<li>Ordered list item 1</li>
			<li>Ordered list item 1</li>
		</ol>
		
		<dl title="Definition list">
			<dt>Definition term</dt>
			<dd>I'm the definition text</dd>
			<dt>Definition term</dt>
			<dd>I'm the definition text</dd>
		</dl>



		<table summary="This table lists all the JetBlue flights.">
		  <caption>Travel Itinerary</caption>
		  <thead>
		    <tr>
		       <th scope="col">Flight:</th>  
		      <th scope="col">From:</th>  
		      <th scope="col">To:</th>  
		    </tr>
		  </thead>
		  <tfoot>
		    <tr>
		      <td colspan="5">Total: 3 flights</td>
		    </tr>
		  </tfoot>
		  <tbody>
		  <tr>
		    <th scope="row">JetBlue 983</th>
		    <td>Boston (BOS)</td>
		    <td>New York (JFK)</td>
		  </tr>
		  <tr>
		    <th scope="row">JetBlue 354</th>
		    <td>San Francisco (SFO)</td>
		    <td>Los Angeles (LAX)</td>
		  </tr>
		<tr>
		    <th scope="row">JetBlue 465</th>
		    <td>New York (JFK)</td>
		    <td>Portland (PDX)</td>
		  </tr>
		  </tbody>
		</table>
	
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
						<li data-role="list-divider">Content Formatting</li>
						<li data-theme="a"><a href="content-html.html">Basic HTML styles</a></li>
						<li><a href="content-grids.html">Layout grids (columns)</a></li>
						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
						<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\content-themes.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Content Themes</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Theming content</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<div class="content-primary">
		<h2>Theming the content area</h2>
		<p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add the <code> data-theme</code> attribute to the content container, the background color will stop after the content. So there may be a gap in color between the content and fixed footer.)</p>
		<p>Additionally, the content area of a collapsible can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>

<code>
&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong> <strong>data-content-theme=&quot;a&quot;</strong>&gt;
</code>

		<h2>Theming collapsible blocks</h2>
		<p>To set the color of the collapsible header, add the <code> data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>

<code>		
&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong> data-theme=&quot;a&quot;&gt;</strong>
</code>
		<h2>Themed examples</h2>
		
		<p>Swatch <strong>"a"</strong> on content &amp; collapsible</p>
		<div class="ui-body ui-body-a">
			<h1>H1 Heading</h1>
			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
			<div data-role="collapsible" data-collapsed="true" data-theme="a">
				<h3>I'm a themed collapsible</h3>
				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div><!-- /collapsible -->
			<div data-role="collapsible" data-theme="a" data-content-theme="a">
				<h3>I'm a themed collapsible with a themed content</h3>
				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div>
		</div><!-- /themed container -->
		
		<p>Swatch <strong>"b"</strong> on content &amp; collapsible</p>
		<div class="ui-body ui-body-b">
			<h1>H1 Heading</h1>
			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
			<div data-role="collapsible" data-collapsed="true" data-theme="b">
				<h3>I'm a themed collapsible</h3>
				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div><!-- /collapsible -->
			<div data-role="collapsible" data-theme="b" data-content-theme="b">
				<h3>I'm a themed collapsible with a themed content</h3>
				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div>
		</div><!-- /themed container -->
		
		<p>Swatch <strong>"c"</strong> on content &amp; collapsible</p>
		<div class="ui-body ui-body-c">
			<h1>H1 Heading</h1>
			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
			<div data-role="collapsible" data-collapsed="true" data-theme="c">
				<h3>I'm a themed collapsible</h3>
				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div><!-- /collapsible -->
			<div data-role="collapsible" data-theme="c" data-content-theme="c">
				<h3>I'm a themed collapsible with a themed content</h3>
				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div>
		</div><!-- /themed container -->
		
		<p>Swatch <strong>"d"</strong> on content &amp; collapsible</p>
		<div class="ui-body ui-body-d">
			<h1>H1 Heading</h1>
			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
			<div data-role="collapsible" data-collapsed="true" data-theme="d">
				<h3>I'm a themed collapsible</h3>
				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div><!-- /collapsible -->
			<div data-role="collapsible" data-theme="d" data-content-theme="d">
				<h3>I'm a themed collapsible with a themed content</h3>
				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div>
		</div><!-- /themed container -->
		
		<p>Swatch <strong>"e"</strong> on content &amp; collapsible</p>
		<div class="ui-body ui-body-e">
			<h1>H1 Heading</h1>
			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
			<div data-role="collapsible" data-collapsed="true" data-theme="e">
				<h3>I'm a themed collapsible</h3>
				<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div><!-- /collapsible -->
			<div data-role="collapsible" data-theme="e" data-content-theme="e">
				<h3>I'm a themed collapsible with a themed content</h3>
				<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
			</div>
		</div><!-- /themed container -->
		
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
						<li data-role="list-divider">Content Formatting</li>
						<li><a href="content-html.html">Basic HTML styles</a></li>
						<li><a href="content-grids.html">Layout grids (columns)</a></li>
						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
						<li data-theme="a"><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\content\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Content formatting</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-index">

		<div data-role="header" data-theme="f">
		<h1>Content formatting</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">

		<p>The content of pages in jQuery Mobile is completely open-ended, but the jQuery Mobile framework provides a number of helpful tools and widgets &mdash; such as collapsible panels and multiple-column grid layouts &mdash; to make it easy to format your content for mobile devices.</p>

		

			
		<ul data-role="listview" data-inset="true">
			<li><a href="content-html.html">Basic HTML styles</a></li>
			<li><a href="content-grids.html">Layout grids (columns)</a></li>
			<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
			<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
			<li><a href="content-themes.html">Theming content</a></li>
			<!--<li><a href="api-content.html">API documentation</a></li>-->
		</ul>

	</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\docs-forms.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Forms</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Forms</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			<p>jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.</p>

			<h2>Form structure</h2>

			<p>All forms should be wrapped in a <code>form</code> tag that has an <code>action</code> and <code>method</code> that will handle the form data processing on the server.</p>

<code>
&lt;form action=&quot;form.php&quot; method=&quot;post&quot;&gt;
...
&lt;/form&gt;
</code>


<h2>Markup conventions</h2>
<p>When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via ordinary HTTP POST or GET still apply. Additionally, the <code>id</code> attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. You must be careful to use unique <code>id</code> attributes so there will be only one of each in the DOM. Be sure to pair them properly with <code>label</code> elements via the <code>for</code> attribute.</p>

	<h2>Mini sized elements</h2>

	<p>For a more compact version of all form elements and buttons, add the <code>data-mini="true"</code> attribute to the element to create a <a href="forms-all-mini.html">mini version</a>. This is useful in toolbars and tight spaces but is still finger-friendly. It's possible to add this attribute to a fieldcontainer to set this on a number of elements at once.</p>

<pre><code>
&lt;label for=&quot;basic&quot;&gt;Text Input:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;basic&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
	</code></pre>

	<p>This will produce an input that is not as tall as the standard version and has a smaller text size.</p>
	 <label for="mini">Text Input:</label>
	 <input type="text" name="name" id="mini" value="" data-mini="true" />

	<h2>Hiding labels accessibly</h2>
	<p>For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful <code>label</code>. To hide labels in a way that leaves them visible to assistive technologies—for example, when letting an element’s <code>placeholder</code> attribute serve as a label—apply the helper class <code>ui-hidden-accessible</code> to the label itself:</p>
<code>
<pre>
&lt;label for="username" <strong>class="ui-hidden-accessible"</strong>&gt;Username:&lt;/label&gt;
&lt;input type="text" name="username" id="username" value="" placeholder="Username"/&gt;
</pre>
</code>

	<p>To hide labels within a field container and adjust the layout accordingly, add the class <code>ui-hide-label</code> to the field container as in the following:</p>

<code>
<pre>
&lt;div data-role="fieldcontain" <strong>class="ui-hide-label"</strong>&gt;
	&lt;label for="username"&gt;Username:&lt;/label&gt;
	&lt;input type="text" name="username" id="username" value="" placeholder="Username"/&gt;
&lt;/div&gt;
</pre>
</code>

	<p>Both of the above examples will render as:</p>
	<div data-role="fieldcontain" class="ui-hide-label">
		<label for="username">Username:</label>
		<input type="text" name="username" id="username" value="" placeholder="Username" />
	</div>

	<p>While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.</p>


	<h2>Disabling form elements</h2>
	<p>All jQuery Mobile widgets can be disabled in the markup by adding the standard <code>disabled</code> attribute to the element, just like you would with native controls. Each form widget also has standard <code>disable</code> and <code>enable</code> methods that are documented with each form widget. Here are a few examples of disabled widgets: </p>

	<div data-role="fieldcontain">
     <label for="foo">Text Input:</label>
     <input type="text" name="name" id="foo" value="" disabled />
	</div>

	<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
    	<legend>Gender:</legend>
         	<input type="radio" name="gender" id="radio-female" value="f" disabled />
         	<label for="radio-female">Female</label>

         	<input type="radio" name="gender" id="radio-male" value="m" disabled  />
         	<label for="radio-male">Male</label>
    </fieldset>
    </div>

	<div data-role="fieldcontain">
	<label for="flip-s">Server status:</label>
	<select name="flip-s" id="flip-s" data-role="slider" disabled >
		<option value="off">Off</option>
		<option value="on">On</option>
	</select>
    </div>

    <div data-role="fieldcontain">
	<label for="slider">Max bandwidth:</label>
	<input type="range" name="slider" id="slider" value="0" min="0" max="100" disabled />
    </div>

	<div data-role="fieldcontain">
		<label for="select-choice-x" class="select">Shipping:</label>
		<select name="select-shipper" id="select-choice-x" disabled>
			<option></option>
			<option value="standard">Standard</option>
			<option value="rush">Rush</option>
			<option value="express">Express</option>
			<option value="overnight">Overnight</option>
		</select>
	</div>

	<p>Note that you can disable buttons created from <code>button</code> or <code>input</code>-based markup, but not links with a role of button. Links don't have a parallel disabled feature in HTML, but if you need to disable a link-based button (or any element), it's possible to apply the disabled class <code>ui-disabled</code> yourself with JavaScript to achieve the same effect. </p>

		<h2>Field containers</h2>
		<p>To improve the styling of labels and form elements on wider screens, wrap a <code>div</code> or <code>fieldset </code>with the <code> data-role="fieldcontain"</code> attribute around each label/form element. This framework aligns the input and associated label side-by-side, and breaks to stacked block-level elements below ~480px. The framework will also add a thin bottom border to act as a field separator.</p>

		<h2>Forms in toolbars</h2>
		<p>While all form elements are now tested to work correctly within <em>static</em> toolbars as of jQuery Mobile 1.1, we recommend extensive testing when using form elements within <em>fixed</em> toolbars or within any <code>position: fixed</code> elements. This can potentially trigger a number of unpredictable issues in various mobile browsers, Android 2.2/2.3 in particular (detailed in <a href="http://jqm.dev/docs/toolbars/bars-fixed.html">Known issues in Android 2.2/2.3</a>).</p>

		<p>For example:</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
	&lt;label for="name"&gt;Text Input:&lt;/label&gt;
	&lt;input type="text" name="name" id="name" value="" /&gt;
&lt;/div&gt;
</code></pre>

		<p>Will render as:</p>

		<div data-role="fieldcontain">
 			<label for="name">Text Input:</label>
 			<input type="text" name="name" id="name" value=""  />
		</div>

		<p>For additional examples, see the <a href="forms-all.html">form elements gallery</a></p>


	<h2>Auto-initialization of form elements</h2>
	<p>By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them. For instance, a <code>select</code> element will be found and initialized with the "selectmenu" plugin, while an <code>input</code> element with a <code>type="checkbox"</code> will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods. See options, methods, and events listed on each form plugin's documentation page for details. </p>

	<h2>Initializing groups of dynamically-injected form elements</h2>
	<p>If you should generate new markup client-side or load in content via AJAX and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (see below).</p>

	<p>For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:</p>

	<code>
	$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
	</code>

	<h2>Refreshing form elements</h2>

    <p>In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the <code>refresh</code> method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the <code>refresh</code> method:</p>
	<h4>Checkboxes:</h4>

<code>
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
</code>

<h4>Radios:</h4>
<code>
$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
</code>

<h4>Selects:</h4>
<code><pre>
var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
</pre></code>

<h4>Sliders:</h4>
<code>
$("input[type='range']").val(60).slider("refresh");
</code>

<h4>Flip switches (they use slider):</h4>

<code><pre>
var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");
</pre></code>

	<h2>Preventing auto-initialization of form elements</h2>
	<p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code> data-role="none"</code>. For example:</p>
	<pre><code>
&lt;label for=&quot;foo&quot;&gt;
&lt;select name=&quot;foo&quot; id=&quot;foo&quot; <strong>data-role=&quot;none&quot;</strong>&gt;
	&lt;option value="a"&gt;A&lt;/option&gt;
	&lt;option value="b"&gt;B&lt;/option&gt;
	&lt;option value="c"&gt;C&lt;/option&gt;
&lt;/select&gt;
</code></pre>


	<p>If you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>[data-role="none"]</code>). Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
		<pre><code>
$(document).bind('mobileinit',function(){
	<strong>$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";</strong>
});
		</code></pre>

  	<p>Alternately you can use the <code>data-enhance="false"</code> data attribute on a parent element with <code>$.mobile.ignoreContentEnabled</code> set to true. Beware though, this will incur a performance penalty for each and every element in the page that would otherwise be enhanced as jQuery Mobile must traverse the set of parents to look for those elements.</p>

<p>One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if <code>select</code> is included. If you wish to retain the native performance and appearance of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile, you can set <code>$.mobile.selectmenu.prototype.options.nativeMenu</code> to true in a <code>mobileinit</code> callback as a global setting or use <code>data-native-menu="true"</code> on a case by case basis.</p>


	<h2>File Inputs</h2>
	<p>Using a multipart form with a file input is not supported by ajax. In this case you should decorate the parent form with <code>data-ajax="false"</code> to ensure the form is submitted properly to the server.</p>


	</div><!--/content-primary -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview" data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">Form elements</li>
					<li data-theme="a"><a href="docs-forms.html">Form basics</a></li>
					<li><a href="forms-all.html">Form element gallery</a></li>
					<li><a href="forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="textinputs/">Text inputs</a></li>
					<li><a href="search/">Search inputs</a></li>
					<li><a href="slider/">Slider</a></li>
					<li><a href="switch/">Flip toggle switch</a></li>
					<li><a href="radiobuttons/">Radio buttons</a></li>
					<li><a href="checkboxes/">Checkboxes</a></li>
					<li><a href="selects/">Select menus</a></li>
					<li><a href="forms-themes.html">Theming forms</a></li>
					<li><a href="forms-all-native.html">Native form elements</a></li>
					<li><a href="forms-sample.html">Submitting forms</a></li>


				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>

</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-all-compare.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Form element size comparison</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Form sizes</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Form size comparison</h2>

			<p>All form controls accept a <code>data-mini="true"</code> attribute that renders a smaller version of the enhanced element. In the case of grouped buttons, the <code>data-mini="true"</code> attribute can be added to the containing controlgroup.</p>

			<style>
				table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
				th { text-align:left; margin-right:50px; display:none; }
				th h3 { margin:.6em 0; }
				th, td { vertical-align:top; border-top:1px solid #ccc; padding: 4px 10px; }
			</style>

		<table margin="0">
			<tr>
				<th><h3><a href="search/index.html">Search</a></h3></th>
				<td>
					<label for="search-full" class="ui-hidden-accessible">Search Input:</label>
			        <input type="search" name="name" id="search-full" value="" />
				</td>
				<td>
					<label for="text-mini" class="ui-hidden-accessible">Search Input:</label>
			        <input type="search" name="name" id="search-mini" value="" data-mini="true" />	
				</td>
			</tr>
			<tr>
				<th><h3><a href="textinputs/index.html">Text</a></h3></th>
				<td>
					<label for="text-full" class="ui-hidden-accessible">Text Input:</label>
			        <input type="text" name="name" id="text-full" value="" />
				</td>
				<td>
					<label for="text-mini" class="ui-hidden-accessible">Text Input:</label>
			        <input type="text" name="name" id="text-mini" value="" data-mini="true" />	
				</td>
			</tr>
			<tr>
				<th><h3><a href="textinputs/index.html">Textarea</a></h3></th>
				<td>
					<label for="textarea-full" class="ui-hidden-accessible">Textarea:</label>
					<textarea name="textarea" id="textarea-full"></textarea>
				</td>
				<td>
					<label for="textarea-mini" class="ui-hidden-accessible">Textarea:</label>
					<textarea name="textarea" id="textarea-mini" data-mini="true"></textarea>	
				</td>
			</tr>
			<tr>
				<th><h3><a href="switch/index.html">Switch</a></h3></th>
				<td>
					<label for="flip-full" class="ui-hidden-accessible">Flip switch:</label>
					<select name="slider" id="flip-full" data-role="slider">
						<option value="off">Off</option>
						<option value="on">On</option>
					</select>
				</td>
				<td>
					<label for="flip-mini" class="ui-hidden-accessible">Flip switch:</label>
					<select name="slider" id="flip-mini" data-role="slider" data-mini="true">
						<option value="off">Off</option>
						<option value="on">On</option>
					</select>	
				</td>
			</tr>
			<tr>
				<th><h3><a href="slider/index.html">Slider</a></h3></th>
				<td style="padding-top:14px;">
					<label for="slider-full" class="ui-hidden-accessible">Input slider:</label>
					<input type="range" name="slider-1" id="slider-full" value="25" min="0" max="100" data-highlight="true" class="ui-hidden-accessible" />
				</td>
				<td style="padding-top:16px;">
					<label for="slider-mini" class="ui-hidden-accessible">Input slider:</label>
					<input type="range" name="slider-1" id="slider-mini" value="25" min="0" max="100" data-highlight="true" data-mini="true" class="ui-hidden-accessible" />
				</td>
			</tr>
			<tr>
				<th><h3><a href="select/index.html">Select</a></h3></th>
				<td>
					<label for="select-full" class="ui-hidden-accessible">Shipping method:</label>
					<select name="select-choice-0" id="select-full">
						<option value="standard">Standard: 7 day</option>
						<option value="rush">Rush: 3 days</option>
						<option value="express">Express: next day</option>
						<option value="overnight">Overnight</option>
					</select>
				</td>
				<td>
					<label for="select-mini" class="ui-hidden-accessible">Shipping method:</label>
					<select name="select-choice-0" id="select-mini" data-mini="true">
						<option value="standard">Standard: 7 day</option>
						<option value="rush">Rush: 3 days</option>
						<option value="express">Express: next day</option>
						<option value="overnight">Overnight</option>
					</select>
				</td>
			</tr>
			<tr>
				<th><h3><a href="checkboxes/index.html">Checkbox</a></h3></th>
				<td>
					<fieldset data-role="controlgroup">
						<input type="checkbox" name="checkbox-1a" id="c-full-1" />
						<label for="c-full-1">Apples</label>
						<input type="checkbox" name="checkbox-2a" id="c-full-2" />
						<label for="c-full-2">Oranges</label>
						<input type="checkbox" name="checkbox-3a" id="c-full-3" />
						<label for="c-full-3">Bananas</label>
				    </fieldset>
				</td>
				<td>
					<fieldset data-role="controlgroup" data-mini="true">
						<input type="checkbox" name="checkbox-1a" id="c-mini-1" />
						<label for="c-mini-1">Apples</label>
						<input type="checkbox" name="checkbox-2a" id="c-mini-2" />
						<label for="c-mini-2">Oranges</label>
						<input type="checkbox" name="checkbox-3a" id="c-mini-3" />
						<label for="c-mini-3">Bananas</label>
				    </fieldset>
				</td>
			</tr>
			<tr>
				<th><h3><a href="checkboxes/index.html">Checkbox</a></h3></th>
				<td>
					<fieldset data-role="controlgroup" data-type="horizontal">
						<input type="checkbox" name="checkbox-1a" id="c-full-4" />
						<label for="c-full-4">B</label>
						<input type="checkbox" name="checkbox-2a" id="c-full-5" />
						<label for="c-full-5">I</label>
						<input type="checkbox" name="checkbox-3a" id="c-full-6" />
						<label for="c-full-6">U</label>
				    </fieldset>
				</td>
				<td>
					<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
						<input type="checkbox" name="checkbox-1a" id="c-mini-4" />
						<label for="c-mini-4">B</label>
						<input type="checkbox" name="checkbox-2a" id="c-mini-5" />
						<label for="c-mini-5">I</label>
						<input type="checkbox" name="checkbox-3a" id="c-mini-6" />
						<label for="c-mini-6">U</label>
				    </fieldset>
				</td>
			</tr>
			<tr>
				<th><h3><a href="radiobuttons/index.html">Radio buttons</a></h3></th>
				<td>
					<fieldset data-role="controlgroup">
				         	<input type="radio" name="radio-choice-1" id="radio-full-1" value="choice-1" checked="checked" />
				         	<label for="radio-full-1">Credit</label>
				         	<input type="radio" name="radio-choice-1" id="radio-full-2" value="choice-2"  />
				         	<label for="radio-full-2">Debit</label>
				         	<input type="radio" name="radio-choice-1" id="radio-full-3" value="choice-3"  />
				         	<label for="radio-full-3">Cash</label>
				    </fieldset>
				</td>
				<td>
					<fieldset data-role="controlgroup" data-mini="true">
				         	<input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />
				         	<label for="radio-mini-1">Credit</label>
				         	<input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2"  />
				         	<label for="radio-mini-2">Debit</label>
				         	<input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3"  />
				         	<label for="radio-mini-3">Cash</label>
				    </fieldset>
				</td>
			</tr>
			<tr>
				<th><h3><a href="radiobuttons/index.html">Radio toggle</a></h3></th>
				<td>
					<fieldset data-role="controlgroup" data-type="horizontal">
				         	<input type="radio" name="radio-choice-1" id="radio-full-4" value="choice-1" checked="checked" />
				         	<label for="radio-full-4">Design</label>
				         	<input type="radio" name="radio-choice-1" id="radio-full-5" value="choice-2"  />
				         	<label for="radio-full-5">Code</label>
				    </fieldset>
				</td>
				<td>
					<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				         	<input type="radio" name="radio-choice-1" id="radio-mini-4" value="choice-1" checked="checked" />
				         	<label for="radio-mini-4">Design</label>
				         	<input type="radio" name="radio-choice-1" id="radio-mini-5" value="choice-2"  />
				         	<label for="radio-mini-5">Code</label>
				    </fieldset>
				</td>
			</tr>
			<tr>
				<th><h3><a href="radiobuttons/index.html">Radio toggle</a></h3></th>
				<td>
					<button type="submit">Button</button>
				</td>
				<td>
					<button type="submit" data-mini="true">Button</button>
				</td>
			</tr>
		</table>
			
		</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="docs-forms.html">Form basics</a></li>
					<li><a href="forms-all.html">Form element gallery</a></li>
					<li data-theme="a"><a href="forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="textinputs/">Text inputs</a></li>
					<li><a href="search/">Search inputs</a></li>
					<li><a href="slider/">Slider</a></li>
					<li><a href="switch/">Flip toggle switch</a></li>
					<li><a href="radiobuttons/">Radio buttons</a></li>
					<li><a href="checkboxes/">Checkboxes</a></li>
					<li><a href="selects/">Select menus</a></li>
					<li><a href="forms-themes.html">Theming forms</a></li>
					<li><a href="forms-all-native.html">Native form elements</a></li>
					<li><a href="forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-all-mini.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Gallery of Form Controls</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Mini forms</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Mini form elements</h2>

			<p>All form controls accept a <code>data-mini="true"</code> attribute that renders a smaller version of the <a href="forms-all.html">standard-sized</a> form elements. In the case of grouped buttons, the <code>data-mini="true"</code> attribute can be added to the containing controlgroup. <a href="forms-all-compare.html">Compare mini and normal</a> form elements side-by-side.</p>

			<div data-role="fieldcontain">
	         <label for="name">Text Input:</label>
	         <input type="text" name="name" id="name" value="" data-mini="true" />
			</div>

			<div data-role="fieldcontain">
			<label for="textarea">Textarea:</label>
			<textarea cols="40" rows="8" name="textarea" id="textarea" data-mini="true"></textarea>
			</div>

			<div data-role="fieldcontain">
	         <label for="search">Search Input:</label>
	         <input type="search" name="password" id="search" value=""  data-mini="true" />
			</div>

			<div data-role="fieldcontain">
				<label for="slider2">Flip switch:</label>
				<select name="slider2" id="slider2" data-role="slider" data-mini="true">
					<option value="off">Off</option>
					<option value="on">On</option>
				</select>
			</div>

			<div data-role="fieldcontain">
				<label for="slider">Slider:</label>
			 	<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" data-mini="true" />
			</div>

			<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-mini="true">
				<legend>Choose as many snacks as you'd like:</legend>
				<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
				<label for="checkbox-1a">Cheetos</label>

				<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
				<label for="checkbox-2a">Doritos</label>

				<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
				<label for="checkbox-3a">Fritos</label>

				<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
				<label for="checkbox-4a">Sun Chips</label>
		    </fieldset>
			</div>

			<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
		    	<legend>Font styling:</legend>
		    	<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
				<label for="checkbox-6">b</label>

				<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
				<label for="checkbox-7"><em>i</em></label>

				<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
				<label for="checkbox-8">u</label>
		    </fieldset>
			</div>

			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup" data-mini="true">
			    	<legend>Choose a pet:</legend>
			         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
			         	<label for="radio-choice-1">Cat</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
			         	<label for="radio-choice-2">Dog</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
			         	<label for="radio-choice-3">Hamster</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
			         	<label for="radio-choice-4">Lizard</label>
			    </fieldset>
			</div>

			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
			     	<legend>Layout view:</legend>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
			         	<label for="radio-choice-c">List</label>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
			         	<label for="radio-choice-d">Grid</label>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
			         	<label for="radio-choice-e">Gallery</label>
			    </fieldset>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-1" class="select">Choose shipping method:</label>
				<select name="select-choice-1" id="select-choice-1" data-mini="true">
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-3" class="select">Your state:</label>
				<select name="select-choice-3" id="select-choice-3" data-mini="true">
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
					<option value="CT">Connecticut</option>
					<option value="DE">Delaware</option>
					<option value="FL">Florida</option>
					<option value="GA">Georgia</option>
					<option value="HI">Hawaii</option>
					<option value="ID">Idaho</option>
					<option value="IL">Illinois</option>
					<option value="IN">Indiana</option>
					<option value="IA">Iowa</option>
					<option value="KS">Kansas</option>
					<option value="KY">Kentucky</option>
					<option value="LA">Louisiana</option>
					<option value="ME">Maine</option>
					<option value="MD">Maryland</option>
					<option value="MA">Massachusetts</option>
					<option value="MI">Michigan</option>
					<option value="MN">Minnesota</option>
					<option value="MS">Mississippi</option>
					<option value="MO">Missouri</option>
					<option value="MT">Montana</option>
					<option value="NE">Nebraska</option>
					<option value="NV">Nevada</option>
					<option value="NH">New Hampshire</option>
					<option value="NJ">New Jersey</option>
					<option value="NM">New Mexico</option>
					<option value="NY">New York</option>
					<option value="NC">North Carolina</option>
					<option value="ND">North Dakota</option>
					<option value="OH">Ohio</option>
					<option value="OK">Oklahoma</option>
					<option value="OR">Oregon</option>
					<option value="PA">Pennsylvania</option>
					<option value="RI">Rhode Island</option>
					<option value="SC">South Carolina</option>
					<option value="SD">South Dakota</option>
					<option value="TN">Tennessee</option>
					<option value="TX">Texas</option>
					<option value="UT">Utah</option>
					<option value="VT">Vermont</option>
					<option value="VA">Virginia</option>
					<option value="WA">Washington</option>
					<option value="WV">West Virginia</option>
					<option value="WI">Wisconsin</option>
					<option value="WY">Wyoming</option>
				</select>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-a" class="select">Choose shipping method:</label>
				<select name="select-choice-a" id="select-choice-a" data-native-menu="false" data-mini="true">
					<option>Custom menu example</option>
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</div>

		<div class="ui-body ui-body-b">
		<fieldset class="ui-grid-a">
				<div class="ui-block-a"><button type="submit" data-theme="d" data-mini="true">Cancel</button></div>
				<div class="ui-block-b"><button type="submit" data-theme="a" data-mini="true">Submit</button></div>
	    </fieldset>
		</div>
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="docs-forms.html">Form basics</a></li>
					<li><a href="forms-all.html">Form element gallery</a></li>
					<li data-theme="a"><a href="forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="textinputs/">Text inputs</a></li>
					<li><a href="search/">Search inputs</a></li>
					<li><a href="slider/">Slider</a></li>
					<li><a href="switch/">Flip toggle switch</a></li>
					<li><a href="radiobuttons/">Radio buttons</a></li>
					<li><a href="checkboxes/">Checkboxes</a></li>
					<li><a href="selects/">Select menus</a></li>
					<li><a href="forms-themes.html">Theming forms</a></li>
					<li><a href="forms-all-native.html">Native form elements</a></li>
					<li><a href="forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-all-native.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Native Form Controls</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Forms</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Native form elements &amp; buttons</h2>

			<p>Although the framework automatically enhances form elements and buttons into <a href="forms-all.html">touch input optimized controls</a> to streamline development, it's easy to tell jQuery Mobile to leave these elements alone so the standard, native control can be used instead.</p>
			<p>Adding the <code>data-role="none"</code> attribute to any form or button element tells the framework to not apply any enhanced styles or scripting. The examples below all have this attribute in place to demonstrate the effect. You may need to write custom styles to lay out your form controls because we try to leave all the default styling intact.</p>
			<p>As of Version 1.1 adding the <code>data-enhance="false"</code> attribute to any container will tell the framework, not to enhance any element inside. To activate this functionality, <code>$.mobile.ignoreContentEnabled</code> must be set to <code>true</code>. View <a href="../api/globalconfig.html">Configuring Defaults</a> before using it.</p>

			<div data-role="fieldcontain">
	         <label for="name">Text Input:</label>
	         <input type="text" name="name" id="name" value="" data-role="none" />
			</div>

			<div data-role="fieldcontain">
			<label for="textarea">Textarea:</label>
			<textarea cols="40" rows="8" name="textarea" id="textarea" data-role="none"></textarea>
			</div>

			<div data-role="fieldcontain">
	         <label for="search">Search Input:</label>
	         <input type="search" name="password" id="search" value="" data-role="none" />
			</div>

			<div data-role="fieldcontain">
				<label for="slider2">Flip switch:</label>
				<select name="slider2" id="slider2" data-role="none">
					<option value="off">Off</option>
					<option value="on">On</option>
				</select>
			</div>

			<div data-role="fieldcontain">
				<label for="slider">Slider:</label>
			 	<input type="range" name="slider" id="slider" value="0" min="0" max="100" data-role="none" />
			</div>

			<div data-role="fieldcontain">
			<fieldset data-role="controlgroup">
				<legend>Choose as many snacks as you'd like:</legend>
				<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" data-role="none" />
				<label for="checkbox-1a">Cheetos</label>

				<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" data-role="none" />
				<label for="checkbox-2a">Doritos</label>

				<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" data-role="none" />
				<label for="checkbox-3a">Fritos</label>

				<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" data-role="none" />
				<label for="checkbox-4a">Sun Chips</label>
		    </fieldset>
			</div>

			<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-type="horizontal">
		    	<legend>Font styling:</legend>
		    	<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" data-role="none" />
				<label for="checkbox-6">b</label>

				<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" data-role="none" />
				<label for="checkbox-7"><em>i</em></label>

				<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" data-role="none" />
				<label for="checkbox-8">u</label>
		    </fieldset>
			</div>

			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup">
			    	<legend>Choose a pet:</legend>
			         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" data-role="none" />
			         	<label for="radio-choice-1">Cat</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" data-role="none" />
			         	<label for="radio-choice-2">Dog</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" data-role="none" />
			         	<label for="radio-choice-3">Hamster</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" data-role="none" />
			         	<label for="radio-choice-4">Lizard</label>
			    </fieldset>
			</div>

			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup" data-type="horizontal">
			     	<legend>Layout view:</legend>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" data-role="none" />
			         	<label for="radio-choice-c">List</label>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" data-role="none" />
			         	<label for="radio-choice-d">Grid</label>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" data-role="none" />
			         	<label for="radio-choice-e">Gallery</label>
			    </fieldset>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-1" class="select">Choose shipping method:</label>
				<select name="select-choice-1" id="select-choice-1" data-role="none">
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-3" class="select">Your state:</label>
				<select name="select-choice-3" id="select-choice-3" data-role="none">
					<option>Choose...</option>
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
					<option value="CT">Connecticut</option>
					<option value="DE">Delaware</option>
					<option value="FL">Florida</option>
					<option value="GA">Georgia</option>
					<option value="HI">Hawaii</option>
					<option value="ID">Idaho</option>
					<option value="IL">Illinois</option>
					<option value="IN">Indiana</option>
					<option value="IA">Iowa</option>
					<option value="KS">Kansas</option>
					<option value="KY">Kentucky</option>
					<option value="LA">Louisiana</option>
					<option value="ME">Maine</option>
					<option value="MD">Maryland</option>
					<option value="MA">Massachusetts</option>
					<option value="MI">Michigan</option>
					<option value="MN">Minnesota</option>
					<option value="MS">Mississippi</option>
					<option value="MO">Missouri</option>
					<option value="MT">Montana</option>
					<option value="NE">Nebraska</option>
					<option value="NV">Nevada</option>
					<option value="NH">New Hampshire</option>
					<option value="NJ">New Jersey</option>
					<option value="NM">New Mexico</option>
					<option value="NY">New York</option>
					<option value="NC">North Carolina</option>
					<option value="ND">North Dakota</option>
					<option value="OH">Ohio</option>
					<option value="OK">Oklahoma</option>
					<option value="OR">Oregon</option>
					<option value="PA">Pennsylvania</option>
					<option value="RI">Rhode Island</option>
					<option value="SC">South Carolina</option>
					<option value="SD">South Dakota</option>
					<option value="TN">Tennessee</option>
					<option value="TX">Texas</option>
					<option value="UT">Utah</option>
					<option value="VT">Vermont</option>
					<option value="VA">Virginia</option>
					<option value="WA">Washington</option>
					<option value="WV">West Virginia</option>
					<option value="WI">Wisconsin</option>
					<option value="WY">Wyoming</option>
				</select>
			</div>

				


			<p><strong>Button</strong> based button:</p>
			<button data-role="none">Button element</button>

			<p><strong>Input type="button"</strong> based button:</p>
			<input type="button" value="Input type=button" data-role="none" />

			<p><strong>Input type="submit"</strong> based button:</p>
			<input type="submit" value="Input type=submit" data-role="none" />

			<p><strong>Input type="reset"</strong> based button:</p>
			<input type="reset" value="Input type=reset" data-role="none" />

			<p><strong>Input type="image"</strong> based button:</p>
			<input type="image" src="../_assets/images/jquery-logo.png" style="width:120px; padding:5px; background:#fff; border:1px solid #999;" value="Input type=image" data-role="none" />

	</form>

	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="docs-forms.html">Form basics</a></li>
					<li><a href="forms-all.html">Form element gallery</a></li>
					<li><a href="forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="textinputs/">Text inputs</a></li>
					<li><a href="search/">Search inputs</a></li>
					<li><a href="slider/">Slider</a></li>
					<li><a href="switch/">Flip toggle switch</a></li>
					<li><a href="radiobuttons/">Radio buttons</a></li>
					<li><a href="checkboxes/">Checkboxes</a></li>
					<li><a href="selects/">Select menus</a></li>
					<li><a href="forms-themes.html">Theming forms</a></li>
					<li data-theme="a"><a href="forms-all-native.html">Native form elements</a></li>
					<li><a href="forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-all.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Gallery of Form Controls</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Forms</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Form elements</h2>

			<p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. Browsers that don't support the custom controls will still deliver a usable experience because all are based on native form elements.</p>
			
			<p>There is a complete set of <a href="forms-all-mini.html">mini-sized</a> form elements which are useful for toolbars or tighter spaces. <a href="forms-all-compare.html">Compare mini and normal</a> form elements side-by-side.</p>

			<div data-role="fieldcontain">
	         <label for="name">Text Input:</label>
	         <input type="text" name="name" id="name" value=""  />
			</div>

			<div data-role="fieldcontain">
			<label for="textarea">Textarea:</label>
			<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
			</div>

			<div data-role="fieldcontain">
	         <label for="search">Search Input:</label>
	         <input type="search" name="password" id="search" value=""  />
			</div>

			<div data-role="fieldcontain">
				<label for="slider2">Flip switch:</label>
				<select name="slider2" id="slider2" data-role="slider">
					<option value="off">Off</option>
					<option value="on">On</option>
				</select>
			</div>

			<div data-role="fieldcontain">
				<label for="slider">Slider:</label>
			 	<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true"  />
			</div>

			<div data-role="fieldcontain">
			<fieldset data-role="controlgroup">
				<legend>Choose as many snacks as you'd like:</legend>
				<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
				<label for="checkbox-1a">Cheetos</label>

				<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
				<label for="checkbox-2a">Doritos</label>

				<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
				<label for="checkbox-3a">Fritos</label>

				<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
				<label for="checkbox-4a">Sun Chips</label>
		    </fieldset>
			</div>

			<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-type="horizontal">
		    	<legend>Font styling:</legend>
		    	<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
				<label for="checkbox-6">b</label>

				<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
				<label for="checkbox-7"><em>i</em></label>

				<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
				<label for="checkbox-8">u</label>
		    </fieldset>
			</div>

			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup">
			    	<legend>Choose a pet:</legend>
			         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
			         	<label for="radio-choice-1">Cat</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
			         	<label for="radio-choice-2">Dog</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
			         	<label for="radio-choice-3">Hamster</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
			         	<label for="radio-choice-4">Lizard</label>
			    </fieldset>
			</div>

			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup" data-type="horizontal">
			     	<legend>Layout view:</legend>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
			         	<label for="radio-choice-c">List</label>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
			         	<label for="radio-choice-d">Grid</label>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
			         	<label for="radio-choice-e">Gallery</label>
			    </fieldset>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-1" class="select">Choose shipping method:</label>
				<select name="select-choice-1" id="select-choice-1">
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-3" class="select">Your state:</label>
				<select name="select-choice-3" id="select-choice-3">
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
					<option value="CT">Connecticut</option>
					<option value="DE">Delaware</option>
					<option value="FL">Florida</option>
					<option value="GA">Georgia</option>
					<option value="HI">Hawaii</option>
					<option value="ID">Idaho</option>
					<option value="IL">Illinois</option>
					<option value="IN">Indiana</option>
					<option value="IA">Iowa</option>
					<option value="KS">Kansas</option>
					<option value="KY">Kentucky</option>
					<option value="LA">Louisiana</option>
					<option value="ME">Maine</option>
					<option value="MD">Maryland</option>
					<option value="MA">Massachusetts</option>
					<option value="MI">Michigan</option>
					<option value="MN">Minnesota</option>
					<option value="MS">Mississippi</option>
					<option value="MO">Missouri</option>
					<option value="MT">Montana</option>
					<option value="NE">Nebraska</option>
					<option value="NV">Nevada</option>
					<option value="NH">New Hampshire</option>
					<option value="NJ">New Jersey</option>
					<option value="NM">New Mexico</option>
					<option value="NY">New York</option>
					<option value="NC">North Carolina</option>
					<option value="ND">North Dakota</option>
					<option value="OH">Ohio</option>
					<option value="OK">Oklahoma</option>
					<option value="OR">Oregon</option>
					<option value="PA">Pennsylvania</option>
					<option value="RI">Rhode Island</option>
					<option value="SC">South Carolina</option>
					<option value="SD">South Dakota</option>
					<option value="TN">Tennessee</option>
					<option value="TX">Texas</option>
					<option value="UT">Utah</option>
					<option value="VT">Vermont</option>
					<option value="VA">Virginia</option>
					<option value="WA">Washington</option>
					<option value="WV">West Virginia</option>
					<option value="WI">Wisconsin</option>
					<option value="WY">Wyoming</option>
				</select>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-a" class="select">Choose shipping method:</label>
				<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
					<option>Custom menu example</option>
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</div>

		<div class="ui-body ui-body-b">
		<fieldset class="ui-grid-a">
				<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
				<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
	    </fieldset>
		</div>
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="docs-forms.html">Form basics</a></li>
					<li data-theme="a"><a href="forms-all.html">Form element gallery</a></li>
					<li><a href="forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="textinputs/">Text inputs</a></li>
					<li><a href="search/">Search inputs</a></li>
					<li><a href="slider/">Slider</a></li>
					<li><a href="switch/">Flip toggle switch</a></li>
					<li><a href="radiobuttons/">Radio buttons</a></li>
					<li><a href="checkboxes/">Checkboxes</a></li>
					<li><a href="selects/">Select menus</a></li>
					<li><a href="forms-themes.html">Theming forms</a></li>
					<li><a href="forms-all-native.html">Native form elements</a></li>
					<li><a href="forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-sample.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Sample Form Submit</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Forms</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<div class="content-primary">

			<h2>Ajax form submission</h2>

			<p>In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure your form submits as intended, be sure to specify <code>action</code> and <code>method</code> properties on your form element. When unspecified, the method will default to <code>get</code>, and the <code>action</code> will default to the current page's relative path (found via <code>$.mobile.path.get()</code>)</p>
			<p>Forms also accept attributes for transitions just like anchors, such as <code>data-transition="pop"</code> and <code>data-direction="reverse"</code>. To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the <code>data-ajax="false"</code> attribute. The <code>target</code> attribute (as in <code>target="_blank"</code>) is respected on forms as well, and will default to the browser's handling of that target when the form submits. Note that unlike anchors, the <code>rel</code> attribute is not allowed on forms.</p>


            <h2>Default Ajax form example</h2>
            <p>This demonstrates automated ajax handling of form submissions. The form below is configured to send a <code>GET</code> request to <code>forms-sample-response.php</code>. On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately. Keep in mind that just like ordinary HTTP form submissions, jQuery Mobile allows <code>GET</code> result pages to be bookmarked by updating the URL hash when the response returns successfully. Also like ordinary form submissions, <code>POST</code> requests do not contain query parameters in the hash, so they are not bookmarkable.</p>
			<form action="forms-sample-response.php" method="get" class="ui-body ui-body-a ui-corner-all">
				<fieldset>
					<div data-role="fieldcontain">
						<label for="shipping" class="select">Shipping method:</label>
						<select name="shipping" id="shipping">
							<option value="Standard shipping">Standard: 7 day</option>
							<option value="Rush shipping">Rush: 3 days</option>
							<option value="Express shipping">Express: next day</option>
							<option value="Overnight shipping">Overnight</option>
						</select>
					</div>
					<button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
				</fieldset>
			</form>

			<h2>Non-Ajax form example</h2>

			 <p>To prevent form submissions from being automatically handled with Ajax, add the <code>data-ajax="false"</code> attribute to the form element. You can also turn off Ajax form handling completely via the <code>ajaxEnabled</code> <a href="../api/globalconfig.html">global config option</a>.</p>

            <p>The form below is identical to the one above except for the addition of the <code>data-ajax="false"</code> attribute. When the submit button is pressed, it will result in a full page refresh.</p>
			<form action="forms-sample-response.php" method="get" data-ajax="false" class="ui-body ui-body-a ui-corner-all">
				<fieldset>
					<div data-role="fieldcontain">
						<label for="shipping" class="select">Shipping method:</label>
						<select name="shipping" id="shipping">
							<option value="Standard shipping">Standard: 7 day</option>
							<option value="Rush shipping">Rush: 3 days</option>
							<option value="Express shipping">Express: next day</option>
							<option value="Overnight shipping">Overnight</option>
						</select>
					</div>
					<button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
				</fieldset>
			</form>

			<h2>Self-submitting Forms</h2>
			<p>You can submit forms to the same URL you're currently viewing by setting the form's <code>action</code> attribute to that URL. <A href="forms-sample-selfsubmit.php">This page demonstrates.</a></p>
			<p>When a <code>POST</code> request is submitted to a page that's already in the DOM (which would commonly happen when submitting a form to the same URL currently in view), the response URL will be identical to that existing page, as <code>POST</code> requests do not append query string parameters to the URL. In this situation, jQuery Mobile will replace the page that submitted the form with the page returned in the response body.</p>

			</div><!--/content-primary -->

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">Form elements</li>
							<li><a href="docs-forms.html">Form basics</a></li>
							<li><a href="forms-all.html">Form element gallery</a></li>
							<li><a href="forms-all-mini.html">Mini form element gallery</a></li>
              <li><a href="textinputs/">Text inputs</a></li>
							<li><a href="search/">Search inputs</a></li>
							<li><a href="slider/">Slider</a></li>
							<li><a href="switch/">Flip toggle switch</a></li>
							<li><a href="radiobuttons/">Radio buttons</a></li>
							<li><a href="checkboxes/">Checkboxes</a></li>
							<li><a href="selects/">Select menus</a></li>
							<li><a href="forms-themes.html">Theming forms</a></li>
							<li><a href="forms-all-native.html">Native form elements</a></li>
							<li data-theme="a"><a href="forms-sample.html">Submitting forms</a></li>


						</ul>
				</div>
			</div>

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\forms-themes.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Forms</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Theming forms</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
    	<div class="content-primary">
	
    <h2>Form themes</h2>
    <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages and forms are styled. By default all form elements inside a container will automatically adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The <code> data-theme</code> attribute can be applied to any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.</p> 
    
    <p>All the form elements in the examples below use the same HTML code with no theme swatch specified on the individual form elements. The only difference between each example block code is a <code> data-theme</code> swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.</p>
			
	<form>
	
	<h2>Body swatch "a"</h2>
	<div class="ui-body ui-body-a">
			
		<div data-role="fieldcontain">
         <label for="name-a">Text Input:</label>
         <input type="text" name="name" id="name-a" value=""  />
		</div>
		
		<div data-role="fieldcontain">
			<label for="switch-a">Flip switch:</label>
			<select name="switch-a" id="switch-a" data-role="slider">
				<option value="off">Off</option>
				<option value="on">On</option>
			</select> 
		</div>
		
		<div data-role="fieldcontain">
			<label for="slider-a">Slider:</label>
		 	<input type="range" name="slider" id="slider-a" value="0" min="0" max="100"  />
		</div>
		
		
		<div data-role="fieldcontain">
		<fieldset data-role="controlgroup" data-type="horizontal">
	    	<legend>Font styling:</legend>
	    	<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
			<label for="checkbox-6a">b</label>

			<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
			<label for="checkbox-7a"><em>i</em></label>

			<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
			<label for="checkbox-8a">u</label>    
	    </fieldset>
		</div>
	
		<div data-role="fieldcontain">
		    <fieldset data-role="controlgroup">
		    	<legend>Choose a pet:</legend>
		         	<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
		         	<label for="radio-choice-1a">Cat</label>

		         	<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2"  />
		         	<label for="radio-choice-2a">Dog</label>

		         	<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3"  />
		         	<label for="radio-choice-3a">Hamster</label>

		         	<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4"  />
		         	<label for="radio-choice-4a">Lizard</label>
		    </fieldset>
		</div>
		
		<div data-role="fieldcontain">
			<label for="select-choice-a" class="select">Choose shipping method:</label>
			<select name="select-choice-a" id="select-choice-a">
				<option value="standard">Standard: 7 day</option>
				<option value="rush">Rush: 3 days</option>
				<option value="express">Express: next day</option>
				<option value="overnight">Overnight</option>
			</select>
		</div>
		
		</div><!-- /body-a -->
		
		<h2>Body swatch "b"</h2>
		<div class="ui-body ui-body-b">

			<div data-role="fieldcontain">
	         <label for="name-b">Text Input:</label>
	         <input type="text" name="name" id="name-b" value=""  />
			</div>

			<div data-role="fieldcontain">
				<label for="switch-b">Flip switch:</label>
				<select name="switch-b" id="switch-b" data-role="slider">
					<option value="off">Off</option>
					<option value="on">On</option>
				</select> 
			</div>

			<div data-role="fieldcontain">
				<label for="slider-b">Slider:</label>
			 	<input type="range" name="slider" id="slider-b" value="0" min="0" max="100"  />
			</div>


			<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-type="horizontal">
		    	<legend>Font styling:</legend>
		    	<input type="checkbox" name="checkbox-6b" id="checkbox-6b" class="custom" />
				<label for="checkbox-6b">b</label>

				<input type="checkbox" name="checkbox-7b" id="checkbox-7b" class="custom" />
				<label for="checkbox-7b"><em>i</em></label>

				<input type="checkbox" name="checkbox-8b" id="checkbox-8b" class="custom" />
				<label for="checkbox-8b">u</label>    
		    </fieldset>
			</div>

			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup">
			    	<legend>Choose a pet:</legend>
			         	<input type="radio" name="radio-choice-1" id="radio-choice-1b" value="choice-1" />
			         	<label for="radio-choice-1b">Cat</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-2b" value="choice-2"  />
			         	<label for="radio-choice-2b">Dog</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-3b" value="choice-3"  />
			         	<label for="radio-choice-3b">Hamster</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-4b" value="choice-4"  />
			         	<label for="radio-choice-4b">Lizard</label>
			    </fieldset>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-b" class="select">Choose shipping method:</label>
				<select name="select-choice-b" id="select-choice-b">
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</div>

			
			</div><!-- /body-b -->


			<h2>Body swatch "c"</h2>
			<div class="ui-body ui-body-c">

				<div data-role="fieldcontain">
		         <label for="name-c">Text Input:</label>
		         <input type="text" name="name" id="name-c" value=""  />
				</div>

				<div data-role="fieldcontain">
					<label for="switch-c">Flip switch:</label>
					<select name="switch-c" id="switch-c" data-role="slider">
						<option value="off">Off</option>
						<option value="on">On</option>
					</select> 
				</div>

				<div data-role="fieldcontain">
					<label for="slider-c">Slider:</label>
				 	<input type="range" name="slider" id="slider-c" value="0" min="0" max="100"  />
				</div>


				<div data-role="fieldcontain">
				<fieldset data-role="controlgroup" data-type="horizontal">
			    	<legend>Font styling:</legend>
			    	<input type="checkbox" name="checkbox-6c" id="checkbox-6c" class="custom" />
					<label for="checkbox-6c">b</label>

					<input type="checkbox" name="checkbox-7c" id="checkbox-7c" class="custom" />
					<label for="checkbox-7c"><em>i</em></label>

					<input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
					<label for="checkbox-8c">u</label>    
			    </fieldset>
				</div>

				<div data-role="fieldcontain">
				    <fieldset data-role="controlgroup">
				    	<legend>Choose a pet:</legend>
				         	<input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-1" />
				         	<label for="radio-choice-1c">Cat</label>

				         	<input type="radio" name="radio-choice-1" id="radio-choice-2c" value="choice-2"  />
				         	<label for="radio-choice-2c">Dog</label>

				         	<input type="radio" name="radio-choice-1" id="radio-choice-3c" value="choice-3"  />
				         	<label for="radio-choice-3c">Hamster</label>

				         	<input type="radio" name="radio-choice-1" id="radio-choice-4c" value="choice-4"  />
				         	<label for="radio-choice-4c">Lizard</label>
				    </fieldset>
				</div>

				<div data-role="fieldcontain">
					<label for="select-choice-c" class="select">Choose shipping method:</label>
					<select name="select-choice-c" id="select-choice-c">
						<option value="standard">Standard: 7 day</option>
						<option value="rush">Rush: 3 days</option>
						<option value="express">Express: next day</option>
						<option value="overnight">Overnight</option>
					</select>
				</div>

				
				</div><!-- /body-c -->
				
				
				
				<h2>Body swatch "d"</h2>
				<div class="ui-body ui-body-d">

					<div data-role="fieldcontain">
			         <label for="name-d">Text Input:</label>
			         <input type="text" name="name" id="name-d" value=""  />
					</div>

					<div data-role="fieldcontain">
						<label for="switch-d">Flip switch:</label>
						<select name="switch-d" id="switch-d" data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select> 
					</div>

					<div data-role="fieldcontain">
						<label for="slider-d">Slider:</label>
					 	<input type="range" name="slider" id="slider-d" value="0" min="0" max="100"  />
					</div>


					<div data-role="fieldcontain">
					<fieldset data-role="controlgroup" data-type="horizontal">
				    	<legend>Font styling:</legend>
				    	<input type="checkbox" name="checkbox-6d" id="checkbox-6d" class="custom" />
						<label for="checkbox-6d">b</label>

						<input type="checkbox" name="checkbox-7d" id="checkbox-7d" class="custom" />
						<label for="checkbox-7d"><em>i</em></label>

						<input type="checkbox" name="checkbox-8d" id="checkbox-8d" class="custom" />
						<label for="checkbox-8d">u</label>    
				    </fieldset>
					</div>

					<div data-role="fieldcontain">
					    <fieldset data-role="controlgroup">
					    	<legend>Choose a pet:</legend>
					         	<input type="radio" name="radio-choice-1" id="radio-choice-1d" value="choice-1" />
					         	<label for="radio-choice-1d">Cat</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-2d" value="choice-2"  />
					         	<label for="radio-choice-2d">Dog</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-3d" value="choice-3"  />
					         	<label for="radio-choice-3d">Hamster</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-4d" value="choice-4"  />
					         	<label for="radio-choice-4d">Lizard</label>
					    </fieldset>
					</div>

					<div data-role="fieldcontain">
						<label for="select-choice-d" class="select">Choose shipping method:</label>
						<select name="select-choice-d" id="select-choice-d">
							<option value="standard">Standard: 7 day</option>
							<option value="rush">Rush: 3 days</option>
							<option value="express">Express: next day</option>
							<option value="overnight">Overnight</option>
						</select>
					</div>

				
					</div><!-- /body-d -->


					<h2>Body swatch "e"</h2>
					<div class="ui-body ui-body-e">

						<div data-role="fieldcontain">
				         <label for="name-e">Text Input:</label>
				         <input type="text" name="name" id="name-e" value=""  />
						</div>

						<div data-role="fieldcontain">
							<label for="switch-e">Flip switch:</label>
							<select name="switch-e" id="switch-e" data-role="slider">
								<option value="off">Off</option>
								<option value="on">On</option>
							</select> 
						</div>

						<div data-role="fieldcontain">
							<label for="slider-e">Slider:</label>
						 	<input type="range" name="slider" id="slider-e" value="0" min="0" max="100"  />
						</div>


						<div data-role="fieldcontain">
						<fieldset data-role="controlgroup" data-type="horizontal">
					    	<legend>Font styling:</legend>
					    	<input type="checkbox" name="checkbox-6e" id="checkbox-6e" class="custom" />
							<label for="checkbox-6e">b</label>

							<input type="checkbox" name="checkbox-7e" id="checkbox-7e" class="custom" />
							<label for="checkbox-7e"><em>i</em></label>

							<input type="checkbox" name="checkbox-8e" id="checkbox-8e" class="custom" />
							<label for="checkbox-8e">u</label>    
					    </fieldset>
						</div>

						<div data-role="fieldcontain">
						    <fieldset data-role="controlgroup">
						    	<legend>Choose a pet:</legend>
						         	<input type="radio" name="radio-choice-1" id="radio-choice-1e" value="choice-1" />
						         	<label for="radio-choice-1e">Cat</label>

						         	<input type="radio" name="radio-choice-1" id="radio-choice-2e" value="choice-2"  />
						         	<label for="radio-choice-2e">Dog</label>

						         	<input type="radio" name="radio-choice-1" id="radio-choice-3e" value="choice-3"  />
						         	<label for="radio-choice-3e">Hamster</label>

						         	<input type="radio" name="radio-choice-1" id="radio-choice-4e" value="choice-4"  />
						         	<label for="radio-choice-4e">Lizard</label>
						    </fieldset>
						</div>

						<div data-role="fieldcontain">
							<label for="select-choice-e" class="select">Choose shipping method:</label>
							<select name="select-choice-e" id="select-choice-e">
								<option value="standard">Standard: 7 day</option>
								<option value="rush">Rush: 3 days</option>
								<option value="express">Express: next day</option>
								<option value="overnight">Overnight</option>
							</select>
						</div>

					
						</div><!-- /body-e -->

		</form>
		
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">Form elements</li>
						<li><a href="docs-forms.html">Form basics</a></li>
						<li><a href="forms-all.html">Form element gallery</a></li>
						<li><a href="forms-all-mini.html">Mini form element gallery</a></li>
            			<li><a href="textinputs/">Text inputs</a></li>
						<li><a href="search/">Search inputs</a></li>
						<li><a href="slider/">Slider</a></li>
						<li><a href="switch/">Flip toggle switch</a></li>
						<li><a href="radiobuttons/">Radio buttons</a></li>
						<li><a href="checkboxes/">Checkboxes</a></li>
						<li><a href="selects/">Select menus</a></li>
						<li data-theme="a"><a href="forms-themes.html">Theming forms</a></li>
						<li><a href="forms-all-native.html">Native form elements</a></li>
						<li><a href="forms-sample.html">Submitting forms</a></li>
						

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Forms</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-index">

		<div data-role="header" data-theme="f">
		<h1>Form elements</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<p>All form elements begin with standard HTML controls that are enhanced to make them more attractive and easy to use. In browsers that don't support the custom controls, they will still have a usable experience because these are all based on native form elements.</p>
			
		<ul data-role="listview" data-inset="true">
			<li><a href="docs-forms.html">Form basics</a></li>
			<li><a href="forms-all.html">Form element gallery</a></li>
			<li><a href="forms-all-mini.html">Mini form element gallery</a></li>
			<li><a href="textinputs/">Text inputs</a></li>
			<li><a href="search/">Search inputs</a></li>
			<li><a href="slider/">Slider</a></li>
			<li><a href="switch/">Flip toggle switch</a></li>
			<li><a href="radiobuttons/">Radio buttons</a></li>
			<li><a href="checkboxes/">Checkboxes</a></li>
			<li><a href="selects/">Select menus</a></li>
			<li><a href="forms-themes.html">Theming forms</a></li>
			<li><a href="forms-all-native.html">Native form elements</a></li>
			<li><a href="forms-sample.html">Submitting forms</a></li>
			
		</ul>
		
	</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\plugin-eventsmethods.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Form Plugin Methods</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Form Plugin Methods</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<div class="ui-body ui-body-e">
		    <h4>We've retired this page.</h4>
		    
		    <p>Plugin events and methods are now documented separately for each component (see links on the left).</p>
		</div>
		
		    
						
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">Form elements</li>
						<li><a href="docs-forms.html">Form basics</a></li>
						<li><a href="forms-all.html">Form element gallery</a></li>
						<li><a href="forms-all-mini.html">Mini form element gallery</a></li>
                  	  	<li><a href="textinputs/">Text inputs</a></li>
						<li><a href="search/">Search inputs</a></li>
						<li><a href="slider/">Slider</a></li>
						<li><a href="switch/">Flip toggle switch</a></li>
						<li><a href="radiobuttons/">Radio buttons</a></li>
						<li><a href="checkboxes/">Checkboxes</a></li>
						<li><a href="selects/">Select menus</a></li>
						<li><a href="forms-themes.html">Theming forms</a></li>
						<li><a href="forms-all-native.html">Native form elements</a></li>
						<li><a href="forms-sample.html">Submitting forms</a></li>
					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\checkboxes\events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Checkboxes</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Checkboxes</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

		<h2>Checkboxes</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			</ul>
			
			<p>Bind events directly to the <code>input</code> element.  Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code> 
$("input[type='checkbox']").bind( "change", function(event, ui) {
  ...
});
</code></pre>
			
			<p>The checkbox plugin has the following custom events:</p>

	<dl>
				
		<dt><code>create</code> triggered when a checkbox is created</dt>
		<dd>
			
			<pre><code>
$("input[type='checkbox']").checkboxradio({
   create: function(event, ui) { ... }
});		
			</code></pre>
		</dd>
		

	</dl>
	    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\checkboxes\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Checkboxes</title> 
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Checkboxes</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<form action="#" method="get">

		<h2>Checkboxes</h2>

    <ul data-role="controlgroup" data-type="horizontal" class="localnav">
      <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
      <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
      <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
      <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
    </ul>

		<p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
		
		<p>The checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to checkboxes.</p>

		<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. If the <code>input</code> isn’t wrapped in its corresponding <code>label</code>, be sure to set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated.</p>
		<p>There are therefore two ways to create a checkbox and with a label as shown below:</p>
		
		<pre><code>	
&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-0&quot; /&gt; I agree &lt;/label&gt;
			
&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot; class=&quot;custom&quot; /&gt;
&lt;label for=&quot;checkbox-1&quot;&gt;I agree&lt;/label&gt;
		</code></pre>
				
		<p>The above snippets will produce two basic checkboxes. The default styles will set the width of the element to 100% of the parent container.</p>
					
		<label> <input type="checkbox" name="checkbox-0 "/> I agree</label>
		
		<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
		<label for="checkbox-1">I agree</label>
		
		
		<h2>Mini version</h2>

		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>

<pre><code>	
&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-0&quot; id=&quot;checkbox-mini-0&quot; class=&quot;custom&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
&lt;label for=&quot;checkbox-mini-0&quot;&gt;I agree&lt;/label&gt;
</code></pre>
		
		<p>This will produce a checkbox that is not as tall as the standard version and has a smaller text size.</p>
		<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" class="custom" data-mini="true" />
		<label for="checkbox-mini-0">I agree</label>


		<h2>Field containers &amp; Legends</h2>
		<p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the  <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
		
<pre><code>	
&lt;div data-role=&quot;fieldcontain&quot;&gt;
    <strong>&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
	   &lt;legend&gt;Agree to the terms:&lt;/legend&gt;</strong>
	   &lt;input type=&quot;checkbox&quot; name=&quot;checkbox-2&quot; id=&quot;checkbox-2&quot; class=&quot;custom&quot; /&gt;
	   &lt;label for=&quot;checkbox-2&quot;&gt;I agree&lt;/label&gt;
    <strong>&lt;/fieldset&gt;</strong>
&lt;/div&gt;
</code></pre>

	<div data-role="fieldcontain">
	 	<fieldset data-role="controlgroup">
			<legend>Agree to the terms:</legend>
			<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
			<label for="checkbox-2">I agree</label>
	    </fieldset>
	</div>
	
			
		
		<h2>Vertically grouped checkboxes</h2>
		
		<p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the <code>fieldset</code>.</p>

			<div  data-role="fieldcontain">
			 	<fieldset data-role="controlgroup">
					<legend>Choose as many snacks as you'd like:</legend>
					<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
					<label for="checkbox-1a">Cheetos</label>

					<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
					<label for="checkbox-2a">Doritos</label>
					
					<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
					<label for="checkbox-3a">Fritos</label>

					<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
					<label for="checkbox-4a">Sun Chips</label>
			    </fieldset>
			</div>
		
		<h2>Horizontal toggle sets</h2>
		
		<p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>

<code>
&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong>&gt;
</code>

			<p>The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.</p>
			
		<div data-role="fieldcontain">
		    <fieldset data-role="controlgroup" data-type="horizontal">
		    	<legend>Font styling:</legend>
		    	<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
				<label for="checkbox-6">b</label>

				<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
				<label for="checkbox-7"><em>i</em></label>

				<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
				<label for="checkbox-8">u</label>    
		    </fieldset>
		</div>




	</form>
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\checkboxes\methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Checkboxes</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Checkboxes</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

		<h2>Checkboxes</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The checkbox has the following methods:</p>

		<dl>
			
			<dt><code>enable</code> enable a disabled checkbox</dt>
			<dd>
				<pre><code>
 $("input[type='checkbox']").checkboxradio('enable');
				</code></pre>
			</dd>
			
			<dt><code>disable</code> disable a checkbox</dt>
			<dd>
				<pre><code>
$("input[type='checkbox']").checkboxradio('disable');
				</code></pre>
			</dd>
			
			<dt><code>refresh</code> update the checkbox</dt>
			<dd>
      If you manipulate a checkbox via JavaScript, you must call the refresh method on it to update the visual styling.
				<pre><code>
$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");
				</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\checkboxes\options.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Checkboxes</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Checkboxes</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

		<h2>Checkboxes</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The checkbox has the following options:</p>

		<dl>
			<dt><code>mini</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>		
				<pre><code>$("input[type='checkbox']").checkboxradio(<strong>{ mini: "true" }</strong>);</code></pre>
			</dd>
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>		
				<pre><code>$("input[type='checkbox']").checkboxradio(<strong>{ theme: "a" }</strong>);</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li data-theme="a"><a href="index.html">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\radiobuttons\events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Radio buttons</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Radio buttons</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

		<h2>Radio buttons</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			</ul>
			
			
			<p>Bind events directly to the <code>input</code> element.  Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code> 
$("input[type='radio']").bind( "change", function(event, ui) {
  ...
});
</code></pre> 
			
			<p>The radio button plugin has the following custom events:</p>

	<dl>
				
		<dt><code>create</code> triggered when a radio button is created</dt>
		<dd>
			

			<pre><code>
$("input[type='radio']").checkboxradio({
   create: function(event, ui) { ... }
});		
			</code></pre>
		</dd>
		

	</dl>
	    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li data-theme="a"><a href="index.html">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\radiobuttons\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Radio Buttons</title> 
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/> 
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Radio buttons</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<form action="#" method="get">

		<h2>Radio buttons</h2>

    <ul data-role="controlgroup" data-type="horizontal" class="localnav">
      <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
      <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
      <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
      <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
    </ul>

		<p>Radio buttons are used to provide a list of options where only a single item can be selected. Traditional desktop radio buttons are not optimized for touch input so jQuery Mobile styles the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
		
		<p>The radio controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to radio buttons.</p>
		
		<h2>Vertically grouped radio buttons</h2>
		
		<p>To create a set of radio buttons, add an <code>input</code> with a <code>type="radio"</code> attribute and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated.</p>
		
		<p>The <code>label</code> element is displayed next to the radio form element. Wrap the radio buttons in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question.</p>
		
		<p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the container.</p>
				
<pre><code>	
<strong>&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
	&lt;legend&gt;Choose a pet:&lt;/legend&gt;</strong>
     	&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
     	&lt;label for=&quot;radio-choice-1&quot;&gt;Cat&lt;/label&gt;

     	&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-2&quot; value=&quot;choice-2&quot;  /&gt;
     	&lt;label for=&quot;radio-choice-2&quot;&gt;Dog&lt;/label&gt;

     	&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-3&quot; value=&quot;choice-3&quot;  /&gt;
     	&lt;label for=&quot;radio-choice-3&quot;&gt;Hamster&lt;/label&gt;

     	&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-4&quot; value=&quot;choice-4&quot;  /&gt;
     	&lt;label for=&quot;radio-choice-4&quot;&gt;Lizard&lt;/label&gt;
<strong>&lt;/fieldset&gt;</strong>
</code></pre>

		
		<p>This will produce a vertically grouped radio button set. The default styles set the width of the button group to 100% of the parent container and stacks the legend on a separate line.</p>
		
		
	    <fieldset data-role="controlgroup">
	    	<legend>Choose a pet:</legend>
	         	<input type="radio" name="radio-pet" id="radio-pet-1a" value="choice-1" checked="checked"  />
	         	<label for="radio-pet-1a">Cat</label>

	         	<input type="radio" name="radio-pet" id="radio-pet-2a" value="choice-2"  />
	         	<label for="radio-pet-2a">Dog</label>

	         	<input type="radio" name="radio-pet" id="radio-pet-3a" value="choice-3"  />
	         	<label for="radio-pet-3a">Hamster</label>

	         	<input type="radio" name="radio-pet" id="radio-pet-4a" value="choice-4"  />
	         	<label for="radio-pet-4a">Lizard</label>
	    </fieldset>

		<h2>Mini version</h2>

		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>

<pre><code>			
&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-mini=&quot;true&quot;</strong>&gt;
    	&lt;input type=&quot;radio&quot; name=&quot;radio-mini&quot; id=&quot;radio-mini-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
    	&lt;label for=&quot;radio-mini-1&quot;&gt;Credit&lt;/label&gt;

	&lt;input type=&quot;radio&quot; name=&quot;radio-mini&quot; id=&quot;radio-mini-2&quot; value=&quot;choice-2&quot;  /&gt;
    	&lt;label for=&quot;radio-mini-2&quot;&gt;Debit&lt;/label&gt;
    	
    	&lt;input type=&quot;radio&quot; name=&quot;radio-mini&quot; id=&quot;radio-mini-3&quot; value=&quot;choice-3&quot;  /&gt;
    	&lt;label for=&quot;radio-mini-3&quot;&gt;Cash&lt;/label&gt;
&lt;/fieldset&gt;
</code></pre>

		<p>This will produce a radio button that is not as tall as the standard version and has a smaller text size.</p>
		
		<fieldset data-role="controlgroup" data-mini="true">
	         	<input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" checked="checked" />
	         	<label for="radio-mini-1">Credit</label>
	         	<input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2"  />
	         	<label for="radio-mini-2">Debit</label>
	         	<input type="radio" name="radio-mini" id="radio-mini-3" value="choice-3"  />
	         	<label for="radio-mini-3">Cash</label>
	    </fieldset>
		
		<h2>Field containers</h2>
		
		<p>Optionally wrap the radiobuttons in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
	<pre><code>	
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;</strong>
    &lt;fieldset data-role=&quot;controlgroup&quot;&gt;
    	&lt;legend&gt;Choose a pet:&lt;/legend&gt;
         	&lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-21&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
         	&lt;label for=&quot;radio-choice-21&quot;&gt;Cat&lt;/label&gt;

         	&lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-22&quot; value=&quot;choice-2&quot;  /&gt;
         	&lt;label for=&quot;radio-choice-22&quot;&gt;Dog&lt;/label&gt;

         	&lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-23&quot; value=&quot;choice-3&quot;  /&gt;
         	&lt;label for=&quot;radio-choice-23&quot;&gt;Hamster&lt;/label&gt;

         	&lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-24&quot; value=&quot;choice-4&quot;  /&gt;
         	&lt;label for=&quot;radio-choice-24&quot;&gt;Lizard&lt;/label&gt;
    &lt;/fieldset&gt;
<strong>&lt;/div&gt;
</strong>	</code></pre>

		<div data-role="fieldcontain">
		    <fieldset data-role="controlgroup">
		    	<legend>Choose a pet:</legend>
		         	<input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked"  />
		         	<label for="radio-pet-1">Cat</label>

		         	<input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2"  />
		         	<label for="radio-pet-2">Dog</label>

		         	<input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3"  />
		         	<label for="radio-pet-3">Hamster</label>

		         	<input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4"  />
		         	<label for="radio-pet-4">Lizard</label>
		    </fieldset>
		</div>
			<h2>Horizontal radio button sets</h2>

			<p>Radio buttons can also be used for grouped button sets where only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>

	<code>
	&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong> &gt;
	</code>

	<div data-role="fieldcontain">
	    <fieldset data-role="controlgroup" data-type="horizontal">
	     	<legend>Layout view:</legend>
	         	<input type="radio" name="radio-view" id="radio-view-a" value="list"  />
	         	<label for="radio-view-a">List</label>
	         	<input type="radio" name="radio-view" id="radio-view-b" value="grid"  />
	         	<label for="radio-view-b">Grid</label>
	         	<input type="radio" name="radio-view" id="radio-view-c" value="gallery"  />
	         	<label for="radio-view-c">Gallery</label>
	    </fieldset>
	</div>

				<p>The labels float so they sit side-by-side on a line. The radio button icons are hidden and only the left and right edges of the group are rounded.</p>
				

	



	</form>
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li data-theme="a"><a href="index.html">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\radiobuttons\methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Radio buttons</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Radio buttons</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

		<h2>Radio buttons</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The radio button has the following methods:</p>

		<dl>
			
			<dt><code>enable</code> enable a disabled radio button</dt>
			<dd>
				<pre><code>
 $("input[type='radio']").checkboxradio('enable');
				</code></pre>
			</dd>
			
			<dt><code>disable</code> disable a radio button</dt>
			<dd>
				<pre><code>
$("input[type='radio']").checkboxradio('disable');
				</code></pre>
			</dd>
			
			<dt><code>refresh</code> update the radio button</dt>
			<dd>
      If you manipulate a radio button via JavaScript, you must call the refresh method on it to update the visual styling.
				<pre><code>
$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
				</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li data-theme="a"><a href="index.html">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\radiobuttons\options.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Radio buttons</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Radio buttons</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

		<h2>Radio buttons</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The radio button has the following options:</p>

		<dl>
			<dt><code>mini</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>		
				<pre><code>$("input[type='radio']").checkboxradio(<strong>{ mini: "true" }</strong>);</code></pre>
			</dd>
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>			
				<pre><code>$("input[type='radio']").checkboxradio(<strong>{ theme: "a" }</strong>);</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li data-theme="a"><a href="index.html">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\search\events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Search Input events</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Search input</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Search input</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			</ul>

<p>Bind events directly to the <code>input</code> element.  Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code> 
$(".mySearchInput").bind( "change", function(event, ui) {
  ...
});
</code></pre> 
			
			<p>The text input plugin has the following custom events:</p>

	<dl>
				
		<dt><code>create</code> triggered when a text input is created</dt>
		<dd>

			<pre><code>
$( ".selector" ).textinput({
   create: function(event, ui) { ... }
});		
			</code></pre>
			</dd>
			
	</dl>
	    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li data-theme="a"><a href="index.html">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\search\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Search input</title> 
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Search input</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<form action="#" method="get">

			<h2>Search input</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

			<p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds an "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to search inputs.</p>
			
			<p>Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
				
<pre><code>	
&lt;label for=&quot;search-basic&quot;&gt;Search Input:&lt;/label&gt;
&lt;input type=&quot;search&quot; name=&quot;search&quot; id=&quot;searc-basic&quot; value=&quot;&quot; /&gt;
</code></pre>	

				<p>This will produce a basic search input. The default styles set the width of the input to 100% of the parent container and stack the label on a separate line.</p>
		         <label for="search-basic">Search Input:</label>
				 <input type="search" name="search" id="search-basic" value="" />
		        
				<h2>Mini version</h2>

				<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>

<pre><code>	
&lt;label for=&quot;search-mini&quot;&gt;Search Input:&lt;/label&gt;
&lt;input type=&quot;search&quot; name=&quot;search-mini&quot; id=&quot;search-mini&quot; value=&quot;&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
</code></pre>

				<p>This will produce a search input that is not as tall as the standard version and has a smaller text size.</p>
		         <label for="search-mini">Search Input:</label>
				 <input type="search" name="search-mini" id="search-mini" value="" />

				<h2>Field containers</h2>
				
				 <p>Optionally wrap the search input in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>

<pre><code>	
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
</strong>    &lt;label for=&quot;search-2&quot;&gt;Search Input:&lt;/label&gt;
    &lt;input type=&quot;search&quot; name=&quot;search-2&quot; id=&quot;search-2&quot; value=&quot;&quot; /&gt;
<strong>&lt;/div&gt;
</strong></code></pre>	
			 
			<p>The search input is now displayed like this:</p>
			<div data-role="fieldcontain">
	         <label for="search-2">Search Input:</label>
	         <input type="search" name="search-2" id="search-2" value="" />
			</div>

			<h2>Theming</h2>
			<p>The <code>data-theme</code> attribute can be added to the search input to set the theme to any swatch letter.</p>
			<div data-role="fieldcontain">
	         <label for="search-3">Search Input:</label>
	         <input type="search" name="search-3" id="search-3" value="" data-theme="a" />
			</div>

			<h2>Setting the clear button text</h2>
			<p>The text for the button used to clear the search input of text can be configured for all search inputs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.textinput.prototype.options.clearSearchButtonText</code> property to a string of your choosing.</p>
			
			<h2>Calling the textinput plugin</h2>

<p>This plugin will auto-initialize on any page that contains a text input with the <code>type="search"</code> attribute without any need for a <code>data-role</code> attribute in the markup. However, if needed, you can directly call the <code>textinput</code> plugin on a selector, just like any jQuery plugin:</p>
<pre><code>
$('.mySearchInput').textinput();			
</code></pre>
			

	</form>
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li data-theme="a"><a href="index.html">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\search\methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Search Input methods</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Search input</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Search input</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The text input plugin has the following methods:</p>

		<dl>
						
			<dt><code>enable</code> enable a disabled text input</dt>
			<dd>
				<pre><code>
$('.selector').textinput('enable');			
				</code></pre>
			</dd>
			
			<dt><code>disable</code> disable a text input</dt>
			<dd>
				<pre><code>
$('.selector').textinput('disable');			
				</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li data-theme="a"><a href="index.html">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\search\options.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Text Search options</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Search input</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Search input</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The text input plugin has the following options:</p>

		<dl>
			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
   <strong>$.mobile.textinput.prototype.options.initSelector = ".myInputs";</strong>
});
</code></pre>
			</dd>
				<dt><code>mini</code> <em>boolean</em></dt>
				<dd>
					<p class="default">default: false</p>
					<p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>		
					<pre><code>$('.selector').textinput(<strong>{ mini: "true" }</strong>);</code></pre>
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>					
				<pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
			</dd>
			
			<dt><code>clearSearchButtonText</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "clear text"</p>
				<p>Sets the text used for the button that clears the search input of text.</p>
				<pre><code>$('.selector').textinput(<strong>{ clearSearchButtonText: "custom value" }</strong>);</code></pre>
			</dd>
			
		</dl>
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li data-theme="a"><a href="index.html">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\custom.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Select</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Select Menus</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

<h2>Select menus</h2>

<ul data-role="controlgroup" data-type="horizontal" class="localnav">
	<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
	<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
	<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
	<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>

<h2>Custom select menus</h2>
<p>The framework is capable of building a custom menu based on the <code>select</code> element's list of options.  We recommend using a custom menu when multiple selections are required, or when the menu itself must be styled with CSS.</p>

<p>You can optionally use custom-styled select menus instead of the native OS menu. The custom menu supports disabled options and multiple selection (whereas native mobile OS support for both is inconsistent), adds an elegant way to handle placeholder values, and restores missing functionality on certain platforms such as <code>optgroup</code> support on Android (all explained below).  In addition, the framework applies the custom button's theme to the menu to better match the look and feel and provide visual consistency across platforms. Lastly, custom menus often look better on desktop browsers because native desktop menus are smaller than their mobile counterparts and tend to look disproportionate.</p>

	<p>Keep in mind that there is overhead involved in parsing the native select to build a custom menu. If there are a lot of selects on a page, or a select has a long list of options, this can impact the performance of the page, so we recommend using custom menus sparingly. </p>
	
	<p>To use custom menus on a specific <code>select</code>, just add the <code>data-native-menu="false"</code> attribute. Alternately, this can also programmatically set the select menu's <code>nativeMenu</code> configuration option to <code>false</code> in a callback bound to the <code>mobileinit</code> event to achieve the same effect. This will globally make all selects use the custom menu by default. The following must be included in the page after jQuery is loaded but before jQuery Mobile is loaded.</p>
	

<code>
<pre>
$(document).bind('mobileinit',function(){
   $.mobile.selectmenu.prototype.options.nativeMenu = false;
});
</pre>
</code>

			<p>When the <code>select</code> has a small number of options that will fit on the device's screen, the menu will appear as a small overlay with a pop transition:</p>

			<div data-role="fieldcontain">
				<label for="select-choice-custom" class="select">Shipping method:</label>
				<select name="select-choice-1" id="select-choice-custom" data-native-menu="false">
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</div>

			<p>When it has too many options to show on the device's screen, the framework will automatically create a new &quot;page&quot; populated with a standard <a href="../../lists/docs-lists.html">list view</a> for the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the <code>label</code> is used as the title for this page.</p>


					<div data-role="fieldcontain">
						<label for="select-choice-3" class="select">Your state:</label>
						<select name="select-choice-3" id="select-choice-3" data-native-menu="false">
							<option value="AL">Alabama</option>
							<option value="AK">Alaska</option>
							<option value="AZ">Arizona</option>
							<option value="AR">Arkansas</option>
							<option value="CA">California</option>
							<option value="CO">Colorado</option>
							<option value="CT">Connecticut</option>
							<option value="DE">Delaware</option>
							<option value="FL">Florida</option>
							<option value="GA">Georgia</option>
							<option value="HI">Hawaii</option>
							<option value="ID">Idaho</option>
							<option value="IL">Illinois</option>
							<option value="IN">Indiana</option>
							<option value="IA">Iowa</option>
							<option value="KS">Kansas</option>
							<option value="KY">Kentucky</option>
							<option value="LA">Louisiana</option>
							<option value="ME">Maine</option>
							<option value="MD">Maryland</option>
							<option value="MA">Massachusetts</option>
							<option value="MI">Michigan</option>
							<option value="MN">Minnesota</option>
							<option value="MS">Mississippi</option>
							<option value="MO">Missouri</option>
							<option value="MT">Montana</option>
							<option value="NE">Nebraska</option>
							<option value="NV">Nevada</option>
							<option value="NH">New Hampshire</option>
							<option value="NJ">New Jersey</option>
							<option value="NM">New Mexico</option>
							<option value="NY">New York</option>
							<option value="NC">North Carolina</option>
							<option value="ND">North Dakota</option>
							<option value="OH">Ohio</option>
							<option value="OK">Oklahoma</option>
							<option value="OR">Oregon</option>
							<option value="PA">Pennsylvania</option>
							<option value="RI">Rhode Island</option>
							<option value="SC">South Carolina</option>
							<option value="SD">South Dakota</option>
							<option value="TN">Tennessee</option>
							<option value="TX">Texas</option>
							<option value="UT">Utah</option>
							<option value="VT">Vermont</option>
							<option value="VA">Virginia</option>
							<option value="WA">Washington</option>
							<option value="WV">West Virginia</option>
							<option value="WI">Wisconsin</option>
							<option value="WY">Wyoming</option>
						</select>
					</div>

	<h3>Disabled options</h3>
	<p>jQuery Mobile will automatically disable and style option tags with the <code>disabled</code> attribute.  In the demo below, the second option &quot;Rush: 3 days&quot; has been set to disabled.</p>

	<div data-role="fieldcontain">
		<label for="select-choice-7" class="select">Shipping method:</label>
		<select name="select-choice-7" id="select-choice-7">
			<option value="standard">Standard: 7 day</option>
			<option value="rush" disabled="disabled">Rush: 3 days</option>
			<option value="express">Express: next day</option>
			<option value="overnight">Overnight</option>
		</select>
	</div>
	
	<h3>Placeholder options</h3>
	<p>It's common for developers to include a &quot;null&quot; option in their select element to force a user to choose an option. If a placeholder option is present in your markup, jQuery Mobile will hide them in the overlay menu, showing only valid choices to the user, and display the placeholder text inside the menu as a header.  A placeholder option is added when the framework finds:</p>
	<ul>
		<li>An option with no value attribute (or an empty value attribute)</li>
		<li>An option with no text node</li>
		<li>An option with a <code>data-placeholder="true"</code> attribute. (This allows you to use an option that has a value and a textnode as a placeholder option).</li>
	</ul>

	<p>You can disable this feature through the selectmenu plugin's <code>hidePlaceholderMenuItems</code> option, like this:</p>
	<pre>
	<code>
$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
	</code>
	</pre>

	<p>Examples of various placeholder options:</p>


	<div data-role="fieldcontain">
		<label for="select-choice-4" class="select">Shipping method:</label>
		<select name="select-choice-4" id="select-choice-4" data-native-menu="false">
			<option></option>
			<option value="standard">Standard: 7 day</option>
			<option value="rush">Rush: 3 days</option>
			<option value="express">Express: next day</option>
			<option value="overnight">Overnight</option>
		</select>
	</div>


	<div data-role="fieldcontain">
		<label for="select-choice-5" class="select">Shipping method:</label>
		<select name="select-choice-5" id="select-choice-5" data-native-menu="false">
			<option>Choose one...</option>
			<option value="standard">Standard: 7 day</option>
			<option value="rush">Rush: 3 days</option>
			<option value="express">Express: next day</option>
			<option value="overnight">Overnight</option>
		</select>
	</div>


	<div data-role="fieldcontain">
		<label for="select-choice-6" class="select">Shipping method:</label>
		<select name="select-choice-6" id="select-choice-6" data-native-menu="false">
			<option value="choose-one" data-placeholder="true">Choose one...</option>
			<option value="standard">Standard: 7 day</option>
			<option value="rush">Rush: 3 days</option>
			<option value="express">Express: next day</option>
			<option value="overnight">Overnight</option>
		</select>
	</div>


	<h3>Multiple selects</h3>	
	<p>If the <code>multiple</code> attribute is present in your markup, jQuery Mobile will enhance the element with a few extra considerations:</p>

	<ul>
	<li>A header element will be created inside the menu and display the placeholder text and a close button.</li>
	<li>Clicking on an item inside the overlay menu will not close the widget.</li>
	<li>A ghosted, unchecked icon will appear adjacent to each unselected item.  When the item is selected the icon will change to a checkbox.  Neither icon will appear inside a single select box.</li>
	<li>Once 2+ items are selected, a counter element with the total number of selected items will appear inside the button.</li>
	<li>The text of each selected item will appear inside the button as a list.  If the button is not wide enough to display the entire list, it is truncated with an ellipses.</li>
	<li>If no items are selected, the button's text will default to the placeholder text.</li>
	<li>If no placeholder element exists, the default button text will be blank and the header will appear with just a close button. Because this isn't a friendly user experience, we recommended that you always specify a placeholder element when using multiple select boxes.</li>
	</ul>

	<div data-role="fieldcontain">
		<label for="select-choice-9" class="select">Shipping method(s):</label>
		<select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
			<option>Choose options</option>
			<option value="standard">Standard: 7 day</option>
			<option value="rush">Rush: 3 days</option>
			<option value="express">Express: next day</option>
			<option value="overnight">Overnight</option>
		</select>
	</div>

	<p>When a select is large enough to where the menu will open in a new page, the placeholder text is displayed in the button when no items are selected, and the <code>label</code> text is displayed in the menu's header.  This differs from smaller overlay menus where the placeholder text is displayed in both the button and the header, and from full-page single selects where the placeholder text is not used at all.</p>

	<div data-role="fieldcontain">
		<label for="select-choice-10" class="select">Choose state(s):</label>
		<select name="select-choice-10" id="select-choice-10" multiple="multiple" data-native-menu="false">
			<option>Choose options</option>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select>
	</div>



	

	<h3>Optgroup support</h3>
	<p>If a select menu contains <code>optgroup</code> elements, jQuery Mobile will create a divider &amp; group items based on the <code>label</code> attribute's text:</p>

	<div data-role="fieldcontain">
		<label for="select-choice-8" class="select">Shipping method:</label>
		<select name="select-choice-8" id="select-choice-8" data-native-menu="false">
			<option>Choose shipping method</option>
			<optgroup label="USPS">
				<option value="standard" selected>Standard: 7 day</option>
				<option value="rush">Rush: 3 days</option>
				<option value="express">Express: next day</option>
				<option value="overnight">Overnight</option>
			</optgroup>
			<optgroup label="FedEx">
				<option value="firstOvernight">First Overnight</option>
				<option value="expressSaver">Express Saver</option>
				<option value="ground">Ground</option>
			</optgroup>
		</select>
	</div>


	<h2>Theming selects</h2>
	<p>You can specify any jQuery Mobile button <code>data-</code> attribute on a select element, too. In this example, we're setting the theme, icon and inline properties:</p>

	<div data-role="fieldcontain">
		<label for="select-choice-22" class="select">Actions</label>
		<select name="select-choice-22" id="select-choice-22" data-theme="e" data-icon="gear" data-inline="true" data-native-menu="false">
			<option value="view">User details</option>
			<option value="edit">Edit user</option>
			<option value="deactivate">De-activate</option>
			<option value="delete">Delete user</option>
		</select>
	</div>
    
	<p>The <code>data-overlay-theme</code> attribute can be added to a select element to set the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. By default, the content block colors for swatch "a"" will be used for the overlays.</p>
      
	<div data-role="fieldcontain">
		<label for="select-choice-15" class="select">Size</label>
		<select name="select-choice-15" id="select-choice-15" data-theme="b" data-overlay-theme="d" data-native-menu="false">
			<option value="t">Tall</option>
			<option value="g">Grande</option>
			<option value="v">Vente</option>
		</select>
	</div>
	
	<div data-role="fieldcontain">
		<label for="select-choice-13" class="select">Choose state(s):</label>
		<select name="select-choice-13" id="select-choice-13" data-native-menu="false" data-theme="a" data-overlay-theme="e">
			<option>Choose options</option>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select>
	</div>
	
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li data-theme="a"><a href="index.html">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Select events</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Select Menus</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Select menus</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="custom.html" data-role="button" data-transition="fade">Custom</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			</ul>
			

<p>Bind events directly to the <code>select</code> element.  Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code> 
$(".mySelect").bind( "change", function(event, ui) {
  ...
});
</code></pre> 
			
			<p>The select menu plugin has the following custom events:</p>

	<dl>
				
		<dt><code>create</code> triggered when a select menu is created</dt>
		<dd>

			<pre><code>
$( ".selector" ).selectmenu({
   create: function(event, ui) { ... }
});		
			</code></pre>
		</dd>
		

	</dl>
	    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li data-theme="a"><a href="index.html">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\index.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Select</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Select Menus</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Select menus</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The select menu is based on a native <code>select</code> element, which is hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The select menu is ARIA-enabled and keyboard accessible on the desktop as well. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to selects.</p>
			
			<p>By default, the framework leverages the native OS options menu to use with the custom button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value. Please note that the framework also offers the possibility of having custom (non-native) select menus; see details at the bottom of this page and on the <a href="custom.html"> custom select menu</a> page.</p>

			<p>To add a select menu to your page, start with a standard <code>select</code> element populated with a set of <code>option</code> elements. Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>select</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
			
			<p>The framework will find all <code>select</code> elements and automatically enhance them into select menus, no need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of a select, add  <code>data-role="none"</code> attribute to the <code>select</code>.</p>
			
<pre><code>
&lt;label for=&quot;select-choice-0&quot; class=&quot;select&quot;&gt;Shipping method:&lt;/label&gt;
&lt;select name=&quot;select-choice-0&quot; id=&quot;select-choice-0&quot;&gt;
   &lt;option value=&quot;standard&quot;&gt;Standard: 7 day&lt;/option&gt;
   &lt;option value=&quot;rush&quot;&gt;Rush: 3 days&lt;/option&gt;
   &lt;option value=&quot;express&quot;&gt;Express: next day&lt;/option&gt;
   &lt;option value=&quot;overnight&quot;&gt;Overnight&lt;/option&gt;
&lt;/select&gt;
</code></pre>

			<p>This will produce a basic select menu. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.</p>

			<label for="select-choice-0" class="select">Shipping method:</label>
			<select name="select-choice-0" id="select-choice-0">
				<option value="standard">Standard: 7 day</option>
				<option value="rush">Rush: 3 days</option>
				<option value="express">Express: next day</option>
				<option value="overnight">Overnight</option>
			</select>

			<h2>Mini version</h2>

			<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>

<pre><code>	
&lt;label for=&quot;select-choice-min&quot; class=&quot;select&quot;&gt;Shipping method:&lt;/label&gt;
&lt;select name=&quot;select-choice-min&quot; id=&quot;select-choice-min&quot; <strong>data-mini=&quot;true&quot;</strong>&gt;
   &lt;option value=&quot;standard&quot;&gt;Standard: 7 day&lt;/option&gt;
   &lt;option value=&quot;rush&quot;&gt;Rush: 3 days&lt;/option&gt;
   &lt;option value=&quot;express&quot;&gt;Express: next day&lt;/option&gt;
   &lt;option value=&quot;overnight&quot;&gt;Overnight&lt;/option&gt;
&lt;/select&gt; 
</code></pre>
			
			<p>This will produce a select that a not as tall as the standard version and has a smaller text size.</p>
			<label for="select-choice-min" class="select">Shipping method:</label>
			<select name="select-choice-min" id="select-choice-min" data-mini="true">
				<option value="standard">Standard: 7 day</option>
				<option value="rush">Rush: 3 days</option>
				<option value="express">Express: next day</option>
				<option value="overnight">Overnight</option>
			</select>

			<h2>Field containers</h2>
			<p>Optionally wrap the selects in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
<pre><code>
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
</strong>   &lt;label for=&quot;select-choice-1&quot; class=&quot;select&quot;&gt;Shipping method:&lt;/label&gt;
   &lt;select name=&quot;select-choice-1&quot; id=&quot;select-choice-1&quot;&gt;
      &lt;option value=&quot;standard&quot;&gt;Standard: 7 day&lt;/option&gt;
      &lt;option value=&quot;rush&quot;&gt;Rush: 3 days&lt;/option&gt;
      &lt;option value=&quot;express&quot;&gt;Express: next day&lt;/option&gt;
      &lt;option value=&quot;overnight&quot;&gt;Overnight&lt;/option&gt;
   &lt;/select&gt;
<strong>&lt;/div&gt;
</strong></code></pre>

			<p>The select input is now displayed like this:</p>


<div data-role="fieldcontain">
	<label for="select-choice-1" class="select">Shipping method:</label>
	<select name="select-choice-1" id="select-choice-1">
		<option value="standard">Standard: 7 day</option>
		<option value="rush">Rush: 3 days</option>
		<option value="express">Express: next day</option>
		<option value="overnight">Overnight</option>
	</select>
</div>

<p>An example of a select with a long list of options:</p>

<div data-role="fieldcontain">
	<label for="select-choice-2" class="select">Your state:</label>
	<select name="select-choice-2" id="select-choice-2">
		<option value="AL">Alabama</option>
		<option value="AK">Alaska</option>
		<option value="AZ">Arizona</option>
		<option value="AR">Arkansas</option>
		<option value="CA">California</option>
		<option value="CO">Colorado</option>
		<option value="CT">Connecticut</option>
		<option value="DE">Delaware</option>
		<option value="FL">Florida</option>
		<option value="GA">Georgia</option>
		<option value="HI">Hawaii</option>
		<option value="ID">Idaho</option>
		<option value="IL">Illinois</option>
		<option value="IN">Indiana</option>
		<option value="IA">Iowa</option>
		<option value="KS">Kansas</option>
		<option value="KY">Kentucky</option>
		<option value="LA">Louisiana</option>
		<option value="ME">Maine</option>
		<option value="MD">Maryland</option>
		<option value="MA">Massachusetts</option>
		<option value="MI">Michigan</option>
		<option value="MN">Minnesota</option>
		<option value="MS">Mississippi</option>
		<option value="MO">Missouri</option>
		<option value="MT">Montana</option>
		<option value="NE">Nebraska</option>
		<option value="NV">Nevada</option>
		<option value="NH">New Hampshire</option>
		<option value="NJ">New Jersey</option>
		<option value="NM">New Mexico</option>
		<option value="NY">New York</option>
		<option value="NC">North Carolina</option>
		<option value="ND">North Dakota</option>
		<option value="OH">Ohio</option>
		<option value="OK">Oklahoma</option>
		<option value="OR">Oregon</option>
		<option value="PA">Pennsylvania</option>
		<option value="RI">Rhode Island</option>
		<option value="SC">South Carolina</option>
		<option value="SD">South Dakota</option>
		<option value="TN">Tennessee</option>
		<option value="TX">Texas</option>
		<option value="UT">Utah</option>
		<option value="VT">Vermont</option>
		<option value="VA">Virginia</option>
		<option value="WA">Washington</option>
		<option value="WV">West Virginia</option>
		<option value="WI">Wisconsin</option>
		<option value="WY">Wyoming</option>
	</select>
</div>

<h2>Optgroups</h2>
<p>The following example organizes the options into <code>optgroup</code> elements. Support for this feature in mobile selects is a bit spotty, but is improving.</p>

<div data-role="fieldcontain">
	<label for="select-choice-nc" class="select">Preferred delivery:</label>
	<select name="select-choice-8" id="select-choice-nc">
		<optgroup label="FedEx">
			<option value="firstOvernight">First Overnight</option>
			<option value="expressSaver">Express Saver</option>
			<option value="ground">Ground</option>
		</optgroup>
		<optgroup label="UPS">
			<option value="firstOvernight">First Overnight</option>
			<option value="expressSaver">Express Saver</option>
			<option value="ground">Ground</option>
		</optgroup>
		<optgroup label="US Mail">
			<option value="standard">Standard: 7 day</option>
			<option value="rush">Rush: 3 days</option>
			<option value="express">Express: next day (disabled)</option>
			<option value="overnight">Overnight</option>
		</optgroup>
	</select>
</div>



<h2>Vertically grouped select inputs</h2>

<p>To create a grouped set of select inputs, first add <code>select</code> and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>select</code> so they are semantically associated.</p>

<p>Because the <code>label</code> element will be associated with each individual select input, we recommend wrapping the selects in a <code>fieldset</code> element that has a <code>legend</code> which acts as the combined label for the grouped inputs.</p>

<p>Lastly, one needs to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute, so it can be styled as a group.</p>
			
<pre><code>	
&lt;div data-role=&quot;fieldcontain&quot;&gt;
&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
	&lt;legend&gt;Date of Birth:&lt;/legend&gt;

    &lt;label for="select-choice-month">Month&lt;/label&gt;
&lt;select name="select-choice-month" id="select-choice-month"&gt;
	&lt;option&gt;Month&lt;/option&gt;
	&lt;option value="jan"&gt;January&lt;/option&gt;
	&lt;!-- etc. --&gt;
&lt;/select&gt;

	&lt;label for="select-choice-day">Day&lt;/label&gt;
&lt;select name="select-choice-day" id="select-choice-day"&gt;
	&lt;option&gt;Day&lt;/option&gt;
	&lt;option value="1"&gt;1&lt;/option&gt;
	&lt;!-- etc. --&gt;
&lt;/select&gt;

&lt;label for="select-choice-year">Year&lt;/label&gt;
&lt;select name="select-choice-year" id="select-choice-year"&gt;
	&lt;option&gt;Year&lt;/option&gt;
	&lt;option value="2011"&gt;2011&lt;/option&gt;
	&lt;!-- etc. --&gt;
&lt;/select&gt;
&lt;/fieldset&gt;
&lt;/div&gt;
</code></pre>

	<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
		<legend>Date of Birth:</legend>
		
		<label for="select-choice-month">Month</label>
		<select name="select-choice-month" id="select-choice-month">
			<option>Month</option>
			<option value="jan">January</option>
			<option value="dec">December</option>
			<option value="feb">February</option>
			<option value="mar">March</option>
			<option value="apr">April</option>
			<option value="may">May</option>
			<option value="jun">June</option>
			<option value="jul">July</option>
			<option value="aug">August</option>
			<option value="sep">September</option>
			<option value="oct">October</option>
			<option value="nov">November</option>
			<option value="dec">December</option>
		</select>

		<label for="select-choice-day">Day</label>
		<select name="select-choice-day" id="select-choice-day">
			<option>Day</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
		</select>

		<label for="select-choice-year">Year</label>
		<select name="select-choice-year" id="select-choice-year">
			<option>Year</option>
			<option value="2011">2011</option>
			<option value="2010">2010</option>
			<option value="2009">2009</option>
			<option value="2008">2008</option>
			<option value="2007">2007</option>
			<option value="2006">2006</option>
			<option value="2005">2005</option>
			<option value="2004">2004</option>
		</select>
	</fieldset>

</div>

<h2>Horizontally grouped select inputs</h2>
<p>Select inputs can also be used for grouped sets with more than one related selections. To make a horizontal button set, add the <code>data-type="horizontal"</code> to the fieldset. Note that the buttons which trigger the select will resize depending on the currently selected option’s value. Note that browsers without support for <code>display: inline-block;</code> will group the selects vertically, as above.</p>

<code>
&lt;fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong>&gt;
</code>

	<fieldset data-role="controlgroup" data-type="horizontal">
		<legend>Date of Birth:</legend>
		
		<label for="select-choice-month">Month</label>
		<select name="select-choice-month" id="select-choice-month">
			<option value="jan">Jan</option>
			<option value="dec">Dec</option>
			<option value="feb">Feb</option>
			<option value="mar">Mar</option>
			<option value="apr">Apr</option>
			<option value="may">May</option>
			<option value="jun">Jun</option>
			<option value="jul">Jul</option>
			<option value="aug">Aug</option>
			<option value="sep">Sep</option>
			<option value="oct">Oct</option>
			<option value="nov">Nov</option>
			<option value="dec">Dec</option>
		</select>

		<label for="select-choice-day">Day</label>
		<select name="select-choice-day" id="select-choice-day">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">13</option>
			<option value="13">14</option>
			<option value="15">15</option>
		</select>

		<label for="select-choice-year">Year</label>
		<select name="select-choice-year" id="select-choice-year">
			<option value="2011">2012</option>
			<option value="2011">2011</option>
			<option value="2010">2010</option>
			<option value="2009">2009</option>
			<option value="2008">2008</option>
			<option value="2007">2007</option>
			<option value="2006">2006</option>
			<option value="2005">2005</option>
			<option value="2004">2004</option>
		</select>
	</fieldset>
        
<h2>Calling the select menu plugin</h2>
<p>The select menu plugin will auto initialize on any page that contains a select menu, without any need for a <code>data-role</code> attribute in the markup. However, you can directly call the select menu plugin on any selector, just like any normal jQuery plugin:</p>
<pre><code>
$('select').selectmenu();			
</code></pre>
    
	</form>
	
	
	<h2>Theming selects</h2>
	<p>You can specify any jQuery Mobile button <code>data-</code> attribute on a select element, too. In this example, we're setting the theme, icon and inline properties:</p>

	<div data-role="fieldcontain">
		<label for="select-choice-11" class="select">Actions</label>
		<select name="select-choice-11" id="select-choice-11" data-theme="e" data-icon="gear" data-inline="true">
			<option value="view">User details</option>
			<option value="edit">Edit user</option>
			<option value="deactivate">De-activate</option>
			<option value="delete">Delete user</option>
		</select>
	</div>
    
	
	<h2>Custom select menus</h2>
	<p>For the sake of advanced styling, the framework also offers a method of generating <a href="custom.html">custom menus</a> from existing select menu markup  instead of the native OS menu. The custom menu supports disabled options and multiple selection (whereas native mobile OS support for both is inconsistent), adds an elegant way to handle placeholder values, and restores missing functionality on certain platforms such as <code>optgroup</code> support on Android.
		
	<div align="right"><a href="custom.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true" align="right">Custom select menu docs</a>
</div>
		</p>
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li data-theme="a"><a href="index.html">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Select methods</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Select Menus</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Select menus</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The select menu plugin has the following methods:</p>

		<dl>
						
			<dt><code>close</code> close an open select menu</dt>
			<dd>
				<pre><code>
$('select').selectmenu('close');			
				</code></pre>
			</dd>
			
			<dt><code>enable</code> enable a disabled select</dt>
			<dd>
				<pre><code>
$('select').selectmenu('enable');			
				</code></pre>
			</dd>
			
			<dt><code>disable</code> disable a select.</dt>
			<dd>
				<pre><code>
$('select').selectmenu('disable');			
				</code></pre>
			</dd>
			
			<dt><code>open</code> open a closed select menu (<a href="custom.html">custom menus</a> only)</dt>
			<dd>
				<pre><code>
$('select').selectmenu('open');			
				</code></pre>
			</dd>
			
			<dt><code>refresh</code> update the custom select</dt>
			<dd>
			 This is used to update the custom select to reflect the native select element's value.If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen.
				<pre><code>
//refresh value			
$('select').selectmenu('refresh');

//refresh and force rebuild
$('select').selectmenu('refresh', true);
				</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li data-theme="a"><a href="index.html">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\selects\options.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Select options</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Select Menus</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Select menus</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The select menu plugin has the following options:</p>			
			

		<dl>
			
			<dt><code>corners</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>Applies the theme button border-radius to the select button if set to true. This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;</code></p>
				<pre><code>$('select').selectmenu(<strong>{ corners: "false" }</strong>);</code></pre>
			</dd>			
			<dt><code>icon</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "arrow-down"</p>
				<p>Replaces the default icon "arrow-down" with an icon from the <a href="../../buttons/buttons-icons.html">icon set</a>. This option is also exposed as a data attribute: <code>data-icon=&quot;star&quot;</code>. Setting this attribute to "false" suppresses the icon.</p>
				<pre><code>$('select').selectmenu(<strong>{ icon: "star" }</strong>);</code></pre>
				
				<p>To suppress the icon, a boolean expression must be used:</p>
				<pre><code>$('select').selectmenu(<strong>{ icon: false }</strong>);</code></pre>
			</dd>
			
			<dt><code>iconpos</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "right"</p>
				<p>Position of the icon in the select button. Possible values: left, right, top, bottom, notext. The notext value will display the select as an icon-only button with no text feedback. This option is also exposed as a data attribute: <code>data-iconpos=&quot;left&quot;</code></p>
				<pre><code>$('select').selectmenu(<strong>{ iconpos: "left" }</strong>);</code></pre>
			</dd>
			
			<dt><code>iconshadow</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>Applies the theme shadow to the select button if set to true. This option is also exposed as a data attribute: <code>data-iconshadow=&quot;false&quot;</code></p>
				<pre><code>$('select').selectmenu(<strong>{ iconshadow: "false" }</strong>);</code></pre>
			</dd>
			
			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: "select:not(:jqmData(role='slider'))"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as select menus. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
				<pre><code>$( document ).bind( "mobileinit", function(){
	<strong>$.mobile.selectmenu.prototype.options.initSelector = ".myselect";</strong>
});
</code></pre>
			</dd>
			
			<dt><code>inline</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: null (false)</p>
				<p>If set to true, this will make the select button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the select button is full width, regardless of the feedback content. Possible values: true, false. This option is also exposed as a data attribute: <code>data-inline=&quot;true&quot;</code></p>
				<pre><code>$('select').selectmenu(<strong>{ inline: "true" }</strong>);</code></pre>
			</dd>
			
			<dt><code>mini</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>		
				<pre><code>$('select').selectmenu(<strong>{ mini: "true" }</strong>);</code></pre>
				
			<dt><code>nativeMenu</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>When set to true, clicking the custom-styled select menu will open the native select menu which is best for performance. If set to false, the custom select menu style will be used instead of the native menu. This option is also exposed as a data attribute: <code>data-native-menu=&quot;false&quot;</code></p>
				<pre><code>$('select').selectmenu(<strong>{ nativeMenu: "false" }</strong>);</code></pre>
			</dd>
			
			<dt><code>overlayTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: a</p>
				<p>Sets the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, the content block colors for swatch "a" will be used for the overlays. This option is also exposed as a data attribute: <code>ui-body-d</code></p>
				<pre><code>$('select').selectmenu(<strong>{ overlayTheme: "d" }</strong>);</code></pre>
			</dd>
			
			<dt><code>preventFocusZoom</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true on iOS platforms</p>
				<p>This option disables page zoom temporarily when a custom select is focused, which prevents iOS devices from zooming the page into the select. By default, iOS often zooms into form controls, and the behavior is often unnecessary and intrusive in mobile-optimized layouts. This option is also exposed as a data attribute: <code>data-prevent-focus-zoom=&quot;true&quot;</code></p>				
				<pre><code>$('select').selectmenu(<strong>{ preventFocusZoom: true }</strong>);</code></pre>
			</dd>
			
			
			<dt><code>shadow</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>Applies the drop shadow style to the select button if set to true. This option is also exposed as a data attribute: <code>data-shadow=&quot;false&quot;</code></p>
				<pre><code>$('select').selectmenu(<strong>{ shadow: "false" }</strong>);</code></pre>
			</dd>
			
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>				
				<pre><code>$('select').selectmenu(<strong>{ theme: "a" }</strong>);</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li data-theme="a"><a href="index.html">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\slider\events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Slider events</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Slider</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Slider</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			</ul>
			
			<p>Bind events directly to the <code>input</code> element.  Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code> 
$( ".selector" ).bind( "change", function(event, ui) {
  ...
});
</code></pre> 
			
			<p>The slider plugin has the following custom event:</p>

	<dl>
				
		<dt><code>create</code> triggered when a slider is created</dt>
		<dd>

			<pre><code>
$( ".selector" ).slider({
   create: function(event, ui) { ... }
});		
			</code></pre>
		</dd>
		

	</dl>
	    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li data-theme="a"><a href="index.html">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\slider\index.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Slider</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Slider</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">
			<h2>Slider</h2>

			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

			<p>To add a slider widget to your page, use a standard <code>input</code> with the <code>type="range"</code> attribute.  The input's <code>value</code> is used to configure the starting position of the handle and the value is populated in the text input. Specify <code>min</code> and <code>max</code> attribute values to set the slider's range. If you want to constrain input to specific increments, add the <code>step</code> attribute. Set the <code>value</code> attribute to define the initial value. The framework will parse these attributes to configure the slider widget. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to sliders.</p>

			<p>As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.</p>
			<p>Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>

			<p>The framework will find all <code>input</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input without any need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add <code>data-role="none"</code> attribute to the <code>input</code> and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them. In this example, the acceptable range is 0-100. </p>

<pre><code>
&lt;label for=&quot;slider-1&quot;&gt;Input slider:&lt;/label&gt;
&lt;input type=&quot;range&quot; name=&quot;slider-1&quot; id=&quot;slider-1&quot; value=&quot;60&quot; min=&quot;0&quot; max=&quot;100&quot; /&gt;
</code></pre>

				<p>The default slider with these settings is displayed like this:</p>
				<label for="slider-1">Input slider:</label>
				<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" />
				
				<h2>Step increment</h2>

				<p>To force the slider to snap to a specific increment, add the <code>step</code> attribute to the input. By default, the step is 1, but in this example, the step is 50 and the maximum value is 500.</p>

<pre><code>
&lt;label for=&quot;slider-step&quot;&gt;Input slider:&lt;/label&gt;
&lt;input type=&quot;range&quot; name=&quot;slider-step&quot; id=&quot;slider-step&quot; value=&quot;150&quot; min=&quot;0&quot; max=&quot;500&quot; <strong>step=&quot;50&quot;</strong> /&gt;
</code></pre>

				<p>This will produce an input that snaps to increments of 50. If a value is added to the input that isn't valid with the step increment, the value will be reset on blur to the closest step.</p>
		        <label for="slider-step">Input slider:</label>
				<input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500" step="50" />
				
				
				<h2>Fill highlight</h2>

				<p>To have a highlight fill on the track up to the slider handle position, add the <code>data-highlight="true"</code> attribute to the input. The fill uses active state swatch. </p>

<pre><code>
&lt;label for=&quot;slider-fill&quot;&gt;Input slider:&lt;/label&gt;
&lt;input type=&quot;range&quot; name=&quot;slider-fill&quot; id=&quot;slider-fill&quot; value=&quot;60&quot; min=&quot;0&quot; max=&quot;100&quot; <strong>data-highlight=&quot;true&quot;</strong> /&gt;
</code></pre>

		        <label for="slider-fill">Input slider:</label>
				<input type="range" name="slider-fill" id="slider-fill" value="60" min="0" max="100" data-highlight="true" />
	
				
				<h2>Mini version</h2>

				<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>

<pre><code>
&lt;label for=&quot;slider-mini&quot;&gt;Input slider:&lt;/label&gt;
&lt;input type=&quot;range&quot; name=&quot;slider-mini&quot; id=&quot;slider-mini&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot; data-highlight=&quot;true&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
</code></pre>

				<p>This will produce a slider and its corresponding input that are not as tall as the standard version. The input also has a smaller text size.</p>
		        <label for="slider-mini">Input slider:</label>
				<input type="range" name="slider-mini" id="slider-mini" value="25" min="0" max="100" data-highlight="true" data-mini="true" />

				<h2>Field containers</h2>
					
				<p>Optionally wrap the slider markup in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form. In this example, the <code>step</code> attribute is omitted to allow any whole number value to be selected.</p>


<pre><code>
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
</strong>   &lt;label for=&quot;slider-2&quot;&gt;Input slider:&lt;/label&gt;
   &lt;input type=&quot;range&quot; name=&quot;slider-2&quot; id=&quot;slider-2&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot;  /&gt;
<strong>&lt;/div&gt;
</strong></code></pre>

			<p>The slider is now displayed like this:</p>
			<div data-role="fieldcontain">
				<label for="slider-2">Input slider:</label>
				<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" />
			</div>

			<p>Sliders also respond to key commands. Right Arrow, Up Arrow and Page Up keys increase the value; Left Arrow, Down Arrow and Page Down keys decrease it. To move the slider to its minimum or maximum value, use the Home or End key, respectively.</p>


		<h2>Calling the slider plugin</h2>

<p>This plugin will auto initialize on any page that contains a text <code>input</code> with the <code>type="range"</code> attribute. However, if needed you can directly call the <code>slider</code> plugin on any selector, just like any jQuery plugin:</p>
<pre><code>
$('input').slider();
</code></pre>


		<h2>Theming the slider</h2>
		<p>To set the theme swatch for the slider, add a <code>data-theme</code> attribute to the <code>input</code> which will apply the theme to both the input, handle and track. The track swatch can be set separately by adding the  <code>data-track-theme</code> attribute to apply the down state version of the selected button swatch.</p>

		<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
	&lt;label for=&quot;slider-3&quot;&gt;Input slider:&lt;/label&gt;
	&lt;input type=&quot;range&quot; name=&quot;slider-3&quot; id=&quot;slider-3&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot; <strong>data-theme=&quot;a&quot; data-track-theme=&quot;b&quot;</strong> /&gt;
&lt;/div&gt;
		</code></pre>

		<p>This will produce a themed slider:</p>
		<div data-role="fieldcontain">
			<label for="slider-3">Input slider:</label>
			<input type="range" name="slider-3" id="slider-3" value="25" min="0" max="100" data-theme="a" data-track-theme="b" />
		</div>
		</form>
	</div><!--/content-primary -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview" data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li data-theme="a"><a href="index.html">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>


				</ul>
		</div>
	</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>

</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\slider\methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Slider methods</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Slider</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Slider</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The slider plugin has the following methods:</p>

		<dl>									
			<dt><code>enable</code> enable a disabled slider</dt>
			<dd>
				<pre><code>
$('.selector').slider('enable');			
				</code></pre>
			</dd>
			
			<dt><code>disable</code> disable a slider</dt>
			<dd>
				<pre><code>
$('.selector').slider('disable');			
				</code></pre>
			</dd>
						
			<dt><code>refresh</code> update the slider</dt>
			<dd>
			<p>If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling.</p> 				
			
			<pre><code>			
$('.selector').slider('refresh');
				</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li data-theme="a"><a href="index.html">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\slider\options.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Slider options</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Slider</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Slider</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The slider plugin has the following options:</p>

		<dl>
			<dt><code>disabled</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the default state of the slider to disabled when "true".</p>		
				<pre><code>$('.selector').slider(<strong>{ disabled: "true" }</strong>);</code></pre>
			</dd>
			
			<dt><code>highlight</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets an active state fill on the track from the left edge to the slider handle when set to "true".</p>		
				<pre><code>$('.selector').slider(<strong>{ highlight: "true" }</strong>);</code></pre>
			</dd>
					
			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as sliders. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
   <strong>$.mobile.slider.prototype.options.initSelector = ".myslider";</strong>
});
</code></pre>
			</dd>
			
			<dt><code>mini</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>		
				<pre><code>$('.selector').slider(<strong>{ mini: "true" }</strong>);</code></pre>
			</dd>
							
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>			
				<pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
			</dd>
			
			<dt><code>trackTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for the slider's track, specifically. It accepts a single letter from a-z that maps to the swatches included in your theme.</p>		
				<pre><code>$('.selector').slider(<strong>{ trackTheme: "a" }</strong>);</code></pre>
				<p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-track-theme=&quot;a&quot;</code>.</p>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li data-theme="a"><a href="index.html">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\switch\events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Slider events</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Flip Toggle Switch</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Flip toggle switch</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			</ul>
			
			<p>Bind events directly to the <code>select</code> element.  Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code> 
$( ".selector" ).bind( "change", function(event, ui) {
  ...
});
</code></pre> 
			
			<p>The slider plugin has the following custom event:</p>

	<dl>
				
		<dt><code>create</code> triggered when a slider is created</dt>
		<dd>

			<pre><code>
$( ".selector" ).slider({
   create: function(event, ui) { ... }
});		
			</code></pre>
		</dd>
		

	</dl>
	    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\switch\index.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Switch</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Flip Toggle Switch</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">
			<h2>Flip toggle switch</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
    
			<p>A binary "flip" switch is a common UI element on mobile devices that is used for binary on/off or true/false data input. You can either drag the flip handle like a slider or tap one side of the switch.</p>
			
			<p>To create a flip toggle, start with a <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options accordingly. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to flip switches.</p>
				
			<p>Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
				
<pre><code>	
&lt;label for=&quot;flip-1&quot;&gt;Select slider:&lt;/label&gt;
&lt;select name=&quot;flip-1&quot; id=&quot;flip-1&quot; data-role=&quot;slider&quot;&gt;
	&lt;option value=&quot;off&quot;&gt;Off&lt;/option&gt;
	&lt;option value=&quot;on&quot;&gt;On&lt;/option&gt;
&lt;/select&gt; 
</code></pre>	

			<p>This will produce a basic flip toggle switch input. The default styles set the width of the switch to 100% of the parent container and stack the label on a separate line.</p>

			<label for="flip-1">Flip switch:</label>
			<select name="flip-1" id="flip-1" data-role="slider">
				<option value="off">Off</option>
				<option value="on">On</option>
			</select> 
			
			
			<h2>Longer Labels</h2>
			<p>The control is proportionally scaled, so to use longer labels one can just add a line of CSS setting the switch to the desired width. For example, given the following markup:</p>
<pre><code>
&lt;div class="containing-element"&gt;
	&lt;label for="flip-min">Flip switch:&lt;/label&gt;
	&lt;select name="flip-min" id="flip-min" data-role="slider"&gt;
		&lt;option value="off">Switch Off&lt;/option&gt;
		&lt;option value="on">Switch On&lt;/option&gt;
	&lt;/select&gt;
&lt;/div&gt;
</code></pre>
	
			<p><code>.containing-element .ui-slider-switch { width: 9em }</code> will produce:</p>
		
			<style type="text/css" media="screen">
			.containing-element .ui-slider-switch { width: 9em; }
			</style>
			
			<div class="containing-element">
				<label for="flip-min">Flip switch:</label>
				<select name="flip-min" id="flip-min" data-role="slider">
					<option value="off">Switch Off</option>
					<option value="on">Switch On</option>
				</select> 
			</div>
			
			<p>As some default styles hinge on fieldcontains, note that you may have to ensure that custom styles apply to switches within fieldcontains by using <code>.ui-field-contain div.ui-slider-switch { width: […]; }</code>.</p>
			
			<h2>Mini version</h2>

			<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>

<pre><code>	
&lt;label for=&quot;flip-mini&quot;&gt;Flip switch:&lt;/label&gt;
&lt;select name=&quot;flip-mini&quot; id=&quot;flip-mini&quot; data-role=&quot;slider&quot; <strong>data-mini=&quot;true&quot;</strong>&gt;
	&lt;option value=&quot;off&quot;&gt;Off&lt;/option&gt;
	&lt;option value=&quot;on&quot;&gt;On&lt;/option&gt;
&lt;/select&gt;
</code></pre>
			
			<p>This will produce a flip switch that is not as tall as the standard version and has a smaller text size.</p>
			<label for="flip-mini">Flip switch:</label>
			<select name="flip-mini" id="flip-mini" data-role="slider" data-mini="true">
				<option value="off">Off</option>
				<option value="on">On</option>
			</select>
			

			<h2>Field containers</h2>
			 <p>Optionally wrap the switch markup in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>

<pre><code>	
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
</strong>&lt;label for=&quot;flip-2&quot;&gt;Flip switch:&lt;/label&gt;
	&lt;select name=&quot;flip-2&quot; id=&quot;flip-2&quot; data-role=&quot;slider&quot;&gt;
		&lt;option value=&quot;nope&quot;&gt;Nope&lt;/option&gt;
		&lt;option value=&quot;yep&quot;&gt;Yep&lt;/option&gt;
	&lt;/select&gt; 
<strong>&lt;/div&gt;
</strong></code></pre>	
		<p>The flip toggle switch is now displayed like this:</p>
		<div data-role="fieldcontain">
			<label for="flip-2">Flip switch:</label>
			<select name="flip-2" id="flip-2" data-role="slider">
				<option value="nope">Nope</option>
				<option value="yep">Yep</option>
			</select> 
		</div>
						
				
		<h2>Theming the flip switch</h2>	
		
		<p>Like all form elements, this widget will automatically inherit the theme from its parent container. To choose a specific theme color swatch, specify the <code>data-theme</code> attribute on the <code>select</code> and specify a swatch letter.</p>	
		
<pre><code>	
&lt;div data-role=&quot;fieldcontain&quot;&gt;
	&lt;label for=&quot;flip-3&quot;&gt;Flip switch:&lt;/label&gt;
	&lt;select name=&quot;flip-3&quot; id=&quot;flip-3&quot; data-role=&quot;slider&quot; data-theme=&quot;a&quot;&gt;
		&lt;option value=&quot;no&quot;&gt;No&lt;/option&gt;
		&lt;option value=&quot;yes&quot;&gt;Yes&lt;/option&gt;
	&lt;/select&gt; 
&lt;/div&gt;
</code></pre>	
				<p>This results in a switch with the swatch "a" colors for the handle. Note that the lefthand "on" state gets the active state color.</p>
				<div data-role="fieldcontain">
					<label for="flip-3">Flip switch:</label>
					<select name="flip-3" id="flip-3" data-role="slider" data-theme="a">
						<option value="hate">Hate</option>
						<option value="love">Love</option>
					</select> 
				</div>
				
				<p>Here is a swatch "e" variation:</p>
				<div data-role="fieldcontain">
					<label for="flip-4">Flip switch:</label>
					<select name="flip-4" id="flip-4" data-role="slider" data-theme="e">
						<option value="no">No</option>
						<option value="yes">Yes</option>
					</select> 
				</div>
		
		<p>It is also possible to theme the track of the flip switch by adding the <code>data-track-theme</code> attribute and specifying the chosen swatch letter on the <code>select</code>.</p>
<p>Here's an example of a flip switch with the swatch "a" applied to the track and swatch "c" applied to the handle:</p>		

<pre><code>	
&lt;div data-role="fieldcontain"&gt;
        &lt;label for="flip-5"&gt;Flip switch:&lt;/label&gt;
        &lt;select name="flip-5" id="flip-5" data-role="slider" data-theme="c" data-track-theme="a"&gt;
                &lt;option value="no"&gt;No&lt;/option&gt;
                &lt;option value="yes"&gt;Yes&lt;/option&gt;
        &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<div data-role="fieldcontain">
    <label for="flip-5">Flip switch:</label>
    <select name="flip-5" id="flip-5" data-role="slider" data-theme="c" data-track-theme="a">
        <option value="no">No</option>
        <option value="yes">Yes</option>
    </select>
</div>
		
		
		<h2>Calling the switch plugin</h2>

<p>This plugin will auto-initialize on any page that contains a <code>select</code> with the <code>data-role="slider"</code> attribute. However, if needed you can directly call the <code>slider</code> plugin on any selector, just like any jQuery plugin:</p>
<pre><code>
$('select').slider();			
</code></pre>
    
		</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\switch\methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Slider methods</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Flip Toggle Switch</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Flip toggle switch</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The slider plugin has the following methods:</p>

		<dl>									
			<dt><code>enable</code> enable a disabled slider</dt>
			<dd>
				<pre><code>
$('.selector').slider('enable');			
				</code></pre>
			</dd>
			
			<dt><code>disable</code> disable a slider</dt>
			<dd>
				<pre><code>
$('.selector').slider('disable');			
				</code></pre>
			</dd>
						
			<dt><code>refresh</code> update the slider</dt>
			<dd>
			<p>If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling.</p> 				
			
			<pre><code>			
$('.selector').slider('refresh');
				</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\switch\options.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Slider options</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Flip Toggle Switch</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Flip toggle switch</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The slider plugin has the following options:</p>

		<dl>
			<dt><code>disabled</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the default state of the slider to disabled when "true".</p>		
				<pre><code>$('.selector').slider(<strong>{ disabled: "true" }</strong>);</code></pre>
			</dd>
			
			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as sliders. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
   <strong>$.mobile.slider.prototype.options.initSelector = ".myslider";</strong>
});
</code></pre>
			
			<dt><code>mini</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>		
				<pre><code>$('.selector').slider(<strong>{ mini: "true" }</strong>);</code></pre>
			</dd>
						
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>			
				<pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
			</dd>
			
			<dt><code>trackTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for the slider's track, specifically. It accepts a single letter from a-z that maps to the swatches included in your theme.</p>		
				<pre><code>$('.selector').slider(<strong>{ trackTheme: "a" }</strong>);</code></pre>
				<p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-track-theme=&quot;a&quot;</code>.</p>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li><a href="../textinputs/index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\textinputs\events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Text Input events</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Text inputs</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Text inputs</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			</ul>
			
			<p>Bind events directly to the <code>input</code> element.  Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code> 
$( ".selector" ).bind( "change", function(event, ui) {
  ...
});
</code></pre> 
			
			<p>The text input plugin has the following custom events:</p>

	<dl>
				
		<dt><code>create</code> triggered when a text input is created</dt>
		<dd>

			<pre><code>
$( ".selector" ).textinput({
   create: function(event, ui) { ... }
});		
			</code></pre>
			</dd>
			
	</dl>
	    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li data-theme="a"><a href="index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\textinputs\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Text inputs</title> 
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Text inputs</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<form action="#" method="get">

			<h2>Text inputs & Textareas</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

			<p>Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to text inputs.</p>
			
			<h2>Text inputs</h2>
			<p>To collect standard alphanumeric text, use an <code>input</code> with a <code>type="text"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>

<pre><code>	
    &lt;label for=&quot;basic&quot;&gt;Text Input:&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;basic&quot; value=&quot;&quot;  /&gt;
</code></pre>		

			<p>This will produce a basic text input. The default styles set the width of the input to 100% of the parent container and stack the label on a separate line.</p>
			
	         <label for="basic">Text Input:</label>
	         <input type="text" name="name" id="basic" value="" />
	
			<h2>Mini version</h2>

			<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>

<pre><code>	
&lt;label for=&quot;basic&quot;&gt;Text Input:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;basic&quot; value=&quot;&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
</code></pre>
			
			<p>This will produce an input that is not as tall as the standard version and has a smaller text size.</p>
	         <label for="mini">Text Input:</label>
	         <input type="text" name="name" id="mini" value="" data-mini="true" />

			<h2>Field containers</h2>

			<p>Optionally wrap the text input in a container with the <code> data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>

<pre><code>	
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
</strong>    &lt;label for=&quot;name&quot;&gt;Text Input:&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; value=&quot;&quot;  /&gt;
<strong>&lt;/div&gt;	
</strong></code></pre>		
			 
			<p>The text input is now displayed like this:</p>
	    	<div data-role="fieldcontain">
	         <label for="name">Text Input:</label>
	         <input type="text" name="name" id="name" value="" />
			</div>
						
			
			<h2>More text input types</h2>
			<p>In jQuery Mobile, you can use existing and new HTML5 input types such as <code>password</code>, <code>email</code>, <code>tel</code>, <code>number</code>, and more.  Some type values are rendered differently across browsers. For example, Chrome renders the <code>range</code> input as a slider. jQuery Mobile standardizes the appearance of <code>range</code> and <code>search</code> by dynamically changing their type to <code>text</code>. You can configure which input types are degraded to <code>text</code> with the <code>page</code> plugin's options.</p>
			
			<p>One major advantage of using these more specific input types if that on mobile devices, specialized keyboards that speed data entry are offered in place of the standard text keyboard. Try the following inputs on a mobile device to see which display custom keyboards on various platforms.</p>
			
			<div data-role="fieldcontain">
	         <label for="password">Password:</label>
	         <input type="password" name="password" id="password" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="number">Number:</label>
	         <input type="number" name="number" id="number" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="number-pattern">Number + pattern:</label>
	         <input type="number" name="number" pattern="[0-9]*" id="number-pattern" value="" placeholder="Pattern attribute [0-9]* for a numeric keypad" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="email">Email:</label>
	         <input type="email" name="email" id="email" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="url">Url:</label>
	         <input type="url" name="url" id="url" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="tel">Tel:</label>
	         <input type="tel" name="tel" id="tel" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="time">Time:</label>
	         <input type="time" name="time" id="time" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="date">Date:</label>
	         <input type="date" name="date" id="date" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="month">Month:</label>
	         <input type="month" name="month" id="month" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="week">Week:</label>
	         <input type="week" name="week" id="week" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="datetime">Datetime:</label>
	         <input type="datetime" name="datetime" id="datetime" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="datetime-l">Datetime local:</label>
	         <input type="datetime-local" name="datetime-l" id="datetime-l" value="" />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="color">Color:</label>
	         <input type="color" name="color" id="color" value="" />
			</div>
			
			
			
			<h2>Textareas</h2>
			<p>For multi-line text inputs, use a <code>textarea</code> element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar. </p>
			<p>Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>textarea</code> so they are semantically associated, and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>

<pre><code>	
<strong>&lt;label for=&quot;textarea-a&quot;&gt;Textarea:&lt;/label&gt;
&lt;textarea name=&quot;textarea&quot; id=&quot;textarea-a&quot;&gt;</strong>
I&#x27;m a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
<strong>&lt;/textarea&gt;</strong>
</code></pre>	

			<p>This will produce a basic textarea with the width set to 100% of the parent container and the label stacked on a separate line. The textarea will grow to fit new lines as you type:</p>
			<label for="textarea-a">Textarea:</label>
			<textarea name="textarea" id="textarea-a">
I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
			</textarea>

<pre><code>	
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
</strong>&lt;label for=&quot;textarea&quot;&gt;Textarea:&lt;/label&gt;
	&lt;textarea name=&quot;textarea&quot; id=&quot;textarea&quot;&gt;&lt;/textarea&gt;
<strong>&lt;/div&gt;</strong>
</code></pre>	
			 
			<p>The textarea is displayed like this and will grow to fit new lines as you type:</p>
			<div data-role="fieldcontain">
			<label for="textarea">Textarea:</label>
			<textarea name="textarea" id="textarea"></textarea>
			</div>
			
			
			<h2>Calling the textinput plugin</h2>

			<p>This plugin will auto initialize on any page that contains a textarea or any of the text input types listed above without any need for a <code>data-role</code> attribute in the markup. However, if needed, you can directly call the <code>textinput</code> plugin on any selector, just like any jQuery plugin:</p>
			<pre><code>
$('input').textinput();			
			</code></pre>
			
			
			<h2>Degraded input types</h2>
			<p>jQuery Mobile degrades several HTML5 input types back to type=text or type=number after adding enhanced controls. For example, inputs with a type of range are enhanced with a custom slider control, and their type is set to number to offer a usable form input alongside that slider. Inputs with a type of search are degraded back to type=text after we add our own themable search input styling.</p>
			<p>The page plugin contains a list of input types that are set to either true which means they'll degrade to type=text, false which means they'll be left alone, or a string such as "number", which means they'll be converted to that type (such as the case of type=range).</p>
		
			<p>You can configure which types are changed via the page plugin's <code>degradeInputs</code> option, which can be manipulated externally via <code>$.mobile.page.prototype.options.degradeInputs</code>, which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>	
		

	</form>
	
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li data-theme="a"><a href="index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\textinputs\methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Text Input methods</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Text inputs</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Text inputs</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The text input plugin has the following methods:</p>

		<dl>
						
			<dt><code>enable</code> enable a disabled text input</dt>
			<dd>
				<pre><code>
$('.selector').textinput('enable');			
				</code></pre>
			</dd>
			
			<dt><code>disable</code> disable a text input</dt>
			<dd>
				<pre><code>
$('.selector').textinput('disable');			
				</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li data-theme="a"><a href="index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\forms\textinputs\options.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Text Input options</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Text inputs</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<form action="#" method="get">

			<h2>Text inputs</h2>
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
				<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			
			<p>The text input plugin has the following options:</p>

		<dl>
			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
   <strong>$.mobile.textinput.prototype.options.initSelector = ".myInputs";</strong>
});
</code></pre>
			</dd>
			
			<dt><code>mini</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>		
				<pre><code>$('.selector').textinput(<strong>{ mini: "true" }</strong>);</code></pre>
			</dd>
			
			<dt><code>preventFocusZoom</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true on iOS platforms</p>
				<p>This option disables page zoom temporarily when a custom input is focused, which prevents iOS devices from zooming the page into the input. By default, iOS often zooms into form controls, and the behavior is often unnecessary and intrusive in mobile-optimized layouts. This option is also exposed as a data attribute: <code>data-prevent-focus-zoom=&quot;true&quot;</code></p>				
				<pre><code>$('input').textinput(<strong>{ preventFocusZoom: true }</strong>);</code></pre>
			</dd>
			
			
			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>					
				<pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
			</dd>
			
		</dl>	
    
	</form>
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Form elements</li>
					<li><a href="../docs-forms.html">Form basics</a></li>
					<li><a href="../forms-all.html">Form element gallery</a></li>
					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
					<li data-theme="a"><a href="index.html">Text inputs</a></li>
					<li><a href="../search/">Search input</a></li>
					<li><a href="../slider/">Slider</a></li>
					<li><a href="../switch/">Flip toggle switch</a></li>
					<li><a href="../radiobuttons/">Radio buttons</a></li>
					<li><a href="../checkboxes/">Checkboxes</a></li>
					<li><a href="../selects/">Select menus</a></li>
					<li><a href="../forms-themes.html">Theming forms</a></li>
					<li><a href="../forms-all-native.html">Native form elements</a></li>
					<li><a href="../forms-sample.html">Submitting forms</a></li>
					
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
	
</div><!-- /page -->

</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\docs-lists.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Lists Overview</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
			<h1>Lists</h1>
			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
			<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
		</div><!-- /header -->

		<div data-role="content">
			<div class="content-primary">
			<h2>List views</h2>

			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="docs-lists.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="lists-options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="lists-methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="lists-events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

			<h2>Basic linked lists</h2>
			<p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p> 
			<p>Here is the HTML markup for a basic linked list.</p>

<pre><code>
&lt;ul data-role=&quot;listview&quot; data-theme=&quot;g&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;acura.html&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;audi.html&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;bmw.html&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

			<a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Basic list example</a>

			<p><strong>Style note on non-inset lists</strong>: all standard, non-inset lists have a -15px margin to negate the 15px of padding on the content area to make lists fill to the edges of the screen. If you add other widgets above or below a list, the negative margin may make these elements overlap so you'll need to add additional spacing in your custom CSS.</p>
			<h2>Nested lists</h2>
			<p>By nesting child <code>ul</code> or <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will show a new page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework. Note that the page of each nested listview is created when the parent page loads and for each nested page the page-events will trigger.</p>
			<p>To <a href="../lists/lists-themes.html">set the swatch color</a> of the child list views, set the <code>data-theme</code> attribute on each list inside.</p>
			<a href="lists-nested.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nested list example</a>

			<h2>Numbered lists</h2>
			<p>Lists can also be created from ordered lists (<code>ol</code>) which is useful when presenting items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.</p>

			<a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Numbered list example</a>

			<h2>Read-only lists</h2>
			<p>List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch and sets the text size to a smaller size than the clickable lists to save a bit of space.</p>

			<a href="lists-readonly-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Read-only list example</a>

			<h2>Split button lists</h2>
			<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the <code>title</code> attribute of the link to the text the link for accessibility.</p>
			<p>You can set the icon for the right split icon by specifying a <code>data-split-icon</code> attribute with the <a href="../buttons/buttons-icons.html">icon name</a> you want. The theme swatch color of the split button defaults to "b" (blue in the default theme) but can be set by specifying a swatch letter in the <code>data-split-theme</code> attribute.</p>

			<a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>


			<h2>List dividers</h2>
			<p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code> data-role="list-divider"</code> to any list item. These items are styled with the bar swatch "b" by default (blue in the default theme) but you can specify a theme for dividers by adding the <code>data-divider-theme</code> attribute to the list element (<code>ul</code> or <code>ol</code>) and specifying a theme swatch letter.</p>

			<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>


			<h2>Search filter</h2>
			<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either <a href="../api/globalconfig.html">bind to the <code>mobileinit</code> event</a> and set the <code>$.mobile.listview.prototype.options.filterPlaceholder</code> option to a string of your choosing, or use the data-attribute <code>data-filter-placeholder</code> on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute <code>data-filter-theme</code> on your listview.</p>

			<a href="lists-search.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter example</a>

      <p>If you want to change the way in which list items are filtered, ie fuzzy search or matching from the beginning of the string, you can configure the callback used internally by defining <code>$.mobile.listview.prototype.options.filterCallback</code> during <code>mobileinit</code> or after the widget has been created with <code>$("#mylist").listview('option', 'filterCallback', yourFilterFunction)</code>. Any function defined for the callback will be provided two arguments. First, the text of the current list item and second, the value being searched for. A truthy value will result in a hidden list item. The default callback which filters entries without the <code>searchValue</code> as a substring is described below:
      </p>

<pre><code>function( text, searchValue ){
  return text.toLowerCase().indexOf( searchValue ) === -1;
};</code></pre>

			<p>To filter list items by values other than the text, add a <code>data-filtertext</code> attribute to the list item.  The value of this attribute will be passed as the first argument to the <code>filterCallback</code> function instead of the text.</p>

			<a href="lists-search-filtertext.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Hidden data filter example</a>

			<h2>Text formatting &amp; counts</h2>
			<p>The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information and counts through semantic HTML markup.</p>

			<ul>
				<li>To add a count indicator to the right of the list item, wrap the number in an element with a class of <code>ui-li-count</code></li>
				<li>To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis. </li>
				<li>Supplemental information can be added to the right of each list item by wrapping content in an element with a class of <code>ui-li-aside</code></li>
			</ul>
			<a href="lists-count.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with count bubbles</a>
			<a href="lists-formatting.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with text formatting</a>

			<h2>Thumbnails &amp; icons</h2>
			<p>To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square. To use standard 16x16 pixel icons in list items, add the class of <code>ui-li-icon</code> to the image element.</p>
			<a href="lists-thumbnails.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with thumbnail images</a>
		 	<a href="lists-icons.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with icon images</a>

			<h2>Inset lists</h2>
			<p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code> data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>

			<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>

			<h2>Calling the listview plugin</h2>
			<p>You can directly call the listview plugin on any selector, just like any jQuery plugin:</p>
			<code>$('#mylist').listview();</code>
			
			<h2>Updating lists</h2>
			<p>If you add items to a listview, you'll need to call the <code>refresh()</code> method on it to update the styles and create any nested lists that are added. For example:</p>
			<code>$('#mylist').listview('refresh');</code>

			<p>Note that the <code>refresh()</code> method only affects <strong>new nodes</strong> appended to a list. This is done for performance reasons.  Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh. </p>


			</div><!--/content-primary -->

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-divider-theme="d">

							<li data-role="list-divider">List views</li>
							<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-index">

		<div data-role="header" data-theme="f">
		<h1>Lists</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">

		<p>Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns.</p>
				
		<ul data-role="listview" data-inset="true">
			<li><a href="docs-lists.html">List basics &amp; API</a></li>
			<li><a href="lists-ul.html">Basic linked list</a></li>
			<li><a href="lists-nested.html">Nested list</a></li>
			<li><a href="lists-ol.html">Numbered list</a></li>
			
			
			
			<li><a href="lists-split.html">Split button list</a></li>	
			<li><a href="lists-divider.html">List dividers</a></li>
			<li><a href="lists-count.html">Count bubble</a></li>
			<li><a href="lists-thumbnails.html">Thumbnails</a></li>
			<li><a href="lists-icons.html">Icons</a></li>
			<li><a href="lists-formatting.html">Content formatting</a></li>
			<li><a href="lists-search.html">Search filter bar</a></li>
			<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
			<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
			<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

			<li><a href="lists-readonly.html">Read-only lists</a></li>
			<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
			<li><a href="lists-forms.html">Lists with forms</a></li>
			<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
			
			
			
			<li><a href="lists-inset.html">Inset styled lists</a></li>
			<li><a href="lists-performance.html">List performance test</a></li>
			<li><a href="lists-themes.html">Theming lists</a></li>
			<!--<li><a href="api-lists.html">API documentation</a></li>-->
		</ul>
		
	

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-all-full.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Linked list samples</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
	<form>
			<h2>Simple list</h2>

			<ul data-role="listview">
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Ferrari</a></li>
			</ul>

		<h2>Count bubbles</h2>
		<ul data-role="listview">
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
				<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
				<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
				<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
				<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
		</ul>
		
		<h2>Numbered list</h2>
			<ol data-role="listview">
				<li><a href="index.html">The Godfather</a></li>
				<li><a href="index.html">Inception</a></li>
				<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
				<li><a href="index.html">Pulp Fiction</a></li>
				<li><a href="index.html">Schindler's List</a></li>
			</ol>
			
		<h2>Divided, formatted content</h2>
		<ul data-role="listview">
			<li><a href="index.html">
				<h3>Stephen Weber</h3>
				<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
				<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
				<p class="ui-li-aside"><strong>6:24</strong>PM</p>
			</a></li>
			<li><a href="index.html">
				<h3>jQuery Team</h3>
				<p><strong>Boston Conference Planning</strong></p>
				<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
				<p class="ui-li-aside"><strong>9:18</strong>AM</p>
			</a></li>
		</ul>
		
			

		
		<h2>Icon list</h2>
		<ul data-role="listview">
			<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
			<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
			<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
			<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
		</ul>
		
		<h2>Thumbnail, split button list</h2>

			<ul data-role="listview">
				<li><a href="index.html">
				<img src="images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
			</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			</ul>
			
		<h2>Divided, filterable list</h2>
			<ul data-role="listview" data-filter="true">
				<li data-role="list-divider">A</li>
				<li><a href="index.html">Adam Kinkaid</a></li>
				<li><a href="index.html">Alex Wickerham</a></li>
				<li><a href="index.html">Avery Johnson</a></li>
				<li data-role="list-divider">B</li>
				<li><a href="index.html">Bob Cabot</a></li>
				<li data-role="list-divider">C</li>
				<li><a href="index.html">Caleb Booth</a></li>
				<li><a href="index.html">Christopher Adams</a></li>
			</ul>



		
		</form>
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-count.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Lists Count Bubbles</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Count bubble</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<div class="content-primary">
		<ul data-role="listview">
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
			<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
			<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
		</ul>
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li data-theme="a"><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-divider.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - List Dividers</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>List dividers</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<div class="content-primary">
			<ul data-role="listview">
				<li data-role="list-divider">A</li>
				<li><a href="index.html">Adam Kinkaid</a></li>
				<li><a href="index.html">Alex Wickerham</a></li>
				<li><a href="index.html">Avery Johnson</a></li>
				<li data-role="list-divider">B</li>
				<li><a href="index.html">Bob Cabot</a></li>
				<li data-role="list-divider">C</li>
				<li><a href="index.html">Caleb Booth</a></li>
				<li><a href="index.html">Christopher Adams</a></li>
				<li><a href="index.html">Culver James</a></li>
				<li data-role="list-divider">D</li>
				<li><a href="index.html">David Walsh</a></li>
				<li><a href="index.html">Drake Alfred</a></li>
				<li data-role="list-divider">E</li>
				<li><a href="index.html">Elizabeth Bacon</a></li>
				<li><a href="index.html">Emery Parker</a></li>
				<li><a href="index.html">Enid Voldon</a></li>
				<li data-role="list-divider">F</li>
				<li><a href="index.html">Francis Wall</a></li>
				<li data-role="list-divider">G</li>
				<li><a href="index.html">Graham Smith</a></li>
				<li><a href="index.html">Greta Peete</a></li>
				<li data-role="list-divider">H</li>
				<li><a href="index.html">Harvey Walls</a></li>
				<li data-role="list-divider">M</li>
				<li><a href="index.html">Mike Farnsworth</a></li>
				<li><a href="index.html">Murray Vanderbuilt</a></li>
				<li data-role="list-divider">N</li>
				<li><a href="index.html">Nathan Williams</a></li>
				<li data-role="list-divider">P</li>
				<li><a href="index.html">Paul Baker</a></li>
				<li><a href="index.html">Pete Mason</a></li>
				<li data-role="list-divider">R</li>
				<li><a href="index.html">Rod Tarker</a></li>
				<li data-role="list-divider">S</li>
				<li><a href="index.html">Sawyer Wakefield</a></li>
			</ul>
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li data-theme="a"><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-events.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Lists Overview</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Lists</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
	<div class="content-primary">
		<h2>List views</h2>

		<ul data-role="controlgroup" data-type="horizontal" class="localnav">
			<li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
			<li><a href="lists-options.html" data-role="button" data-transition="fade">Options</a></li>
			<li><a href="lists-methods.html" data-role="button" data-transition="fade">Methods</a></li>
			<li><a href="lists-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
		</ul>

			<p>Bind events directly to the <code>ol</code> or <code>ul</code> element.  Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
			<pre><code>
$( ".selector" ).bind( "change", function(event, ui) {
  ...
});
</code></pre>

			<p>The listview plugin has the following custom event:</p>

	<dl>

		<dt><code>create</code> triggered when a listview is created</dt>
		<dd>

			<pre><code>
$( ".selector" ).listview({
   create: function(event, ui) { ... }
});
			</code></pre>
		</dd>

	</dl>

	</div><!--/content-primary -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview" data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">List views</li>
					<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
					<li><a href="lists-ul.html">Basic linked list</a></li>
					<li><a href="lists-nested.html">Nested list</a></li>
					<li><a href="lists-ol.html">Numbered list</a></li>

					<li><a href="lists-split.html">Split button list</a></li>
					<li><a href="lists-divider.html">List dividers</a></li>
					<li><a href="lists-count.html">Count bubble</a></li>
					<li><a href="lists-thumbnails.html">Thumbnails</a></li>
					<li><a href="lists-icons.html">Icons</a></li>
					<li><a href="lists-formatting.html">Content formatting</a></li>
					<li><a href="lists-search.html">Search filter bar</a></li>
					<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
					<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
					<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

					<li><a href="lists-readonly.html">Read-only lists</a></li>
					<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
					<li><a href="lists-forms.html">Lists with forms</a></li>
					<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

					<li><a href="lists-inset.html">Inset styled lists</a></li>
					<li><a href="lists-performance.html">List performance test</a></li>
					<li><a href="lists-themes.html">Theming lists</a></li>

				</ul>
		</div>
	</div>

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-formatting.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - List Formatting</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>List formatting</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
					<div class="content-primary">
						
		<ul data-role="listview" data-theme="d" data-divider-theme="d">
			<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
			<li><a href="index.html">
				
					<h3>Stephen Weber</h3>
					<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
					<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
					<p class="ui-li-aside"><strong>6:24</strong>PM</p>
				
			</a></li>
			<li><a href="index.html">
				
				<h3>jQuery Team</h3>
				<p><strong>Boston Conference Planning</strong></p>
				<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
				<p class="ui-li-aside"><strong>9:18</strong>AM</p>
				
			</a></li>
			<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
			<li><a href="index.html">
				<h3>Avery Walker</h3>
				<p><strong>Re: Dinner Tonight</strong></p>
				<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
				<p class="ui-li-aside"><strong>4:48</strong>PM</p>
			</a></li>
			<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
			<li><a href="index.html">
				<h3>Amazon.com</h3>
				<p><strong>4-for-3 Books for Kids</strong></p>
				<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
				<p class="ui-li-aside"><strong>12:47</strong>PM</p>
			</a></li>
			<li><a href="index.html">
				<h3>Mike Taylor</h3>
				<p><strong>Re: This weekend in Maine</strong></p>
				<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
				<p class="ui-li-aside"><strong>6:24</strong>AM</p>
			</a></li>
			<li><a href="index.html">
				<h3>Redfin</h3>
				<p><strong>Redfin listing updates for today</strong></p>
				<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
				<p class="ui-li-aside"><strong>5:52</strong>AM</p>
			</a></li>
				<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
				<li><a href="index.html">
					<h3>Angela Smith</h3>
					<p><strong>Link Request</strong></p>
					<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
					<p class="ui-li-aside"><strong>6:24</strong>AM</p>
				</a></li>
				<li><a href="index.html">
					<h3>Mike Taylor</h3>
					<p><strong>This weekend in Maine</strong></p>
					<p>Sounds good, let me check into our plans.</p>
					<p class="ui-li-aside"><strong>6:24</strong>AM</p>
				</a></li>
		</ul>
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li data-theme="a"><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-forms-inset.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Inset Lists with Forms</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Inset with Forms</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
	<form>
		<ul data-role="listview" data-inset="true">
			<li data-role="fieldcontain">
	        	<label for="name">Text Input:</label>
	        	<input type="text" name="name" id="name" value=""  />
			</li>
			<li data-role="fieldcontain">
	        	<label for="textarea">Textarea:</label>
			<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
			</li>
			<li data-role="fieldcontain">
	        	<label for="search">Search Input:</label>
	         	<input type="search" name="password" id="search" value=""  />
			</li>
			<li data-role="fieldcontain">
	        	<label for="slider2">Flip switch:</label>
				<select name="slider2" id="slider2" data-role="slider">
					<option value="off">Off</option>
					<option value="on">On</option>
				</select>
			</li>
			<li data-role="fieldcontain">
	        	<label for="slider">Slider:</label>
			 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
			</li>
			<li data-role="fieldcontain">
	        	<fieldset data-role="controlgroup">
					<legend>Choose as many snacks as you'd like:</legend>
					<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
					<label for="checkbox-1a">Cheetos</label>
	
					<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
					<label for="checkbox-2a">Doritos</label>
	
					<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
					<label for="checkbox-3a">Fritos</label>
	
					<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
					<label for="checkbox-4a">Sun Chips</label>
			    </fieldset>
			</li>
			
			<li data-role="fieldcontain">
				<fieldset data-role="controlgroup" data-type="horizontal">
			    	<legend>Font styling:</legend>
			    	<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
					<label for="checkbox-6">b</label>
	
					<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
					<label for="checkbox-7"><em>i</em></label>
	
					<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
					<label for="checkbox-8">u</label>
			    </fieldset>
			</li>
			<li data-role="fieldcontain">
				 <fieldset data-role="controlgroup">
			    	<legend>Choose a pet:</legend>
			         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
			         	<label for="radio-choice-1">Cat</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
			         	<label for="radio-choice-2">Dog</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
			         	<label for="radio-choice-3">Hamster</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
			         	<label for="radio-choice-4">Lizard</label>
			    </fieldset>
			</li>
			
			
			<li data-role="fieldcontain">
			    <fieldset data-role="controlgroup" data-type="horizontal">
			     	<legend>Layout view:</legend>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
			         	<label for="radio-choice-c">List</label>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
			         	<label for="radio-choice-d">Grid</label>
			    </fieldset>
			</li>

			<li data-role="fieldcontain">
				<label for="select-choice-1" class="select">Choose shipping method:</label>
				<select name="select-choice-1" id="select-choice-1">
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</li>

			<li data-role="fieldcontain">
				<label for="select-choice-3" class="select">Your state:</label>
				<select name="select-choice-3" id="select-choice-3">
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
					<option value="CT">Connecticut</option>
					<option value="DE">Delaware</option>
					<option value="FL">Florida</option>
					<option value="GA">Georgia</option>
					<option value="HI">Hawaii</option>
					<option value="ID">Idaho</option>
					<option value="IL">Illinois</option>
					<option value="IN">Indiana</option>
					<option value="IA">Iowa</option>
					<option value="KS">Kansas</option>
					<option value="KY">Kentucky</option>
					<option value="LA">Louisiana</option>
					<option value="ME">Maine</option>
					<option value="MD">Maryland</option>
					<option value="MA">Massachusetts</option>
					<option value="MI">Michigan</option>
					<option value="MN">Minnesota</option>
					<option value="MS">Mississippi</option>
					<option value="MO">Missouri</option>
					<option value="MT">Montana</option>
					<option value="NE">Nebraska</option>
					<option value="NV">Nevada</option>
					<option value="NH">New Hampshire</option>
					<option value="NJ">New Jersey</option>
					<option value="NM">New Mexico</option>
					<option value="NY">New York</option>
					<option value="NC">North Carolina</option>
					<option value="ND">North Dakota</option>
					<option value="OH">Ohio</option>
					<option value="OK">Oklahoma</option>
					<option value="OR">Oregon</option>
					<option value="PA">Pennsylvania</option>
					<option value="RI">Rhode Island</option>
					<option value="SC">South Carolina</option>
					<option value="SD">South Dakota</option>
					<option value="TN">Tennessee</option>
					<option value="TX">Texas</option>
					<option value="UT">Utah</option>
					<option value="VT">Vermont</option>
					<option value="VA">Virginia</option>
					<option value="WA">Washington</option>
					<option value="WV">West Virginia</option>
					<option value="WI">Wisconsin</option>
					<option value="WY">Wyoming</option>
				</select>
			</li>

			<li data-role="fieldcontain">
				<label for="select-choice-a" class="select">Choose shipping method:</label>
				<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
					<option>Custom menu example</option>
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</li>

			<li class="ui-body ui-body-b">
				<fieldset class="ui-grid-a">
						<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
						<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
			    </fieldset>
			</li>
			
		</ul>


		
		</form>
		
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li data-theme="a"><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-forms.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Lists with Forms</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Lists with Forms</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
	<form>
		<ul data-role="listview">
			<li data-role="fieldcontain">
	        	<label for="name">Text Input:</label>
	        	<input type="text" name="name" id="name" value=""  />
			</li>
			<li data-role="fieldcontain">
	        	<label for="textarea">Textarea:</label>
			<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
			</li>
			<li data-role="fieldcontain">
	        	<label for="search">Search Input:</label>
	         	<input type="search" name="password" id="search" value=""  />
			</li>
			<li data-role="fieldcontain">
	        	<label for="slider2">Flip switch:</label>
				<select name="slider2" id="slider2" data-role="slider">
					<option value="off">Off</option>
					<option value="on">On</option>
				</select>
			</li>
			<li data-role="fieldcontain">
	        	<label for="slider">Slider:</label>
			 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
			</li>
			<li data-role="fieldcontain">
	        	<fieldset data-role="controlgroup">
					<legend>Choose as many snacks as you'd like:</legend>
					<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
					<label for="checkbox-1a">Cheetos</label>
	
					<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
					<label for="checkbox-2a">Doritos</label>
	
					<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
					<label for="checkbox-3a">Fritos</label>
	
					<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
					<label for="checkbox-4a">Sun Chips</label>
			    </fieldset>
			</li>
			
			<li data-role="fieldcontain">
				<fieldset data-role="controlgroup" data-type="horizontal">
			    	<legend>Font styling:</legend>
			    	<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
					<label for="checkbox-6">b</label>
	
					<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
					<label for="checkbox-7"><em>i</em></label>
	
					<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
					<label for="checkbox-8">u</label>
			    </fieldset>
			</li>
			<li data-role="fieldcontain">
				 <fieldset data-role="controlgroup">
			    	<legend>Choose a pet:</legend>
			         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
			         	<label for="radio-choice-1">Cat</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
			         	<label for="radio-choice-2">Dog</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
			         	<label for="radio-choice-3">Hamster</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
			         	<label for="radio-choice-4">Lizard</label>
			    </fieldset>
			</li>
			
			
			<li data-role="fieldcontain">
			    <fieldset data-role="controlgroup" data-type="horizontal">
			     	<legend>Layout view:</legend>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
			         	<label for="radio-choice-c">List</label>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
			         	<label for="radio-choice-d">Grid</label>
			         	<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
			         	<label for="radio-choice-e">Gallery</label>
			    </fieldset>
			</li>

			<li data-role="fieldcontain">
				<label for="select-choice-1" class="select">Choose shipping method:</label>
				<select name="select-choice-1" id="select-choice-1">
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</li>

			<li data-role="fieldcontain">
				<label for="select-choice-3" class="select">Your state:</label>
				<select name="select-choice-3" id="select-choice-3">
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
					<option value="CT">Connecticut</option>
					<option value="DE">Delaware</option>
					<option value="FL">Florida</option>
					<option value="GA">Georgia</option>
					<option value="HI">Hawaii</option>
					<option value="ID">Idaho</option>
					<option value="IL">Illinois</option>
					<option value="IN">Indiana</option>
					<option value="IA">Iowa</option>
					<option value="KS">Kansas</option>
					<option value="KY">Kentucky</option>
					<option value="LA">Louisiana</option>
					<option value="ME">Maine</option>
					<option value="MD">Maryland</option>
					<option value="MA">Massachusetts</option>
					<option value="MI">Michigan</option>
					<option value="MN">Minnesota</option>
					<option value="MS">Mississippi</option>
					<option value="MO">Missouri</option>
					<option value="MT">Montana</option>
					<option value="NE">Nebraska</option>
					<option value="NV">Nevada</option>
					<option value="NH">New Hampshire</option>
					<option value="NJ">New Jersey</option>
					<option value="NM">New Mexico</option>
					<option value="NY">New York</option>
					<option value="NC">North Carolina</option>
					<option value="ND">North Dakota</option>
					<option value="OH">Ohio</option>
					<option value="OK">Oklahoma</option>
					<option value="OR">Oregon</option>
					<option value="PA">Pennsylvania</option>
					<option value="RI">Rhode Island</option>
					<option value="SC">South Carolina</option>
					<option value="SD">South Dakota</option>
					<option value="TN">Tennessee</option>
					<option value="TX">Texas</option>
					<option value="UT">Utah</option>
					<option value="VT">Vermont</option>
					<option value="VA">Virginia</option>
					<option value="WA">Washington</option>
					<option value="WV">West Virginia</option>
					<option value="WI">Wisconsin</option>
					<option value="WY">Wyoming</option>
				</select>
			</li>

			<li data-role="fieldcontain">
				<label for="select-choice-a" class="select">Choose shipping method:</label>
				<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
					<option>Custom menu example</option>
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</li>

			<li class="ui-body ui-body-b">
				<fieldset class="ui-grid-a">
						<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
						<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
			    </fieldset>
			</li>
			
		</ul>
		
		</form>
		
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li data-theme="a"><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-icons.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - List Icons</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Icons</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<div class="content-primary">
		<ul data-role="listview">
			<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
			<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
			<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
			
			

			<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
			<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
		</ul>


		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li data-theme="a"><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-inset.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Lists with Form Controls</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Inset list samples</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
	<form>
			<h2>Simple list</h2>

			<ul data-role="listview" data-inset="true">
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Ferrari</a></li>
			</ul>

		<h2>Count bubbles</h2>
		<ul data-role="listview" data-inset="true">
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
				<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
				<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
				<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
				<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
		</ul>
		
		<h2>Numbered list</h2>
			<ol data-role="listview" data-inset="true">
				<li><a href="index.html">The Godfather</a></li>
				<li><a href="index.html">Inception</a></li>
				<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
				<li><a href="index.html">Pulp Fiction</a></li>
				<li><a href="index.html">Schindler's List</a></li>
			</ol>
			
		<h2>Formatted content</h2>
		<ul data-role="listview" data-inset="true">
			<li><a href="index.html">
				<h3>Stephen Weber</h3>
				<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
				<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
				<p class="ui-li-aside"><strong>6:24</strong>PM</p>
			</a></li>
			<li><a href="index.html">
				<h3>jQuery Team</h3>
				<p><strong>Boston Conference Planning</strong></p>
				<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
				<p class="ui-li-aside"><strong>9:18</strong>AM</p>
			</a></li>
		</ul>
		
			

		
		<h2>Icon list</h2>
		<ul data-role="listview" data-inset="true">
			<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon ui-corner-none">France <span class="ui-li-count">4</span></a></li>
			<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
			<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
			<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon ui-corner-none">United States <span class="ui-li-count">62</span></a></li>
		</ul>
		
		<h2>Thumbnail, split button list</h2>

			<ul data-role="listview" data-inset="true">
				<li><a href="index.html">
				<img src="images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
			</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			</ul>
			
		<h2>Divided, filterable list</h2>
			<ul data-role="listview" data-filter="true" data-inset="true">
				<li data-role="list-divider">A</li>
				<li><a href="index.html">Adam Kinkaid</a></li>
				<li><a href="index.html">Alex Wickerham</a></li>
				<li><a href="index.html">Avery Johnson</a></li>
				<li data-role="list-divider">B</li>
				<li><a href="index.html">Bob Cabot</a></li>
				<li data-role="list-divider">C</li>
				<li><a href="index.html">Caleb Booth</a></li>
				<li><a href="index.html">Christopher Adams</a></li>
			</ul>



		
		</form>
		
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li data-theme="a"><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-methods.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Lists Overview</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Lists</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
	<div class="content-primary">
		<h2>List views</h2>

		<ul data-role="controlgroup" data-type="horizontal" class="localnav">
			<li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
			<li><a href="lists-options.html" data-role="button" data-transition="fade">Options</a></li>
			<li><a href="lists-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
			<li><a href="lists-events.html" data-role="button" data-transition="fade">Events</a></li>
		</ul>

		<p>The listview plugin has the following methods:</p>

		<dl>
			<dt><code>childPages</code> retrieve the sub-pages</dt>
			<dd>
			<p>This method returns a jQuery object containing all the immediate child pages of a nested list.</p>

			<pre><code>
$('.selector').listview('childPages');
				</code></pre>
			</dd>

			<dt><code>refresh</code> update the listview</dt>
			<dd>
			<p>If you manipulate a listview via JavaScript (e.g. add new LI elements), you must call the refresh method on it to update the visual styling.</p>

			<pre><code>
$('.selector').listview('refresh');
				</code></pre>
			</dd>

		</dl>

	</div><!--/content-primary -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview" data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">List views</li>
					<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
					<li><a href="lists-ul.html">Basic linked list</a></li>
					<li><a href="lists-nested.html">Nested list</a></li>
					<li><a href="lists-ol.html">Numbered list</a></li>

					<li><a href="lists-split.html">Split button list</a></li>
					<li><a href="lists-divider.html">List dividers</a></li>
					<li><a href="lists-count.html">Count bubble</a></li>
					<li><a href="lists-thumbnails.html">Thumbnails</a></li>
					<li><a href="lists-icons.html">Icons</a></li>
					<li><a href="lists-formatting.html">Content formatting</a></li>
					<li><a href="lists-search.html">Search filter bar</a></li>
					<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
					<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
					<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

					<li><a href="lists-readonly.html">Read-only lists</a></li>
					<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
					<li><a href="lists-forms.html">Lists with forms</a></li>
					<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

					<li><a href="lists-inset.html">Inset styled lists</a></li>
					<li><a href="lists-performance.html">List performance test</a></li>
					<li><a href="lists-themes.html">Theming lists</a></li>

				</ul>
		</div>
	</div>

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-nested.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Nested Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Nested list</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">	
		<ul data-role="listview">
			<li>
				<h3>Animals</h3>
				<p>All your favorites from aarkvarks to zebras.</p>
			
				<ul>
					<li>Pets
						<ul>
							<li><a href="index.html">Canary</a></li>
							<li><a href="index.html">Cat</a></li>
							<li><a href="index.html">Dog</a></li>
							<li><a href="index.html">Gerbil</a></li>
							<li><a href="index.html">Iguana</a></li>
							<li><a href="index.html">Mouse</a></li>
						</ul>
					</li>
					<li>Farm animals
						<ul>
							<li><a href="index.html">Chicken</a></li>
							<li><a href="index.html">Cow</a></li>
							<li><a href="index.html">Duck</a></li>
							<li><a href="index.html">Horse</a></li>
							<li><a href="index.html">Pig</a></li>
							<li><a href="index.html">Sheep</a></li>
						</ul>
					</li>
					<li>Wild animals
						<ul>
							<li><a href="index.html">Aardvark</a></li>
							<li><a href="index.html">Alligator</a></li>
							<li><a href="index.html">Ant</a></li>
							<li><a href="index.html">Bear</a></li>
							<li><a href="index.html">Beaver</a></li>
							<li><a href="index.html">Cougar</a></li>
							<li><a href="index.html">Dingo</a></li>
							<li><a href="index.html">Eagle</a></li>
							<li><a href="index.html">Elephant</a></li>
							<li><a href="index.html">Ferret</a></li>
							<li><a href="index.html">Frog</a></li>
							<li><a href="index.html">Giraffe</a></li>
							<li><a href="index.html">Lion</a></li>
							<li><a href="index.html">Monkey</a></li>
							<li><a href="index.html">Panda bear</a></li>
							<li><a href="index.html">Polar bear</a></li>
							<li><a href="index.html">Tiger</a></li>
							<li><a href="index.html">Zebra</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>

				<h3>Colors</h3>
				<p>Fresh colors from the magic rainbow.</p>
	
				<ul>
					<li><a href="index.html">Blue</a></li>
					<li><a href="index.html">Green</a></li>
					<li><a href="index.html">Orange</a></li>
					<li><a href="index.html">Purple</a></li>
					<li><a href="index.html">Red</a></li>
					<li><a href="index.html">Yellow</a></li>
					<li><a href="index.html">Violet</a></li>
				</ul>
			</li>
			<li>
				<h3>Vehicles</h3>
				<p>Everything from cars to planes.</p>
				
				<ul>
					<li>Cars
						<ul>
							<li><a href="index.html">Acura</a></li>
							<li><a href="index.html">Audi</a></li>
							<li><a href="index.html">BMW</a></li>
							<li><a href="index.html">Cadillac</a></li>
							<li><a href="index.html">Chrysler</a></li>
							<li><a href="index.html">Dodge</a></li>
							<li><a href="index.html">Ferrari</a></li>
							<li><a href="index.html">Ford</a></li>
							<li><a href="index.html">GMC</a></li>
							<li><a href="index.html">Honda</a></li>
							<li><a href="index.html">Hyundai</a></li>
							<li><a href="index.html">Infiniti</a></li>
							<li><a href="index.html">Jeep</a></li>
							<li><a href="index.html">Kia</a></li>
							<li><a href="index.html">Lexus</a></li>
							<li><a href="index.html">Mini</a></li>
							<li><a href="index.html">Nissan</a></li>
							<li><a href="index.html">Porsche</a></li>
							<li><a href="index.html">Subaru</a></li>
							<li><a href="index.html">Toyota</a></li>
							<li><a href="index.html">Volkswagon</a></li>
							<li><a href="index.html">Volvo</a></li>
						</ul>
					</li>
					<li>Planes
						<ul>
							<li><a href="index.html">Boeing</a></li>
							<li><a href="index.html">Cessna</a></li>
							<li><a href="index.html">Derringer</a></li>
							<li><a href="index.html">Embraer</a></li>
							<li><a href="index.html">Gulfstream</a></li>
							<li><a href="index.html">Piper Aircraft</a></li>
							<li><a href="index.html">Raytheon</a></li>
						</ul>
					</li>
					<li>Construction
						<ul>
							<li><a href="index.html">Caterpillar</a></li>
							<li><a href="index.html">Ford</a></li>
							<li><a href="index.html">John Deere</a></li>

						</ul>
					</li>				
				</ul>
			</li>
		</ul>
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li data-theme="a"><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-ol.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Ordered Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Numbered list</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">	
			<ol data-role="listview">
				<li><a href="index.html">The Godfather</a></li>
				<li><a href="index.html">Inception</a></li>
				<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
				<li><a href="index.html">Pulp Fiction</a></li>
				<li><a href="index.html">Schindler's List</a></li>
				<li><a href="index.html">12 Angry Men</a></li>
				<li><a href="index.html">One Flew Over the Cuckoo's Nest</a></li>
				<li><a href="index.html">Star Wars: Episode V - The Empire Strikes Back</a></li>
				<li><a href="index.html">The Dark Knight</a></li>
				<li><a href="index.html">The Lord of the Rings: The Return of the King</a></li>
				<li><a href="index.html">Seven Samurai</a></li>
				<li><a href="index.html">Star Wars: Episode IV - A New Hope</a></li>
				<li><a href="index.html">Casablanca</a></li>
				<li><a href="index.html">Goodfellas </a></li>
				<li><a href="index.html">Toy Story 3</a></li>
				<li><a href="index.html">Fight Club</a></li>
				<li><a href="index.html">City of God</a></li>
				<li><a href="index.html">The Lord of the Rings: The Fellowship of the Ring</a></li>
				<li><a href="index.html">The Big Lebowski</a></li>
				<li><a href="index.html">Psycho</a></li>
			</ol>
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li data-theme="a"><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-options.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Lists Overview</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f">
		<h1>Lists</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
	<div class="content-primary">
		<h2>List views</h2>

		<ul data-role="controlgroup" data-type="horizontal" class="localnav">
			<li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
			<li><a href="lists-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
			<li><a href="lists-methods.html" data-role="button" data-transition="fade">Methods</a></li>
			<li><a href="lists-events.html" data-role="button" data-transition="fade">Events</a></li>
		</ul>

		<p>The listview plugin has the following options:</p>

		<dl>
			<dt><code>countTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "c"</p>
				<p>Sets the color scheme (swatch) for list item <a href="lists-count.html">count bubbles</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.countTheme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-count-theme=&quot;a&quot;</code>.</p>
			</dd>

			<dt><code>dividerTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "b"</p>
				<p>Sets the color scheme (swatch) for list <a href="lists-divider.html">dividers</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.dividerTheme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-divider-theme=&quot;a&quot;</code>.</p>
			</dd>

			<dt><code>filter</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Adds a <a href="lists-search.html">search filter bar</a> to listviews. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.filter = true;</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-filter=&quot;true&quot;</code>.</p>
			</dd>

			<dt><code>filterCallback</code> <em>function</em></dt>
			<dd>
				<p>The function to determine which rows to hide when the <a href="lists-search.html">search filter</a> textbox changes. The function accepts two arguments -- the text of the list item (or <code>data-filtertext</code> value if present), and the search string. Return <code>true</code> to hide the item, <code>false</code> to leave it visible. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ) {
        // only show items that *begin* with the search string
        return text.toLowerCase().substring( 0, searchValue.length ) !== searchValue;
    };</strong>
});
</code></pre>
			</dd>

			<dt><code>filterPlaceholder</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "Filter items..."</p>
				<p>The placeholder text used in <a href="lists-search.html">search filter bars</a>. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.filterPlaceholder = "Search...";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-filter-placeholder=&quot;Search...&quot;</code>.</p>
			</dd>

			<dt><code>filterTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "c"</p>
				<p>Sets the color scheme (swatch) for the <a href="lists-search.html">search filter bar</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.filterTheme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-filter-theme=&quot;a&quot;</code>.</p>
			</dd>

			<dt><code>headerTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "b"</p>
				<p>Sets the color scheme (swatch) for headers of <a href="lists-nested.html">nested list</a> sub pages. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.headerTheme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-header-theme=&quot;a&quot;</code>.</p>
			</dd>

			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: ":jqmData(role='listview')"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as list views. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.initSelector = ".mylistview";</strong>
});
</code></pre>
			</dd>

			<dt><code>inset</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Adds <a href="lists-inset.html">inset list</a> styles. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.inset = true;</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-inset=&quot;true&quot;</code>.</p>
			</dd>

			<dt><code>splitIcon</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "arrow-r"</p>
				<p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a> to all <a href="lists-split.html">split list buttons</a>. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.splitIcon = "star";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-split-icon=&quot;star&quot;</code>.</p>
			</dd>

			<dt><code>splitTheme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "b"</p>
				<p>Sets the color scheme (swatch) for <a href="lists-split.html">split list buttons</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.splitTheme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-split-theme=&quot;a&quot;</code>.</p>
			</dd>

			<dt><code>theme</code> <em>string</em></dt>
			<dd>
				<p class="default">default: null, inherited from parent</p>
				<p>Sets the color scheme (swatch) for this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
    <strong>$.mobile.listview.prototype.options.theme = "a";</strong>
});
</code></pre>
				<p>This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code>.</p>
			</dd>

		</dl>	

	</div><!--/content-primary -->

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview" data-theme="c" data-dividertheme="d">

					<li data-role="list-divider">List views</li>
					<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
					<li><a href="lists-ul.html">Basic linked list</a></li>
					<li><a href="lists-nested.html">Nested list</a></li>
					<li><a href="lists-ol.html">Numbered list</a></li>

					<li><a href="lists-split.html">Split button list</a></li>
					<li><a href="lists-divider.html">List dividers</a></li>
					<li><a href="lists-count.html">Count bubble</a></li>
					<li><a href="lists-thumbnails.html">Thumbnails</a></li>
					<li><a href="lists-icons.html">Icons</a></li>
					<li><a href="lists-formatting.html">Content formatting</a></li>
					<li><a href="lists-search.html">Search filter bar</a></li>
					<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
					<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
					<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

					<li><a href="lists-readonly.html">Read-only lists</a></li>
					<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
					<li><a href="lists-forms.html">Lists with forms</a></li>
					<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

					<li><a href="lists-inset.html">Inset styled lists</a></li>
					<li><a href="lists-performance.html">List performance test</a></li>
					<li><a href="lists-themes.html">Theming lists</a></li>

				</ul>
		</div>
	</div>

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-performance.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - List Performance Test</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>500 item list</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			<ul data-role="listview" data-filter="true" data-theme="d">
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>		
			</ul>
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li data-theme="a"><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-readonly-inset.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Readonly Inset Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Readonly Inset Lists</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			<h2>Simple list</h2>

			<ul data-role="listview" data-inset="true">
				<li>Acura</li>
				<li>Audi</li>
				<li>BMW</li>
				<li>Cadillac</li>
				<li>Ferrari</li>
			</ul>

		<h2>Count bubbles</h2>
		<ul data-role="listview" data-inset="true">
			<li>Inbox <span class="ui-li-count">12</span></li>
				<li>Outbox <span class="ui-li-count">0</span></li>
				<li>Drafts <span class="ui-li-count">4</span></li>
				<li>Sent <span class="ui-li-count">328</span></li>
				<li>Trash <span class="ui-li-count">62</span></li>
		</ul>
		
		<h2>Numbered list</h2>
			<ol data-role="listview" data-inset="true">
				<li>The Godfather</li>
				<li>Inception</li>
				<li>The Good, the Bad and the Ugly </li>
				<li>Pulp Fiction</li>
				<li>Schindler's List</li>
			</ol>
			
		<h2>Divided, formatted content</h2>
		<ul data-role="listview" data-inset="true">
			<li>
				<h3>Stephen Weber</h3>
				<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
				<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
				<p class="ui-li-aside"><strong>6:24</strong>PM</p>
			</li>
			<li>
				<h3>jQuery Team</h3>
				<p><strong>Boston Conference Planning</strong></p>
				<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
				<p class="ui-li-aside"><strong>9:18</strong>AM</p>
			</li>
		</ul>
		
			

		
		<h2>Icon list</h2>
		<ul data-role="listview" data-inset="true">
			<li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
			<li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
			<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
			<li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
			<li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
			<li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
		</ul>
		
		<h2>Thumbnail list</h2>

			<ul data-role="listview" data-inset="true">
				<li>
				<img src="images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
			</li>
			<li>
				<img src="images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
			</li>
			<li>
				<img src="images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
			</li>
			</ul>
			
		<h2>Divided, filterable list</h2>
			<ul data-role="listview" data-filter="true" data-inset="true">
				<li data-role="list-divider">A</li>
				<li>Adam Kinkaid</li>
				<li>Alex Wickerham</li>
				<li>Avery Johnson</li>
				<li data-role="list-divider">B</li>
				<li>Bob Cabot</li>
				<li data-role="list-divider">C</li>
				<li>Caleb Booth</li>
				<li>Christopher Adams</li>
			</ul>




		
		
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li data-theme="a"><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-readonly.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Inset Readonly Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">
	
		<style type="text/css">
			h2 { margin:50px 0 30px 0; }
		</style>

		<div data-role="header" data-theme="f">
		<h1>Readonly lists</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			<p>Here is a variety of full-width lists that are read-only. If a list has the <code>data-role="listview"</code> attribute, but the contents aren't linked, it will display as read-only. These look like normal lists, except they don't have a right arrow and the text is set to a smaller size to save space.</p>
			
			<h2>Simple list</h2>
			
			<ul data-role="listview">
				<li>Acura</li>
				<li>Audi</li>
				<li>BMW</li>
				<li>Cadillac</li>
				<li>Ferrari</li>
			</ul>

		<h2>Count bubbles</h2>
		<ul data-role="listview">
			<li>Inbox <span class="ui-li-count">12</span></li>
				<li>Outbox <span class="ui-li-count">0</span></li>
				<li>Drafts <span class="ui-li-count">4</span></li>
				<li>Sent <span class="ui-li-count">328</span></li>
				<li>Trash <span class="ui-li-count">62</span></li>
		</ul>
		
		<h2>Numbered list</h2>
			<ol data-role="listview">
				<li>The Godfather</li>
				<li>Inception</li>
				<li>The Good, the Bad and the Ugly </li>
				<li>Pulp Fiction</li>
				<li>Schindler's List</li>
			</ol>
			
		<h2>Divided, formatted content</h2>
		<ul data-role="listview">
			<li>
				<h3>Stephen Weber</h3>
				<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
				<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
				<p class="ui-li-aside"><strong>6:24</strong>PM</p>
			</li>
			<li>
				<h3>jQuery Team</h3>
				<p><strong>Boston Conference Planning</strong></p>
				<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
				<p class="ui-li-aside"><strong>9:18</strong>AM</p>
			</li>
		</ul>
		
			

		
		<h2>Icon list</h2>
		<ul data-role="listview">
			<li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
			<li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
			<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
			<li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
			<li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
			<li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
		</ul>
		
		<h2>Thumbnail list</h2>

			<ul data-role="listview">
				<li>
				<img src="images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
			</li>
			<li>
				<img src="images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
			</li>
			<li>
				<img src="images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
			</li>
			</ul>
			
		<h2>Divided, filterable list</h2>
			<ul data-role="listview" data-filter="true">
				<li data-role="list-divider">A</li>
				<li>Adam Kinkaid</li>
				<li>Alex Wickerham</li>
				<li>Avery Johnson</li>
				<li data-role="list-divider">B</li>
				<li>Bob Cabot</li>
				<li data-role="list-divider">C</li>
				<li>Caleb Booth</li>
				<li>Christopher Adams</li>
			</ul>

		
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li data-theme="a"><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-search-filtertext.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Filtered Lists Using Hidden Data</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Search hidden data</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			<p>By default, the listview filter simply searches against the content in each list item. If you want the filter to search against different content, add the <code>data-filtertext</code>	attribute to the item and populate it with one or many keywords and phrases that should be used to match against. Note that if this attribute is added, the contents of the list item are ignored.</p>
			<p>This attribute is useful for dealing with allowing for ticker symbols and full company names to be searched, or for covering common spellings and abbreviations for countries.</p>
			
<pre><code>		
&lt;li <strong>data-filtertext=&quot;NASDAQ:AAPL Apple Inc.</strong>&quot;&gt;&lt;a href=&quot;#&quot;&gt;Apple&lt;/a&gt;&lt;/li&gt;
&lt;li <strong>data-filtertext=&quot;USA U.S.A. United States of America&quot;</strong>&gt;&lt;a href=&quot;#&quot;&gt;United States&lt;/a&gt;&lt;/li&gt;
</code></pre>	

			<ul data-role="listview" data-filter="true" data-filter-placeholder="Search ticker or firm name..." data-inset="true">
				<li data-filtertext="NASDAQ:ADBE Adobe Systems Incorporated"><a href="#">Adobe</a></li>
				<li data-filtertext="NASDAQ:AMZNL Amazon.com, Inc."><a href="#">Amazon</a></li>
				<li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
				<li data-filtertext="NASDAQ:GOOG Google Inc."><a href="#">Google</a></li>
				<li data-filtertext="NYSE:IBM Intl. International Business Machines Corp."><a href="index.html">IBM</a></li>
				<li data-filtertext="NASDAQ:MSFT Microsoft Corporation"><a href="#">Microsoft</a></li>
				<li data-filtertext="NASDAQ:YHOO Yahoo! Inc."><a href="#">Yahoo</a></li>
				<li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>
			</ul>
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li data-theme="a"><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-search-inset.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Filtered Inset Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Inset Search filter bar</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">	
			<ul data-role="listview" data-filter="true" data-inset="true">
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Volkswagon</a></li>
				<li><a href="index.html">Volvo</a></li>
			</ul>
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li data-theme="a"><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-search-with-dividers.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8" /> 
	<title>jQuery Mobile Docs - Filtered Lists with Dividers</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>List dividers</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">	
			<ul data-role="listview" data-filter="true" data-filter-placeholder="Search people..." data-filter-theme="d"data-theme="d" data-divider-theme="d">
				<li data-role="list-divider">A</li>
				<li><a href="index.html">Adam Kinkaid</a></li>
				<li><a href="index.html">Alex Wickerham</a></li>
				<li><a href="index.html">Avery Johnson</a></li>
				<li data-role="list-divider">B</li>
				<li><a href="index.html">Bob Cabot</a></li>
				<li data-role="list-divider">C</li>
				<li><a href="index.html">Caleb Booth</a></li>
				<li><a href="index.html">Christopher Adams</a></li>
				<li><a href="index.html">Culver James</a></li>
				<li data-role="list-divider">D</li>
				<li><a href="index.html">David Walsh</a></li>
				<li><a href="index.html">Drake Alfred</a></li>
				<li data-role="list-divider">E</li>
				<li><a href="index.html">Elizabeth Bacon</a></li>
				<li><a href="index.html">Emery Parker</a></li>
				<li><a href="index.html">Enid Voldon</a></li>
				<li data-role="list-divider">F</li>
				<li><a href="index.html">Francis Wall</a></li>
				<li data-role="list-divider">G</li>
				<li><a href="index.html">Graham Smith</a></li>
				<li><a href="index.html">Greta Peete</a></li>
				<li data-role="list-divider">H</li>
				<li><a href="index.html">Harvey Walls</a></li>
				<li data-role="list-divider">M</li>
				<li><a href="index.html">Mike Farnsworth</a></li>
				<li><a href="index.html">Murray Vanderbuilt</a></li>
				<li data-role="list-divider">N</li>
				<li><a href="index.html">Nathan Williams</a></li>
				<li data-role="list-divider">P</li>
				<li><a href="index.html">Paul Baker</a></li>
				<li><a href="index.html">Pete Mason</a></li>
				<li data-role="list-divider">R</li>
				<li><a href="index.html">Rod Tarker</a></li>
				<li data-role="list-divider">S</li>
				<li><a href="index.html">Sawyer Wakefield</a></li>
			</ul>
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li data-theme="a"><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-search.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Filtered Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Search filter bar</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">	
			<ul data-role="listview" data-filter="true">
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Volkswagon</a></li>
				<li><a href="index.html">Volvo</a></li>
			</ul>
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li data-theme="a"><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-split-purchase.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Sample Dialog</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 


	<div data-role="page">

		<div data-role="header" data-theme="e">
			<h1>Purchase?</h1>
		</div><!-- /header -->

		<div data-role="content" data-theme="d">
			<h4>This album costs $10.99 and includes 9 tracks.</h4>
			<p>Your download will begin immediately on your mobile device and all tracks will by added your your library next time you sync.</p>
			<a href="index.html" data-role="button" data-rel="back" data-theme="b">Purchase album</a>
			<a href="index.html" data-role="button" data-rel="back">No thanks</a>

		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-split.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Split Button Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior" id="album-list">

		<div data-role="header" data-theme="f">
		<h1>Split button list</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">	
		<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
			<li><a href="index.html">
				<img src="images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				
				<img src="images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
				
			</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-ok.jpg" />
				<h3>Of The Blue Colour Of The Sky</h3>
				<p>Ok Go</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-ws.jpg" />
				<h3>Elephant</h3>
				<p>The White Stripes</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-rh.jpg" />
				<h3>Kid A</h3>
				<p>Radiohead</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-xx.jpg" />
				<h3>XX</h3>
				<p>XX</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-mg.jpg" />
				<h3>Congratulations</h3>
				<p>MGMT</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="images/album-ag.jpg" />
				<h3>Ashes Grammar</h3>
				<p>A Sunny Day in Glasgow</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			
			<li><a href="index.html">
				<img src="images/album-k.jpg" />
				<h3>Hot Fuss</h3>
				<p>Killers</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">	
				<img src="images/album-af.jpg" />
				<h3>The Suburbs</h3>
				<p>Arcade Fire</p>
				</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
		</ul>
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li data-theme="a"><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-themes.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>
</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Theming lists</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content" class="ui-body">
		<div class="content-primary">	

		<p>All the standard button swatches can be applied to lists. A list inherits its theme swatch from its parent page/content container. So the theme swatch defaults to "c" (silver in the default theme), if nothing else is set to the surrounding page/content containers. List dividers and split buttons are styled with bar swatch "b" by default (blue in the default theme). The default button swatch for count bubbles is "c" (silver in the default theme).</p>
		
		<p>Below is a list which inherits the default "c" content swatch and uses the default swatches for the list divider and the count bubbles.</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;&gt;
</code>
		<ul data-role="listview" data-inset="true" data-icon="star">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
		</ul>
		
		<h2>Theming list items</h2>
		<p>The list item color scheme can be changed to any button color theme swatch by adding the <code> data-theme</code> attribute to the list, and setting the letter theme swatch. Here is the same list as above with the swatch &quot;a&quot; applied. </p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;a&quot;&gt;
</code>
		
		<ul data-role="listview" data-inset="true" data-theme="a">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
		</ul>
		
		<p> data-theme attributes also work at the LI-level, for styling a single item.</p>
		
		<ul data-role="listview" data-inset="true" data-theme="d">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
			<li data-theme="a"><a href="index.html">Trash <span class="ui-li-count">34</span></a></li>
		</ul>
		
		<h2>Theming dividers</h2>
		
		<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-divider-theme</code> to the list and specifying a swatch letter. Here is an example of the same list as above with swatch &quot;e&quot; set on the dividers.</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot; data-divider-theme=&quot;e&quot;&gt;
</code>
		
		<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
		</ul>
		
		<h2>Theming count bubbles</h2>
		
		<p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-count-theme</code> to the list and specifying a swatch letter. Here is an example with swatch &quot;b&quot; set on the count bubbles.</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot; data-divider-theme=&quot;e&quot; data-count-theme=&quot;b&quot;&gt;
</code>
		
		<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
			<li data-role="list-divider">Divider</li>
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
		</ul>
		
		<h2>Theming icons</h2>
		
		<p>The default icon for each list item containing a link is <code>arrow-r</code>. To override this, set the <code>data-icon</code> attribute on the desired list item to the <a href="../buttons/buttons-icons.html">name of a standard icon</a>. To prevent icons from appearing altogether, set the <code> data-icon</code> attribute to &quot;false&quot;. With a bit of custom styles it's also possible to use third party icons.</p>
		<p>Markup for the listview:</p>
<pre>
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;b&quot;&gt;
	&lt;li data-role=&quot;list-divider&quot;&gt;Divider&lt;/li&gt;
	&lt;li data-icon=&quot;home&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;home&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;delete&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;delete&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;plus&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;plus&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;arrow-u&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;arrow-u&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;arrow-d&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;arrow-d&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;check&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;check&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;gear&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;gear&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;grid&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;grid&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;star&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;star&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;custom&quot; id=&quot;coffeeicon&quot;&gt;&lt;a href=&quot;#&quot;&gt;custom-icon&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;arrow-r&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;arrow-r&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;arrow-l&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;arrow-l&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;minus&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;minus&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;refresh&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;refresh&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;forward&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;forward&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;back&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;back&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;alert&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;alert&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;info&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;info&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;search&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;search&quot;&lt;/a&gt;&lt;/li&gt;
	&lt;li data-icon=&quot;false&quot;&gt;&lt;a href=&quot;#&quot;&gt;data-icon=&quot;false&quot;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
		<p>Styles for the custom icon:</p>
<pre>
<code>
&lt;style&gt;
	#coffeeicon .ui-icon-custom {
	background-image: url(&quot;../toolbars/glyphish-icons/34-coffee.png&quot;);
	background-position: 2px 2px;
	background-size: 90%; }
&lt;/style&gt;
</code>
</pre>
		<style>
			#coffeeicon .ui-icon-custom {
			background-image: url("../toolbars/glyphish-icons/34-coffee.png");
			background-position: 2px 1px;
			background-size: 90%; }
		</style>

		<ul data-role="listview" data-inset="true" data-theme="b">
			<li data-role="list-divider">Divider</li>
			<li data-icon="home"><a href="#">data-icon="home"</a></li>
			<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
			<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
			<li data-icon="arrow-u"><a href="#">data-icon="arrow-u"</a></li>
			<li data-icon="arrow-d"><a href="#">data-icon="arrow-d"</a></li>
			<li data-icon="check"><a href="#">data-icon="check"</a></li>
			<li data-icon="gear"><a href="#">data-icon="gear"</a></li>
			<li data-icon="grid"><a href="#">data-icon="grid"</a></li>
			<li data-icon="star"><a href="#">data-icon="star"</a></li>
			<li data-icon="custom" id="coffeeicon"><a href="#">custom-icon</a></li>
			<li data-icon="arrow-r"><a href="#">data-icon="arrow-r"</a></li>
			<li data-icon="arrow-l"><a href="#">data-icon="arrow-l"</a></li>
			<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
			<li data-icon="refresh"><a href="#">data-icon="refresh"</a></li>
			<li data-icon="forward"><a href="#">data-icon="forward"</a></li>
			<li data-icon="back"><a href="#">data-icon="back"</a></li>
			<li data-icon="alert"><a href="#">data-icon="alert"</a></li>
			<li data-icon="info"><a href="#">data-icon="info"</a></li>
			<li data-icon="search"><a href="#">data-icon="search"</a></li>
			<li data-icon="false"><a href="#">data-icon="false"</a></li>
		</ul>
		<p>Custom icon by Joseph Wain / <a href="http://glyphish.com/">glyphish.com</a>. Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution 3.0 United States License</a>.</p>
		
		<h2>Theming split buttons</h2>
		
		<p>For split lists with a second link button, the framework default to &quot;b&quot; for the theme swatch (blue in the default theme). Here is a default split list:</p>
		
		<ul data-role="listview" data-inset="true">
			<li><a href="index.html">
				<img src="images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p></a>
				<a href="index.html">Purchase album</a>
			</li>
			<li><a href="index.html">
				<img src="images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p></a>
				<a href="index.html">Purchase album</a>
			</li>
		</ul>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-split-theme=&quot;a&quot;&gt;
</code>
		<p>To specify the color swatch for the icon button on the right, add the <code>data-split-theme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code> data-theme</code> attribute to specific links  (see second list item).</p>
		<ul data-role="listview" data-inset="true" data-split-theme="a">
			<li><a href="index.html">
				<img src="images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
				</a>
				<a href="index.html">Purchase album</a>
			</li>
			<li><a href="index.html">
				<img src="images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
				</a>
				<a href="index.html" data-theme="e">Purchase album</a>
			</li>
		</ul>

		<p>The icon for the split theme can set at the list level by adding the <code>data-split-icon</code> to the list and specifying a <a href="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-icon</code> attribute to specific links (see second list item).</p>
		
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-split-theme=&quot;d&quot; data-split-icon=&quot;delete&quot;&gt;
</code>

	<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete" >
		<li><a href="index.html">
			<img src="images/album-bb.jpg" />
			<h3>Broken Bells</h3>
			<p>Broken Bells</p>
			</a>
			<a href="index.html">Purchase album</a>
		</li>
		<li><a href="index.html">
			<img src="images/album-hc.jpg" />
			<h3>Warning</h3>
			<p>Hot Chip</p>
			</a>
			<a href="index.html">Purchase album</a>
		</li>
	</ul>


		
		<h2>Examples of all basic list swatches</h2>
		
		<p>Swatch <strong>"a"</strong> on listview</p>
		<ul data-role="listview" data-inset="true" data-theme="a">
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
		</ul>
		
		<p>Swatch <strong>"b"</strong> on listview</p>
		<ul data-role="listview" data-inset="true" data-theme="b">
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
		</ul>
		
		<p>Swatch <strong>"c"</strong> on listview</p>
		<ul data-role="listview" data-inset="true" data-theme="c">
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
		</ul>
		
		<p>Swatch <strong>"d"</strong> on listview</p>
		<ul data-role="listview" data-inset="true" data-theme="d">
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
		</ul>
		
		<p>Swatch <strong>"e"</strong> on listview</p>
		<ul data-role="listview" data-inset="true" data-theme="e">
			<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
			<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
			<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
		</ul>
		
		
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li data-theme="a"><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-thumbnails.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Lists with Thumbnails</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Thumbnails</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">	
		<ul data-role="listview">
			<li><a href="index.html">
				<img src="images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
			</a></li>
			<li><a href="index.html">
				<img src="images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
			</a></li>
			<li><a href="index.html">
				<img src="images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
			</a></li>
			<li><a href="index.html">
				<img src="images/album-ok.jpg" />
				<h3>Of The Blue Colour Of The Sky</h3>
				<p>Ok Go</p>
			</a></li>
			<li><a href="index.html">
				<img src="images/album-ws.jpg" />
				<h3>Elephant</h3>
				<p>The White Stripes</p>
			</a></li>
			<li><a href="index.html">
				<img src="images/album-rh.jpg" />
				<h3>Kid A</h3>
				<p>Radiohead</p>
			</a></li>
			<li><a href="index.html">
				<img src="images/album-xx.jpg" />
				<h3>XX</h3>
				<p>XX</p>
			</a></li>
			<li><a href="index.html">
				<img src="images/album-mg.jpg" />
				<h3>Congratulations</h3>
				<p>MGMT</p>
			</a></li>
			
			<li><a href="index.html">
				<img src="images/album-ag.jpg" />
				<h3>Ashes Grammar</h3>
				<p>A Sunny Day in Glasgow</p>
			</a></li>
			
			<li><a href="index.html">
				<img src="images/album-k.jpg" />
				<h3>Hot Fuss</h3>
				<p>Killers</p>
			</a></li>
			<li><a href="index.html">	
				<img src="images/album-af.jpg" />
				<h3>The Suburbs</h3>
				<p>Arcade Fire</p>
			</a></li>
		</ul>
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">List views</li>
						<li><a href="docs-lists.html">List basics &amp; API</a></li>
						<li><a href="lists-ul.html">Basic linked list</a></li>
						<li><a href="lists-nested.html">Nested list</a></li>
						<li><a href="lists-ol.html">Numbered list</a></li>

						<li><a href="lists-split.html">Split button list</a></li>	
						<li><a href="lists-divider.html">List dividers</a></li>
						<li><a href="lists-count.html">Count bubble</a></li>
						<li data-theme="a"><a href="lists-thumbnails.html">Thumbnails</a></li>
						<li><a href="lists-icons.html">Icons</a></li>
						<li><a href="lists-formatting.html">Content formatting</a></li>
						<li><a href="lists-search.html">Search filter bar</a></li>
						<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
						<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
						<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

						<li><a href="lists-readonly.html">Read-only lists</a></li>
						<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
						<li><a href="lists-forms.html">Lists with forms</a></li>
						<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

						<li><a href="lists-inset.html">Inset styled lists</a></li>
						<li><a href="lists-performance.html">List performance test</a></li>
						<li><a href="lists-themes.html">Theming lists</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\lists\lists-ul.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Basic Lists</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Basic list</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<div class="content-primary">
			<ul data-role="listview">
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
				<li><a href="index.html">GMC</a></li>
				<li><a href="index.html">Honda</a></li>
				<li><a href="index.html">Hyundai</a></li>
				<li><a href="index.html">Infiniti</a></li>
				<li><a href="index.html">Jeep</a></li>
				<li><a href="index.html">Kia</a></li>
				<li><a href="index.html">Lexus</a></li>
				<li><a href="index.html">Mini</a></li>
				<li><a href="index.html">Nissan</a></li>
				<li><a href="index.html">Porsche</a></li>
				<li><a href="index.html">Subaru</a></li>
				<li><a href="index.html">Toyota</a></li>
				<li><a href="index.html">Volkswagon</a></li>
				<li><a href="index.html">Volvo</a></li>
			</ul>
			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">List views</li>
							<li><a href="docs-lists.html">List basics &amp; API</a></li>
							<li data-theme="a"><a href="lists-ul.html">Basic linked list</a></li>
							<li><a href="lists-nested.html">Nested list</a></li>
							<li><a href="lists-ol.html">Numbered list</a></li>

							<li><a href="lists-split.html">Split button list</a></li>	
							<li><a href="lists-divider.html">List dividers</a></li>
							<li><a href="lists-count.html">Count bubble</a></li>
							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
							<li><a href="lists-icons.html">Icons</a></li>
							<li><a href="lists-formatting.html">Content formatting</a></li>
							<li><a href="lists-search.html">Search filter bar</a></li>
							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>

							<li><a href="lists-readonly.html">Read-only lists</a></li>
							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
							<li><a href="lists-forms.html">Lists with forms</a></li>
							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>

							<li><a href="lists-inset.html">Inset styled lists</a></li>
							<li><a href="lists-performance.html">List performance test</a></li>
							<li><a href="lists-themes.html">Theming lists</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" class="footer-docs" data-theme="c">
				<p>&copy; 2012 jQuery Foundation and other contributors</p>
		</div>

		</div><!-- /page -->

		</body>
		</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-alt.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Dialog Example</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page">
		<div data-role="header" data-theme="e">
			<h1>Dialog</h1>

		</div>

		<div data-role="content" data-theme="e">
			<h1>I'm colorful</h1>
			<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
			<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a">Good for you</a>       
			<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Don't care, really</a>    
		</div>
	</div>


</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-buttons.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Dialog Example</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="dialog-actionsheet">

	
	<div data-role="content" data-theme="a">
		<h3>Share Photos</h3>
		<a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Email</a>     
		<a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Upload to flickr</a>       
		<a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Share on Facebook</a>      
		<a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Tweet photo</a>       
		 		  
		<a href="index.html" data-role="button" data-rel="back" data-theme="a">Cancel</a>    
	</div>
</div>


</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-overlay.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Dialog Example</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" data-overlay-theme="e">
		<div data-role="header" data-theme="b">
			<h1>Dialog</h1>
		</div>

		<div data-role="content" data-theme="d">
			<h1>Custom overlay</h1>
			<p>This dialog adds <code>data-overlay-theme="e"</code> to the page container to set the overlay swatch color.</p>
			<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a" data-inline="true">I like it</a>       
		</div>
		
	</div>


</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-success.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Framework - Dialog Example</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

<div data-role="page" class="dialog-actionsheet">


	<div data-role="content" data-theme="b">
		<p>Flickr upload:</p>
		<h3>Photos posted successfully</h3>

		<a href="page-dialogs.html" data-role="button" data-theme="b">View photo page</a>
		<a href="page-dialogs.html" data-role="button" data-theme="c">Done</a>
	</div>
</div>


</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog-with-select.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Dialog Example with Select</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 


	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
			<h1>Dialog select test</h1>
		</div>
		<div data-role="content" >
			<a href="#bar" data-role="button" data-rel="dialog">Open dialog</a>
		</div>
		
</div>		







<div data-role="page" id="bar">
	
		<div data-role="header" data-theme="d">
			<h1>Sample Dialogs</h1>
		</div>

		<div data-role="content" data-theme="c">
			
			<form action>
				<div data-role="fieldcontain">
					<label for="select-choice-1" class="select">Choose shipping method:</label>
					<select name="select-choice-1" id="select-choice-1" data-native-menu="false">
						<option value="standard">Standard: 7 day</option>
						<option value="rush">Rush: 3 days</option>
						<option value="express">Express: next day</option>
						<option value="overnight">Overnight</option>
					</select>
				</div>
				
				<div data-role="fieldcontain">
					<label for="select-choice-3" class="select">Your state:</label>
					<select name="select-choice-3" id="select-choice-3" data-native-menu="false">
						<option value="AL">Alabama</option>
						<option value="AK">Alaska</option>
						<option value="AZ">Arizona</option>
						<option value="AR">Arkansas</option>
						<option value="CA">California</option>
						<option value="CO">Colorado</option>
						<option value="CT">Connecticut</option>
						<option value="DE">Delaware</option>
						<option value="FL">Florida</option>
						<option value="GA">Georgia</option>
						<option value="HI">Hawaii</option>
						<option value="ID">Idaho</option>
						<option value="IL">Illinois</option>
						<option value="IN">Indiana</option>
						<option value="IA">Iowa</option>
						<option value="KS">Kansas</option>
						<option value="KY">Kentucky</option>
						<option value="LA">Louisiana</option>
						<option value="ME">Maine</option>
						<option value="MD">Maryland</option>
						<option value="MA">Massachusetts</option>
						<option value="MI">Michigan</option>
						<option value="MN">Minnesota</option>
						<option value="MS">Mississippi</option>
						<option value="MO">Missouri</option>
						<option value="MT">Montana</option>
						<option value="NE">Nebraska</option>
						<option value="NV">Nevada</option>
						<option value="NH">New Hampshire</option>
						<option value="NJ">New Jersey</option>
						<option value="NM">New Mexico</option>
						<option value="NY">New York</option>
						<option value="NC">North Carolina</option>
						<option value="ND">North Dakota</option>
						<option value="OH">Ohio</option>
						<option value="OK">Oklahoma</option>
						<option value="OR">Oregon</option>
						<option value="PA">Pennsylvania</option>
						<option value="RI">Rhode Island</option>
						<option value="SC">South Carolina</option>
						<option value="SD">South Dakota</option>
						<option value="TN">Tennessee</option>
						<option value="TX">Texas</option>
						<option value="UT">Utah</option>
						<option value="VT">Vermont</option>
						<option value="VA">Virginia</option>
						<option value="WA">Washington</option>
						<option value="WV">West Virginia</option>
						<option value="WI">Wisconsin</option>
						<option value="WY">Wyoming</option>
					</select>
				</div>
			
				<a href="#foo" data-role="button" data-rel="back" data-theme="c">Real Submit Would go here</a>      
			</form>
			<a href="#foo" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
		</div>
	</div>


</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dialog.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Dialog Example</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="dialog">
	
		<div data-role="header" data-theme="d">
			<h1>Dialog</h1>

		</div>

		<div data-role="content" data-theme="c">
			<h1>Delete page?</h1>
			<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
			<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
			<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
		</div>
	</div>


</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Pages</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-index">

		<div data-role="header" data-theme="f">
		<h1>Pages</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">

				<p>jQuery Mobile includes automatic AJAX page loading of external pages with back button history support, a set of animated page transitions and simple tools for displaying pages as dialogs.</p>

			
		<ul data-role="listview" data-inset="true">
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
		</ul>


		</div><!-- /ui-body wrapper -->	
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\multipage-template.html
<!DOCTYPE html> 
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Multi-page template</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 

	
<body> 

<!-- Start of first page: #one -->
<div data-role="page" id="one">

	<div data-role="header">
		<h1>Multi-page</h1>
	</div><!-- /header -->

	<div data-role="content" >	
		<h2>One</h2>
		
		<p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>	
		
		<p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p>	
		<p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
		<p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>	

		<h3>Show internal pages:</h3>
		<p><a href="#two" data-role="button">Show page "two"</a></p>	
		<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
	</div><!-- /content -->
	
	<div data-role="footer" data-theme="d">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page one -->


<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">

	<div data-role="header">
		<h1>Two</h1>
	</div><!-- /header -->

	<div data-role="content" data-theme="a">	
		<h2>Two</h2>
		<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>	
		<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>	
		<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>	
		
	</div><!-- /content -->
	
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page two -->


<!-- Start of third page: #popup -->
<div data-role="page" id="popup">

	<div data-role="header" data-theme="e">
		<h1>Dialog</h1>
	</div><!-- /header -->

	<div data-role="content" data-theme="d">	
		<h2>Popup</h2>
		<p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>		
		<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>	
	</div><!-- /content -->
	
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page popup -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-anatomy.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Anatomy of a Page</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Anatomy of a Page</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
			<p>The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.</p> 
			
			<p>The goal of this model is to allow developers to create websites using best practices &mdash; where ordinary links will "just work" without any special configuration &mdash; while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p> 

			<h2>Mobile page structure</h2> 

			<p>A jQuery Mobile site must start with an HTML5 'doctype' to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) </p>
			<p>In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. jQuery Mobile 1.1 works with both 1.6.4 and 1.7.1 versions of jQuery core. We recommend linking to the files hosted on the jQuery CDN for best performance: </p>

<pre><code>
<strong>&lt;!DOCTYPE html&gt; </strong>
&lt;html&gt; 
	&lt;head&gt; 
	&lt;title&gt;Page Title&lt;/title&gt; 
	
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; 

	&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css&quot; /&gt;
	&lt;script src=&quot;http://code.jquery.com/jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt; 

&lt;body&gt; 
...content goes here...
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
			
			<h2>Viewport meta tag</h2>
			<p>Note above that there is a meta <code>viewport</code> tag in the <code>head</code> to specify how the browser should display the page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with existing desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to <code>content=&quot;width=device-width, initial-scale=1&quot;</code>, the width will be set to the pixel width of the device screen. </p>
			
			<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; </code></pre>
			
			<p>These settings do not disable the user's ability to zoom the pages, which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed in a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library. </p>
			
			<h2>Inside the body: Pages</h2>
			<p>Inside the <code>&lt;body&gt;</code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code> data-role="page"</code> attribute. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to pages.</p> 

<div class="highlight"> 
<pre><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">&gt;</span> 
	...
<span class="nt">&lt;/div&gt;</span> 
</pre> 
</div> 

			<p>Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>.</p> 

<div class="highlight"> 
<pre><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">&gt;</span> 
	<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span> 
	<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span> 
	<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span> 
<span class="nt">&lt;/div&gt;</span> 
</pre> 
</div> 


<h2>Putting it together: Basic single page template</h2> 

<p>Putting it all together, this is the standard boilerplate page template you should start with on a project: </p>

<pre><code>
&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
	&lt;head&gt; 
	&lt;title&gt;Page Title&lt;/title&gt; 
	
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; 

	&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css&quot; /&gt;
	&lt;script src=&quot;http://code.jquery.com/jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt; 
&lt;body&gt; 

&lt;div data-role=&quot;page&quot;&gt;

	&lt;div data-role=&quot;header&quot;&gt;
		&lt;h1&gt;Page Title&lt;/h1&gt;
	&lt;/div&gt;&lt;!-- /header --&gt;

	&lt;div data-role=&quot;content&quot;&gt;	
		&lt;p&gt;Page content goes here.&lt;/p&gt;		
	&lt;/div&gt;&lt;!-- /content --&gt;

	&lt;div data-role=&quot;footer&quot;&gt;
		&lt;h4&gt;Page Footer&lt;/h4&gt;
	&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

			<a href="page-template.html" data-inline="true" data-theme="b" data-role="button">View boilerplate template</a>


		<h2>Multi-page template structure</h2> 
		
			<p>A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. Each 'page' block needs a unique ID (<code>id="foo"</code>) that will be used to link internally between 'pages' (<code>href="#foo"</code>). When a link is clicked, the framework will look for an internal 'page' with the ID and transition it into view.</p> 
						
			<p>Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Here is what two pages look inside the <code>body</code> element.</p> 

<pre><code>
&lt;body&gt; 

&lt;!-- Start of first page --&gt;
&lt;div data-role=&quot;page&quot; id=&quot;foo&quot;&gt;

	&lt;div data-role=&quot;header&quot;&gt;
		&lt;h1&gt;Foo&lt;/h1&gt;
	&lt;/div&gt;&lt;!-- /header --&gt;

	&lt;div data-role=&quot;content&quot;&gt;	
		&lt;p&gt;I&#x27;m first in the source order so I&#x27;m shown as the page.&lt;/p&gt;		
		&lt;p&gt;View internal page called &lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;&lt;/p&gt;	
	&lt;/div&gt;&lt;!-- /content --&gt;

	&lt;div data-role=&quot;footer&quot;&gt;
		&lt;h4&gt;Page Footer&lt;/h4&gt;
	&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;


&lt;!-- Start of second page --&gt;
&lt;div data-role=&quot;page&quot; id=&quot;bar&quot;&gt;

	&lt;div data-role=&quot;header&quot;&gt;
		&lt;h1&gt;Bar&lt;/h1&gt;
	&lt;/div&gt;&lt;!-- /header --&gt;

	&lt;div data-role=&quot;content&quot;&gt;	
		&lt;p&gt;I&#x27;m the second in the source order so I&#x27;m hidden when the page loads. I&#x27;m just shown if a link that references my ID is beeing clicked.&lt;/p&gt;		
		&lt;p&gt;&lt;a href=&quot;#foo&quot;&gt;Back to foo&lt;/a&gt;&lt;/p&gt;	
	&lt;/div&gt;&lt;!-- /content --&gt;

	&lt;div data-role=&quot;footer&quot;&gt;
		&lt;h4&gt;Page Footer&lt;/h4&gt;
	&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;
&lt;/body&gt;
</code></pre>	

		<a href="../../docs/pages/multipage-template.html" data-inline="true" data-theme="b" data-role="button" rel="external">View multi-page template</a>

		<p> </p>
		
		<p>PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (<code>index.html#foo</code>) on a page in jQuery Mobile, because the framework will look for a 'page' with an <code>ID</code> of <code>#foo</code> instead of the native behavior of scrolling to the content with that <code>ID</code>.</p>
		
		<p>The <code>id</code> attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different &quot;pages&quot; to be present in the DOM at the same time. This also applies when using a multi-page template, since all &quot;pages&quot; on the template are loaded at once.</p>
		
		
<h2>Conventions, not requirements</h2>

<p>Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure. The page wrapper that used to be required for auto-initialization to work is now optional for single page documents, so there isn't any required markup at all. For a web page with a custom layout, all of these structural elements can be omitted and the Ajax navigation and all widgets will work just like they do in the boilerplate structure. Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it’s needed for managing pages, but the starting markup can now be extremely simple. </p>

<p>Note that in a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.</p>

		


				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li data-theme="a"><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-cache.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Prefetching &amp; caching pages</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Prefetching &amp; caching pages</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
			
			
			<h2>Prefetching pages</h2>
	
      <p>Usually, it's a good idea to store your app's pages in several single-page templates instead of one large multi-page template. This minimizes the size of the page's DOM.</p>

			<p>When using single-page templates, you can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the <code>data-prefetch</code> attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the <code>pagecreate</code> event has triggered. For example:</p>
			
<pre><code>
&lt;a href="prefetchThisPage.html" data-prefetch&gt; ... &lt;/a&gt;
</code></pre>

      <p>You can prefetch as many linked pages as you like. Just add <code>data-prefetch</code> to all the links you want to prefetch.</p>

		  <p>Alternatively, you can prefetch a page programmatically using <code>$.mobile.loadPage()</code>:</p>

<pre><code>
$.mobile.loadPage( <var>pageUrl</var>, { showLoadMsg: false } );
</code></pre>
			
			<p>Another advantage of prefetching a page is that the user doesn't see the Ajax loading message when visiting the prefetched page. The Ajax loading message only appears if the framework hasn't finished prefetching the page by the time the link is followed.</p> 

			<p>Prefetching pages naturally creates additional HTTP requests and uses bandwidth, so it's wise to use this feature only in situations where it's highly likely that the prefetched page will be visited. A common scenario is a photo gallery, where you can prefetch the "previous" and "next" photo pages so that the user can move quickly between photos.</p>


		<h2>DOM size management</h2>

		<p>For animated page transitions to work, the pages you're transitioning from and to both need to be in the DOM. However, keeping old pages in the DOM quickly fills the browser's memory, and can cause some mobile browsers to slow down or even crash.</p>

		<p>jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the <code>pagehide</code> event). If you revisit a removed page, the browser may be able to retrieve the page's HTML file from its cache. If not, it refetches the file from the server. (In the case of nested list views, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list.)</p>
    
    <p>Pages inside a multi-page template aren't affected by this feature at all - jQuery Mobile only removes pages loaded via Ajax.</p>


    <h2>Caching pages in the DOM</h2>

    <p>If you prefer, you can tell jQuery Mobile to keep previously-visited pages in the DOM instead of removing them. This lets you cache pages so that they're available instantly if the user returns to them.</p>

		<p>To keep all previously-visited pages in the DOM, set the <code>domCache</code> option on the page plugin to <code>true</code>, like this:</p>

<pre><code>
$.mobile.page.prototype.options.domCache = true;
</code></pre>

		<p>Alternatively, to cache just a particular page, you can add the <code>data-dom-cache="true"</code> attribute to the page's container:</p>

<pre><code>
&lt;div data-role="page" id="cacheMe" data-dom-cache="true"&gt;
</code></pre>

		<p>You can also cache a page programmatically like this:</p>

<pre><code>
<var>pageContainerElement</var>.page({ domCache: true });
</code></pre>

    <p>The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.</p>


				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li data-theme="a"><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-customtransitions.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Transitions</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Transitions</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		

				<h2>Creating custom CSS-based transitions</h2>


				<p>To create a custom CSS transition, select a class name that corresponds to the name of your transition, for example "slide", and then define your "in" and "out" CSS rules to take advantage of transitions or animation keyframes:</p>

				<pre><code>
		.slide.in {
		 	-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			-webkit-animation-name: slideinfromright;
			-moz-animation-name: slideinfromright;
		}
			
		.slide.out {
			-webkit-transform: translateX(-100%);
			-moz-transform: translateX(-100%);
			-webkit-animation-name: slideouttoleft;
			-moz-animation-name: slideouttoleft;
		}

		@-webkit-keyframes slideinfromright {
			from { -webkit-transform: translateX(100%); }
			to { -webkit-transform: translateX(0); }
		}
		
		@-webkit-keyframes slideouttoleft {
			from { -webkit-transform: translateX(0); }
			to { -webkit-transform: translateX(-100%); }
		}
	
		@-moz-keyframes slideinfromright {
			from { -moz-transform: translateX(100%); }
			to { -moz-transform: translateX(0); }
		}
		
		@-moz-keyframes slideouttoleft {
			from { -moz-transform: translateX(0); }
			to { -moz-transform: translateX(-100%); }
		}
		
				</code></pre>

				<p>During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above. As of jQuery Mobile version 1.1, animation class additions are queued, rather than simultaneous, producing an out-then-in sequence, which is friendlier for mobile rendering than our previous simultaneous transition sequence.</p>

				<p>If your transition supports a reverse direction, you need to create CSS rules that use the <code>reverse</code> class in addition to the transition class name and the "in" and "out" classes:</p>

				<pre><code>
		.slide.in.reverse {
			-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			-webkit-animation-name: slideinfromleft;
			-moz-animation-name: slideinfromleft;
		}

		.slide.out.reverse {
			-webkit-transform: translateX(100%);
			-moz-transform: translateX(100%);
			-webkit-animation-name: slideouttoright;
			-moz-animation-name: slideouttoright;
		}

		@-webkit-keyframes slideinfromleft {
			from { -webkit-transform: translateX(-100%); }
			to { -webkit-transform: translateX(0); }
		}

		@-webkit-keyframes slideouttoright {
			from { -webkit-transform: translateX(0); }
			to { -webkit-transform: translateX(100%); }
		}
		
		@-moz-keyframes slideinfromleft {
			from { -moz-transform: translateX(-100%); }
			to { -moz-transform: translateX(0); }
		}

		@-moz-keyframes slideouttoright {
			from { -moz-transform: translateX(0); }
			to { -moz-transform: translateX(100%); }
		}
		
				</code></pre>

				<p>After the CSS rules are in place, you simply specify the name of your transition within the @data-transition attribute of a navigation link:</p>

				<pre><code>&lt;a href="#page2" data-transition="slide"&gt;Page 2&lt;/a&gt;
				</code></pre>

				<p>When the user clicks on the navigation link, jQuery Mobile will invoke your transition when it navigates to the page mentioned within the link.</p>

				<p>In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:</p>

				<pre><code>
		.in {
			-webkit-animation-timing-function: ease-out;
			-webkit-animation-duration: 350ms;
			-moz-animation-timing-function: ease-out;
			-moz-animation-duration: 350ms;
		}

		.out {
			-webkit-animation-timing-function: ease-in;
			-webkit-animation-duration: 225ms;
			-moz-animation-timing-function: ease-in;
			-moz-animation-duration: 225;
		}
				</code></pre>

				<p>If you need to specify a different easing or duration, simply add the appropriate CSS3 property to your custom page transition rules.</p>
				
				
		<h2>Creating custom JavaScript-based transitions</h2>

		<p>When a user clicks on a link within a page, jQuery Mobile checks if the link specifies a <code>@data-transition</code> attribute. The value of this attribute is the name of the transition to use when displaying the page referred to by the link. If there is no <code>@data-transition</code> attribute, the transition name specified by the configuration option <code>$.mobile.defaultPageTransition</code> is used for pages, and <code>$.mobile.defaultDialogTransition</code> is used for dialogs.</p>

		<p>After the new page is loaded, the <code>$.mobile.transitionHandlers</code> dictionary is used to see if any transition handler function is registered for the given transition name. If a handler is found, that handler is invoked to start and manage the transition. If no handler is found the handler specified by the configuration option <code>$.mobile.defaultTransitionHandler</code> is invoked.</p>

		<p>By default, the <code>$.mobile.transitionHandlers</code> dictionary is only populated with a single handler entry called "default". This handler plays a dual purpose of either executing a "none" transition, which removes the <code>"ui-page-active"</code> class from the page we are transitioning "from", and places it on the page we are transitioning "to", or a Queued CSS3 Animated Transition, such as the one explained above. If the transition is "none", it will be instantaneous; no animation, no fanfare.</p>

		<p>The <code>$.mobile.defaultTransitionHandler</code> points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.</p>

		<p>The default transition handler is available on the $.mobile namespace:</p>

		<pre><code>
$.mobile.transitionHandlers[ "default" ];
		</code></pre>

		<h3>Transition Handlers</h3>

		<p>A transition handler is a function with the following call signature:</p>

		<pre><code>
function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}
		</code></pre>

		<p>Your handler must create a Deferred object and return a promise to the caller. The promise is used to communicate to the caller when your transition is actually complete. It is up to you to call <code>deferred.resolve()</code> at the correct time. If you are new to Deferred objects, you can find documentation <a href="http://api.jquery.com/category/deferred-object/" rel="nofollow">here</a>.</p>

		<h3>Registering and Invoking Your Transition Handler</h3>

		<p>Once you have created a transition handler function, you need to tell jQuery Mobile about it. To do this, simply add your handler to the <code>$.mobile.transitionHandlers</code> dictionary. Remember, the key used should be the name of your transition. This name is also the same name that will be used within the <code>@data-transition</code> attribute of any navigation links.</p>

		<pre><code>
// Define your transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

// Register it with jQuery Mobile:

$.mobile.transitionHandlers["myTransition"] = myTransitionHandler;
		</code></pre>

		<p>Once you've registered your handler, you can invoke your transition by placing a <code>data-transition</code> attribute on a link:</p>

		<pre><code>&lt;a href="#page2" data-transition="myTransition"&gt;Page 2&lt;/a&gt;
		</code></pre>

		<p>When the user clicks the link above, your transition handler will be invoked after the page is loaded and it is ready to be shown.</p>

		<h3>Overriding a CSS Transition With Your Own Handler</h3>

		<p>As previously mentioned the default transition handler assumes that any transition name other than "none" is a CSS class to be placed on the "from" and "to" elements to kick off a CSS3 animation. If you would like to override one of these built-in CSS transitions, you simply register your own handler with the same name as the CSS page transition you want to override. So for example, if I wanted to override the built-in "slide" CSS transition with my own JavaScript based transition, I would simply do the following:</p>

		<pre><code>// Define your transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

// Register it with jQuery Mobile:

$.mobile.transitionHandlers["slide"] = myTransitionHandler;
		</code></pre>

		<p>Once you do this, anytime the "slide" transition is invoked, your handler, instead of the default one, will be called to perform the transition.</p>

		<h3>Overriding the Default Transition Handler</h3>

		<p>The <code>$.mobile.css3TransitionHandler</code> function is the default transition handler that gets invoked when a transition name is used and not found in the <code>$.mobile.transitionHandlers</code> dictionary. If you want to install your own custom default handler, you simply set the <code>$.mobile.defaultTransitionHandler</code> to your handler:</p>

		<pre><code>// Define your default transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

$.mobile.defaultTransitionHandler = myTransitionHandler;
		</code></pre>

		<p>Once you do this, your handler will be invoked any time a transition name is used but not found within the <code>$.mobile.transitionHandlers</code> dictionary.</p>
		
		<h2>A model for Custom transition handler development</h2>
		<p>Transition handlers involve a number of critical operations, such as hiding any existing page, showing the new page, scrolling either to the top or a remembered scroll position on that new page, setting focus on the new page, and any animation and timing sequences you'd like to add. During development, we would recommend using <code>jquery.mobile.transitions.js</code> as a coding reference.</p>
			
		<h2>Transitions and scroll position</h2>
		<p>One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.</p>
		
	
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">
						<li data-role="list-divider">Pages &amp; Dialogs</li>
						<li><a href="page-anatomy.html">Anatomy of a page</a></li>
						<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
						<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
						<li><a href="page-titles.html">Page titles</a></li>
						<li><a href="page-links.html">Linking pages</a></li>
						<li><a href="page-transitions.html">Page transitions</a></li>
						<li><a href="page-dialogs.html">Dialogs</a></li>
						<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
						<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
						<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
						<li><a href="page-scripting.html">Scripting pages</a></li>
						<li><a href="phonegap.html">PhoneGap apps</a></li>
						<li><a href="touchoverflow.html">touchOverflow feature</a></li>
						<li><a href="pages-themes.html">Theming pages</a></li>
					</ul>
			</div>
		</div>		

	</div><!-- /content -->
	
	
	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>
	
	</div><!-- /page -->
	
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-dialogs.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Dialogs</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Dialogs</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content" class="ui-body">
			<div class="content-primary">
			<h2>Creating dialogs</h2>
			<p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.</p>

			<p>
			<code>
			&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot;&gt;Open dialog&lt;/a&gt;
			</code>
			</p>
			
			<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
			

			
			<h2>Transitions</h2>
			<p>By default, the dialog will open with a 'pop' transition.  Like all pages, you can specify any <a href="page-transitions.html">page transition</a> you want on the dialog by adding the <code>data-transition</code> attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".</p>
			
<code>
&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot; data-transition=&quot;pop&quot;&gt;Open dialog&lt;/a&gt;
</code>
			
			<div>
			<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">data-transition="pop"</a>
			<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">data-transition="slidedown"</a>
			<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">data-transition="flip"</a>
			</div>
	
	
			<h2>Closing dialogs</h2>
			<p>When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the <code>data-rel="back"</code> attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.</p>
			<p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p>
			
			<h3>Setting the close button text</h3>
			<p>Just like the page plugin, you can set a dialog's close button text through an option or data attribute. The option can be configured for all dialogs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.dialog.prototype.options.closeBtnText</code> property to a string of your choosing, or you can place the data attribute <code>data-close-btn-text</code> to configure the text from your markup.</p>
			
			<h2>History &amp; Back button behavior</h2>
			<p>Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.</p>
			
			<h2>Styling &amp; theming</h2>
			<p>Dialogs can be styled with different theme swatches, just like any page by adding <code>data-theme</code> attributes to the header, content, or footer containers. Here is an example of a different dialog design:</p>
				<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>
				
			<p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch A content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch e:</p>
				<a href="dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>
		
		
			<p>Dialogs can also be used more like a control sheet to offer multiple buttons if you simply remove the top margin from the dialog's inner container element. For example, if your dialog page had a class of <code>my-dialog</code>, you could add this CSS to pin that dialog to the top: <code>.ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }</code>, or you could just apply that style to all dialogs with <code>.ui-dialog .ui-dialog-contain { margin-top: 0 }</code>.</p>
						<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>
			
			<h2>Dialog width and margins</h2>
			<p>For the sake of readability, dialogs have a default <code>max-width</code> of 500 pixels (plus 15px padding on each side). There is also a 10% top <code>margin</code> to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:</p>

<code><pre>
.ui-dialog .ui-header, 
.ui-dialog .ui-content, 
.ui-dialog .ui-footer { 
<strong>	max-width: 500px; 
	margin: 10% auto 15px auto; </strong>
}
</pre></code>

			


			
	</div><!--/content-primary -->		

	<div class="content-secondary">

		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

				<h3>More in this section</h3>

				<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li data-theme="a"><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>

</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-dynamic.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Dynamically Injecting Pages</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Dynamically Injecting Pages</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			<h2>jQuery Mobile and Dynamic Page Generation</h2>
			<p>jQuery Mobile allows pages to be pulled into the DOM dynamically via its default click hijacking behavior, or through manual calls to <code>$.mobile.changePage()</code>. This is great for applications that generate HTML pages/fragments on the server-side, but there are sometimes cases where an application needs to dynamically generate page content on the client-side from JSON or some other format. This may be necessary for bandwidth/performance reasons, or because it is the data format of choice for the server they are interacting with.</p>
			<p>For applications that need to generate page markup on the client-side, it's important to know about the notifications that are triggered during a <code>$.mobile.changePage()</code> call because they can be used as hooks into the navigation system that will allow you to generate your content at the appropriate time.</p>
			<p>A call to <code>changePage()</code> will usually trigger the following event notifications:</p>
			<ul>
			  <li><code>pagebeforechange</code>
			    <ul>
			      <li>Fired off before any page loading or transition.</li>
			      <li>NOTE: This event was formerly known as &quot;beforechangepage&quot;.</li>
		        </ul>
			  </li>
			  <li><code>pagechange</code>
			    <ul>
			      <li>Fired off after all page loading and transitions.</li>
			      <li>NOTE: this event was formerly known as &quot;changepage&quot;.</li>
		        </ul>
			  </li>
			  <li><code>pagechangefailed</code>
			    <ul>
			      <li>Fired off if an error has occurred while attempting to dynamically load a new page.		          </li>
		        </ul>
			  </li>
		  </ul>
			<p>These notifications are triggered on  the parent container element (<code>$.mobile.pageContainer</code>) of pages, and will bubble all the way up to the document element and window.</p>
<p>For applications wishing to inject pages, or radically modify the content of an existing page, based on some non-HTML data, such as JSON or in-memory JS object, the <code>pagebeforechange</code> event is very useful since it gives you a hook for analyzing the URL or page element the application is being asked to load or switch to, and short-circuit the default <code>changePage()</code> behavior by simply calling <code>preventDefault()</code> on the <code>pagebeforechange</code> event.</p>
<p>To illustrate this technique, take a look at this <a href="dynamic-samples/sample-reuse-page.html" rel="external">working sample</a>. In this sample, the main page starts off with a list of categories that the user can navigate into. The actual items in each category are stored in a JavaScript object in memory, for illustrative purposes, but the data can really come from anywhere.</p>
<pre><code>
var categoryData = {
	animals: {
		name: &quot;Animals&quot;,
		description: &quot;All your favorites from aardvarks to zebras.&quot;,
		items: [
			{
				name: &quot;Pets&quot;
			},
			{
				name: &quot;Farm Animals&quot;
			},
			{
				name: &quot;Wild Animals&quot;
			}
		]
	},
	colors: {
		name: &quot;Colors&quot;,
		description: &quot;Fresh colors from the magic rainbow.&quot;,
		items: [
			{
				name: &quot;Blue&quot;
			},
			{
				name: &quot;Green&quot;
			},
			{
				name: &quot;Orange&quot;
			},
			{
				name: &quot;Purple&quot;
			},
			{
				name: &quot;Red&quot;
			},
			{
				name: &quot;Yellow&quot;
			},
			{
				name: &quot;Violet&quot;
			}
		]
	},
	vehicles: {
		name: &quot;Vehicles&quot;,
		description: &quot;Everything from cars to planes.&quot;,
		items: [
			{
				name: &quot;Cars&quot;
			},
			{
				name: &quot;Planes&quot;
			},
			{
				name: &quot;Construction&quot;
			}
		]
	}
};
</code></pre>
<p>The application uses links with urls that contain a hash that tells the application what category items to display:</p>
<pre>
<code>
  	&lt;h2&gt;Select a Category Below:&lt;/h2&gt;
  	&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;&gt;
    	&lt;li&gt;&lt;a href=&quot;#category-items?category=animals&quot;&gt;Animals&lt;/a&gt;&lt;/li&gt;
    	&lt;li&gt;&lt;a href=&quot;#category-items?category=colors&quot;&gt;Colors&lt;/a&gt;&lt;/li&gt;
    	&lt;li&gt;&lt;a href=&quot;#category-items?category=vehicles&quot;&gt;Vehicles&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
</code>
</pre>
<p>Internally, when the user clicks on one of these links, the application intercepts the internal <code>$.mobile.changePage()</code> call that is invoked by the frameworks' default link hijacking behavior. It then analyzes the URL for the page about to be loaded, and then decides whether or not it should handle the loading itself, or to let the normal <code>changePage()</code> code handle things.</p>
<p>The application was able to insert itself into the <code>changePage()</code> flow by binding to the <code>pagebeforechange</code> event at the document level:</p>
<pre>
<code>
// Listen for any attempts to call changePage().
$(document).bind( &quot;pagebeforechange&quot;, function( e, data ) {

	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === &quot;string&quot; ) {

		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#category-item/;

		if ( u.hash.search(re) !== -1 ) {

			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});
</code>
</pre>
<p>So why listen at the document level? In short, because of deep-linking. We need our binding to be active before the jQuery Mobile framework initializes and decides how to process the initial URL that invoked the application.</p>
<p>When the callback for the <code>pagebeforechange</code> binding is invoked, the 2nd argument to the callback will be a data object that contains the arguments that were passed to the initial <code>$.mobile.changePage()</code> call. The properties of this object are as follows:</p>
<ul>
  <li><code>toPage</code>
    <ul>
      <li>Can be either a jQuery collection object containing the page to be transitioned to, <b>OR</b> a URL reference for a page to be loaded/transitioned to.</li>
    </ul>
  </li>
  <li><code>options</code>
    <ul>
      <li>Object containing the options that were passed in by the caller of the <code>$.mobile.changePage()</code> function.</li>
      <li>A list of the options can be found <a href="../api/methods.html">here</a>.</li>
      </ul>
  </li>
  </ul>
<p>For our sample application, we are only interested in <code>changePage()</code> calls where URLs are initially passed in, so the first thing our callback does is check the type for the <code>toPage</code>. Next, with the help of some URL parsing utilities, it checks to make sure if the URL contains a hash that we are interested in handling ourselves. If so, it then calls an application function called <code>showCategory()</code> which will dynamically create the content for the category specified by the URL hash, and then it calls <code>preventDefault()</code> on the event.</p>
<p>Calling <code>preventDefault()</code> on a <code>pagebeforechange</code> event causes the originating <code>$.mobile.changePage()</code> call to exit without performing any work. Calling the <code>preventDefault()</code> method on the event is the equivalent of telling jQuery Mobile that you have handled the <code>changePage()</code> request yourself.</p>
<p>If <code>preventDefault()</code> is not called, <code>changePage()</code> will continue on processing as it normally does. One thing to point out about the data object that is passed into our callback, is that any changes you make to the <code>toPage</code> property, or options properties, will affect <code>changePage()</code> processing if <code>preventDefault()</code> is not called. So for example, if we wanted to redirect or map a specific URL to another internal/external page, our callback could simply set the <code>data.toPage</code> property in the callback to the URL or DOM element of the page to redirect to. Likewise, we could set, or un-set any option from within our callback, and <code>changePage()</code> would use the new settings.</p>
<p>So now that we know how to intercept <code>changePage()</code> calls, let's take a closer look at how this sample actually generates the markup for a page. Our example actually uses, or we should say, re-uses the same page to display each of the categories. Each time one of our special links is clicked, the function <code>showCategory()</code> gets invoked:</p>
<pre><code>
// Load the data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( urlObj, options )
{
	var categoryName = urlObj.hash.replace( /.*category=/, &quot;&quot; ),

		// Get the object that represents the category we
		// are interested in. Note, that at this point we could
		// instead fire off an ajax request to fetch the data, but
		// for the purposes of this sample, it's already in memory.
		category = categoryData[ categoryName ],

		// The pages we use to display our content are already in
		// the DOM. The id of the page we are going to write our
		// content into is specified in the hash before the '?'.
		pageSelector = urlObj.hash.replace( /\?.*$/, &quot;&quot; );

	if ( category ) {
		// Get the page we are going to dump our content into.
		var $page = $( pageSelector ),

			// Get the header for the page.
			$header = $page.children( &quot;:jqmData(role=header)&quot; ),

			// Get the content area element for the page.
			$content = $page.children( &quot;:jqmData(role=content)&quot; ),

			// The markup we are going to inject into the content
			// area of the page.
			markup = &quot;&lt;p&gt;&quot; + category.description + &quot;&lt;/p&gt;&lt;ul data-role='listview' data-inset='true'&gt;&quot;,

			// The array of items for this category.
			cItems = category.items,

			// The number of items in the category.
			numItems = cItems.length;

		// Generate a list item for each item in the category
		// and add it to our markup.
		for ( var i = 0; i &lt; numItems; i++ ) {
			markup += &quot;&lt;li&gt;&quot; + cItems[i].name + &quot;&lt;/li&gt;&quot;;
		}
		markup += &quot;&lt;/ul&gt;&quot;;

		// Find the h1 element in our header and inject the name of
		// the category into it.
		$header.find( &quot;h1&quot; ).html( category.name );

		// Inject the category items markup into the content element.
		$content.html( markup );

		// Pages are lazily enhanced. We call page() on the page
		// element to make sure it is always enhanced before we
		// attempt to enhance the listview markup we just injected.
		// Subsequent calls to page() are ignored since a page/widget
		// can only be enhanced once.
		$page.page();

		// Enhance the listview we just injected.
		$content.find( &quot;:jqmData(role=listview)&quot; ).listview();

		// We don't want the data-url of the page we just modified
		// to be the url that shows up in the browser's location field,
		// so set the dataUrl option to the URL for the category
		// we just loaded.
		options.dataUrl = urlObj.href;

		// Now call changePage() and tell it to switch to
		// the page we just modified.
		$.mobile.changePage( $page, options );
	}
}
</code></pre>
<p>In our sample app, the hash of the URL we handle contains 2 parts:</p>
<pre><code>
#category-items?category=vehicles
</code></pre>
<p>The first part, before the '?' is actually the id of the page to write content into, the part after the '?' is info the app uses to figure out what data it should use when generating the markup for the page. The first thing <code>showCategory()</code> does is deconstruct this hash to extract out the id of the page to write content into, and the name of the category it should use to get the correct set of data from our in-memory JavaScript category object. After it figures out what category data to use, it then generates the markup for the category, and then injects it into the header and content area of the page, wiping out any other markup that previously existed in those elements.</p>
<p>After it injects the markup, it then calls the appropriate jQuery Mobile widget calls to enhance the list markup it just injected. This is what turns the normal list markup into a fully styled listview with all its behaviors.</p>
<p>Once that's done, it then calls <code>$.mobile.changePage()</code>, passing it the DOM element of the page we just modified, to tell the framework that it wants to show that page.</p>
<p>Now an interesting problem here is that jQuery Mobile typically updates the browser's location hash with the URL associated with the page it is showing. Because we are re-using the same page for each category, this wouldn't be ideal, because the URL for that page has no specific category info associated with it. To get around this problem, <code>showCategory()</code> simply sets the <code>dataUrl</code> property on the options object it passes into <code>changePage()</code> to tell it to display our original URL instead.</p>
<p>That's the sample in a nutshell. It should be noted that this particular sample and its usage is not a very good example of an app that degrades gracefully when JavaScript is turned off. That means it probably won't work very well on C-Grade browsers. We will be posting other examples that demonstrate how to degrade gracefully in the future. Check this <a href="http://jquerymobile.com/test/docs/pages/dynamic-samples/">page</a> for updates.</p>
      </div>
		<!--/content-primary -->

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li data-theme="a"><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-links.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Linking Pages</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Linking pages</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<div class="content-primary">	
			<h2>Linking pages</h2>
			
			<p>jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.</p> 

			<p>The goal of this model is to allow developers to create websites using best practices &mdash; where ordinary links will "just work" without any special configuration &mdash; while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p> 
			
			<h2>Default link behavior: Ajax</h2> 
							
			<p>To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's <code>href</code> to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.</p>
				
			<p>If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.</p>
			
			<p>If the Ajax request fails, the framework will display a small error message overlay (styled in the "e" swatch) that disappears after a brief time so this doesn't break the navigation flow. View an <a href="notapage.html">example of the error message</a>.</p>
			
			<p><strong>Note:</strong> You cannot link <strong>to</strong> a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a <a href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget" rel="external">subpage plugin</a> that makes it possible to load in multi-page documents.</p>


<h2>Linking without Ajax</h2>
		
		<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (<code>rel="external"</code> and <code>data-ajax="false"</code>) have the same effect, but a different semantic meaning: <code>rel="external"</code> should be used when linking to another site or domain, while <code>data-ajax="false"</code> is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opens links to external domains out of the Ajax behavior.</p>
		<p>In version 1.1, we've added support for using <code>data-ajax="false"</code> on a parent container which allows you to excluded a large number of links from the Ajax navigation system. This avoids the need to add this attribute to every link in a container.</p>
		<p>Note: When building a jQuery Mobile application where the Ajax navigation system is disabled globally or frequently disabled on individual links, we  recommend disabling the <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to avoid inconsistent navigation behavior in some browsers.</p>
		


		<h2>Linking within a multi-page document</h2> 
		
			<p>A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p> 
			
			<p>If a link in a multi-page document points to an anchor (<code>#foo</code>), the framework will look for a page wrapper with that ID (<code>id="foo"</code>). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. </p>
		
		<p>It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a <code>rel="external"</code> or <code>data-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (<code>#</code>) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.</p>
		
		<p>For example, a link to a page containing multiple internal pages would look like this:</p>
			
			<code>&lt;a href=&quot;multipage.html&quot; rel=&quot;external&quot;&gt;Multi-page link&lt;/a&gt;</code>

				

		<h2>"Back" button links</h2>
		<p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default <code>href</code>. This is particularly useful when generating "back" buttons with JavaScript, such as a button to close a dialog. 
		When using this feature in your source markup, although browsers that support this feature will not use the specified <code>href</code> attribute, <strong>be sure to still provide a meaningful value that actually points to the URL of the referring page to allow the feature to work for users in C-Grade browsers</strong>. If users can reach this page from more than one referring pages, specify a sensible <code>href</code> so that the navigation remains logical for all users. 
		Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead.
		Note: <code>data-direction="reverse"</code> is meant to simply run the backwards version of the transition that will run on that page change, while <code>data-rel="back"</code> makes the link functionally equivalent to the browser's back button and all the standard back button logic applies. Adding <code>data-direction="reverse"</code> to a link with <code>data-rel="back"</code> <b>will not</b> reverse the reversed page transition and produce the "normal" version of the transition. 
		</p>
		
				
		<h2>Redirects and linking to directories</h2>
		
		<p>When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p>
		
		<p>However, you can work around this issue by returning your page div with a <code>data-url</code> attribute already specified. When you do this, jQuery Mobile will use that attribute's value for updating the URL, instead of the url used to request that page. This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission. This tool allows you to take control of the jQuery Mobile history stack in these situations. Here's an example:</p>
		
		<p>The following link points to "docs-links-urltest/index.html": <a href="docs-links-urltest/index.html">Test Link</a> which is a directory with an index page. The return page will update the hash as "/docs/pages/docs-links-urltest/" with a trailing slash. This is done via the data-url attribute in that page's source. Keep in mind that the value will replace the entire hash, and it is up to you to replace it with a URL that actually resolves to the correct page when requested via refresh or deep link.</p>
		
		<p>Learn more about the technical details of the navigation model and <a href="page-navmodel.html">Ajax, hashes and history</a> in jQuery mobile.</p>
		
		
		
		<h2>Link examples</h2>
					<p>All standard HTML link types are supported in jQuery Mobile in addition to the types outlined above. Here is a sampler of many common link types:</p>
			
			<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
				<li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li>
				<li><a href="../../index.html">Link in the same domain</a></li>
				<li><a href="../pages/dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li>
				<li data-role="list-divider">Links that will refresh the page</li>
				<li><a href="http://www.jquery.com">External domain</a></li>
				<li><a href="../../index.html" rel="external">Link with rel="external"</a></li>
				<li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li>
				<li><a href="../../index.html" target="foo">Link with target="foo"</a></li>
				<li data-role="list-divider">Email links</li>
				<li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>
				<li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and body pre-filled</a></li>

				<li data-role="list-divider">Phone links</li>
				<li><a href="tel:15555555555">Phone: tel:15555555555</a></li>
				<li data-role="list-divider">Other</li>
				<li><a href="#">A href="#" will return false</a></li>
			</ul>

		
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li data-theme="a"><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-navmodel.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Ajax, hashes &amp; history</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Ajax, hashes &amp; history</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			<h2>jQuery Mobile's navigation model</h2>

			<p>A "page" in jQuery Mobile consists of an element (usually a <code>div</code>) with a <code> data-role</code> attribute set to <code>"page"</code>, which generally contains <code>div</code> elements with roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>, each containing common markup, forms, and custom jQuery Mobile widgets.</p>

			<p>The basic workflow with page loading is as follows: first, a page is requested with a normal HTTP request, and subsequent "pages" are then requested and injected into that page's DOM. Because of this, the DOM may have a number of "pages" in it at a time, each of which can be re-visited by linking to its <code>data-url</code> attribute.</p>

			<p>When a url is initially requested, there may be one or more "pages" in the response, and only the first one will be shown. The advantage of storing more than one "page" is that it allows you to pre-fetch static pages that are likely to be visited.</p>

			<h2>Hash and Ajax driven page navigation</h2>

			<p>By default all navigation within jQuery Mobile is based on changes and updates to <code>location.hash</code>. Whenever possible, page changes will use a smooth transition between the current "page" and the next, whether it is either already present in the DOM, or is automatically loaded via Ajax.</p>

			<p>Hash values created by jQuery Mobile are normalized as full paths relative to the URL of the first "real" page that was loaded.	The hash is always maintained as a valid URL, so any "page" in jQuery mobile can be bookmarked or referenced in a link. To retrieve a non-hash-based URL, simply remove the # from the address and refresh the page.</p>

			<p>In general, hash changes are created whenever a link is clicked in jQuery mobile. When a link is clicked, jQuery mobile will make sure that the link is referencing a local URL, and if so, it'll prevent the link's default click behavior from occurring and request the referenced url via Ajax instead. When the page returns successfully, it will set the <code>location.hash</code> to the new page's relative url. </p>

			<p>Hash changes that occur independently of a click, such as when a user clicks the back button, are handled through the <code>hashchange</code> event, which is bound to the window object using Ben Alman's <code>hashchange</code> special event plugin (included in jQuery Mobile). When a hash change occurs (and also when the first page loads), the <code>hashchange</code> event handler will send the <code>location.hash</code> to the <code>$.mobile.changePage()</code> function, which in turn either loads or reveals the referenced page.</p>


			<p>Once the referenced page is present in the DOM, the <code>$.mobile.changePage()</code> function applies a transition between the current active page and the new page. Page transitions happen through adding and removing classes that apply CSS animations. For example, in a slide-left transition, the exiting page is given the classes <code>"slideleft"</code> and <code>"out"</code>, and the entering page is given the classes <code>"slideleft"</code> and <code>"in"</code>, as well as a class of <code>"ui-page-active"</code> to mark it as the new "active" page being viewed. When the animation is complete, the <code>"in"</code> and <code>"out"</code> classes are removed, and the exited page loses its <code>"ui-page-active"</code> class.</p>

			<h2>pushState plugin</h2>

			<p>There is an optional feature that converts the longer, hash-based URLs mentioned in the previous section into the full document path which is cleaner and makes the Ajax tracking transparent in the URL structure. This is built as an enhancement on top of the hash-based URL system for Ajax links. Note that despite the name, this feature technically converts hash-based urls by using <code>history.replaceState</code> (not <code>history.pushState</code>) in the current release because this works more reliably across our target platforms. For browsers that do not support <code>history.replaceState</code>, or if this feature is disabled, hash-based URLs will be used instead. </p>

			<p>Since the plugin initializes when the DOM is fully loaded you can enable and disable it manually by setting <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to <code>false</code> anytime before document ready.</p>

			<div class="ui-body ui-body-e">
				<h4 style="margin:.5em 0">Important: rel="external" and $.mobile.ajaxEnabled=false</h4>
        <p>Slightly different implementations of the replaceState API in various browsers can cause odd behavior in specific scenarios. For example, some browser implementations (including desktop browsers) implement the <code>popstate</code> event differently when linking externally and moving back to a page onto which state has already been pushed/replaced. When building a jQuery Mobile application where the ajax navigation is being explicitly disabled, either through the frequent use of <code>rel="external"</code> on links or by disabling Ajax navigation completely via the <code>$.mobile.ajaxEnabled=false</code>, we recommend disabling the pushState feature to fall back to the hash based navigation for more consistent behavior.</p>
			</div>

			<h2>changePage</h2>

			<p>Within the framework, page changes - both for pages already in the DOM and for pages that need to be loaded via Ajax - use the <code>$.mobile.changePage()</code> function. <code>$.mobile.changePage()</code> contains all of the logic for finding pages to transition to and from, and how to handle various response conditions such as a page not found. <code>$.mobile.changePage()</code> can be called externally and accepts the following arguments (to, transition, back, changeHash). The <code>to</code> argument can accept either a string (such as a file url or local element's ID), an array (in which the first array item is any local page you'd like to transition from, and the second array item is the <code>to</code> page), or an object (with expected properties: url, type ("get" or "post"), and data (for serialized parameters)), the latter of which is useful for loading pages that expect form data. The <code>transition</code> argument accepts a string representing a named transition, such as "slide". The <code>back</code> argument accepts a boolean representing whether the transition should go forward or in reverse. Lastly, the <code>changeHash</code> argument accepts a boolean for whether you'd like the url to be updated upon a successful page change.</p>

			<p>The <code>$.mobile.changePage()</code> function is used in a number of places in jQuery Mobile. For example, when a link is clicked, its <code>href</code> attribute is normalized and then <code>$.mobile.changePage()</code> handles the rest. When forms are submitted, jQuery Mobile simply gathers a few of the form's attributes, serializes its data, and once again, <code>$.mobile.changePage()</code> is used to handle the submission and response. Also, links that create dialogs use <code>$.mobile.changePage()</code>to open a referenced page without updating the hash, which is useful for keeping dialogs out of history tracking. </p>

			<h2>Base element</h2>

			<p>Another key ingredient to jQuery Mobile's page navigation model is the <code>base</code> element, which is injected into the <code>head</code> and modified on every page change to ensure that any assets (images, CSS, JS, etc.) referenced on that page will be requested from a proper path. In browsers that don't support dynamic updates to the <code>base</code> element (such as Firefox 3.6), jQuery Mobile loops through all of the referenced assets on the page and prefixes their <code>href</code> and <code>src</code> attributes with the base path.</p>


			<h2>Developer explanation of base url management:</h2>

			<p>jQuery Mobile manages http requests using a combination of generated absolute URL paths and manipulating a generated <code>&lt;base&gt;</code> element's href attribute. The combination of these two approaches allows us to create URLs that contain full path information for loading pages, and a base element to properly direct asset requests made by those loaded pages (such as images and stylesheets).</p>

<p><strong>TODO: update description of internal base and urlHistory objects</strong></p>

			<h2>Data-url storage</h2>

			<p>The navigation model maintains a <code>data-url</code> attribute on all <code>data-role="page"</code> elements. This <code>data-url</code> attribute is used to track the origin of the page element. Pages embedded within the main application document all have their <code>data-url</code> parameter set to the ID of their element with <code>data-role="page"</code>. The only exception to this is the first-page in the document. The first-page is special because it can be addressed by its <code>id</code> if it has one, or by the document or base URL (with no hash fragment).</p>

			<p>Pages that are external to the application document get pulled in dynamically via ajax, and their data-url is set to the site relative path to the external page. If you are running in an environment where loading an external page from a different domain is allowed, then the data-url is set to the absolute URL.</p>

			<h2>Auto-generated pages and sub-hash urls</h2>

			<p>Some plugins may choose to dynamically break a page's content into separate navigable pages, which can then be reached via deep links. One example of this would be the Listview plugin, which will break a nested UL (or OL) into separate pages, which are each given a <code>data-url</code> attribute so they can be linked to like any normal "page" in jQuery Mobile. However, in order to link to these pages, the page that generates them must first be requested from the server. To make this work, pages that are auto-generated by plugins use the following special data-url structure:
			<code>&lt;div data-url="page.html&amp;subpageidentifier"&gt;</code></p>

			<p>So, for example, a page generated by the listview plugin may have a <code>data-url</code> attribute like this: <code>data-url="artists.html&amp;ui-page=listview-1"</code></p>

			<p>When a page is requested, jQuery Mobile knows to split the URL at "&amp;ui-page" and make an HTTP request to the portion of the URL before that key. In the case of the listview example mentioned above, the URL would look like this: http://example.com/artists.html&amp;ui-page=listview-1
			...and jQuery Mobile would request artists.html, which would then generate its sub-pages, creating the <code>div</code> with <code>data-url="artists.html&amp;ui-page=listview-1"</code>, which it will then display as the active page.</p>

			<p><em>Note that the <code>data-url</code> attribute of the element contains the full URL path, not just the portion after &amp;ui-page=. This allows jQuery Mobile to use a single consistent mechanism that matches URLs to page <code>data-url</code> attributes.</em></p>

			<h2>Cases when Ajax navigation will not be used</h2>

			<p>Under certain conditions, normal http requests will be used instead of Ajax requests. One case where this is true is when linking to pages on external websites. You can also specify that a normal http request be made through the following link attributes:</p>

			<ul>
			<li><p><code>rel=external</code></p></li>
			<li><p><code>target</code> (with any value, such as <code>"_blank"</code>)</p></li>

			</ul><h2>Form submissions</h2>

			<p>Form submissions are handled automatically through the navigation model as well. Visit the <a href="../forms/forms-sample.html">forms section</a> for more information.</p>

			<h2>Using the Application Cache</h2>

			<p>When using the application cache with jQuery Mobile there is at least one important issue to consider. Some browsers, when making requests to the cache will report an http status of 0 on success. This causes jQuery Core's <code>$.ajax</code> to trigger error handlers. The suggested workaround for users leveraging the application cache is to use a jQuery ajax pre-filter. Something like the following (credit to <a href="https://github.com/jquery/jquery-mobile/issues/1579#issuecomment-1209338" rel="external">jammus</a> for the snippet):</p>

			<pre><code>

$.ajaxPrefilter( function(options, originalOptions, jqXHR) {
	if ( applicationCache &&
		 applicationCache.status != applicationCache.UNCACHED &&
		 applicationCache.status != applicationCache.OBSOLETE ) {
		 // the important bit
		 options.isLocal = true;
	}
});

			</code></pre>

			<p>Setting <code>isLocal</code> to true for your ajax requests will alert jQuery Core that it should handle the 0 return values differently. Local requests exhibit similar behavior (ie 0 statuses), and Core will then fall back to determining success based on the presence of content in the xhr <code>responseText</code> attribute.</p>

			<p>One important issue to note with the above is that it will set <code>isLocal</code> to <code>true</code> for all requests made via ajax regardless of whether they are in the manifest or not so long as the cache is valid. This works for now because Core only consults the <code>isLocal</code> value when the status is in fact 0 which doesn't affect uncached results. There is no long term guarantee that <code>isLocal</code> will remain isolated in its purpose for handling 0 status values. If that changes it may break your application.</p>

			<h2>Known limitations</h2>

			<p>The non-standard environment created by jQuery Mobile's page navigation model introduces some conditions of which you should be aware when building pages:</p>

			<ul>
			<li><p>When linking to directories, without a filename url, (such as <code>href="typesofcats/"</code> instead of <code>href="typesofcats/index.html"</code>), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p></li>
			<li><p>Documents loaded via Ajax will select the first page in the DOM of that document to be loaded as a JQM page element. As a result the developer must make sure to manage the ID attributes of the loaded page and child elements to prevent confusion when manipulating the DOM.</p></li>
			<li><p>If you link to multipage document, you must use a <code>data-ajax="false"</code> attribute on the link to cause a full page refresh due to the limitation above where we only load the first page node in an Ajax request due to potential hash collisions. There is currently a <a href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget" rel="external">subpage plugin</a> that makes it possible to load in multi-page documents. </p></li>
			<li><p>Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the "page" element (the element with a <code>data-role</code> attribute of <code>"page"</code>). For example, links to styles and scripts that are specific to a particular page can be referenced inside that <code>div</code>. However, a better approach is to use jQuery Mobile's page events to trigger specific scripting when certain pages load. <strong>Note: </strong> you can return a page from the server with a <code>data-url</code> already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.</p></li>
			<li><p>Conversely, any non-unique assets (those used site-wide) should be referenced in the <code>&lt;head&gt;</code> section of an HTML document, or at the very least, outside of the "page" element, to prevent running scripts more than once.</p></li>
			<li><p>The <code>"ui-page"</code> key name used in sub-hash url references can be set to any value you'd like, so as to blend into your URL structure. This value is stored in <code>jQuery.mobile.subPageUrlKey</code>.</p></li>
			<li><p>When traveling back to a previously loaded jQuery Mobile document from an external <b>or</b> internal document with the push state plugin enabled, some browsers load and trigger the <code>popstate</code> event on the wrong document or for the wrong reasons (two edge cases recorded so far). If you are regularly linking to external documents and find the application behaving erratically try disabling pushstate support.</p></li>
			<li><p>jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight <a href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="external">page params plugin</a> and a more fully featured <a href="https://github.com/azicchetti/jquerymobile-router" rel="external">jQuery Mobile router plugin</a> for use with backbone.js or spine.js.</p></li>
			<li><p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> arguments to scroll to that Y location.</p></li>
			<li><p>Some external applications (notably Facebook's OAuth implementation) modify their response URL in such a way that interferes with jQuery Mobile. In particular, Facebook appends <code>#_=_</code> to the end of the callback. Currently the best solution for this is to remove it from the location hash before jQuery Mobile loads using something like: <code>if (window.location.hash == "#_=_") window.location.hash = ""; </code>. jQuery Mobile can then process &amp; enhance the page properly.</p></li>
			</ul>


				</div><!--/content-primary -->

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li data-theme="a"><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-scripting.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Scripting pages</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Scripting pages</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			<h2>Scripting pages in jQuery Mobile</h2>
			<p>Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that manipulate your content. You can explore the mobile API in more detail by reading up on <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html">events</a>, and <a href="../api/methods.html">methods</a> or dig into the technical details of the <a href="page-navmodel.html">Ajax navigation model</a>.</p>

			<h2>Scripts &amp; styles in the head</h2>

			<p>When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's <code>href</code> to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that <code>href</code> with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the <em>contents of the response's <code>body</code> element (or more specifically the <code>data-role="page"</code> element, if it's provided)</em>, meaning nothing in the <code>head</code> of the page will be used (with the exception of the page title, which is fetched specifically). Please note that script's loaded dynamically in this fashion do not guarantee a load order in the same way they would if the page was loaded via a normal http request.</p>

			<p> This means that any scripts and styles referenced the <code>head</code> of a page won't have any effect <em>when a page is loaded via Ajax</em>, but they <strong>will execute if the page is requested normally via HTTP</strong>. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the <code>head</code> of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume <code>head</code> scripts are only expected to execute once per browsing session.</p>

			<p>The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the <code>pageInit</code> event (details below) to run  necessary code when a specific page is created (which can be determined by its <code>id</code> attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.</p>

			<p>Another approach for page-specific scripting would be to include scripts at the end of the <code>body</code> element when no <code>data-role=page</code> element is defined, or inside the first <code>data-role=page</code> element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via Ajax or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a <code>data-role="page"</code> element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via Ajax.</p>

			<h2>pageinit = DOM ready</h2>

			<p>One of the first things people learn in jQuery is to use the <code>$(document).ready()</code> function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the <code>onload</code> event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the <a href="../api/events.html"><code>pageinit</code></a> event. </p>

			<p>The <code>pageinit</code> event is triggered on a page when it is initialized, right after initialization occurs. Most of jQuery Mobile's official widgets auto-initialize themselves based on this event, and you can set up your code to do the same.</p>
<pre><code>
$( document ).delegate("#aboutPage", "pageinit", function() {
  alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
});
</code></pre>

	<p>If you'd like to manipulate a page's contents <em>before</em> the pageinit event fires and widgets are auto-initialized, you can instead bind to the <code>pagebeforecreate</code> event:</p>

<pre><code>
$( document ).delegate("#aboutPage", "pagebeforecreate", function() {
  alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
});
</code></pre>
		<div class="ui-body ui-body-e">
			<h4 style="margin:.5em 0">Important note: <code>pageCreate()</code> vs <code>pageInit()</code></h4>
			<p>Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code>pagecreate</code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code>pagecreate</code> event in place of direct calls to the widget methods. As a result, users binding to the <code>pagecreate</code> in <code>mobileinit</code> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code>pageinit</code> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects. In short, if you were previously using <code>pagecreate</code> to manipulate the enhanced markup before the page was shown, it's very likely you'll want to migrate to 'pageinit'.</p>
		</div>

			<h2>Changing pages</h2>
			<p>If you want to change the current active page with JavaScript, you can use the <a href="../api/methods.html"><code>changePage</code></a> method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:</p>
			<pre><code>
<strong>//transition to the "about us" page with a slideup transition</strong>
$.mobile.changePage( "about/us.html", { transition: "slideup"} );

<strong>//transition to the "search results" page, using data from a form with an ID of "search"</strong>
$.mobile.changePage( "searchresults.php", {
	type: "post",
	data: $("form#search").serialize()
});
</code></pre>

			<h2>Loading pages</h2>
			<p>To load an external page, enhance its content, and insert it into the DOM, use the <a href="../api/methods.html"><code>loadPage</code> method</a>. There are a lot of methods and properties that you can set when loading pages, but here is a simple example:</p>
			<pre><code>
//load the "about us" page into the DOM
$.mobile.loadPage( "about/us.html" );
</code></pre>

			<h2>Enhancing new markup</h2>
			<p>The page plugin dispatches a <code>pageInit</code> event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.</p>
			<p>However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page <code>div</code> itself), saving you the task of manually initializing each plugin (listview button, select, etc.).</p>
			<p>For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the <code>create</code> event to automatically transform all the widgets it contains (<a href="http://jquerymobile.com/test/docs/forms/textinputs/index.html">inputs</a> and <a href="http://jquerymobile.com/test/docs/buttons/index.html">buttons</a> in this case) into the enhanced versions. The code for this scenario would be:</p>
<pre><code>$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );</code></pre>

			<h2>Create vs. refresh: An important distinction</h2>
			<p>Note that there is an important difference between the <code>create</code> event and <code>refresh</code> method that some widgets have. The <code>create</code> event is suited for enhancing <em>raw markup</em> that contains one or more widgets. The <code>refresh</code> method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.</p>

			<p>For example, if you had a page where you dynamically appended a new unordered list with <code>data-role=listview</code> attribute after page creation, triggering <code>create</code> on a parent element of that list would transform it into a <a href="http://jquerymobile.com/test/docs/lists/index.html">listview</a> styled widget. If more list items were then programmatically added, calling the listview&#8217;s <code>refresh</code> method would update just those new list items to the enhanced state and leave the existing list items untouched.</p>


			<h2>data-enhance="false" data attribute</h2>
			<p>As of jQuery Mobile 1.0, all the markup within a page is scanned for elements to be enhanced. This is problematic for 3rd party widgets/libraries that don’t want anybody enhancing their markup or attaching behavior. We heard requests for a data-* attribute that can be placed on an element container to tell the framework not to enhance anything inside it for these situations. In 1.1, we’ve added a new <code>data-enhance="false"</code> attribute that can be added to a container to prevent both auto-initialization and link/form hijacking. 
			This is also available via <code>$.fn.jqmEnhanceable</code>. It’s important to note that because of the performance impact incurred by finding a parent element with the <code>data-enhance="false"</code> attribute this feature must be turned on explicitly with <code>$.mobile.ignoreContentEnabled=true</code>. </p>
			
			<h2>data-ajax="false" now works on containers</h2>
			<p>On a related topic, we’ve always offered the ability to disable the AJAX navigation system from hijacking a link or form submit via the <code>data-ajax="false"</code> attribute, but people have asked for a way to apply this exclusion more efficiently to a grouping of links. In 1.1, this is now possible by simply adding, and setting <code>$.mobile.ignoreContentEnabled=true</code>, the <code>data-ajax</code> attribute to a parent container and it will exclude all the child links or forms from the AJAX navigation system behavior.</p>


			<h2>Scrolling to a position within a page</h2>
			<p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> argument to scroll to that Y location. For example:</p>
<pre><code>
//scroll to Y 300px
$.mobile.silentScroll(300);
</code></pre>

			<h2>Binding to mouse and touch events</h2>
			<p>One important consideration in mobile is handling mouse and touch events. These events differ significantly across mobile platforms, but the common denominator is that click events will work everywhere, but usually after a significant delay of 500-700ms. This delay is necessary for the browser to wait for double tap, scroll and extended hold tap events to potentially occur. To avoid this delay, it's possible to bind to touch events (ex. touchstart) but the issue with this approach is that some mobile platforms (WP7, Blackberry) don't support touch. To compound this issue, some platforms will emit <em>both</em> touch and mouse events so if you bind to both types, duplicate events will be fired for a single interaction.</p>
			<p>Our solution is to create a set of <a href="../api/events.html">virtual events</a> that normalize mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. This still retains the order of event firing in the traditional mouse environment, should multiple handlers be registered on the same element for different events. The virtual mouse system exposes the following virtual events to jQuery bind methods: <code>vmouseover</code>, <code>vmousedown</code>, <code>vmousemove</code>, <code>vmouseup</code>, <code>vclick</code>, and <code>vmousecancel</code></p>


			<h2>Passing parameters between pages</h2>
			<p>jQuery Mobile does not support query parameter passing to internal/embedded pages. For example, if the framework sees a link to "#somePage?someId=1" it  interpret that as "#somePage" and navigate to the internal page div with an ID of <code>somePage</code> and apply a data-url of <code>#somePage?someId=1</code> to that page container. Subsequent calls to other params such as "#somePage?someId=2" will find the same div because jQuery Mobile refers to the data-url on the div which is only set once and will remain at <code>#somePage?someId=1</code>.</p>

			<p>There are two plugins that you can add to your project if query parameters are needed between pages. There is a lightweight <a href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="external">page params plugin</a> and a more fully featured <a href="https://github.com/azicchetti/jquerymobile-router" rel="external">jQuery Mobile router plugin</a> for use with backbone.js or spine.js.</p>



				</div><!--/content-primary -->

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li data-theme="a"><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-template.html
<!DOCTYPE html> 
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Single page template</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 

<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Single page</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>		
		<p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
		<p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>
	</div><!-- /content -->
	
	<div data-role="footer">
		<h4>Footer content</h4>
	</div><!-- /footer -->
	
</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-titles.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Page titles</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Page titles</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
			<div class="content-primary">	
					
		<h2>Titles in Ajax navigation</h2>
		
		<p>When you load the first page of a jQuery Mobile based site, then click a link or submit a form, Ajax is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you’re viewing.</p>
		<p>To remedy this, jQuery Mobile automatically parses the <code>title</code> of the page pulled via Ajax and changes the <code>title</code> attribute of the parent document to match.</p>		
		
		<h2>Titles in multi-page templates</h2>
		
		<p>On multi-page documents, we follow a similiar convention, but since all the pages share a common <code>title</code>, we have a <code>data-title</code> attribute that can be added to each page container within a multi-page template to manually define a title. The title of the HTML document will be automatically updated to match the <code>data-title</code> of the page currently in view.</p>
		
<pre><code>
&lt;div data-role=&quot;page&quot; id=&quot;foo&quot; <strong>data-title=&quot;Page Foo&quot;</strong>&gt;

&lt;/div&gt;&lt;!-- /page --&gt;
</code></pre>


				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li data-theme="a"><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-transitions-dialog.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Framework - Dialog</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" id="dialog-success" data-dom-cache="true"><!-- dialog-->

		<div data-role="header" data-theme="e">
			<h1>Dialog</h1>
		</div><!-- /header -->

		<div data-role="content" data-theme="e">
			<p>That was an animated page transition effect to a dialog that we added with a <code>data-transition</code> attribute on the link.</p>
			<p>Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.</p>
			
			<a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">Take me back</a>   
		</div>
	</div>
	
	<div data-role="page" id="page-success"><!-- dialog-->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-transitions-flash-workaround.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Transitions</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

    <style type="text/css" media="screen">
        .ui-page { -webkit-backface-visibility: hidden; }
    </style>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Transitions</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		<h2>Page transitions with workaround</h2>

		<p>The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>

			<style>
				table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
				th { text-align:left; }
				th h3 { margin:.6em 0; }
				th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; }
				td .ui-btn { margin:.4em 0 .5em 0; }
				td .ui-btn-inner { padding: .4em 15px; }
			</style>

		<table margin="0">
			<tr>
				<th><h3>fade</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>pop</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>flip</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>turn</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>flow</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>slidefade</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>slide</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>slideup</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>slidedown</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>none</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="none" data-inline="true">page</a></td>
			</tr>
		</table>

				</div><!--/content-primary -->

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">
								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li data-theme="a"><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="loader.html">Page loading widget</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="popup/index.html">Popups</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->


			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-transitions-page.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Framework - Page</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	
	
	<div data-role="page" id="page-success" data-dom-cache="true"><!-- page-->
		<div data-role="header" data-theme="a">
			<h1>Page</h1>
		</div><!-- /header -->

		<div data-role="content" data-theme="d">
			<p>That was an animated page transition effect to a page that we added with a <code>data-transition</code> attribute on the link. This uses a different background theme swatch to see how that looks with the transitions.</p>
			<p>Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.</p>
				
			<form action="#" method="get">
				<h2>Here's a few form elements</h2>

				<p>These are here to see if this slows down rendering.</p>

				<div data-role="fieldcontain">
		         <label for="name">Text Input:</label>
		         <input type="text" name="name" id="name" value=""  />
				</div>

				<div data-role="fieldcontain">
				<label for="textarea">Textarea:</label>
				<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
				</div>

				<div data-role="fieldcontain">
					<label for="slider2">Flip switch:</label>
					<select name="slider2" id="slider2" data-role="slider">
						<option value="off">Off</option>
						<option value="on">On</option>
					</select>
				</div>

				<div data-role="fieldcontain">
					<label for="slider">Slider:</label>
				 	<input type="range" name="slider" id="slider" value="0" min="0" max="100" data-highlight="true" />
				</div>
						
			</form>
			
			<a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back" data-inline="true">Take me back</a>   
		</div>
		
		<div data-role="footer" data-theme="d">
			<div style="margin:5px 10px;"><!-- To add a bit of spacing -->
			<label for="search" class="ui-hidden-accessible">Search:</label>
	        <input type="search" name="password" id="search" placeholder="Search..." value="" />
			</div>
		</div><!-- /footer -->
	</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\page-transitions.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Transitions</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Transitions</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
		<h2>Page transitions</h2> 

		<p>The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>

			<style>
				table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
				th { text-align:left; }
				th h3 { margin:.6em 0; }
				th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; }
				td .ui-btn { margin:.4em 0 .5em 0; }
				td .ui-btn-inner { padding: .4em 15px; }
			</style>

		<table margin="0">
			<tr>
				<th><h3>fade</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>pop</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>flip</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>turn</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>flow</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>slidefade</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>slide</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>slideup</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>slidedown</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
			</tr>
			<tr>
				<th><h3>none</h3></th>
				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
				<td><a href="page-transitions-page.html" data-role="button" data-transition="none" data-inline="true">page</a></td>
			</tr>
		</table>
        <div class="ui-body ui-body-e">
            <p><strong>Important:</strong> Some platforms currently have issues with transitions.
                We are working on a solution to solve the problem for everyone.
                If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround.
                Please note that this workaround should be throughly tested on the target platform before deployment.
                This workaround is known to cause performance issues, and browser crashes on some platforms especially Android.
                Add the following code to your custom css.
            </p>
            <code>
                .ui-page { -webkit-backface-visibility: hidden; }
            </code>
            <p>
                <a rel="external" href="page-transitions-flash-workaround.html">This page</a> has the implemented workaround. <strong>Please test throughly.</strong>
            </p>

        </div>
<p><strong>Only seeing fade transitions?</strong> To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).</p>

<p><strong>Transitions were originally inspired by <a href="http://www.jqtouch.com/">jQtouch</a></strong> They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.</p>

	<h2>Setting a transition on a link or form submit</h2>
	<p>By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>

<code><code>
&lt;a href=&quot;index.html&quot; <strong>data-transition=&quot;pop&quot;</strong>&gt;I'll pop&lt;/a&gt;
</code></code>
		
		<p>When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the <code>data-direction="reverse"</code> attribute to a link.</p>
				
		<h2>Global configuration of transitions</h2>
		
		<p>Set the <code>defaultPageTransition</code> <a href="../api/globalconfig.html">global option</a> if you'd prefer a different default transition. Dialogs have a different option called <code>defaultDialogTransition</code> that can also be configured.</p>
	

		<h2>Browser support and performance</h2>
		<p>All transitions are built with CSS keyframe animations and include both <code>-webkit</code> vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and <code>-moz</code> rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.</p>
		
		<h2>Defining fallback transitions for non-3D support</h2>
		<p>By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.</p>
		
		<p>The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":</p>
		<code>$.mobile.transitionFallbacks.slideout = "none"</code>
		
		<h2>Setting a max scroll for transitions</h2>
		<p>By default, transitions are disabled (set to "none") when you’re either coming FROM or going TO a page where the scroll position is 3x the height of the device’s screen.
		This feature was added because of the slow response times and the possibility of browser crashing when clicking on a list item (or any navigation element) far down a long page which leads to the
		browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance.
		This scroll position breakpoint is configurable via the new <code>getMaxScrollForTransition</code> function.</p>

		<h2>Setting a max width for transitions</h2>
		<p>By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option <code>$.mobile.maxTransitionWidth</code>, which defaults to <code>false</code>. The option accepts any number representing a pixel width or <code>false</code> value. If it's not <code>false</code>, the handler will use a "none" transition when the window width is wider than the specified value.</p>

		

	

		<h2>Creating custom transitions</h2>

		<p>jQuery Mobile allows for the addition of <a href="page-customtransitions.html">custom transitions</a> to the <code>$.mobile.transitionHandlers</code> dictionary so you can expand the selection of transitions on your site or app. 

			

		

				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">
								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li data-theme="a"><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->


			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Pages</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Theming pages</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="pages-themes.html" data-role="button" data-transition="fade" class="ui-btn-active">Theme Overview</a></li>				
				
				<li><a href="pages-themes/theme-a.html" data-role="button" data-transition="fade">A&nbsp;</a></li>
				<li><a href="pages-themes/theme-b.html" data-role="button" data-transition="fade">B&nbsp;</a></li>
				<li><a href="pages-themes/theme-c.html" data-role="button" data-transition="fade">C&nbsp;</a></li>
				<li><a href="pages-themes/theme-d.html" data-role="button" data-transition="fade">D&nbsp;</a></li>
				<li><a href="pages-themes/theme-e.html" data-role="button" data-transition="fade">E&nbsp;</a></li>
			</ul>
			
			<h2>Page Theming</h2>
			
			<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p>
			
			<p>The <code> data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the <code>data-theme</code> attribute could be added to the content container, we recommend adding it instead to <code>div</code> or container that has been assigned the <code> data-role="page"</code> attribute to ensure that the background color is applied to the full page. When this is done, all widgets on the page will also inherit the theme specified in the page container. However, headers and footers will default to theme "a". If you want to have a page with, for example, only theme "b" for all its elements, including its header and footer, you will need to specify <code>data-theme="b"</code> to the page <code>div</code> as well as the header and footer <code>divs</code>. </p>
			
			<p>The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:</p>
			
			<div data-role="header">
				<h1>Default Theme</h1>
			</div>

			<div class="ui-body ui-body-c">
				<h3>Default Theme Content Header</h3>
				<p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
				
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>

			<p>And each of the five "swatches" applies its style consistently across all page elements, as shown below:</p>
						
			<h2>Swatch A</h2>
			<div data-role="header">
				<h1>Header A</h1>
			</div>
			
			
			<div class="ui-body ui-body-a">
				<h3>Header</h3>
				<p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>


			<h2>Swatch B</h2>
			<div data-role="header" data-theme="b">
				<h1>Header B</h1>
			</div>
			<div class="ui-body ui-body-b">
				<h3>Header</h3>
				<p>This is content color swatch "B" and a preview of a <a href="#" class="ui-link">link</a>.</p>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			
			<h2>Swatch C</h2>
			<div data-role="header" data-theme="c">
				<h1>Header C</h1>
			</div>
			<div class="ui-body ui-body-c">
				<h3>Header</h3>
				<p>This is content color swatch "C" and a preview of a <a href="#" class="ui-link">link</a>.</p>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>

			<h2>Swatch D</h2>
			<div data-role="header" data-theme="d">
				<h1>Header D</h1>
			</div>
			<div class="ui-body ui-body-d">
				<h3>Header</h3>
				<p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			
			<h2>Swatch E</h2>
			<div data-role="header" data-theme="e">
				<h1>Header E</h1>
			</div>
			<div class="ui-body ui-body-e">
				<h3>Header</h3>
				<p>This is content color swatch "E" and a preview of a <a href="#" class="ui-link">link</a>.</p>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li data-theme="a"><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\phonegap.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Phonegap</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head>
<body>

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>PhoneGap apps</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">


			<h2>Building PhoneGap apps with jQuery Mobile</h2>

			<p><a href="http://phonegap.com/" rel="external">PhoneGap</a> is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser, referred to hereafter as a webview). Since PhoneGap is frequently used in conjunction with jQuery Mobile, we wanted to offer a few tips and recommendations to help you get started. </p>

			<p>The initial application document is loaded by the PhoneGap application by a local file:// URL. This means that if you want to pull in pages from your company's remote server (phone home) you will have to refer to them with absolute URLs to your server. Because your document originates from a file:// URL, loading pages or assets from your remote server is considered a cross-domain request that can be blocked in certain scenarios. </p>

			<p>Your ability to access cross-domain pages from within a Phone Gap jQuery Mobile application is controlled by two key things: <code>$.support.cors</code> and <code>$.mobile.allowCrossDomainPages</code>, and can also be influenced by the white list feature in later builds of PhoneGap.</p>

			<h2>$.support.cors</h2>

			<p>In jQuery core, there is a <a href="http://api.jquery.com/jQuery.support/" rel="external">$.support.cors</a> boolean that indicates whether or not jQuery thinks the browser supports the W3C "<a hre="http://www.w3.org/TR/cors/" rel="external">Cross-Origin Resource Sharing</a>" feature to support cross-domain requests.</p>

			<p>Since jQuery Mobile relies on jQuery core's $.ajax() functionality, <code>$.support.cors</code> must be set to <code>true</code> to tell <code>$.ajax</code> to load cross-domain pages. We've heard reports that webviews on some platforms, like BlackBerry, support cross-domain loading, but that jQuery core incorrectly sets <code>$.support.cors</code> value to <code>false</code> which disables cross-domain $.ajax() requests and will cause the page or assets to fail to load. </p>

			<h2>$.mobile.buttonMarkup.hoverDelay</h2>

			<p>If you find that the button down/hover state (lists, buttons, links etc) feels sluggish the <code>$.mobile.buttonMarkup.hoverDelay</code> setting might be of use. It will decrease the time between the touch event and the application of the relevant class but will also result in a higher chance that the same class will be applied even when the user is scrolling (eg, over a long list of links).</p>

			<h2>$.mobile.allowCrossDomainPages</h2>

			<p>When jQuery Mobile attempts to load an external page, the request runs through <code>$.mobile.loadPage()</code>. This will only allow cross-domain requests if the <code>$.mobile.allowCrossDomainPages</code> configuration option is set to <code>true</code>. Because the jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for a cross-site scripting (XSS) attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of its choice. This is the main reason that the default setting for <code>$.mobile.allowCrossDomainPages</code> is set to <code>false</code>.</p>

			<p>So in PhoneGap apps that must "phone home" by loading assets off a remote server, both the <code>$.support.cors</code> AND <code>$.mobile.allowCrossDomainPages</code> must be set to <code>true</code>.  The  <code>$.mobile.allowCrossDomainPages</code> option must be set before any cross-domain request is made so we recommend wrapping this in a <code>mobileinit</code> handler:</p>

<pre><code>$( document ).bind( "mobileinit", function() {
    // Make your jQuery Mobile framework configuration changes here!

    $.mobile.allowCrossDomainPages = true;
});</code></pre>

			<h2>PhoneGap White Listing</h2>

			<p>PhoneGap 1.0 introduced the idea of white-listing servers that its internal webview is allowed to make cross-domain requests to. You can find info about it here on the <a href="http://wiki.phonegap.com/w/page/40796976/Install%20the%20latest%20%28trunk%29%20source%20of%20iOS%20PhoneGap">PhoneGap wiki</a>:</p>

			<p>However, not all platforms support this white-listing feature so check the PhoneGap documentation for details. Older versions of PhoneGap prior to 1.0 defaulted to allowing cross-domain requests to any server.</p>

			<h2>Still having issues?</h2>

			<p>Here are a few more tips that aren't specifically related to PhoneGap but are good to know:</p>

			<p><strong>We recommend disabling the <a href="../api/globalconfig.html">pushState feature</a> for installed apps </strong>because there are edge cases where this feature can cause unexpected navigation behavior and since URLs aren't visible in a webview, it's not worth keeping this active in these situations. </p>

			<p><strong>Android enforces a timeout when loading URLs in a webview</strong> which may be too short for your needs. You can change this timeout by editing a Java class generated by the Eclipse plugin for Android:</p>

			<code>super.setIntegerProperty("loadUrlTimeoutValue", 60000);</code>


			<h2>Building UIWebView apps with jQuery Mobile</h2>

			<p>It's important to note that when creating a custom, non-phonegap, <code>UIWebView</code> control in an iOS application you must use the <code>loadRequest</code> method in preference to <code>loadData</code> for back button support. The snippet below is an example of loading <code>default.html</code> in your view controller.</p>

<pre><code>- (void)viewDidLoad
{
    [super viewDidLoad];
    NSString *fullURL = [[NSBundle mainBundle] pathForResource:@"dialog" ofType:@"html"];
    NSURL *url = [NSURL fileURLWithPath:fullURL];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
    [webView loadRequest:requestObj];
}</code></pre>

      </div>
		<!--/content-primary -->

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">
								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li data-theme="a"><a href="phonegap.html">PhoneGap apps</a></li>
								<li><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\touchoverflow.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - touchOverflow</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>touchOverflow</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
			
			<div class="ui-body ui-body-e">		
					<h2>touchOverflowEnabled: Deprecated in 1.1.0</h2>

					<p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p>
			</div>
			
			<h2 id="ios5">touchOverflow: Improved page transitions and true fixed toolbars</h2>
			
			<p>Currently, both the page you're viewing and the one you're navigating to are sitting next to each other in the viewport, which lets us leverage native scrolling for the broadest possible device support. The downside to this approach is that since both pages share the same viewport, when a page transition starts, we must first scroll to the top of the document, then start animating to ensure that the pages are lined up vertically. If you hit the Back button, we need to scroll up, transition, then restore the previous scroll position. Since mobile browsers are pretty slow, these scroll movements can detract from the flow of the experience.</p>
			
			<p>The way to really improve this situation is to have both pages in separate containers, each with its own internal scroll bar. The means no more scrolling the document or needing to restore scroll positions for a smoother experience. It also has the benefit of making fixed toolbars very easy to implement by simply placing them outside the containers with internal scrolling.<p>
			
			<h2>How it works</h2>
			
			<p>To leverage iOS5&#8242;s support for a touch-targeted version of <code>overflow:auto</code> which allows for internal scrolling regions with the native momentum scrolling, we've added a feature called touchOverflow that leverages these new CSS capabilities to  enable us to bring both true &#8220;fixed&#8221; toolbars and super smooth transitions to iOS5, all by using web standards and very little additional code.</p>				
				
			<p>A feature called <code>touchOverflowEnabled</code> is designed to leverage the upcoming wave of browsers that support overflow scrolling in CSS. Note that this feature is off by default to give us more time to test and debug this for best performance but we hope to turn it on by default at a later point. Here's how to enable this <a href="../api/globalconfig.html">global option</a>:</p>
			
<pre><code>&lt;script&gt;
$(document).bind(&quot;mobileinit&quot;, function(){
<strong>  $.mobile.touchOverflowEnabled = true;
</strong>});
&lt;/script&gt;</code></pre>
			
			<p>When this feature is activated, the framework looks for browser support for both the <code>overflow:</code> and <code>-webkit-overflow-scrolling:touch</code> CSS properties. In browsers that support both, it switches to a dual page container model with native overflow: scrolling within each, which brings true fixed toolbars smooth transitions. Coupled with iOS&#8217;s already excellent hardware-accelerated transitions, it's now possible to build interfaces that are very close to native performance.</p>
			
			<p>To demo this feature, check out <a href="../config/touchOverflow.html">this page</a> in iOS5.</p>

			<h2>A few downsides</h2>
			
			<p>Nothing is perfect, especially a new feature, so there are a few downsides to keep in mind.  When activating this feature:</p>
				
			<ul>
				<li>Sometimes child elements like lists and forms wouldn't render when embedded in a page with <code>overflow:</code> in iOS5. This was a pretty random phenomenon but is not acceptable so we've added a <code>translate-z</code> CSS property which forces iOS to render the contents. The downside with this fix is that when a transform is applied, all elements are set to position:relative which can cause issues in your layout.</li>
				<li>The <code>-webkit-overflow-scrolling:touch</code> property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar. We hope Apple fixes this because it's a very useful feature.</li>
				<li>When <code>overflow:</code> and <code>-webkit-overflow-scrolling:touch</code> properties are set, iOS appears to ignore any overflow:hidden properties on the parent, which is the page in our case. So if you have an image or code block that is wider than the viewport, horizontal scrolling will be seen. </li>
				<li>When this feature is active, we are disabling user zoom by manipulating the meta viewport tag because both the toolbars and page content can easily be zoomed to an odd size and it's very difficult to zoom back out. Even though we believe in allowing users to zoom the page, alleviating the usability concerns we have with fixed toolbars and overflow containers is more important.</li>
				<li>Scroll position can be lost when going back to a page that has been re-loaded. If DOM caching is on, this shouldn't be as much of an issue.</li>
				<li>This is still an experimental feature, so not all the kinks have been worked out yet. Use with caution and test thoroughly.</li>
			</ul>	
			
			
			
			<h2>Don&#8217;t other mobile platforms already support overflow?</h2>
			<p>Yes, but there&#8217;s a catch. Both Android Honeycomb and the Blackberry PlayBook support <code>overflow:</code> properties, but we found in testing that their implementation of overflow wasn't smooth enough, so pages would stutter and hang during scrolling, leading to an unusable experience. We're working with device makers to ensure that they are included when performance improves.</p>
			<p>More importantly, targeting overflow correctly is a major issue. If we simply placed an <code>overflow: auto</code> CSS rule on the pages, other popular mobile platforms like older versions of Android and iOS would essentially just clip off the content and make it effectively inaccessible (yes, you can do a two-finger scroll gesture in iOS but nobody knows that). The smart thing about Apple&#8217;s implementation for iOS5 is that they added an additional CSS property <code>-webkit-overflow-scrolling:touch</code> that allows us to test for this touch scrolling property and, if supported, add in the <code>overflow</code> rules for just those browsers. This is the only safe way to target overflow without resorting to complex and unmaintainable user agent detection.</p>
			<p>We will be working with device and browser makers to encourage support for <em>both</em> these CSS-based properties because we strongly believe that this a critical piece needed to build rich mobile web apps. The project will add any vendor-prefixed additions to touch scrolling property if, for example, Opera, Firefox or Microsoft added this support. Once people see how much better page transitions and fixed toolbars are on iOS5, we&#8217;re hoping this will be supported quickly by other browsers. JS-based scroller scripts may still have a place in this new world as a polyfill for browsers that don&#8217;t yet support these new CSS capabilities but we see this as a brief, interim tool in the evolution of the mobile web.</p>
			
			
			
			<h2>Debugging touchOverflow</h2>
			<p>Generally touchOverflow is only enabled on devices that support touch-scrolling of overflow areas, not desktop browsers.  This can make it difficult to debug problems with the touchOverflow feature.  To enable touchOverflow on all browsers, use the following code:

<pre><code>&lt;script&gt;
$(document).bind(&quot;mobileinit&quot;, function() {
  <strong>$.support.touchOverflow = true;</strong>
  $.mobile.touchOverflowEnabled = true;
});
&lt;/script&gt;</code></pre>


		</div><!--/content-primary -->		

		<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li><a href="page-transitions.html">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="phonegap.html">PhoneGap apps</a></li>
								<li data-theme="a"><a href="touchoverflow.html">touchOverflow feature</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\transition-success.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Dialog Example</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page">

	<div data-role="header" data-theme="e">
		<h1>Ta-da!</h1>
	</div><!-- /header -->
	
	<div data-role="content" data-theme="e">
		<p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
		<p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
		<p>What do you think?</p>
		<a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">I like it</a>   
	</div>
</div>


</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\docs-links-urltest\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Test URL Example</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" data-url="docs/pages/docs-links-urltest/">
		<div data-role="header" data-theme="f">
			<h1>URL Test Page</h1>
		</div>
		<div data-role="content">
			<p>This is a regular page that updated the url with a different value than was requested.</p>
		</div>
	</div>


</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\animals.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animals</title>
<link rel="stylesheet"  href="../../../css/themes/default/">
<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>

<body>
<div data-role="page">
	<div data-role="header"><h1>Animals</h1></div>
	<div data-role="content">
		<p>All your favorites from aardvarks to zebras.</p>
		<ul data-role="listview" data-inset="true">
			<li>Pets</li>
			<li>Farm Animals</li>
			<li>Wild Animals</li>
		</ul>
	</div>
</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\colors.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Colors</title>
<link rel="stylesheet"  href="../../../css/themes/default/">
<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>

<body>
<div data-role="page">
	<div data-role="header"><h1>Colors</h1></div>
	<div data-role="content">
		<p>Fresh colors from the magic rainbow.</p>
		<ul data-role="listview" data-inset="true">
			<li>Blue</li>
			<li>Green</li>
			<li>Orange</li>
			<li>Purple</li>
			<li>Red</li>
			<li>Yellow</li>
			<li>Violet</li>
		</ul>
	</div>
</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dynamic Page Samples</title>
<link rel="stylesheet"  href="../../../css/themes/default/">
<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>

<body>
<div data-role="page">
  <div data-role="header"><h1>Categories</h1></div>
  <div data-role="content">
  	<h2>Select a Category Below:</h2>
  	<ul data-role="listview" data-inset="true">
    	<li><a href="sample-reuse-page.html" rel="external">Re-using a Page with In-Memory Data</a></li>
    	<li><a href="sample-reuse-page-external.html" rel="external">Re-using a Page With External Data</a></li>
    </ul>
  </div>
</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\sample-reuse-page-external.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>changePage JSON Sample</title>
<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css">
<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

<script type="text/javascript">

// Load the JSON data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( url, options )
{
	$.getJSON( url, function( category ) {
		if ( category ) {
			// Get the page we are going to dump our content into.
			var $page = $( "#category-items" ),
	
				// Get the header for the page.
				$header = $page.children( ":jqmData(role=header)" ),
	
				// Get the content area element for the page.
				$content = $page.children( ":jqmData(role=content)" ),
	
				// The markup we are going to inject into the content
				// area of the page.
				markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
	
				// The array of items for this category.
				cItems = category.items,
	
				// The number of items in the category.
				numItems = cItems.length;
	
			// Generate a list item for each item in the category
			// and add it to our markup.
			for ( var i = 0; i < numItems; i++ ) {
				markup += "<li>" + cItems[i].name + "</li>";
			}
			markup += "</ul>";
	
			// Find the h1 element in our header and inject the name of
			// the category into it.
			$header.find( "h1" ).html( category.name );
	
			// Inject the category items markup into the content element.
			$content.html( markup );
	
			// Pages are lazily enhanced. We call page() on the page
			// element to make sure it is always enhanced before we
			// attempt to enhance the listview markup we just injected.
			// Subsequent calls to page() are ignored since a page/widget
			// can only be enhanced once.
			$page.page();
	
			// Enhance the listview we just injected.
			$content.find( ":jqmData(role=listview)" ).listview();
	
			// We don't want the data-url of the page we just modified
			// to be the url that shows up in the browser's location field,
			// so set the dataUrl option to the URL for the category
			// we just loaded.
			options.dataUrl = url;
	
			// Now call changePage() and tell it to switch to
			// the page we just modified.
			$.mobile.changePage( $page, options );
		}
	});
}

 
// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {
		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage );
		if ( u.pathname.search("category.php") !== -1 ) {
			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u.href, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});

</script>
</head>

<body>
<div data-role="page">
  <div data-role="header"><h1>Categories</h1></div>
  <div data-role="content">
  	<h2>Select a Category Below:</h2>
  	<ul data-role="listview" data-inset="true">
    	<li><a href="category.php?id=animals">Animals</a></li>
    	<li><a href="category.php?id=colors">Colors</a></li>
    	<li><a href="category.php?id=vehicles">Vehicles</a></li>
    </ul>
  </div>
</div>
<div id="category-items" data-role="page" data-add-back-btn="true">
  <div data-role="header"><h1></h1></div>
  <div data-role="content"></div>
</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\sample-reuse-page.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>changePage JSON Sample</title>
<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />
<script src="../../../js/jquery.js"></script>
<script src="../../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../../js/jquery.mobile-1.1.1.js"></script>
<script>

// Some sample categorized data. This data is in-memory
// for demonstration purposes, but could be loaded dynamically
// via ajax.
var categoryData = {
	animals: {
		name: "Animals",
		description: "All your favorites from aardvarks to zebras.",
		items: [
			{
				name: "Pets"
			},
			{
				name: "Farm Animals"
			},
			{
				name: "Wild Animals"
			}
		]
	},
	colors: {
		name: "Colors",
		description: "Fresh colors from the magic rainbow.",
		items: [
			{
				name: "Blue"
			},
			{
				name: "Green"
			},
			{
				name: "Orange"
			},
			{
				name: "Purple"
			},
			{
				name: "Red"
			},
			{
				name: "Yellow"
			},
			{
				name: "Violet"
			}
		]
	},
	vehicles: {
		name: "Vehicles",
		description: "Everything from cars to planes.",
		items: [
			{
				name: "Cars"
			},
			{
				name: "Planes"
			},
			{
				name: "Construction"
			}
		]
	}
};

// Load the data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( urlObj, options )
{
	var categoryName = urlObj.hash.replace( /.*category=/, "" ),

		// Get the object that represents the category we
		// are interested in. Note, that at this point we could
		// instead fire off an ajax request to fetch the data, but
		// for the purposes of this sample, it's already in memory.
		category = categoryData[ categoryName ],

		// The pages we use to display our content are already in
		// the DOM. The id of the page we are going to write our
		// content into is specified in the hash before the '?'.
		pageSelector = urlObj.hash.replace( /\?.*$/, "" );

	if ( category ) {
		// Get the page we are going to dump our content into.
		var $page = $( pageSelector ),

			// Get the header for the page.
			$header = $page.children( ":jqmData(role=header)" ),

			// Get the content area element for the page.
			$content = $page.children( ":jqmData(role=content)" ),

			// The markup we are going to inject into the content
			// area of the page.
			markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",

			// The array of items for this category.
			cItems = category.items,

			// The number of items in the category.
			numItems = cItems.length;

		// Generate a list item for each item in the category
		// and add it to our markup.
		for ( var i = 0; i < numItems; i++ ) {
			markup += "<li>" + cItems[i].name + "</li>";
		}
		markup += "</ul>";

		// Find the h1 element in our header and inject the name of
		// the category into it.
		$header.find( "h1" ).html( category.name );

		// Inject the category items markup into the content element.
		$content.html( markup );

		// Pages are lazily enhanced. We call page() on the page
		// element to make sure it is always enhanced before we
		// attempt to enhance the listview markup we just injected.
		// Subsequent calls to page() are ignored since a page/widget
		// can only be enhanced once.
		$page.page();

		// Enhance the listview we just injected.
		$content.find( ":jqmData(role=listview)" ).listview();

		// We don't want the data-url of the page we just modified
		// to be the url that shows up in the browser's location field,
		// so set the dataUrl option to the URL for the category
		// we just loaded.
		options.dataUrl = urlObj.href;

		// Now call changePage() and tell it to switch to
		// the page we just modified.
		$.mobile.changePage( $page, options );
	}
}


// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {
		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#category-item/;
		if ( u.hash.search(re) !== -1 ) {
			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});


</script>
</head>

<body>
<div id="home" data-role="page">
  <div data-role="header"><h1>Categories</h1></div>
  <div data-role="content">
  	<h2>Select a Category Below:</h2>
  	<ul data-role="listview" data-inset="true">
    	<li><a href="#category-items?category=animals">Animals</a></li>
    	<li><a href="#category-items?category=colors">Colors</a></li>
    	<li><a href="#category-items?category=vehicles">Vehicles</a></li>
    </ul>
  </div>

</div>
<div id="category-items" data-role="page">
  <div data-role="header"><h1></h1></div>
  <div data-role="content"></div>
</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\dynamic-samples\vehicles.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vehicles</title>
<link rel="stylesheet"  href="../../../css/themes/default/">
<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head>

<body>
<div data-role="page">
	<div data-role="header"><h1>Vehicles</h1></div>
	<div data-role="content">
		<p>Everything from cars to planes.</p>
		<ul data-role="listview" data-inset="true">
			<li>Cars</li>
			<li>Planes</li>
			<li>Destruction</li>
		</ul>
	</div>
</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-a.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Pages</title> 
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior" data-theme="a">

		<div data-role="header">
		<h1>Theming pages</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>				
				
				<li><a href="theme-a.html" data-role="button" data-transition="fade" class="ui-btn-active">A&nbsp;</a></li>
				<li><a href="theme-b.html" data-role="button" data-transition="fade">B&nbsp;</a></li>
				<li><a href="theme-c.html" data-role="button" data-transition="fade">C&nbsp;</a></li>
				<li><a href="theme-d.html" data-role="button" data-transition="fade">D&nbsp;</a></li>
				<li><a href="theme-e.html" data-role="button" data-transition="fade">E&nbsp;</a></li>
			</ul>
			
			<h2>Theme A Sample Page</h2>
	
			<p>This is an example of <code>data-theme="a"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
	
			<div data-role="fieldcontain">
	         <label for="name-a">Text Input:</label>
	         <input type="text" name="name" id="name-a" value=""  />
			</div>

			<div data-role="fieldcontain">
				<label for="switch-a">Flip switch:</label>
				<select name="switch-a" id="switch-a" data-role="slider">
					<option value="off">Off</option>
					<option value="on">On</option>
				</select> 
			</div>

			<div data-role="fieldcontain">
				<label for="slider-a">Slider:</label>
			 	<input type="range" name="slider" id="slider-a" value="0" min="0" max="100"  />
			</div>

			<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-type="horizontal">
		    	<legend>Font styling:</legend>
		    	<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
				<label for="checkbox-6a">b</label>

				<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
				<label for="checkbox-7a"><em>i</em></label>

				<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
				<label for="checkbox-8a">u</label>    
		    </fieldset>
			</div>

			<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup">
			    	<legend>Choose a pet:</legend>
			         	<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
			         	<label for="radio-choice-1a">Cat</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2"  />
			         	<label for="radio-choice-2a">Dog</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3"  />
			         	<label for="radio-choice-3a">Hamster</label>

			         	<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4"  />
			         	<label for="radio-choice-4a">Lizard</label>
			    </fieldset>
			</div>

			<div data-role="fieldcontain">
				<label for="select-choice-a" class="select">Choose shipping method:</label>
				<select name="select-choice-a" id="select-choice-a">
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</div>
			
			<h2>Collapsible Sets</h2>		
			<div data-role="collapsible-set">
				<div data-role="collapsible" data-collapsed="false">
					<h3>Section 1</h3>
					<p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
				</div>
				<div data-role="collapsible">
					<h3>Section 2</h3>
					<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

				</div>
				<div data-role="collapsible">
					<h3>Section 3</h3>
					<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

				</div>
			</div>
			
			<h2>Inset List</h2>
			<ul data-role="listview" data-inset="true">
				<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
				<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
				<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
				<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
				<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
			</ul>
			
				</div><!--/content-primary -->		

				<div class="content-secondary">
					<div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="a" data-dividertheme="a">
							<li data-role="list-divider">Pages &amp; Dialogs</li>
							<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
							<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
							<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
							<li><a href="../page-titles.html">Page titles</a></li>
							<li><a href="../page-links.html">Linking pages</a></li>
							<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
							<li><a href="../page-dialogs.html">Dialogs</a></li>
							<li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
							<li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
							<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
							<li><a href="../page-scripting.html">Scripting pages</a></li>
							<li data-theme="b"><a href="../pages-themes.html">Theming pages</a></li>
						</ul>
					</div>
				</div>	


			</div><!-- /content -->

			<div data-role="footer" class="footer-docs">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-b.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Pages</title> 
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior" data-theme="b">

		<div data-role="header" data-theme="b">
		<h1>Theming pages</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
						
				<li><a href="theme-a.html" data-role="button" data-transition="fade">A&nbsp;</a></li>
				<li><a href="theme-b.html" data-role="button" data-transition="fade" class="ui-btn-active">B&nbsp;</a></li>
				<li><a href="theme-c.html" data-role="button" data-transition="fade">C&nbsp;</a></li>
				<li><a href="theme-d.html" data-role="button" data-transition="fade">D&nbsp;</a></li>
				<li><a href="theme-e.html" data-role="button" data-transition="fade">E&nbsp;</a></li>
			</ul>
			
			<h2>Theme B Sample Page</h2>

			<p>This is an example of <code>data-theme="b"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
			
					<div data-role="fieldcontain">
			         <label for="name-a">Text Input:</label>
			         <input type="text" name="name" id="name-a" value=""  />
					</div>

					<div data-role="fieldcontain">
						<label for="switch-a">Flip switch:</label>
						<select name="switch-a" id="switch-a" data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select> 
					</div>

					<div data-role="fieldcontain">
						<label for="slider-a">Slider:</label>
					 	<input type="range" name="slider" id="slider-a" value="0" min="0" max="100"  />
					</div>

					<div data-role="fieldcontain">
					<fieldset data-role="controlgroup" data-type="horizontal">
				    	<legend>Font styling:</legend>
				    	<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
						<label for="checkbox-6a">b</label>

						<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
						<label for="checkbox-7a"><em>i</em></label>

						<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
						<label for="checkbox-8a">u</label>    
				    </fieldset>
					</div>

					<div data-role="fieldcontain">
					    <fieldset data-role="controlgroup">
					    	<legend>Choose a pet:</legend>
					         	<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
					         	<label for="radio-choice-1a">Cat</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2"  />
					         	<label for="radio-choice-2a">Dog</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3"  />
					         	<label for="radio-choice-3a">Hamster</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4"  />
					         	<label for="radio-choice-4a">Lizard</label>
					    </fieldset>
					</div>

					<div data-role="fieldcontain">
						<label for="select-choice-a" class="select">Choose shipping method:</label>
						<select name="select-choice-a" id="select-choice-a">
							<option value="standard">Standard: 7 day</option>
							<option value="rush">Rush: 3 days</option>
							<option value="express">Express: next day</option>
							<option value="overnight">Overnight</option>
						</select>
					</div>

					<h2>Collapsible Sets</h2>		
					<div data-role="collapsible-set">
						<div data-role="collapsible" data-collapsed="false">
							<h3>Section 1</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
						</div>
						<div data-role="collapsible">
							<h3>Section 2</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

						</div>
						<div data-role="collapsible">
							<h3>Section 3</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

						</div>
					</div>

					<h2>Inset List</h2>
					<ul data-role="listview" data-inset="true">
						<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
						<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
						<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
						<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
						<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
					</ul>
					
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="b">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="b" data-dividertheme="b">
							<li data-role="list-divider">Pages &amp; Dialogs</li>
							<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
							<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
							<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
							<li><a href="../page-titles.html">Page titles</a></li>
							<li><a href="../page-links.html">Linking pages</a></li>
							<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
							<li><a href="../page-dialogs.html">Dialogs</a></li>
							<li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
							<li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
							<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
							<li><a href="../page-scripting.html">Scripting pages</a></li>
							<li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
						</ul>
					</div>
				</div>

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="b">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-c.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Pages</title> 
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior" data-theme="c">

		<div data-role="header" data-theme="c">
		<h1>Theming pages</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>				
				
				<li><a href="theme-a.html" data-role="button" data-transition="fade">A&nbsp;</a></li>
				<li><a href="theme-b.html" data-role="button" data-transition="fade">B&nbsp;</a></li>
				<li><a href="theme-c.html" data-role="button" data-transition="fade" class="ui-btn-active">C&nbsp;</a></li>
				<li><a href="theme-d.html" data-role="button" data-transition="fade">D&nbsp;</a></li>
				<li><a href="theme-e.html" data-role="button" data-transition="fade">E&nbsp;</a></li>
			</ul>
			
			<h2>Theme C Sample Page</h2>
			
			<p>This is an example of <code>data-theme="c"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>

					<div data-role="fieldcontain">
			         <label for="name-a">Text Input:</label>
			         <input type="text" name="name" id="name-a" value=""  />
					</div>

					<div data-role="fieldcontain">
						<label for="switch-a">Flip switch:</label>
						<select name="switch-a" id="switch-a" data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select> 
					</div>

					<div data-role="fieldcontain">
						<label for="slider-a">Slider:</label>
					 	<input type="range" name="slider" id="slider-a" value="0" min="0" max="100"  />
					</div>

					<div data-role="fieldcontain">
					<fieldset data-role="controlgroup" data-type="horizontal">
				    	<legend>Font styling:</legend>
				    	<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
						<label for="checkbox-6a">b</label>

						<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
						<label for="checkbox-7a"><em>i</em></label>

						<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
						<label for="checkbox-8a">u</label>    
				    </fieldset>
					</div>

					<div data-role="fieldcontain">
					    <fieldset data-role="controlgroup">
					    	<legend>Choose a pet:</legend>
					         	<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
					         	<label for="radio-choice-1a">Cat</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2"  />
					         	<label for="radio-choice-2a">Dog</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3"  />
					         	<label for="radio-choice-3a">Hamster</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4"  />
					         	<label for="radio-choice-4a">Lizard</label>
					    </fieldset>
					</div>

					<div data-role="fieldcontain">
						<label for="select-choice-a" class="select">Choose shipping method:</label>
						<select name="select-choice-a" id="select-choice-a">
							<option value="standard">Standard: 7 day</option>
							<option value="rush">Rush: 3 days</option>
							<option value="express">Express: next day</option>
							<option value="overnight">Overnight</option>
						</select>
					</div>

					<h2>Collapsible Sets</h2>		
					<div data-role="collapsible-set">
						<div data-role="collapsible" data-collapsed="false">
							<h3>Section 1</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
						</div>
						<div data-role="collapsible">
							<h3>Section 2</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

						</div>
						<div data-role="collapsible">
							<h3>Section 3</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

						</div>
					</div>

					<h2>Inset List</h2>
					<ul data-role="listview" data-inset="true">
						<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
						<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
						<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
						<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
						<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
					</ul>
					
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="c">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="c">
							<li data-role="list-divider">Pages &amp; Dialogs</li>
							<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
							<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
							<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
							<li><a href="../page-titles.html">Page titles</a></li>
							<li><a href="../page-links.html">Linking pages</a></li>
							<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
							<li><a href="../page-dialogs.html">Dialogs</a></li>
							<li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
							<li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
							<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
							<li><a href="../page-scripting.html">Scripting pages</a></li>
							<li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
						</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-d.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Pages</title> 
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior" data-theme="d">

		<div data-role="header" data-theme="d">
		<h1>Theming pages</h1>
		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>				
				
				<li><a href="theme-a.html" data-role="button" data-transition="fade">A&nbsp;</a></li>
				<li><a href="theme-b.html" data-role="button" data-transition="fade">B&nbsp;</a></li>
				<li><a href="theme-c.html" data-role="button" data-transition="fade">C&nbsp;</a></li>
				<li><a href="theme-d.html" data-role="button" data-transition="fade" class="ui-btn-active">D&nbsp;</a></li>
				<li><a href="theme-e.html" data-role="button" data-transition="fade">E&nbsp;</a></li>
			</ul>
			
			<h2>Theme D Sample Page</h2>

			<p>This is an example of <code>data-theme="d"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
			
					<div data-role="fieldcontain">
			         <label for="name-a">Text Input:</label>
			         <input type="text" name="name" id="name-a" value=""  />
					</div>

					<div data-role="fieldcontain">
						<label for="switch-a">Flip switch:</label>
						<select name="switch-a" id="switch-a" data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select> 
					</div>

					<div data-role="fieldcontain">
						<label for="slider-a">Slider:</label>
					 	<input type="range" name="slider" id="slider-a" value="0" min="0" max="100"  />
					</div>

					<div data-role="fieldcontain">
					<fieldset data-role="controlgroup" data-type="horizontal">
				    	<legend>Font styling:</legend>
				    	<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
						<label for="checkbox-6a">b</label>

						<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
						<label for="checkbox-7a"><em>i</em></label>

						<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
						<label for="checkbox-8a">u</label>    
				    </fieldset>
					</div>

					<div data-role="fieldcontain">
					    <fieldset data-role="controlgroup">
					    	<legend>Choose a pet:</legend>
					         	<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
					         	<label for="radio-choice-1a">Cat</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2"  />
					         	<label for="radio-choice-2a">Dog</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3"  />
					         	<label for="radio-choice-3a">Hamster</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4"  />
					         	<label for="radio-choice-4a">Lizard</label>
					    </fieldset>
					</div>

					<div data-role="fieldcontain">
						<label for="select-choice-a" class="select">Choose shipping method:</label>
						<select name="select-choice-a" id="select-choice-a">
							<option value="standard">Standard: 7 day</option>
							<option value="rush">Rush: 3 days</option>
							<option value="express">Express: next day</option>
							<option value="overnight">Overnight</option>
						</select>
					</div>

					<h2>Collapsible Sets</h2>		
					<div data-role="collapsible-set">
						<div data-role="collapsible" data-collapsed="false">
							<h3>Section 1</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
						</div>
						<div data-role="collapsible">
							<h3>Section 2</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

						</div>
						<div data-role="collapsible">
							<h3>Section 3</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

						</div>
					</div>

					<h2>Inset List</h2>
					<ul data-role="listview" data-inset="true">
						<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
						<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
						<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
						<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
						<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
					</ul>
			
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">
							<li data-role="list-divider">Pages &amp; Dialogs</li>
							<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
							<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
							<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
							<li><a href="../page-titles.html">Page titles</a></li>
							<li><a href="../page-links.html">Linking pages</a></li>
							<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
							<li><a href="../page-dialogs.html">Dialogs</a></li>
							<li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
							<li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
							<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
							<li><a href="../page-scripting.html">Scripting pages</a></li>
							<li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
						</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="d">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\pages\pages-themes\theme-e.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Pages</title> 
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
	<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior" data-theme="e">

		<div data-role="header" data-theme="e">
			<h1>Theming pages</h1>
			<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
		</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
			
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>				
				
				<li><a href="theme-a.html" data-role="button" data-transition="fade">A&nbsp;</a></li>
				<li><a href="theme-b.html" data-role="button" data-transition="fade">B&nbsp;</a></li>
				<li><a href="theme-c.html" data-role="button" data-transition="fade">C&nbsp;</a></li>
				<li><a href="theme-d.html" data-role="button" data-transition="fade">D&nbsp;</a></li>
				<li><a href="theme-e.html" data-role="button" data-transition="fade" class="ui-btn-active">E&nbsp;</a></li>
			</ul>
			
			<h2>Theme E Sample Page</h2>
			
			<p>This is an example of <code>data-theme="e"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
						
					<div data-role="fieldcontain">
			         <label for="name-a">Text Input:</label>
			         <input type="text" name="name" id="name-a" value=""  />
					</div>

					<div data-role="fieldcontain">
						<label for="switch-a">Flip switch:</label>
						<select name="switch-a" id="switch-a" data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select> 
					</div>

					<div data-role="fieldcontain">
						<label for="slider-a">Slider:</label>
					 	<input type="range" name="slider" id="slider-a" value="0" min="0" max="100"  />
					</div>

					<div data-role="fieldcontain">
					<fieldset data-role="controlgroup" data-type="horizontal">
				    	<legend>Font styling:</legend>
				    	<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
						<label for="checkbox-6a">b</label>

						<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
						<label for="checkbox-7a"><em>i</em></label>

						<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
						<label for="checkbox-8a">u</label>    
				    </fieldset>
					</div>

					<div data-role="fieldcontain">
					    <fieldset data-role="controlgroup">
					    	<legend>Choose a pet:</legend>
					         	<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
					         	<label for="radio-choice-1a">Cat</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2"  />
					         	<label for="radio-choice-2a">Dog</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3"  />
					         	<label for="radio-choice-3a">Hamster</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4"  />
					         	<label for="radio-choice-4a">Lizard</label>
					    </fieldset>
					</div>

					<div data-role="fieldcontain">
						<label for="select-choice-a" class="select">Choose shipping method:</label>
						<select name="select-choice-a" id="select-choice-a">
							<option value="standard">Standard: 7 day</option>
							<option value="rush">Rush: 3 days</option>
							<option value="express">Express: next day</option>
							<option value="overnight">Overnight</option>
						</select>
					</div>

					<h2>Collapsible Sets</h2>		
					<div data-role="collapsible-set">
						<div data-role="collapsible" data-collapsed="false">
							<h3>Section 1</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
						</div>
						<div data-role="collapsible">
							<h3>Section 2</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

						</div>
						<div data-role="collapsible">
							<h3>Section 3</h3>
							<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

						</div>
					</div>

					<h2>Inset List</h2>
					<ul data-role="listview" data-inset="true">
						<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
						<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
						<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
						<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
						<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
					</ul>
			
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="e">

						<h3>More in this section</h3>

							<ul data-role="listview" data-theme="e" data-dividertheme="e">
								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="../../page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="../../page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="../../multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="../../page-titles.html">Page titles</a></li>
								<li><a href="../../page-links.html">Linking pages</a></li>
								<li><a href="../../page-transitions.html" data-ajax="false">Page transitions</a></li>
								<li><a href="../../page-dialogs.html">Dialogs</a></li>
								<li><a href="../../page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="../../page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="../../page-dynamic.html">Dynamically Injecting Pages</a></li>
								<li><a href="../../page-scripting.html">Scripting pages</a></li>
								<li data-theme="a"><a href="../../pages-themes.html">Theming pages</a></li>
							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="e">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-events.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-position="fixed" data-theme="f">

		<h1>Fixed toolbars</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
				<h2>Fixed toolbars</h2>
				
			    <ul data-role="controlgroup" data-type="horizontal" class="localnav">
			      <li><a href="bars-fixed.html" data-role="button" data-transition="fade">Basics</a></li>
			      <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade">Options</a></li>
			      <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade">Methods</a></li>
			      <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
			    </ul>
				
				<p>The fixedtoolbar plugin has the following custom events:</p>

				<dl>
				
					<dt><code>create</code> triggered when a fixed toolbar is created</dt>
					<dd>

						<pre><code>
$( ".selector" ).fixedtoolbar({
   create: function(event, ui) { ... }
});		
						</code></pre>
					</dd>
			

				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
					<h1>Fixed Footer</h1>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-a.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-position="fixed" data-theme="f">

		<div class="ui-grid-a">
			<form>
			<div class="ui-block-a" style="width:60%">
				<h1 style="font-size:19px; margin-left:12px;">2,146 Songs</h1>
			</div>
			<div class="ui-block-b" style="width:38%; padding:6px 5px 0 0;">
					<select name="select-mini" id="select-mini" data-mini="true">
						<option value="">Sort...</option>
						<option value="date" selected>Newest</option>
						<option value="name">Name</option>
						<option value="rating">Top Rated</option>
						<option value="track">Track #</option>
					</select>
			</div>
		</div><!-- /grid-b -->

		<div class="ui-bar-d">
				<div class="ui-grid-a">
					<div class="ui-block-a" style="width:78%">
						<label for="text-mini" class="ui-hidden-accessible">Search Input:</label>
				        <input type="search" name="name" id="search-mini" value="" data-mini="true" placeholder="Search songs..."  />
					</div>
					<div class="ui-block-b" style="width:22%">
						<button type="submit" data-mini="true" style="float:right" data-theme="d">Go</button>
					</div>
				</div><!-- /grid-a -->
		</div><!-- /search bar -->
		</form>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
			<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
			<li><a href="index.html">
				<img src="../lists/images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
				
			</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-ok.jpg" />
				<h3>Of The Blue Colour Of The Sky</h3>
				<p>Ok Go</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-ws.jpg" />
				<h3>Elephant</h3>
				<p>The White Stripes</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-rh.jpg" />
				<h3>Kid A</h3>
				<p>Radiohead</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-xx.jpg" />
				<h3>XX</h3>
				<p>XX</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-mg.jpg" />
				<h3>Congratulations</h3>
				<p>MGMT</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-ag.jpg" />
				<h3>Ashes Grammar</h3>
				<p>A Sunny Day in Glasgow</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			
			<li><a href="index.html">
				<img src="../lists/images/album-k.jpg" />
				<h3>Hot Fuss</h3>
				<p>Killers</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">	
				<img src="../lists/images/album-af.jpg" />
				<h3>The Suburbs</h3>
				<p>Arcade Fire</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
				
			</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-ok.jpg" />
				<h3>Of The Blue Colour Of The Sky</h3>
				<p>Ok Go</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-ws.jpg" />
				<h3>Elephant</h3>
				<p>The White Stripes</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-rh.jpg" />
				<h3>Kid A</h3>
				<p>Radiohead</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-xx.jpg" />
				<h3>XX</h3>
				<p>XX</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-mg.jpg" />
				<h3>Congratulations</h3>
				<p>MGMT</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-ag.jpg" />
				<h3>Ashes Grammar</h3>
				<p>A Sunny Day in Glasgow</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			
			<li><a href="index.html">
				<img src="../lists/images/album-k.jpg" />
				<h3>Hot Fuss</h3>
				<p>Killers</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">	
				<img src="../lists/images/album-af.jpg" />
				<h3>The Suburbs</h3>
				<p>Arcade Fire</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
				
			</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-ok.jpg" />
				<h3>Of The Blue Colour Of The Sky</h3>
				<p>Ok Go</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-ws.jpg" />
				<h3>Elephant</h3>
				<p>The White Stripes</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-rh.jpg" />
				<h3>Kid A</h3>
				<p>Radiohead</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-xx.jpg" />
				<h3>XX</h3>
				<p>XX</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-mg.jpg" />
				<h3>Congratulations</h3>
				<p>MGMT</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">
				<img src="../lists/images/album-ag.jpg" />
				<h3>Ashes Grammar</h3>
				<p>A Sunny Day in Glasgow</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			
			<li><a href="index.html">
				<img src="../lists/images/album-k.jpg" />
				<h3>Hot Fuss</h3>
				<p>Killers</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="index.html">	
				<img src="../lists/images/album-af.jpg" />
				<h3>The Suburbs</h3>
				<p>Arcade Fire</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
		</ul>

				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
				<form action="#" method="get">
					<div data-role="fieldcontain">
						<label for="slider-2" style="margin-left:15px;">Volume:</label>
					 	<input type="range" name="slider" id="slider-2" value="50" min="0" max="100" data-highlight="true" data-mini="true"  class="ui-hidden-accessible" />
					</div>
				</form>
				
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-b.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

			<div data-role="page" class="type-interior">

				<div data-role="header" data-position="fixed" data-theme="b">
					<form action="#" method="get">
						<label for="text-1" class="ui-hidden-accessible">Text Input:</label>
			        	<input type="text" name="text-1" id="text-1" value="" data-mini="true" data-theme="d" />
					</form>
				</div>
	
				<div data-role="content">
					<div class="content-primary">
					<h2>Forms in fixed toolbar demos</h2>
					<p>These pages are designed to test fixed toolbars and form elements: 
						<a href="bars-fixed-forms-a.html">demo app</a>,
						<a href="bars-fixed-forms-b.html">text inputs</a>, 
						<a href="bars-fixed-forms-c.html">search inputs</a>, 
						<a href="bars-fixed-forms-d.html">radio toggles</a>, 
						<a href="bars-fixed-forms-e.html">checkbox toggles</a>,
						<a href="bars-fixed-forms-f.html">slider</a>, 
						<a href="bars-fixed-forms-g.html">select</a>, and  
						<a href="bars-fixed-forms-h.html">buttons</a>.
					</p>
					
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>


					<h3>Embedded form</h3>

					<form action="#" method="get">

						<div data-role="fieldcontain">
				         <label for="name">Text Input:</label>
				         <input type="text" name="name" id="name" value=""  />
						</div>

						<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
						</div>

						<div data-role="fieldcontain">
							<label for="slider2">Flip switch:</label>
							<select name="slider2" id="slider2" data-role="slider">
								<option value="off">Off</option>
								<option value="on">On</option>
							</select>
						</div>

						<div data-role="fieldcontain">
							<label for="slider">Slider:</label>
						 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
						</div>


						<div data-role="fieldcontain">
							<label for="select-choice-1" class="select">Choose shipping method:</label>
							<select name="select-choice-1" id="select-choice-1">
								<option value="standard">Standard: 7 day</option>
								<option value="rush">Rush: 3 days</option>
								<option value="express">Express: next day</option>
								<option value="overnight">Overnight</option>
							</select>
						</div>


					<div class="ui-body ui-body-b">
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
				    </fieldset>
					</div>
				</form>

				<h3>A bit more text</h3>

				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
				<form action="#" method="get">
					<label for="text-2" class="ui-hidden-accessible">Text Input:</label>
		        	<input type="text" name="text-2" id="text-2" value="" data-mini="true" />
				</form>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-c.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

			<div data-role="page" class="type-interior">

				<div data-role="header" data-position="fixed" data-theme="b">
					<form action="#" method="get">
						<label for="search-1" class="ui-hidden-accessible">Search Input:</label>
				        <input type="search" name="search-1" id="search-1" value="" data-mini="true" data-theme="d" />
					</form>
				</div>
	
				<div data-role="content">
					<div class="content-primary">
					<h2>Forms in fixed toolbar demos</h2>
					<p>These pages are designed to test fixed toolbars and form elements: 
						<a href="bars-fixed-forms-a.html">demo app</a>,
						<a href="bars-fixed-forms-b.html">text inputs</a>, 
						<a href="bars-fixed-forms-c.html">search inputs</a>, 
						<a href="bars-fixed-forms-d.html">radio toggles</a>, 
						<a href="bars-fixed-forms-e.html">checkbox toggles</a>,
						<a href="bars-fixed-forms-f.html">slider</a>, 
						<a href="bars-fixed-forms-g.html">select</a>, and  
						<a href="bars-fixed-forms-h.html">buttons</a>.
					</p>
					
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>


					<h3>Embedded form</h3>

					<form action="#" method="get">

						<div data-role="fieldcontain">
				         <label for="name">Text Input:</label>
				         <input type="text" name="name" id="name" value=""  />
						</div>

						<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
						</div>

						<div data-role="fieldcontain">
							<label for="slider2">Flip switch:</label>
							<select name="slider2" id="slider2" data-role="slider">
								<option value="off">Off</option>
								<option value="on">On</option>
							</select>
						</div>

						<div data-role="fieldcontain">
							<label for="slider">Slider:</label>
						 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
						</div>


						<div data-role="fieldcontain">
							<label for="select-choice-1" class="select">Choose shipping method:</label>
							<select name="select-choice-1" id="select-choice-1">
								<option value="standard">Standard: 7 day</option>
								<option value="rush">Rush: 3 days</option>
								<option value="express">Express: next day</option>
								<option value="overnight">Overnight</option>
							</select>
						</div>


					<div class="ui-body ui-body-b">
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
				    </fieldset>
					</div>
				</form>

				<h3>A bit more text</h3>

				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
				<form action="#" method="get">
					<label for="search-2" class="ui-hidden-accessible">Search Input:</label>
			        <input type="search" name="search-2" id="search-2" value="" data-mini="true" />
				</form>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-d.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

			<div data-role="page" class="type-interior">

				<div data-role="header" data-position="fixed" data-theme="b">
					<form action="#" method="get">
						<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
					    	<legend class="ui-hidden-accessible">Choose a pet:</legend>
					         	<input type="radio" name="radio-choice-a" id="radio-choice-1" value="choice-1" checked="checked" />
					         	<label for="radio-choice-1">Cat</label>

					         	<input type="radio" name="radio-choice-a" id="radio-choice-2" value="choice-2"  />
					         	<label for="radio-choice-2">Dog</label>

					         	<input type="radio" name="radio-choice-a" id="radio-choice-3" value="choice-3"  />
					         	<label for="radio-choice-3">Hamster</label>

					         	<input type="radio" name="radio-choice-a" id="radio-choice-4" value="choice-4"  />
					         	<label for="radio-choice-4">Lizard</label>
					    </fieldset>
					</form>
				</div>
	
				<div data-role="content">
					<div class="content-primary">
					<h2>Forms in fixed toolbar demos</h2>
					<p>These pages are designed to test fixed toolbars and form elements: 
						<a href="bars-fixed-forms-a.html">demo app</a>,
						<a href="bars-fixed-forms-b.html">text inputs</a>, 
						<a href="bars-fixed-forms-c.html">search inputs</a>, 
						<a href="bars-fixed-forms-d.html">radio toggles</a>, 
						<a href="bars-fixed-forms-e.html">checkbox toggles</a>,
						<a href="bars-fixed-forms-f.html">slider</a>, 
						<a href="bars-fixed-forms-g.html">select</a>, and  
						<a href="bars-fixed-forms-h.html">buttons</a>.
					</p>
					
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>


					<h3>Embedded form</h3>

					<form action="#" method="get">

						<div data-role="fieldcontain">
				         <label for="name">Text Input:</label>
				         <input type="text" name="name" id="name" value=""  />
						</div>

						<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
						</div>

						<div data-role="fieldcontain">
							<label for="slider2">Flip switch:</label>
							<select name="slider2" id="slider2" data-role="slider">
								<option value="off">Off</option>
								<option value="on">On</option>
							</select>
						</div>

						<div data-role="fieldcontain">
							<label for="slider">Slider:</label>
						 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
						</div>


						<div data-role="fieldcontain">
							<label for="select-choice-1" class="select">Choose shipping method:</label>
							<select name="select-choice-1" id="select-choice-1">
								<option value="standard">Standard: 7 day</option>
								<option value="rush">Rush: 3 days</option>
								<option value="express">Express: next day</option>
								<option value="overnight">Overnight</option>
							</select>
						</div>


					<div class="ui-body ui-body-b">
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
				    </fieldset>
					</div>
				</form>

				<h3>A bit more text</h3>

				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
				<form action="#" method="get">
					<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				    	<legend class="ui-hidden-accessible">Choose a pet:</legend>
				         	<input type="radio" name="radio-choice-b" id="radio-choice-5" value="choice-5" checked="checked" />
				         	<label for="radio-choice-5">Cat</label>

				         	<input type="radio" name="radio-choice-b" id="radio-choice-6" value="choice-6"  />
				         	<label for="radio-choice-6">Dog</label>

				         	<input type="radio" name="radio-choice-b" id="radio-choice-7" value="choice-7"  />
				         	<label for="radio-choice-7">Hamster</label>

				         	<input type="radio" name="radio-choice-b" id="radio-choice-8" value="choice-8"  />
				         	<label for="radio-choice-8">Lizard</label>
				    </fieldset>
				</form>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-e.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

			<div data-role="page" class="type-interior">

				<div data-role="header" data-position="fixed" data-theme="b">
					<form action="#" method="get">
						<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
							<legend class="ui-hidden-accessible">Choose as many snacks as you'd like:</legend>
							<input type="checkbox" name="checkbox-1a" id="checkbox-1a" />
							<label for="checkbox-1a">Cheetos</label>

							<input type="checkbox" name="checkbox-2a" id="checkbox-2a" />
							<label for="checkbox-2a">Doritos</label>

							<input type="checkbox" name="checkbox-3a" id="checkbox-3a" />
							<label for="checkbox-3a">Fritos</label>

							<input type="checkbox" name="checkbox-4a" id="checkbox-4a" />
							<label for="checkbox-4a">Sun Chips</label>
					    </fieldset>
					</form>
				</div>
	
				<div data-role="content">
					<div class="content-primary">
					<h2>Forms in fixed toolbar demos</h2>
					<p>These pages are designed to test fixed toolbars and form elements: 
						<a href="bars-fixed-forms-a.html">demo app</a>,
						<a href="bars-fixed-forms-b.html">text inputs</a>, 
						<a href="bars-fixed-forms-c.html">search inputs</a>, 
						<a href="bars-fixed-forms-d.html">radio toggles</a>, 
						<a href="bars-fixed-forms-e.html">checkbox toggles</a>,
						<a href="bars-fixed-forms-f.html">slider</a>, 
						<a href="bars-fixed-forms-g.html">select</a>, and  
						<a href="bars-fixed-forms-h.html">buttons</a>.
					</p>
					
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>


					<h3>Embedded form</h3>

					<form action="#" method="get">

						<div data-role="fieldcontain">
				         <label for="name">Text Input:</label>
				         <input type="text" name="name" id="name" value=""  />
						</div>

						<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
						</div>

						<div data-role="fieldcontain">
							<label for="slider2">Flip switch:</label>
							<select name="slider2" id="slider2" data-role="slider">
								<option value="off">Off</option>
								<option value="on">On</option>
							</select>
						</div>

						<div data-role="fieldcontain">
							<label for="slider">Slider:</label>
						 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
						</div>


						<div data-role="fieldcontain">
							<label for="select-choice-1" class="select">Choose shipping method:</label>
							<select name="select-choice-1" id="select-choice-1">
								<option value="standard">Standard: 7 day</option>
								<option value="rush">Rush: 3 days</option>
								<option value="express">Express: next day</option>
								<option value="overnight">Overnight</option>
							</select>
						</div>


					<div class="ui-body ui-body-b">
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
				    </fieldset>
					</div>
				</form>

				<h3>A bit more text</h3>

				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
				<form action="#" method="get">
					<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
						<legend class="ui-hidden-accessible">Choose as many snacks as you'd like:</legend>
						<input type="checkbox" name="checkbox-1ba" id="checkbox-1b" />
						<label for="checkbox-1b">Cheetos</label>

						<input type="checkbox" name="checkbox-2b" id="checkbox-2b" />
						<label for="checkbox-2b">Doritos</label>

						<input type="checkbox" name="checkbox-3b" id="checkbox-3b" />
						<label for="checkbox-3b">Fritos</label>

						<input type="checkbox" name="checkbox-4b" id="checkbox-4b" />
						<label for="checkbox-4b">Sun Chips</label>
				    </fieldset>
				</form>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-f.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

			<div data-role="page" class="type-interior">

				<div data-role="header" data-position="fixed" data-theme="b">
					<form action="#" method="get">
						<label for="slider-1" class="ui-hidden-accessible">Slider:</label>
					 	<input type="range" name="slider" id="slider-1" value="50" min="0" max="100" data-highlight="true" data-mini="true" />
					</form>
				</div>
	
				<div data-role="content">
					<div class="content-primary">
					<h2>Forms in fixed toolbar demos</h2>
					<p>These pages are designed to test fixed toolbars and form elements: 
						<a href="bars-fixed-forms-a.html">demo app</a>,
						<a href="bars-fixed-forms-b.html">text inputs</a>, 
						<a href="bars-fixed-forms-c.html">search inputs</a>, 
						<a href="bars-fixed-forms-d.html">radio toggles</a>, 
						<a href="bars-fixed-forms-e.html">checkbox toggles</a>,
						<a href="bars-fixed-forms-f.html">slider</a>, 
						<a href="bars-fixed-forms-g.html">select</a>, and  
						<a href="bars-fixed-forms-h.html">buttons</a>.
					</p>
					
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>


					<h3>Embedded form</h3>

					<form action="#" method="get">

						<div data-role="fieldcontain">
				         <label for="name">Text Input:</label>
				         <input type="text" name="name" id="name" value=""  />
						</div>

						<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
						</div>

						<div data-role="fieldcontain">
							<label for="slider2">Flip switch:</label>
							<select name="slider2" id="slider2" data-role="slider">
								<option value="off">Off</option>
								<option value="on">On</option>
							</select>
						</div>

						<div data-role="fieldcontain">
							<label for="slider">Slider:</label>
						 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
						</div>


						<div data-role="fieldcontain">
							<label for="select-choice-1" class="select">Choose shipping method:</label>
							<select name="select-choice-1" id="select-choice-1">
								<option value="standard">Standard: 7 day</option>
								<option value="rush">Rush: 3 days</option>
								<option value="express">Express: next day</option>
								<option value="overnight">Overnight</option>
							</select>
						</div>


					<div class="ui-body ui-body-b">
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
				    </fieldset>
					</div>
				</form>

				<h3>A bit more text</h3>

				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
				<form action="#" method="get">
						<label for="slider-2" class="ui-hidden-accessible">Slider:</label>
					 	<input type="range" name="slider" id="slider-2" value="50" min="0" max="100" data-highlight="true" data-mini="true" />
				</form>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-g.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

			<div data-role="page" class="type-interior">

				<div data-role="header" data-position="fixed" data-theme="b">
					<form action="#" method="get">
						<label for="select-1" class="select" class="ui-hidden-accessible">Your state:</label>
						<select name="select-1" id="select-1" data-mini="true">
							<option value="AL">Alabama</option>
							<option value="AK">Alaska</option>
							<option value="AZ">Arizona</option>
							<option value="AR">Arkansas</option>
							<option value="CA">California</option>
							<option value="CO">Colorado</option>
							<option value="CT">Connecticut</option>
							<option value="DE">Delaware</option>
							<option value="FL">Florida</option>
							<option value="GA">Georgia</option>
							<option value="HI">Hawaii</option>
							<option value="ID">Idaho</option>
							<option value="IL">Illinois</option>
							<option value="IN">Indiana</option>
							<option value="IA">Iowa</option>
							<option value="KS">Kansas</option>
							<option value="KY">Kentucky</option>
							<option value="LA">Louisiana</option>
							<option value="ME">Maine</option>
							<option value="MD">Maryland</option>
							<option value="MA">Massachusetts</option>
							<option value="MI">Michigan</option>
							<option value="MN">Minnesota</option>
							<option value="MS">Mississippi</option>
							<option value="MO">Missouri</option>
							<option value="MT">Montana</option>
							<option value="NE">Nebraska</option>
							<option value="NV">Nevada</option>
							<option value="NH">New Hampshire</option>
							<option value="NJ">New Jersey</option>
							<option value="NM">New Mexico</option>
							<option value="NY">New York</option>
							<option value="NC">North Carolina</option>
							<option value="ND">North Dakota</option>
							<option value="OH">Ohio</option>
							<option value="OK">Oklahoma</option>
							<option value="OR">Oregon</option>
							<option value="PA">Pennsylvania</option>
							<option value="RI">Rhode Island</option>
							<option value="SC">South Carolina</option>
							<option value="SD">South Dakota</option>
							<option value="TN">Tennessee</option>
							<option value="TX">Texas</option>
							<option value="UT">Utah</option>
							<option value="VT">Vermont</option>
							<option value="VA">Virginia</option>
							<option value="WA">Washington</option>
							<option value="WV">West Virginia</option>
							<option value="WI">Wisconsin</option>
							<option value="WY">Wyoming</option>
						</select>
					</form>
				</div>
	
				<div data-role="content">
					<div class="content-primary">
					<h2>Forms in fixed toolbar demos</h2>
					<p>These pages are designed to test fixed toolbars and form elements: 
						<a href="bars-fixed-forms-a.html">demo app</a>,
						<a href="bars-fixed-forms-b.html">text inputs</a>, 
						<a href="bars-fixed-forms-c.html">search inputs</a>, 
						<a href="bars-fixed-forms-d.html">radio toggles</a>, 
						<a href="bars-fixed-forms-e.html">checkbox toggles</a>,
						<a href="bars-fixed-forms-f.html">slider</a>, 
						<a href="bars-fixed-forms-g.html">select</a>, and  
						<a href="bars-fixed-forms-h.html">buttons</a>.
					</p>
					
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>


					<h3>Embedded form</h3>

					<form action="#" method="get">

						<div data-role="fieldcontain">
				         <label for="name">Text Input:</label>
				         <input type="text" name="name" id="name" value=""  />
						</div>

						<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
						</div>

						<div data-role="fieldcontain">
							<label for="slider2">Flip switch:</label>
							<select name="slider2" id="slider2" data-role="slider">
								<option value="off">Off</option>
								<option value="on">On</option>
							</select>
						</div>

						<div data-role="fieldcontain">
							<label for="slider">Slider:</label>
						 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
						</div>


						<div data-role="fieldcontain">
							<label for="select-choice-1" class="select">Choose shipping method:</label>
							<select name="select-choice-1" id="select-choice-1">
								<option value="standard">Standard: 7 day</option>
								<option value="rush">Rush: 3 days</option>
								<option value="express">Express: next day</option>
								<option value="overnight">Overnight</option>
							</select>
						</div>


					<div class="ui-body ui-body-b">
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
				    </fieldset>
					</div>
				</form>

				<h3>A bit more text</h3>

				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
				<form action="#" method="get">
					<label for="select-2" class="select" class="ui-hidden-accessible">Your state:</label>
					<select name="select-2" id="select-2" data-mini="true">
						<option value="AL">Alabama</option>
						<option value="AK">Alaska</option>
						<option value="AZ">Arizona</option>
						<option value="AR">Arkansas</option>
						<option value="CA">California</option>
						<option value="CO">Colorado</option>
						<option value="CT">Connecticut</option>
						<option value="DE">Delaware</option>
						<option value="FL">Florida</option>
						<option value="GA">Georgia</option>
						<option value="HI">Hawaii</option>
						<option value="ID">Idaho</option>
						<option value="IL">Illinois</option>
						<option value="IN">Indiana</option>
						<option value="IA">Iowa</option>
						<option value="KS">Kansas</option>
						<option value="KY">Kentucky</option>
						<option value="LA">Louisiana</option>
						<option value="ME">Maine</option>
						<option value="MD">Maryland</option>
						<option value="MA">Massachusetts</option>
						<option value="MI">Michigan</option>
						<option value="MN">Minnesota</option>
						<option value="MS">Mississippi</option>
						<option value="MO">Missouri</option>
						<option value="MT">Montana</option>
						<option value="NE">Nebraska</option>
						<option value="NV">Nevada</option>
						<option value="NH">New Hampshire</option>
						<option value="NJ">New Jersey</option>
						<option value="NM">New Mexico</option>
						<option value="NY">New York</option>
						<option value="NC">North Carolina</option>
						<option value="ND">North Dakota</option>
						<option value="OH">Ohio</option>
						<option value="OK">Oklahoma</option>
						<option value="OR">Oregon</option>
						<option value="PA">Pennsylvania</option>
						<option value="RI">Rhode Island</option>
						<option value="SC">South Carolina</option>
						<option value="SD">South Dakota</option>
						<option value="TN">Tennessee</option>
						<option value="TX">Texas</option>
						<option value="UT">Utah</option>
						<option value="VT">Vermont</option>
						<option value="VA">Virginia</option>
						<option value="WA">Washington</option>
						<option value="WV">West Virginia</option>
						<option value="WI">Wisconsin</option>
						<option value="WY">Wyoming</option>
					</select>
				</form>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms-h.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

			<div data-role="page" class="type-interior">

				<div data-role="header" data-position="fixed" data-theme="b">
					<form action="#" method="get">
						<a href="index.html" data-role="button" data-inline="true">Link</a>
						<button type="submit" data-inline="true">Button</button>
						<input type="submit" value="Submit" data-inline="true" />
						<input type="reset" value="Reset" data-inline="true"/>
						<input type="image" value="Image" data-inline="true" />
					</form>
				</div>
	
				<div data-role="content">
					<div class="content-primary">
					<h2>Forms in fixed toolbar demos</h2>
					<p>These pages are designed to test fixed toolbars and form elements: 
						<a href="bars-fixed-forms-a.html">demo app</a>,
						<a href="bars-fixed-forms-b.html">text inputs</a>, 
						<a href="bars-fixed-forms-c.html">search inputs</a>, 
						<a href="bars-fixed-forms-d.html">radio toggles</a>, 
						<a href="bars-fixed-forms-e.html">checkbox toggles</a>,
						<a href="bars-fixed-forms-f.html">slider</a>, 
						<a href="bars-fixed-forms-g.html">select</a>, and  
						<a href="bars-fixed-forms-h.html">buttons</a>.
					</p>
					
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>


					<h3>Embedded form</h3>

					<form action="#" method="get">

						<div data-role="fieldcontain">
				         <label for="name">Text Input:</label>
				         <input type="text" name="name" id="name" value=""  />
						</div>

						<div data-role="fieldcontain">
						<label for="textarea">Textarea:</label>
						<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
						</div>

						<div data-role="fieldcontain">
							<label for="slider2">Flip switch:</label>
							<select name="slider2" id="slider2" data-role="slider">
								<option value="off">Off</option>
								<option value="on">On</option>
							</select>
						</div>

						<div data-role="fieldcontain">
							<label for="slider">Slider:</label>
						 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
						</div>


						<div data-role="fieldcontain">
							<label for="select-choice-1" class="select">Choose shipping method:</label>
							<select name="select-choice-1" id="select-choice-1">
								<option value="standard">Standard: 7 day</option>
								<option value="rush">Rush: 3 days</option>
								<option value="express">Express: next day</option>
								<option value="overnight">Overnight</option>
							</select>
						</div>


					<div class="ui-body ui-body-b">
					<fieldset class="ui-grid-a">
							<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
							<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
				    </fieldset>
					</div>
				</form>

				<h3>A bit more text</h3>

				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
				<form action="#" method="get">
					<a href="index.html" data-role="button" data-inline="true">Link</a>
					<button type="submit" data-inline="true">Button</button>
					<input type="submit" value="Submit" data-inline="true" />
					<input type="reset" value="Reset" data-inline="true"/>
					<input type="image" value="Image" data-inline="true" />
				</form>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-forms.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>
	


</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="a">
		<!-- <input type="submit" value="submitBtn" class="ui-btn-left" /> -->
		
		<select name="slider2" id="slider2" class="ui-btn-left">
			<option value="off">Off</option>
			<option value="on">On</option>
		</select>
		
		<button type="submit" class="ui-btn-right">Cancel</button>
		
		<h1>Fixed + Forms</h1>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
			<a href="#" data-role="button">Default</a>
			<a href="#" data-role="button" data-mini="true">Mini True</a>
			<a href="#" data-role="button" data-mini="false">Mini False</a>
		</div>
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-methods.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-position="fixed" data-theme="f">

		<h1>Fixed toolbars</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
				<h2>Fixed toolbars</h2>
				
			    <ul data-role="controlgroup" data-type="horizontal" class="localnav">
			      <li><a href="bars-fixed.html" data-role="button" data-transition="fade">Basics</a></li>
			      <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade">Options</a></li>
			      <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
			      <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
			    </ul>
		   			<p>The fixedtoolbar plugin has the following methods:</p>

		   		<dl>
		   			<dt><code>show</code> show the toolbar</dt>
		   			<dd>
		   			
<pre><code>
$("[data-position='fixed']").fixedtoolbar('show');
</code>
</pre>


<div class="ui-body ui-body-e">
	<p><strong>Note:</strong> Prior to version 1.1, the following syntax was used to show the toolbars, but it is no longer supported:</p>
<pre><code>
$.mobile.fixedToolbars.show(true);
</code></pre>
</div>							
						
		   			</dd>
			
		   			<dt><code>hide</code> hide the toolbar (if it's not a fullscreen toolbar, it'll toggle back to static positioning, which may or may not be hidden from view depending on scroll)</dt>
		   			<dd>
		   				<pre><code>
$("[data-position='fixed']").fixedtoolbar('hide');
		   				</code></pre>
		   			</dd>
					
		   			<dt><code>toggle</code> calls either the show or the hide method, depending on whether the toolbar is visible.</dt>
		   			<dd>
		   				<pre><code>
$("[data-position='fixed']").fixedtoolbar('toggle');
		   				</code></pre>
		   			</dd>
					
		   			<dt><code>updatePagePadding</code> update the padding (either top or bottom, depending on if the toolbar is a header or a footer) of the page element parent of the toolbar to match the height of the toolbar.</dt>
		   			<dd>
		   				<pre><code>
$("[data-position='fixed']").fixedtoolbar('updatePagePadding');
		   				</code></pre>
						
<p>There is also an <code>updatelayout</code> event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this <code><a href="../api/events.html">updatelayout</a></code> event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the <code>updatelayout</code> event to update the widget in response.</p>						
		   			</dd>
					
		   			<dt><code>destroy</code> destroy at fixedtoolbar (restore the element to its initial state)</dt>
		   			<dd>
		   				<pre><code>
$("[data-position='fixed']").fixedtoolbar('destroy');
		   				</code></pre>
		   			</dd>
			</dl>

				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
					<h1>Fixed Footer</h1>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed-options.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-position="fixed" data-theme="f">

		<h1>Fixed toolbars</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
				<h2>Fixed toolbars</h2>
				
			    <ul data-role="controlgroup" data-type="horizontal" class="localnav">
			      <li><a href="bars-fixed.html" data-role="button" data-transition="fade">Basics</a></li>
			      <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
			      <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade">Methods</a></li>
			      <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
			    </ul>
				
			<p>The fixedtoolbar plugin has the following options:</p>
			

		<dl>
			
			<dt><code>visibleOnPageShow</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>This determines whether the toolbar is visible or not when its parent page is shown. This option is also exposed as a data attribute: <code>data-visible-on-page-show=&quot;false&quot;</code></p>			
				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ visibleOnPageShow: false }</strong>);</code></pre>
			</dd>
			
			<dt><code>disablePageZoom</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>This determines whether user-scaling should be disabled on pages that contain fixed toolbars. This option is also exposed as a data attribute: <code>data-disable-page-zoom=&quot;false&quot;</code></p>			
				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ disablePageZoom: false }</strong>);</code></pre>
			</dd>
			
			<dt><code>transition</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "slide" (which ends up using slideup and slidedown)</p>
				<p>The transition that should be used for showing and hiding a fixed toolbar. Possible values are "none", "fade", and "slide" (or you can write a CSS transition of your own and use that too). This option is also exposed as a data attribute: <code>data-transition=&quot;fade&quot;</code></p>			
				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ transition: "fade" }</strong>);</code></pre>
			</dd>
			
			<dt><code>fullscreen</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: false</p>
				<p>Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled, instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions. <a href="bars-fullscreen.html">This page</a> demonstrates toolbars that use the fullscreen option. This option is also exposed as a data attribute: <code>data-fullscreen=&quot;true&quot;</code></p>			
				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ fullscreen: true }</strong>);</code></pre>
				
				<p class="ui-body ui-body-e"><strong>Note:</strong> While the data-attribute syntax for this option has not changed, it is now only supported on the toolbar element itself, and not the page element. </p>
				
			</dd>
			
			<dt><code>tapToggle</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>Enable or disable the user's ability to toggle toolbar visibility with a tap on the screen (or a click, for mouse users). This option is also exposed as a data attribute: <code>data-tap-toggle=&quot;true&quot;</code></p>			
				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ tapToggle: true }</strong>);</code></pre>
				
				<div class="ui-body ui-body-e">
				<p><strong>Note:</strong> This behavior was formerly configurable as follows, but as of version 1.1 this syntax is no longer supported:
<pre><code>	
$.mobile.fixedToolbars
   .setTouchToggleEnabled(false);
</code></pre>
						
				</div>
				
			</dd>
			
			
			
			<dt><code>tapToggleBlacklist</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "a, .ui-header-fixed, .ui-footer-fixed"</p>
				<p>A list of jQuery selectors that, when tapped, will not cause the toolbars to be toggled.</p>			
				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ tapToggleBlacklist: "a, button, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" }</strong>);</code></pre>
			</dd>
			
			<dt><code>hideDuringFocus</code> <em>string</em></dt>
			<dd>
				<p class="default">default: "input, select, textarea"</p>
				<p>A list of jQuery selectors that should cause the toolbars to hide while focused, except if they are in a fixed toolbar.</p>			
				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ hideDuringFocus: "input, select, textarea" }</strong>);</code></pre>
			</dd>
			
			
			<dt><code>updatePagePadding</code> <em>boolean</em></dt>
			<dd>
				<p class="default">default: true</p>
				<p>Since toolbars can vary in height depending on the content they contain, this option automatically updates the padding on the page element to ensure that fixed toolbars have adequate space in the document when they are statically positioned, and when scrolled to the top or bottom of the page. When enabled, the padding updates during many operations, such as pageshow, during page transitions, and on resize and orientationchange. As an optimization, we would recommend that you consider disabling this option and adding a rule to your CSS to set the padding of the page div to match the EM height of your toolbars, such as <code>.ui-page-header-fixed { padding-top: 4.5em; }</code>. This option is also exposed as a data attribute: <code>data-update-page-padding=&quot;false&quot;</code></p>			
				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ updatePagePadding: false }</strong>);</code></pre>
			</dd>
			
			
			<dt><code>supportBlacklist</code> <em>function</em></dt>
			<dd>
				<p class="default">default: function that returns a boolean value</p>
				<p>CSS <code>position: fixed</code> support is very difficult to test; in fact, at the time of version 1.1 release, there was no known way to reasonably test for fixed support without turning up false positives or negatives in certain popular browsers. This option is a function that attempts to opt-out some popular platforms that are known to be troublesome with <code>position: fixed</code> . Often, these platforms support <code>position: fixed</code>  partially, which can be worse than not supporting it at all. If overriding this option with your own blacklist logic, you simply need to provide a function that returns a true or false result when called upon initialization. You must set it on mobileinit, so that it applies when the plugin is initially created.</p>			
				<pre><code>
$( document ).bind("mobileinit", function(){
  $.mobile.fixedtoolbar.prototype.options.supportBlacklist = function(){
    var result;
    // logic to determine whether result should be true or false
    return result;
  };
})</code></pre>
			</dd>
			
			
			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
			<dd>
				<p class="default">default: ":jqmData(position='fixed')"</p>
				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as fixed toolbars. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
				<pre><code>$( document ).bind( "mobileinit", function(){
	<strong>$.mobile.fixedtoolbar.prototype.options.initSelector = ".myselector";</strong>
});
</code></pre>
			</dd>
			
			
			
		</dl>


				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
					<h1>Fixed Footer</h1>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fixed.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">

	<div data-role="header" data-position="fixed" data-theme="f">
		<h1>Fixed toolbars</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
				<h2>Fixed toolbars</h2>
				
			    <ul data-role="controlgroup" data-type="horizontal" class="localnav">
			      <li><a href="bars-fixed.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
			      <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade">Options</a></li>
			      <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade">Methods</a></li>
			      <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
			    </ul>
				
				
		<p>In browsers that support CSS <code>position: fixed</code> (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page. </p>
		
		<p>To enable this behavior on a header or footer, add the <code>data-position="fixed"</code> attribute to a jQuery Mobile header or footer element.</p>
		
		<p>Fixed header markup example:</p>
		<pre><code>	
&lt;div data-role=&quot;header&quot; <strong>data-position=&quot;fixed&quot;</strong>&gt;
	&lt;h1&gt;Fixed Header!&lt;/h1&gt;
&lt;/div&gt;
		</code></pre>
		
		<p>Fixed footer markup example:</p>
		<pre><code>	
&lt;div data-role=&quot;footer&quot; <strong>data-position=&quot;fixed&quot;</strong>&gt;
	&lt;h1&gt;Fixed Footer!&lt;/h1&gt;
&lt;/div&gt;
		</code></pre>
		
		<h2>Fullscreen Toolbars</h2>
		<p><a href="bars-fullscreen.html">Fullscreen</a> fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.</p>
		
				<p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
		
				<pre><code>	
&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot; data-fullscreen=&quot;true&quot;&gt;
	&lt;h1&gt;Fixed Header!&lt;/h1&gt;
&lt;/div&gt;
				</code></pre>


		<h2>Forms in toolbars</h2>
		
		<p>While all form elements are now tested to work correctly within <em>static</em> toolbars as of jQuery Mobile 1.1, we recommend extensive testing when using form elements within <em>fixed</em> toolbars or within any <code>position: fixed</code> elements. This can potentially trigger a number of unpredictable issues in various mobile browsers, Android 2.2/2.3 in particular (detailed in <b>Known issues in Android 2.2/2.3</b>, below).</p>
		
		<h2>Changes in jQuery Mobile 1.1</h2>
		
		<p>Prior to version 1.1, jQuery Mobile used dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers supported the <code>position:fixed</code> CSS property, and simulating fixed support through the use of "fake" JavaScript overflow-scrolling behavior would have reduced our browser support reach, in addition to feeling unnatural on certain platforms. This behavior was not ideal, and jQuery Mobile 1.1 took a new approach to fixed toolbars that allows much broader support. The framework now offers true fixed toolbars on many popular platforms, while gracefully degrading non-supporting platforms to static positioning.</p>
		
		<h3>Polyfilling older platforms</h3>
		<p>The fixed toolbar plugin degrades gracefully in platforms that do not support CSS <code>position:fixed</code> properly, such as iOS4.3. If you still need to support fixed toolbars on that platform (with the show/hide behavior) included in previous releases, Filament Group has developed a polyfill that you can use.</p>
		
		<ul>
				<li><a href="https://github.com/filamentgroup/jQuery-Mobile-FixedToolbar-Legacy-Polyfill">Github code repository with CSS, and JavaScript required for the fixed toolbars polyfill</a></li>
				<li><a href="http://filamentgroup.github.com/jQuery-Mobile-FixedToolbar-Legacy-Polyfill/">Preview URL using the code in the repo above</a></li>
		</ul>
		
		<p>Just include the CSS and JS files after your references to jQuery Mobile and Fixed toolbars will work similar to jQuery Mobile 1.0 in iOS4.3, with the inclusion of the new API for the 1.1 fixedtoolbar plugin.</p>
		
		<p>If you have any improvements to suggest, fork the <a href="https://github.com/filamentgroup/jQuery-Mobile-FixedToolbar-Legacy-Polyfill">gist</a> on github and let us know!</p>
		
		<h2>Known issue with form controls inside fixed toolbars, and programmatic scroll</h2>	
		<p>An obscure issue exists in iOS5 and some Android platforms where form controls placed inside fixed-positioned containers can lose their hit area when the window is programatically scrolled (using <code>window.scrollTo</code> for example). This is not an issue specific to jQuery Mobile, but because of it, we recommend not programatically scrolling a document when using form controls inside jQuery Mobile fixed toolbars. <a href="https://github.com/scottjehl/Device-Bugs/issues/1">This ticket</a> from the <a href="https://github.com/scottjehl/Device-Bugs/">Device Bugs project</a> tracker explains this problem in more detail.</p>
		
		
		<h2>Known issues in Android 2.2/2.3</h2>	
		<p>Android 2.2/2.3’s implementation of <code>position: fixed;</code> can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues, particularly in the case of <code>position: absolute</code> elements inside of <code>position: fixed</code> elements. While we’ve done our best to work around a number of these unique bugs within the scope of the library, custom styles may cause a number of issues.</p>
		<ul>
			<li>Form elements elsewhere on the page—select menus in particular—can fail to respond to user interaction when an <em>empty</em> absolute positioned element is placed within a fixed position element. In rare cases—and specific to Android 2.2—this can cause <em>entire pages</em> to fail to respond to user interaction. This can seemingly be solved by adding any character to the absolute positioned element, including a non-breaking space, and in some cases even whitespace.</li>
			<li>The above-described issue can also be triggered by an absolute positioned image inside of a fixed position element, but <em>only</em> when that image is using something <em>other than its inherent dimensions</em>. If a height or width is specified on the image using CSS, or the image src is invalid (thus having no inherent height and width), this issue can occur. If an image that is inherently, say, 50x50 pixels is placed in a fixed element and left at its inherent dimensions, this issue does not seem to occur.</li>
			<li>When a <code>position: fixed</code> element appears anywhere on a page, most 2D CSS transforms will fail. Oddly, only <code>translate</code> transforms seem unaffected by this. Even more oddly, this issue is solved by setting a CSS <code>opacity</code> of .9 or below on the parent of the fixed element.</li>
			<li>Combinations of <code>position: fixed</code> and overflow properties are best avoided, as both have been known to cause unpredictable issues in older versions of Android OS.</li>
			<li>Any element that triggers the on-screen keyboard, when placed inside a <code>position: fixed</code> element, will fail to respond to user input when using anything other than the default keyboard. This includes Swype, XT9 or, it seems, any input method apart from the standard non-predictive keyboard.</li>
		</ul>
			
		<p>While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Android’s native browser.</p>
		
		<p>The following pages are designed to test fixed toolbars and form elements: 
					<a href="bars-fixed-forms-a.html">demo app</a>,
					<a href="bars-fixed-forms-b.html">text inputs</a>, 
					<a href="bars-fixed-forms-c.html">search inputs</a>, 
					<a href="bars-fixed-forms-d.html">radio toggles</a>, 
					<a href="bars-fixed-forms-e.html">checkbox toggles</a>,
					<a href="bars-fixed-forms-f.html">slider</a>, 
					<a href="bars-fixed-forms-g.html">select</a>, and  
					<a href="bars-fixed-forms-h.html">buttons</a>.</p>
		
		
<div class="ui-body ui-body-e">		
		<h2>No longer supported: touchOverflowEnabled</h2>
		
		<p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p>
</div>
		<hr>
	
		
		<h2>The rest of the page is just sample content to make the page very long</h2>
		
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
			
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
			
			
			<h3>And an inset list</h3>
			
					<ul data-role="listview" data-inset="true">
						<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
						<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
						<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
						<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
						<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
					</ul>
			
			<br />
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
			
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
			
			
			<h3>Embedded form</h3>
			
			<form action="#" method="get">

				<div data-role="fieldcontain">
		         <label for="name">Text Input:</label>
		         <input type="text" name="name" id="name" value=""  />
				</div>

				<div data-role="fieldcontain">
				<label for="textarea">Textarea:</label>
				<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
				</div>

				<div data-role="fieldcontain">
					<label for="slider2">Flip switch:</label>
					<select name="slider2" id="slider2" data-role="slider">
						<option value="off">Off</option>
						<option value="on">On</option>
					</select>
				</div>

				<div data-role="fieldcontain">
					<label for="slider">Slider:</label>
				 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
				</div>


				<div data-role="fieldcontain">
					<label for="select-choice-1" class="select">Choose shipping method:</label>
					<select name="select-choice-1" id="select-choice-1">
						<option value="standard">Standard: 7 day</option>
						<option value="rush">Rush: 3 days</option>
						<option value="express">Express: next day</option>
						<option value="overnight">Overnight</option>
					</select>
				</div>


			<div class="ui-body ui-body-b">
			<fieldset class="ui-grid-a">
					<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
					<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
		    </fieldset>
			</div>
		</form>
		
		<h3>A bit more text</h3>
		
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
		



				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" data-theme="a" data-position="fixed">
					<h1>Fixed Footer</h1>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-fullscreen.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Fullscreen Fixed toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

<div data-role="page" class="type-interior">
	
	<div data-role="header" data-position="fixed" data-theme="f" data-fullscreen="true">
		<h1>Fullscreen fixed header</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	
	<div data-role="content">
			<div class="content-primary">
				<img src="images/photo-run.jpeg"  alt="Photo Run">
	
		<p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively &mdash; a common scenario for photo, image or video viewers.</p>
		
		<p class="ui-body">To enable this toolbar feature type, you apply the <code>data-fullscreen="true"</code> attribute and the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements, or whichever you want to be full-screen. </p>
		
		<p class="ui-body">Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content, so not all content will be accessible with the toolbars open, just as shown in this demo.</p>
			       

				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed" data-fullscreen="true">
					<h1>Fullscreen Fixed Footer</h1>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\bars-themes.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Theming Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Bar theming </h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	

	<div data-role="content">
		<div class="content-primary">	
		<p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. </p>
		
			
		<h2>Theming headers and footers</h2>
		<p>To set the header or footer bars to a different color in your theme, add the <code> data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p> 

<div class="highlight"> 
<pre>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">&gt;</span> 
	<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span> 
<span class="nt">&lt;/div&gt;</span> 
</pre> 
</div>

		
		<h2>Theming buttons in toolbars</h2>

		<p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code> data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code> data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p> 

<div class="highlight"> 
<pre>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">&gt;</span>Save<span class="nt">&lt;/a&gt;</span> 
</pre> 
</div> 
			

		
		<h2>Theme variations</h2>
		<p>This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.</p>
		<h3>Headers</h3>

		
		<div data-role="header">
			<h1>Bar swatch "a"</h1>
			<a href="index.html" data-icon="plus" data-theme="c">New</a>
		</div>
		
		<div data-role="header">
			<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
			<h1>Bar swatch "a"</h1>
			<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
		</div>

		<div data-role="header" data-theme="b">
			<h1>Bar swatch "b"</h1>
			<a href="index.html" data-icon="plus" data-theme="a">New</a>
		</div>

		<div data-role="header" data-theme="b">
			<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
			<h1>Bar swatch "b"</h1>
			<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="d">Save</a>
		</div>

		<div data-role="header" data-theme="c">
			<h1>Bar swatch "c"</h1>
			<a href="index.html" data-icon="plus" data-theme="a">New</a>
		</div>

		<div data-role="header" data-theme="c">
			<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
			<h1>Bar swatch "c"</h1>
			<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
		</div>

		<div data-role="header" data-theme="d">
			<h1>Bar swatch "d"</h1>
			<a href="index.html" data-icon="plus" data-theme="a">New</a>
		</div>

		<div data-role="header" data-theme="d">
			<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
			<h1>Bar swatch "d"</h1>
			<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
		</div>

		<div data-role="header" data-theme="e">
			<h1>Bar swatch "e"</h1>
			<a href="index.html" data-icon="plus" data-theme="a">New</a>
		</div>

		<div data-role="header" data-theme="e">
			<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
			<h1>Bar swatch "e"</h1>
			<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
		</div>

    <h3>Footers</h3>
	<p>These are examples of a footer with link buttons inside. Note that footers do not have the same prescriptive markup conventions as headers with button slots so use <a href="../content/content-grids.html">layout grids</a> or custom styles to achieve the design you want.</p>
	

	
	<div data-role="footer" data-theme="a">
            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
	</div>
    
	<div data-role="footer" data-theme="b">
            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
	</div>
    
    <div data-role="footer" data-theme="c">
            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
	</div>
    
    	<div data-role="footer" data-theme="d">
            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
		</div>
    
    	<div data-role="footer" data-theme="e">
            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
		</div>


				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
								<li data-theme="a"><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\docs-bars.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Toolbar Basics</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Toolbar basics</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
	<h2>Toolbar types</h2>
	
	<p>In jQuery Mobile, there are two standard types of toolbars: Headers and Footers. </p>
	
<ul>	<li>The <a href="docs-headers.html"><strong>Header bar </strong></a> serves as the page title, is usually the first element inside each <a href="../pages/page-anatomy.html">mobile page</a>, and typically contains a page title and up to two buttons.</li>

	<li>The <a href="docs-footers.html"><strong>Footer bar</strong></a> is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.</li> 
</ul>	

	<p>It's very common to have a horizontal navigation or tab bar inside the header or footer; jQuery Mobile includes a <a href="docs-navbar.html"><strong>navbar widget </strong></a> that turns an unordered list of links into a horizontal button bar, which works well in these instances.</p>
	
	<p>View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to toolbars.</p>

			
			<h2>Toolbar positioning options</h2>
			
			<p>Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the <strong>"inline" positioning</strong> mode. In this mode, the headers and footer sit in the natural document flow (the default HTML behavior), which ensures that they are visible on all devices, regardless of JavaScript and CSS positioning support.</p>
			
			<p>A <a href="bars-fixed.html"><strong>"fixed" positioning mode</strong></a> fixes the toolbars to either the top or bottom of the viewport on browsers that support CSS fixed positioning (which includes most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others). In browsers that don't support fixed positioning, the toolbars will fall back to static, inline position in the page.</p>
			<p> When tap-toggling is enabled, tapping the screen will toggle the visibility of the fixed toolbars. Tapping the page when the toolbars aren't visible brings them into view. Tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate. One caveat is that fixed toolbars never truly hide, but toggle between fixed and static positioning. This means that if you're at the top of a page, you can't tap-toggle a header toolbar out of view, as it instead toggles into its spot in the document flow at the top of the page. The same goes for fixed footers when scrolled to the very bottom of a document.</p>
			<p>To set this behavior on a header or footer, add the <code> data-position="fixed"</code> attribute to the header or footer element.</p>
									
			<p>A <a href="bars-fullscreen.html"><strong>"fullscreen" position mode</strong></a> works just like the fixed mode except that the toolbars overlay the page content, rather than reserving a place in the document when not in fixed mode. This is useful for immersive apps like photo or video viewers where you want the content to fill the whole screen and toolbars can be hidden or summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so this is best used for specific situations.</p>

				

				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li data-theme="a"><a href="docs-bars.html">Toolbar basics</a></li>
								<li><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\docs-footers.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Footer Configuration</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Footers</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
			<h2>Footer bar structure</h2>

			<p>The <code>footer</code> bar has the same basic structure as the <a href="docs-headers.html">header</a> except it uses the <code> data-role</code> attribute value of <code>footer</code>. </p> 

<div class="highlight"> 
<pre>
<span class="nt">&lt;div</span> <strong><span class="na">data-role=</span><span class="s">"footer"</span></strong><span class="nt">&gt;</span> 
	<span class="nt">&lt;h4&gt;</span>Footer content<span class="nt">&lt;/h4&gt;</span> 
<span class="nt">&lt;/div&gt;</span> 
</pre> 
</div>
	
			
			<p>The <code>footer</code> toolbar will be themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p> 
			
			<div data-role="footer">
				<h4>Footer content</h4>
			</div>
			
			<p>The page footer is very similar to the header in terms of options and configuration. The primary difference is that the footer is designed to be less structured than the header to allow more flexibility, so the framework doesn't automatically reserve slots for buttons to the left or right as it does in headers.</p>
			<p>Since footers do not have the same prescriptive markup conventions as headers, we recommend using layout <a href="../content/content-grids.html">grids</a> or writing custom styles to achieve the design you want.</p> 



			<h2>Adding buttons</h2>

			<p>Any link or valid <a href="../buttons/buttons-types.html">button markup</a> added to the footer will automatically be turned into a button. To save space, buttons in toolbars are automatically set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons it contains.  </p>
			
			<p>By default, toolbars don't have any padding to accommodate nav bars and other widgets. To include padding on the bar, add a <code>class="ui-bar"</code> to the footer.</p>
			

<pre><code>
&lt;div data-role=&quot;footer&quot; class=&quot;ui-bar&quot;&gt;
	&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;plus&quot;&gt;Add&lt;/a&gt;
	&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-u&quot;&gt;Up&lt;/a&gt;
	&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-d&quot;&gt;Down&lt;/a&gt;
&lt;/div&gt;
</code></pre>

			<p>This creates this toolbar with buttons sitting in a row</p>

			<div data-role="footer" class="ui-bar">
				<a href="index.html" data-icon="plus">Add</a>
				<a href="index.html" data-icon="arrow-u">Up</a>
				<a href="index.html" data-icon="arrow-d">Down</a>
			</div>
			
			</p>Note that <code>.ui-bar</code> should not be added to header or footer bars that span the full width of the page, as the additional padding will cause a full-width element to break out of its parent container. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and apply the padding to that element.</p>
			
			<p>To group buttons together into a button set, wrap the links in a wrapper with <code> data-role=&quot;controlgroup&quot;</code> and <code>data-type=&quot;horizontal&quot;</code> attributes.</p>
			
<code>&lt;div data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot;&gt;</code>

			<p>This creates a grouped set of buttons:</p>

			<div data-role="footer" class="ui-bar">
				<div data-role="controlgroup" data-type="horizontal">
					<a href="index.html" data-icon="plus">Add</a>
					<a href="index.html" data-icon="arrow-u">Up</a>
					<a href="index.html" data-icon="arrow-d">Down</a>
				</div>
			</div>
	
	
	
			<h2>Adding form elements</h2>

			<p><a href="../forms/forms-all.html">Forms</a> elements and other content can also be added to toolbars. Here is an example of a <a href="../forms/selects/index.html">select</a> menu inside a footer bar. We recommend using <a href="../forms/forms-all-mini.html" >mini-sized</a> form elements in toolbars by adding the <code>data-mini="true"</code> attribute:</p>
		

			<div data-role="footer" class="ui-bar">
				<label for="select-choice-1">Shipping:</label>
				<select name="select-choice-1" id="select-choice-1" data-theme="a" data-mini="true">
					<option value="standard">Standard: 7 day</option>
					<option value="rush">Rush: 3 days</option>
					<option value="express">Express: next day</option>
					<option value="overnight">Overnight</option>
				</select>
			</div>
				
					



					
					<h2>Fixed &amp; Persistent footers</h2>
					<p>In situations where the footer is a global navigation element, you may want it to appear <a href="bars-fixed.html">fixed</a> so it doesn't scroll out of view. It's also possible to make a fixed toolbar <a href="footer-persist-d.html">persistent</a> so it appears to not move between <a href="../pages/page-transitions.html">page transitions</a>. This can be accomplished by using the persistent footer feature included in jQuery Mobile.</p> 
					
					<p>To make a footer persistent between transitions, add the <code>data-id</code> attribute to the footer of all relevant pages and use the same <code>id</code> value for each. For example, by adding <code>data-id="myfooter"</code> to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. <strong>This effect will only work correctly if the header and footer toolbars are set to <code>data-position="fixed"</code> so they are in view during the transition.</strong></p>
					
					

					

						</div><!--/content-primary -->		

						<div class="content-secondary">

							<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

									<h3>More in this section</h3>

									<ul data-role="listview" data-theme="c" data-dividertheme="d">

										<li data-role="list-divider">Toolbars</li>
										<li><a href="docs-bars.html">Toolbar basics</a></li>
										<li><a href="docs-headers.html">Header bars</a></li>
										<li data-theme="a"><a href="docs-footers.html">Footer bars</a></li>
										<li><a href="docs-navbar.html">Navbars</a></li>
										<li><a href="bars-fixed.html">Fixed positioning</a></li>
										<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
										<li><a href="bars-themes.html">Theming toolbars</a></li>

									</ul>
							</div>
						</div>		

					</div><!-- /content -->

					<div data-role="footer" class="footer-docs" data-theme="c">
							<p>&copy; 2012 jQuery Foundation and other contributors</p>
					</div>

					</div><!-- /page -->

					</body>
					</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\docs-headers.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Header Bars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Headers</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">	
			<h2>Header structure</h2>
			<p>The <code>header</code> is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the left and/or right of the title for navigation or actions. Headers can optionally be positioned as <a href="bars-fixed.html">fixed</a> so they remain at the top of the screen at all times instead of scrolling with the page.</p> 
			
			<p>The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile "pages" may use a H1 element on the home "page" and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p> 

<div class="highlight"> 
<pre>
<span class="nt">&lt;div</span> <strong><span class="na">data-role=</span><span class="s">"header"</span></strong><span class="nt">&gt;</span> 
	<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span> 
<span class="nt">&lt;/div&gt;</span> 
</pre> 
</div> 

			<h2>Default header features</h2>
			<p>The <code>header</code> toolbar is themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p> 


			
			<div data-role="header">
				<h1>Page title</h1>
			</div>

	
			<h2>Adding buttons</h2>
			
			
			
			
	
			<p>In the standard header configuration, there are slots for buttons on either side of the text heading. Each button is typically an <code>anchor</code> element, but any valid <a href="../buttons/buttons-types.html">button markup</a> will work. To save space, buttons in toolbars are set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons it contains. </p>


		
		
			<h3>Default button positioning</h3>
		
			<p>The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order. </p> 
			

<pre><code>			
&lt;div data-role=&quot;header&quot;&gt;
	&lt;a href=&quot;index.html&quot; data-icon=&quot;delete&quot;&gt;Cancel&lt;/a&gt;
	&lt;h1&gt;Edit Contact&lt;/h1&gt;
	&lt;a href=&quot;index.html&quot; data-icon=&quot;check&quot;&gt;Save&lt;/a&gt;
&lt;/div&gt;
</code></pre>
	
	
			<div data-role="header">
				<a href="index.html" data-icon="delete">Cancel</a>
				<h1>Edit Contact</h1>
				<a href="index.html" data-icon="check">Save</a>
			</div>
			
			<h3>Making buttons visually stand out</h3>
			
			<p>Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out. Here, we add the <code> data-theme</code> attribute and set the color swatch for the button to "b" to make the "Save" button pop.</p>
			
			<pre><code>			
&lt;div data-role=&quot;header&quot;&gt;
	&lt;a href=&quot;index.html&quot; data-icon=&quot;delete&quot;&gt;Cancel&lt;/a&gt;
	&lt;h1&gt;Edit Contact&lt;/h1&gt;
	&lt;a href=&quot;index.html&quot; data-icon=&quot;check&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
&lt;/div&gt;
</code></pre>
			
						
			<div data-role="header">
				<a href="index.html" data-icon="delete">Cancel</a>
				<h1>Edit Contact</h1>
				<a href="index.html" data-icon="check" data-theme="b">Save</a>
			</div>
	
			<h3>Controlling button position with classes</h3>
	
			<p>The button position can also be controlled by adding classes to the button anchors, rather than relying on source order. This is especially useful if you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p> 

			


<div class="highlight"> 
<pre><code>
&lt;div data-role=&quot;header&quot;&gt;
	&lt;h1&gt;Page Title&lt;/h1&gt;
	&lt;a href=&quot;index.html&quot; data-icon=&quot;gear&quot; class=&quot;ui-btn-right&quot;&gt;Options&lt;/a&gt;
&lt;/div&gt;
</code></pre> 
</div> 

			<div data-role="header" >
				<h1>Page Title</h1>
				<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
			</div>
			
			
				<h3>Adding buttons to toolbars without heading</h3>
	
			<p>The heading in the header bar has some margin that will give the bar its height. If you choose not to use a heading, you will need to add an element with <code>class="ui-title"</code> so that the bar can get the height and display correctly.</p> 

		
<div class="highlight"> 
<pre><code>
&lt;div data-role=&quot;header&quot;&gt;
	&lt;a href=&quot;index.html&quot; data-icon=&quot;gear&quot; class=&quot;ui-btn-right&quot;&gt;Options&lt;/a&gt;
	&lt;span class=&quot;ui-title&quot; /&gt;
&lt;/div&gt;
	
</code></pre> 
</div> 

			<div data-role="header" >
				<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
				<span class="ui-title" />
			</div>
			
			
			
		<h2>Adding Back buttons</h2>
		
		<p>jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's <code>addBackBtn</code> option is true. This can also be set via markup if the page div has a <code>data-add-back-btn="true"</code> attribute. </p> 
		
		
		<p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page. This will allow the feature to work for users in C-Grade browsers.</strong></p>
                <p>If you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute.</p>	
			
		<h2>Customizing the back button text</h2>	
		
		<p>If you'd like to configure the back button text, you can either use the <code>data-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <br /><code>$.mobile.page.prototype.options.backBtnText = "previous";</code></p>
		
		<h3>Default back button style</h3>
		<p>If you'd like to configure the back button role-theme, you can use: <br /><code>$.mobile.page.prototype.options.backBtnTheme = "a";</code><br />
		If you're doing this programmatically, set this option inside the mobileinit event handler.</p>

			<h2>Custom header configurations</h2>
			<p>If you need to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in any container, such as <code>div</code>. The plugin won't apply the automatic button logic to the wrapped content inside the header container so you can write custom styles for laying out the content in your header.</p> 

			<p>It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the <code>ui-bar</code> class to apply standard bar padding and add the <code>ui-bar-b</code> class to assign the bar swatch styles from your theme. (The "b" can be any swatch letter.)</p>
			
			<pre><code>
&lt;div <strong>class=&quot;ui-bar ui-bar-b&quot;</strong>&gt;
	&lt;h3&gt;I&#x27;m just a div with bar classes and a mini inline &lt;a href=&quot;#&quot; data-role=&quot;button&quot; data-mini=&quot;true&quot;&gt;Button&lt;/a&gt;&lt;/h3&gt;
&lt;/div&gt;
			</code></pre>

			<p>This will produce this bar:</p>
				<div class="ui-bar ui-bar-b">
					<h3>I'm just a div with bar classes and a mini inline <a href="#" data-role="button" data-inline="true" data-mini="true">Button</a></h3>
				</div>
				
				<p>Note that <code>.ui-bar</code> should not be added to header or footer bars that span the full width of the page, as the additional padding will cause a full-width element to break out of its parent container. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and apply the padding to that element instead.</p>
				
				<p>By writing some simple styles, it's easy to build message bars like this:</p>
					<!-- Yes, the inline styles aren't recommended in a real system but they are used to simply illustrate how to tweak CSS -->
					<div class="ui-bar ui-bar-e">
						
						<h3 style="display:inline-block; width:92%; margin-top:5px;">This is an alert message. </h3><div style="display:inline-block; width:8%; margin-top:0px;"><a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Dismiss</a></div><p style="font-size:85%; margin:-.3em 0 1em;">And here's some additional text in a paragraph.</p>
					</div>
				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Toolbars</li>
								<li><a href="docs-bars.html">Toolbar basics</a></li>
								<li data-theme="a"><a href="docs-headers.html">Header bars</a></li>
								<li><a href="docs-footers.html">Footer bars</a></li>
								<li><a href="docs-navbar.html">Navbars</a></li>
								<li><a href="bars-fixed.html">Fixed positioning</a></li>
								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
								<li><a href="bars-themes.html">Theming toolbars</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2012 jQuery Foundation and other contributors</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\docs-navbar.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Navbar</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Navbar</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
	<h2>Simple navbar</h2>
	
	<p>jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar, typically within a header or footer. There is also a <a href="footer-persist-a.html">persistent navbar</a> variation that works more like a tab bar that stays fixed as you navigate across pages.</p>
	<p>A navbar is coded as an unordered list of links wrapped in a container element that has the <code> data-role="navbar"</code> attribute. This is an example of a two-button navbar:</p>
	
<pre><code>
<strong>&lt;div data-role=&quot;navbar&quot;&gt;</strong>
	&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;a.html&quot;&gt;One&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;b.html&quot;&gt;Two&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
<strong>&lt;/div&gt;&lt;!-- /navbar --&gt;</strong>
</code></pre>

	<p>When a link in the navbar is clicked it gets the active (selected) state. The <code>ui-btn-active</code> class is first removed from all anchors in the navbar before it is added to the activated link. If this is a link to another page, the class will be removed again after the transition has completed.</p>
	
	<p>To set an item to the active state upon initialization of the navbar, add <code>class="ui-btn-active"</code> to the corresponding anchor in your markup. Additionaly add a class of <code>ui-state-persist</code> to make the framework restore the active state each time the page is shown while it exists in the DOM. The example below shows a navbar with item "One" set to active:</p>

<pre><code>
<strong>&lt;div data-role=&quot;navbar&quot;&gt;</strong>
	&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;a.html&quot; class=&quot;ui-btn-active ui-state-persist&quot;&gt;One&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;b.html&quot;&gt;Two&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
<strong>&lt;/div&gt;&lt;!-- /navbar --&gt;</strong>
</code></pre>

	<p>The navbar items are set to divide the space evenly so in this case, each button is 1/2 the width of the browser window:</p>


		<div data-role="navbar">
			<ul>
				<li><a href="#" class="ui-btn-active">One</a></li>
				<li><a href="#">Two</a></li>
			</ul>
		</div><!-- /navbar -->

	
	<p>Adding a third item will automatically make each button 1/3 the width of the browser window:</p>


		<div data-role="navbar">
			<ul>
				<li><a href="#" class="ui-btn-active">One</a></li>
				<li><a href="#">Two</a></li>
				<li><a href="#">Three</a></li>
			</ul>
		</div><!-- /navbar -->

	
	<p>Adding a fourth more item will automatically make each button 1/4 the width of the browser window:</p>


		<div data-role="navbar" data-grid="c">
			<ul>
				<li><a href="#" class="ui-btn-active">One</a></li>
				<li><a href="#">Two</a></li>
				<li><a href="#">Three</a></li>
				<li><a href="#">Four</a></li>
			</ul>
		</div><!-- /navbar -->


	<p>The navbar maxes out with 5 items, each 1/5 the width of the browser window:</p>


		<div data-role="navbar" data-grid="d">
			<ul>
				<li><a href="#" class="ui-btn-active">One</a></li>
				<li><a href="#">Two</a></li>
				<li><a href="#">Three</a></li>
				<li><a href="#">Four</a></li>
				<li><a href="#">Five</a></li>
			</ul>
		</div><!-- /navbar -->

	
	<p>If more than 5 items are added, the navbar will simply wrap to multiple lines:</p>
	
		<div data-role="navbar">
			<ul>
				<li><a href="#" class="ui-btn-active">One</a></li>
				<li><a href="#">Two</a></li>
				<li><a href="#">Three</a></li>
				<li><a href="#">Four</a></li>
				<li><a href="#">Five</a></li>
				<li><a href="#">Six</a></li>
				<li><a href="#">Seven</a></li>
				<li><a href="#">Eight</a></li>
				<li><a href="#">Nine</a></li>
				<li><a href="#">Ten</a></li>
			</ul>
		</div><!-- /navbar -->
	
	<p>Navbars with 1 item will simply render as 100%.</p>
	
		<div data-role="navbar">
			<ul>
				<li><a href="#" class="ui-btn-active">One</a></li>
			</ul>
		</div><!-- /navbar -->
	
	<h2>Navbars in headers</h2>
	
	<p>If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.</p>

	<div data-role="header">
		<h1>I'm a header</h1>
		<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
				
		<div data-role="navbar">
			<ul>
				<li><a href="#">One</a></li>
				<li><a href="#">Two</a></li>
				<li><a href="#">Three</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /header -->
	
	<h2>Navbars in footers</h2>
	
	<p>If you want to add a navbar to the bottom of the page so it acts more like a tab bar, simply wrap the navbar in a container with a <code>data-role="footer"</code></p>
<pre><code>
&lt;div data-role=&quot;footer&quot;&gt;		
	&lt;div data-role=&quot;navbar&quot;&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;&lt;!-- /navbar --&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
</code></pre>
	<div data-role="footer">		
		<div data-role="navbar">
			<ul>
				<li><a href="#">One</a></li>
				<li><a href="#">Two</a></li>
				<li><a href="#">Three</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /footer -->
	
	<h2>Icons in navbars</h2>
	
	<p>Icons can be added to navbar items by adding the <code> data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor. By default, icons are added above the text (<code>data-iconpos="top"</code>). The following examples add icons to a navbar in a footer.</p>

	<div data-role="footer">
		<div data-role="navbar">
			<ul>
				<li><a href="#" data-icon="grid">Summary</a></li>
				<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
				<li><a href="#" data-icon="gear">Setup</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /footer -->
	
	<p>The icon position is set <em>on the navbar container</em> instead of for individual links within for visual consistency. For example, to place the icons below the labels, add the <code> data-iconpos="bottom"</code> attribute to the navbar container.</p>
<pre><code>
&lt;div data-role=&quot;navbar&quot; <strong>data-iconpos=&quot;bottom&quot;</strong>&gt;
</code></pre>
	<p>This will result in a bottom icon alignment:</p>
	<div data-role="footer">
		<div data-role="navbar" data-iconpos="bottom">
			<ul>
				<li><a href="#" data-icon="grid">Summary</a></li>
				<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
				<li><a href="#" data-icon="gear">Setup</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /footer -->
	
	<p>The icon position can be set to <code>data-iconpos="left"</code>:</p>

	<div data-role="footer">
		<div data-role="navbar" data-iconpos="left">
			<ul>
				<li><a href="#" data-icon="grid">Summary</a></li>
				<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
				<li><a href="#" data-icon="gear">Setup</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /footer -->
	
	<p>Or the icon position can be set to <code>data-iconpos="right"</code>:</p>

	<div data-role="footer">
		<div data-role="navbar" data-iconpos="right">
			<ul>
				<li><a href="#" data-icon="grid">Summary</a></li>
				<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
				<li><a href="#" data-icon="gear">Setup</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /footer -->
	
	<h2>Using 3rd party icon sets</h2>
	
	<p>You can add any of the popular icon libraries like <a href="http://glyphish.com/">Glyphish</a> to achieve the iOS style tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:</p>
	
	
	<style>	
		.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
		.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
		#chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
		#email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
		#login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
		#beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
		#coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
		#skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
	</style>
	
	<div data-role="footer" class="nav-glyphish-example">
		<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
		<ul>
			<li><a href="#" id="chat" data-icon="custom">Chat</a></li>
			<li><a href="#" id="email" data-icon="custom">Email</a></li>
			<li><a href="#" id="skull" data-icon="custom">Danger</a></li>
			<li><a href="#" id="beer" data-icon="custom">Beer</a></li>
			<li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
		</ul>
		</div>
	</div>
	
	<p>Icons by Joseph Wain / <a href="http://glyphish.com/">glyphish.com</a>. Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution 3.0 United States License</a>.</p>


	<h2>Theming navbars</h2>
	
	<p>Navbars inherit the theme swatch from their parent container, just like buttons. If a navbar is placed in the header or footer toolbar, it will inherit the default toolbar swatch "a" for bars unless you set this in the markup. </p>
	<p>Here are a few examples of navbars in various container swatches that automatically inherit their parent's swatch letter. Note that in these examples, instead of using a <code>data-theme</code> attribute, we're manually adding the swatch classes to apply the body swatch (<code>ui-body-a</code>) and the class to add the standard body padding (ui-body), but the inheritance works the same way:</p>

	<div class="ui-body-a ui-body">
		<h3>Swatch "a"</h3>
		<div data-role="navbar">
			<ul>
				<li><a href="#" data-icon="grid">A</a></li>
				<li><a href="#" data-icon="star">B</a></li>
				<li><a href="#" data-icon="gear">C</a></li>
				<li><a href="#" data-icon="arrow-l">D</a></li>
				<li><a href="#" data-icon="arrow-r">E</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /container -->
	
	<div class="ui-body-d ui-body">
		<h3>Swatch "b"</h3>
		<div data-role="navbar">
			<ul>
				<li><a href="#" data-icon="grid">A</a></li>
				<li><a href="#" data-icon="star">B</a></li>
				<li><a href="#" data-icon="gear">C</a></li>
				<li><a href="#" data-icon="arrow-l">D</a></li>
				<li><a href="#" data-icon="arrow-r">E</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /container -->
	
<p>To set the theme color for a navbar item, add the <code>data-theme</code> attribute to the individual links and specify a theme swatch. Note that applying a theme swatch to the navbar container is <em>not</em> supported.</p>
	<div data-role="footer">
		<div data-role="navbar">
			<ul>
				<li><a href="#" data-icon="grid"data-theme="a">A</a></li>
				<li><a href="#" data-icon="star" data-theme="b">B</a></li>
				<li><a href="#" data-icon="gear" data-theme="c">C</a></li>
				<li><a href="#" data-icon="arrow-l" data-theme="d">D</a></li>
				<li><a href="#" data-icon="arrow-r" data-theme="e">E</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /footer -->
					

		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">Toolbars</li>
						<li><a href="docs-bars.html">Toolbar basics</a></li>
						<li><a href="docs-headers.html">Header bars</a></li>
						<li><a href="docs-footers.html">Footer bars</a></li>
						<li data-theme="a"><a href="docs-navbar.html">Navbars</a></li>
						<li><a href="bars-fixed.html">Fixed positioning</a></li>
						<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
						<li><a href="bars-themes.html">Theming toolbars</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2012 jQuery Foundation and other contributors</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\footer-persist-a.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Persistent footer A</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 
	<div data-role="page" class="type-interior">

	<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
		<h1>Info</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
		<h2>About persistent toolbars</h2>
		<p>These pages are a demo of persistent toolbars. Click on any of the links in the footer, and you'll see the page content transition. But both, the persistent header and footer on these pages, remains in place during the animation to a new HTML page.</p>
		<p>To tell the framework to apply the persistent behavior, add the same <code>data-id</code> attribute to the header and/or footer of all HTML pages in the navigation. It's that simple: If the page you're navigating to has a header or footer with the same <code>data-id</code> as the page you're navigating from, the toolbars will appear fixed outside of the transition. Each of the pages in this demo has a different transition to test out how this works.</p>
		
		<p>Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:</p>
	
<pre><code>	
&lt;div data-role=&quot;footer&quot;<strong> data-id=&quot;foo1&quot; data-position=&quot;fixed&quot;</strong>&gt;
	&lt;div data-role=&quot;navbar&quot;&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;a.html&quot;&gt;Info&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;b.html&quot;&gt;Friends&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;c.html&quot;&gt;Albums&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;d.html&quot;&gt;Emails&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;&lt;!-- /navbar --&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
</code></pre>
		<p>To set the active state of an item in a persistent toolbar, add <code>class="ui-btn-active ui-state-persist"</code> to the corresponding anchor.</p>
		
<pre><code>	
&lt;li&gt;&lt;a href=&quot;a.html&quot; <strong>class=&quot;ui-btn-active ui-state-persist&quot;</strong>&gt;Info&lt;/a&gt;&lt;/li&gt;
</code></pre>

		<h3>A note about transitions</h3>
		<p>The slide, slideup, slidedown, fade or none <a href="../pages/page-transitions.html">page transitions</a> all work great with persistent fixed toolbars. However, intensive 3D transitions like flip, turn, and flow can cause positioning and animation performance issues with this technique so we don't recommend using them.</p>
		
		</div><!--/content-primary -->		

		<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">Toolbars</li>
							<li><a href="docs-bars.html">Toolbar basics</a></li>
							<li><a href="docs-headers.html">Header bars</a></li>
							<li><a href="docs-footers.html">Footer bars</a></li>
							<li><a href="docs-navbar.html">Navbars</a></li>
							<li><a href="bars-fixed.html">Fixed positioning</a></li>
							<li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
							<li><a href="bars-themes.html">Theming toolbars</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" data-id="foo1" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="footer-persist-a.html" data-prefetch="true" data-transition="slideup" class="ui-btn-active ui-state-persist">Info</a></li>
					<li><a href="footer-persist-b.html" data-prefetch="true">Friends</a></li>
					<li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
					<li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
				</ul>
			</div><!-- /navbar -->
		</div><!-- /footer -->

		</div><!-- /page -->

		</body>
		</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\footer-persist-b.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Persistent footer B</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
		<h1>Friends</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
			

				<ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d"data-filter-placeholder="Search friends...">
					<li data-role="list-divider">A</li>
					<li><a href="#">Adam Kinkaid</a></li>
					<li><a href="#">Alex Wickerham</a></li>
					<li><a href="#">Avery Johnson</a></li>
					<li data-role="list-divider">B</li>
					<li><a href="#">Bob Cabot</a></li>
					<li data-role="list-divider">C</li>
					<li><a href="#">Caleb Booth</a></li>
					<li><a href="#">Christopher Adams</a></li>
					<li><a href="#">Culver James</a></li>
					<li data-role="list-divider">D</li>
					<li><a href="#">David Walsh</a></li>
					<li><a href="#">Drake Alfred</a></li>
					<li data-role="list-divider">E</li>
					<li><a href="#">Elizabeth Bacon</a></li>
					<li><a href="#">Emery Parker</a></li>
					<li><a href="#">Enid Voldon</a></li>
					<li data-role="list-divider">F</li>
					<li><a href="#">Francis Wall</a></li>
					<li data-role="list-divider">G</li>
					<li><a href="#">Graham Smith</a></li>
					<li><a href="#">Greta Peete</a></li>
					<li data-role="list-divider">H</li>
					<li><a href="#">Harvey Walls</a></li>
					<li data-role="list-divider">M</li>
					<li><a href="#">Mike Farnsworth</a></li>
					<li><a href="#">Murray Vanderbuilt</a></li>
					<li data-role="list-divider">N</li>
					<li><a href="#">Nathan Williams</a></li>
					<li data-role="list-divider">P</li>
					<li><a href="#">Paul Baker</a></li>
					<li><a href="#">Pete Mason</a></li>
					<li data-role="list-divider">R</li>
					<li><a href="#">Rod Tarker</a></li>
					<li data-role="list-divider">S</li>
					<li><a href="#">Sawyer Wakefield</a></li>
				</ul>
	







		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">Toolbars</li>
						<li><a href="docs-bars.html">Toolbar basics</a></li>
						<li><a href="docs-headers.html">Header bars</a></li>
						<li><a href="docs-footers.html">Footer bars</a></li>
						<li><a href="docs-navbar.html">Navbars</a></li>
						<li><a href="bars-fixed.html">Fixed positioning</a></li>
						<li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
						<li><a href="bars-themes.html">Theming toolbars</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" data-id="foo1" data-position="fixed">
		<div data-role="navbar">
			<ul>
				<li><a href="footer-persist-a.html" data-prefetch="true" data-transition="slideup">Info</a></li>
				<li><a href="footer-persist-b.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Friends</a></li>
				<li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
				<li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /footer -->

	</div><!-- /page -->

	</body>
	</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\footer-persist-c.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Persistent footer C</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
		<h1>Albums</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
			<ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search albums..." data-split-icon="gear" data-split-theme="c">
			<li><a href="#">
				<img src="../lists/images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="#">
				
				<img src="../lists/images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
				
			</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="#">
				<img src="../lists/images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="#">
				<img src="../lists/images/album-ok.jpg" />
				<h3>Of The Blue Colour Of The Sky</h3>
				<p>Ok Go</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="#">
				<img src="../lists/images/album-ws.jpg" />
				<h3>Elephant</h3>
				<p>The White Stripes</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="#">
				<img src="../lists/images/album-rh.jpg" />
				<h3>Kid A</h3>
				<p>Radiohead</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="#">
				<img src="../lists/images/album-xx.jpg" />
				<h3>XX</h3>
				<p>XX</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="#">
				<img src="../lists/images/album-mg.jpg" />
				<h3>Congratulations</h3>
				<p>MGMT</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="#">
				<img src="../lists/images/album-ag.jpg" />
				<h3>Ashes Grammar</h3>
				<p>A Sunny Day in Glasgow</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			
			<li><a href="index.html">
				<img src="../lists/images/album-k.jpg" />
				<h3>Hot Fuss</h3>
				<p>Killers</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
			<li><a href="#">	
				<img src="../lists/images/album-af.jpg" />
				<h3>The Suburbs</h3>
				<p>Arcade Fire</p>
				</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
			</a></li>
		</ul>
		


			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">Toolbars</li>
							<li><a href="docs-bars.html">Toolbar basics</a></li>
							<li><a href="docs-headers.html">Header bars</a></li>
							<li><a href="docs-footers.html">Footer bars</a></li>
							<li><a href="docs-navbar.html">Navbars</a></li>
							<li><a href="bars-fixed.html">Fixed positioning</a></li>
							<li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
							<li><a href="bars-themes.html">Theming toolbars</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" data-id="foo1" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="footer-persist-a.html" data-prefetch="true" data-transition="slideup">Info</a></li>
					<li><a href="footer-persist-b.html" data-prefetch="true">Friends</a></li>
					<li><a href="footer-persist-c.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Albums</a></li>
					<li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
				</ul>
			</div><!-- /navbar -->
		</div><!-- /footer -->

		</div><!-- /page -->

		</body>
		</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\footer-persist-d.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Persistent footer D</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
		<h1>Inbox</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div>
	
	<div data-role="content">
		<div class="content-primary">
		<ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search messages...">
			<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
			<li><a href="#">
				<h3>Stephen Weber</h3>
				<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
				<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
				<p class="ui-li-aside"><strong>6:24</strong>PM</p>
			</a></li>
			<li><a href="#">
				<h3>jQuery Team</h3>
				<p><strong>Boston Conference Planning</strong></p>
				<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
				<p class="ui-li-aside"><strong>9:18</strong>AM</p>
			</a></li>
			<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
			<li><a href="#">
				<h3>Avery Walker</h3>
				<p><strong>Re: Dinner Tonight</strong></p>
				<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
				<p class="ui-li-aside"><strong>4:48</strong>PM</p>
			</a></li>
			<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
			<li><a href="#">
				<h3>Amazon.com</h3>
				<p><strong>4-for-3 Books for Kids</strong></p>
				<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
				<p class="ui-li-aside"><strong>12:47</strong>PM</p>
			</a></li>
			<li><a href="#">
				<h3>Mike Taylor</h3>
				<p><strong>Re: This weekend in Maine</strong></p>
				<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
				<p class="ui-li-aside"><strong>6:24</strong>AM</p>
			</a></li>
			<li><a href="#">
				<h3>Redfin</h3>
				<p><strong>Redfin listing updates for today</strong></p>
				<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
				<p class="ui-li-aside"><strong>5:52</strong>AM</p>
			</a></li>
				<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
				<li><a href="index.html">
					<h3>Angela Smith</h3>
					<p><strong>Link Request</strong></p>
					<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
					<p class="ui-li-aside"><strong>6:24</strong>AM</p>
				</a></li>
				<li><a href="index.html">
					<h3>Mike Taylor</h3>
					<p><strong>This weekend in Maine</strong></p>
					<p>Sounds good, let me check into our plans.</p>
					<p class="ui-li-aside"><strong>6:24</strong>AM</p>
				</a></li>
		</ul>

			</div><!--/content-primary -->		

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

						<h3>More in this section</h3>

						<ul data-role="listview" data-theme="c" data-dividertheme="d">

							<li data-role="list-divider">Toolbars</li>
							<li><a href="docs-bars.html">Toolbar basics</a></li>
							<li><a href="docs-headers.html">Header bars</a></li>
							<li><a href="docs-footers.html">Footer bars</a></li>
							<li><a href="docs-navbar.html">Navbars</a></li>
							<li><a href="bars-fixed.html">Fixed positioning</a></li>
							<li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
							<li><a href="bars-themes.html">Theming toolbars</a></li>

						</ul>
				</div>
			</div>		

		</div><!-- /content -->

		<div data-role="footer" data-id="foo1" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="footer-persist-a.html" data-prefetch="true" data-transition="slideup">Info</a></li>
					<li><a href="footer-persist-b.html" data-prefetch="true">Friends</a></li>
					<li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
					<li><a href="footer-persist-d.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Emails</a></li>
				</ul>
			</div><!-- /navbar -->
		</div><!-- /footer -->

		</div><!-- /page -->

		</body>
		</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter18\jquery.mobile-1.1.1\demos\docs\toolbars\index.html
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Toolbars</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile-1.1.1.js"></script>

</head> 
<body> 

	<div data-role="page" class="type-index">

		<div data-role="header" data-theme="f">
		<h1>Toolbars</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
	</div><!-- /header -->

	<div data-role="content">

		<p>Toolbars are used for headers, footers, and utility bars throughout mobile sites and applications. jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios.</p>

			
		<ul data-role="listview" data-inset="true">
			<li><a href="docs-bars.html">Toolbar basics</a></li>
			<li><a href="docs-headers.html">Header bars</a></li>
			<li><a href="docs-footers.html">Footer bars</a></li>
			<li><a href="docs-navbar.html">Navbars</a></li>
			<li><a href="bars-fixed.html">Fixed positioning</a></li>
			<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
			<li><a href="bars-themes.html">Theming toolbars</a></li>
			<!--<li><a href="api-bars.html">API documentation</a></li>-->
		</ul>			

	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter20\ajax.html
<!doctype html>
<html>
<head>
<title>AJAX Test</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="states">
</div>
<script type="text/javascript">
$(document).ready(function() {

$.ajax({
    type: "GET",
    url: "json.php",
    dataType: "json",
    success: showStates
});
function showStates(data,status) {
    $.each(data, function(item) {;
        $("#states").append("<div>" + data[item] + "</div");
    });}


});
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter20\isbn-full.html
<!doctype html>
<html>
<head>
<title>ISBN</title>
</head>
<body>
<div id="data"></div>
<script type="text/javascript">
function readyAJAX() {
    try {
        return new XMLHttpRequest();
    } catch(e) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return "A newer browser is needed.";
            }
        }
    }
}
var requestObj = readyAJAX();
var url = "http://tt/jsbs3e/Chapter20/isbn.php?isbn=9780735624498";

requestObj.open("GET",url,true);
requestObj.send();
requestObj.onreadystatechange = function() {
    if (requestObj.readyState == 4) {
        if (requestObj.status == 200) {
            alert(requestObj.responseText);
        } else {
            alert(requestObj.statusText);
        }
    }
}
</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter20\isbn.html
<!doctype html>
<html>
<head>
<title>ISBN</title>
</head>
<body>
<div id="data"></div>
<script type="text/javascript">
function readyAJAX() {
    try {
        return new XMLHttpRequest();
    } catch(e) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return "A newer browser is needed.";
            }
        }
    }
}

//TODO:  Add code here

</script>
</body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\default.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SplitApp1</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- SplitApp1 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
    </div> -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\bin\Debug\AppX\default.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SplitApp1</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- SplitApp1 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
    </div> -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\bin\Debug\AppX\pages\items\items.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemsPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">SplitApp1</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\bin\Debug\AppX\pages\split\split.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>splitPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/split/split.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/split/split.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-info">
                <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
                <h4 class="item-description" data-win-bind="textContent: description"></h4>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="splitpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <div class="itemlistsection" aria-label="List column">
            <div class="itemlist win-selectionstylefilled" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', swipeBehavior: 'none', tapBehavior: 'toggleSelect' }"></div>
        </div>
        <div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
            <article>
                <header class="header">
                    <div class="text">
                        <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
                        <h4 class="article-subtitle" data-win-bind="textContent: subtitle"></h4>
                    </div>
                    <img class="article-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
                </header>
                <div class="article-content" data-win-bind="innerHTML: content"></div>
            </article>
        </div>
    </div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\pages\items\items.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemsPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">SplitApp1</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter22\SplitApp1\SplitApp1\pages\split\split.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>splitPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/split/split.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/split/split.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-info">
                <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
                <h4 class="item-description" data-win-bind="textContent: description"></h4>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="splitpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <div class="itemlistsection" aria-label="List column">
            <div class="itemlist win-selectionstylefilled" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', swipeBehavior: 'none', tapBehavior: 'toggleSelect' }"></div>
        </div>
        <div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
            <article>
                <header class="header">
                    <div class="text">
                        <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
                        <h4 class="article-subtitle" data-win-bind="textContent: subtitle"></h4>
                    </div>
                    <img class="article-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
                </header>
                <div class="article-content" data-win-bind="innerHTML: content"></div>
            </article>
        </div>
    </div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\default.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MyWX</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- MyWX references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
    </div> -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\bin\Debug\AppX\default.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MyWX</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- MyWX references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
    </div> -->
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\bin\Debug\AppX\pages\items\items.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemsPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
          <img class="item-image" src="#" data-win-bind="src: wxImage; alt: title" />
             <h3 id="summary" data-win-bind="textContent: summary"></h3>
            <div class="item-overlay">
                <h3 id="title" data-win-bind="textContent: title"></h3>
               
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">MyWX</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\bin\Debug\AppX\pages\split\split.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>splitPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/split/split.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/split/split.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: wxImage; alt: title" />
            <div class="item-info">
                <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6>
                <h4 class="item-description" data-win-bind="textContent: summary"></h4>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="splitpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <div class="itemlistsection" aria-label="List column">
            <div class="itemlist win-selectionstylefilled" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', swipeBehavior: 'none', tapBehavior: 'toggleSelect' }"></div>
        </div>
        <div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
            <article>
                <header class="header">
                   <!-- <div class="text">
                        <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
                        <h4 class="article-subtitle" data-win-bind="textContent: updated"></h4>
                    </div>
                    -->
                    <img class="article-image" src="#" data-win-bind="src: wxImage; alt: title" />
                </header>
               Temperature: <div class="article-content" data-win-bind="innerHTML: temp"></div>
               Wind: <div class="article-content" data-win-bind="innerHTML: wind"></div>
            </article>
        </div>
    </div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\pages\items\items.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemsPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
          <img class="item-image" src="#" data-win-bind="src: wxImage; alt: title" />
             <h3 id="summary" data-win-bind="textContent: summary"></h3>
            <div class="item-overlay">
                <h3 id="title" data-win-bind="textContent: title"></h3>
               
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">MyWX</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\OneDrive\Dokumente\JavaScript Step by Step, 3rd EditionCode\Chapter23\MyWX\MyWX\pages\split\split.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>splitPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/split/split.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/split/split.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: wxImage; alt: title" />
            <div class="item-info">
                <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6>
                <h4 class="item-description" data-win-bind="textContent: summary"></h4>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="splitpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <div class="itemlistsection" aria-label="List column">
            <div class="itemlist win-selectionstylefilled" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', swipeBehavior: 'none', tapBehavior: 'toggleSelect' }"></div>
        </div>
        <div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
            <article>
                <header class="header">
                   <!-- <div class="text">
                        <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
                        <h4 class="article-subtitle" data-win-bind="textContent: updated"></h4>
                    </div>
                    -->
                    <img class="article-image" src="#" data-win-bind="src: wxImage; alt: title" />
                </header>
               Temperature: <div class="article-content" data-win-bind="innerHTML: temp"></div>
               Wind: <div class="article-content" data-win-bind="innerHTML: wind"></div>
            </article>
        </div>
    </div>
</body>
</html>



#########################
#########################
#########################