jQuery UI与plugin开发实战

03AccordionjQueryUIplugin54040302010605AccordionaccordionUIcontainersaccordionUIaccordionjQueryUIplugin550403-1020106053-13-1!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//EN=enheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8titlejQueryUIAccordionWidgetExample1/title/headbodyulid=myAccordionliahref=#Header1/adivWow,lookatallthiscontentthatcanbeshownorhiddenwithasimpleclick!/div/liliahref=#Header2/adivLoremipsumdolorsitamet,/div/liliahref=#Header3/adivDonecatdolorac../div/li/ul56040302010605Accordionscripttype=text/javascriptsrc=jqueryui/jquery-1.2.6.js/scriptscripttype=text/javascriptsrc=jqueryui/ui/ui.core.js/scriptscripttype=text/javascriptsrc=jqueryui/ui/ui.accordion.js/scriptscripttype=text/javascript//functiontoexecutewhendocready$(function(){//turnspecifiedelementintoanaccordion$(#myAccordion).accordion();});/script/body/htmlaccordion1.htmljqueryui3-2HTMLlistJavaScriptjQueryjquery-1.2.6.jsUIui.core.jsui.accordion.jsjQueryUIplugin570403-202010605UIjQueryUIscriptscriptuljQuery$$(document).ready(function(){})ID$(#myAccordion)accordion()diva#hrefhref3-2100%widgetstylesheetjQueryUIfloraThemeRollerfloraaccordion1.htmlheadlink58040302010605Accordionlinkrel=stylesheettype=text/csshref=jqueryui/themes/flora/flora.accordion.cssaccordion2.htmljqueryui3-3CSSliFirefoxFirebugDOMun-minifiedFirebugjQueryUIplugin590403-2020106053-4Firebugaccordion2.html!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//EN=enheadlinkrel=stylesheettype=text/csshref=styles/accordionTheme.cssmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8titlejQueryUIAccordionWidgetExample3/title/headbodyulid=myAccordionspanclass=cornertopLeft/spanspanclass=cornertopRight/spanspanclass=cornerbottomLeft/spanspanclass=cornerbottomRight/spanliahref=#Header1/adivWow,lookatallthiscontentthatcanbeshownorhiddenwithasimpleclick!/div/liliahref=#Header2/adivLoremipsumdolorsitamet,./div/liliahref=#Header3/adivDonecatdoloracmetus../div/li60040302010605Accordion/ulscripttype=text/javascriptsrc=jqueryui/jquery-1.2.6.js/scriptscripttype=text/javascriptsrc=jqueryui/ui/ui.core.js/scriptscripttype=text/javascriptsrc=jqueryui/ui/ui.accordion.js/scriptscripttype=text/javascript//functiontoexecutewhendocready$(function(){//turnspecifiedelementintoanaccordion$(#myAccordion).accordion();});/script/body/htmlaccordion3.htmljqueryuiui-accordionCSSui-accordion-header#myAccordion{width:200px;border:2pxsolid#000000;position:relative;list-style-type:none;padding-left:0;}.ui-accordion-header{text-decoration:none;font-weight:bold;color:#000000;display:block;width:100%;text-align:center;}.ui-accordiondivdiv{jQueryUIplugin610403-202010605font-size:90%;}.ui-accordiona{color:#ffffff;background:url(../img/accordion/header-sprite.gif)repeat-x0px0px;}.ui-accordiona.selected{background:url(../img/accordion/header-sprite.gif)repeat-x0px-22px;}.ui-accordiona:hover{background:url(../img/accordion/header-sprite.gif)repeat-x0px-44px;}/*containerroundedcorners*/.corner{position:absolute;width:12px;height:13px;background:url(../img/accordion/corner-sprite.gif)no-repeat;}.topLeft{top:-2px;left:-2px;background-position:0px0px;}.topRight{top:-2px;right:-2px;background-position:0px-13px;}.bottomRight{bottom:-2px;right:-2px;background-position:0px-26px;}.bottomLeft{bottom:-2px;left:-2px;background-position:0px-39px;}62040302010605AccordionaccordionTheme.cssstylesaccordion3.htmlimgaccordion3-53-3PropertyactivefirstchildalwaysOpentrueanimatedslideautoHeighttrueclearStylefalsejQueryUI1.7.1jQueryUIplugin630403-302010605eventclickfillSpacefalseheaderanavigationfalsenavigationFilterlocation.hrefhreflocation.hrefselectedClassselectedTipjQueryUIjQueryUIAPI!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//EN=enheadlinkrel=stylesheettype=text/csshref=styles/accordionTheme.cssmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8titlejQueryUIAccordionWidgetExample4/title/headbodydivid=myAccordionspanclass=cornertopLeft/spanspanclass=cornertopRight/spanjQueryUI1.7.164040302010605Accordionspanclass=cornerbottomLeft/spanspanclass=cornerbottomRight/spandivahref=#Header1/adivWow,lookatallthis../div/divdivahref=#Header2/adivLoremipsumdolorsit./div/divdivahref=#Header3/adivDonecatdolorac./div/div/divscripttype=text/javascriptsrc=jqueryui/jquery-1.2.6.js/scriptscripttype=text/javascriptsrc=jqueryui/ui/ui.core.js/scriptscripttype=text/javascriptsrc=jqueryui/ui/ui.accordion.js/scriptscripttype=text/javascript//functiontoexecutewhendocready$(function(){//settheeventpropertyvaraccOpts={event:mouseover}//turnspecifiedelementintoanaccordion$(#myAccordion).accordion(accOpts);}