jquery UI plugin Accordion
05 01 accordion UI containers 03 Accordion accordion UI accordion 54
05 jquery UI plugin 3-1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery UI Accordion Widget Example 1</title> </head> <body> <ul id="myaccordion"> <li><a href="#">header 1</a> <div>wow, look at all this content that can be shown or hidden with a simple click! </li> <li><a href="#">header 2</a><div>Lorem ipsum dolor sit amet, </li> <li><a href="#">header 3</a><div>Donec at dolor ac.. </li> </ul> 01 03-1 3-1 55
05 01 03 <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> <script type="text/javascript"> //function to execute when doc ready $(function() { //turn specified element into an accordion $("#myaccordion").accordion(); </script> </body> </html> accordion1.html jqueryui Accordion 3-2 HTML list JavaScript jquery jquery-1.2.6.js UI ui.core.js ui.accordion.js 56
05 jquery UI plugin jquery UI script <script> <ul> jquery $ $(document).ready(function(){) ID $("#myaccordion") accordion() <div> <a> # href href 01 03-2 UI 3-2 100% widget stylesheet jquery UI flora Theme Roller flora accordion1.html <head> <link> 57
05 01 <link rel="stylesheet" type="text/css" href="jqueryui/themes/flora/flora. accordion.css"> accordion2.html jqueryui 03 3-3 Accordion CSS <li> Firefox Firebug DOM un-minified Firebug 58
05 jquery UI plugin 01 03-2 accordion2.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles/accordiontheme.css"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery UI Accordion Widget Example 3</title> </head> <body> <ul id="myaccordion"> <span class="corner topleft"></span><span class="corner topright"></span> <span class="corner bottomleft"></span><span class="corner bottomright"> </span> <li><a href="#">header 1</a><div>Wow, look at all this content that can be shown or hidden with a simple click!</li> <li><a href="#">header 2</a><div>Lorem ipsum dolor sit amet,.</li> <li><a href="#">header 3</a><div>Donec at dolor ac metus..</li> 3-4 Firebug 59
05 01 03 </ul> <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> <script type="text/javascript"> //function to execute when doc ready $(function() { //turn specified element into an accordion $("#myaccordion").accordion(); </script> </body> </html> Accordion accordion3.html jqueryui uiaccordion CSS ui-accordion-header #myaccordion { width:200px; border:2px solid #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-accordion div div { 60
05 jquery UI plugin font-size:90%;.ui-accordion a { color:#ffffff; background:url(../img/accordion/header-sprite.gif) repeat-x 0px 0px;.ui-accordion a.selected { background:url(../img/accordion/header-sprite.gif) repeat-x 0px -22px;.ui-accordion a:hover { background:url(../img/accordion/header-sprite.gif) repeat-x 0px -44px; /* container rounded corners */.corner { position:absolute; width:12px; height:13px; background:url(../img/accordion/corner-sprite.gif) no-repeat;.topleft { top:-2px; left:-2px; background-position:0px 0px;.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; 01 03-2 61
05 01 accordiontheme.css styles accordion3.html img accordion 03 Accordion 3-3 3-5 Property active first child alwaysopen true animated "slide" autoheight true clearstyle false jquery UI 1.7.1 62
05 jquery UI plugin event "click" fillspace false header "a" navigation false navigationfilter location.href href location.href selectedclass "selected" Tip jquery UI jquery UI API http://docs.jquery.com/ui/ self- explanatory accordion3.html 01 03-3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles/accordiontheme.css"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery UI Accordion Widget Example 4</title> </head> <body> <div id="myaccordion"> <span class="corner topleft"></span><span class="corner topright"></span> jquery UI 1.7.1 63
05 01 03 <span class="corner bottomleft"></span><span class="corner bottomright"> </span> <div><a href="#">header 1</a><div>Wow, look at all this.. <div><a href="#">header 2</a><div>Lorem ipsum dolor sit. <div><a href="#">header 3</a><div>Donec at dolor ac. <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> <script type="text/javascript"> //function to execute when doc ready $(function() { //set the event property var accopts = { event:"mouseover" Accordion //turn specified element into an accordion $("#myaccordion").accordion(accopts); </script> </body> </html> accopts accordion() event accordion4.html accordion4inline.htm 64
05 jquery UI plugin //function to execute when doc ready $(function() { //turn specified element into an accordion $("#myaccordion").accordion({ event:"mouseover" </script> accordio4n.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles/accordiontheme.css"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery UI Accordion Widget Example 5</title> </head> <body> <div id="myaccordion"> <span class="corner topleft"></span><span class="corner topright"></span> <span class="corner bottomleft"></span><span class="corner bottomright"> </span> <div><a id="header1" href="#">header 1</a><div>Wow, look at all this. <div><a id="header2" href="#">header 2</a><div>Lorem ipsum dolor <div><a id="header3" href="#">header 3</a><div>Donec at dolor ac <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> 01 03-3 type="text/javascript"> <script 65
05 01 03 <script type="text/javascript"> //function to execute when doc ready $(function() { //configure accordion var accopts = { event:"mouseover", active:"#header3" ; //turn specified element into an accordion $("#myaccordion").accordion(accopts); </script> </body> </html> Accordion active HTML id accordion5.html //configure accordion var accopts = { event:"mouseover", active:"#header3", alwaysopen:false, autoheight:false 66
05 jquery UI plugin 3-6 alwaysopen false autoheight true false 3-7 alwaysopen false autoheight 01 03-3 accordion6.html fillspace autoheight clearstyle autoheight navigation accordion6. html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles/accordiontheme.css"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery UI Accordion Widget Example 7</title> 67
05 01 03 Accordion </head> <body> <div id="myaccordion"> <span class="corner topleft"></span><span class="corner topright"></span> <span class="corner bottomleft"></span><span class="corner bottomright"> </span> <div><a id="header1" href="#1">header 1</a><div>Wow, look at all. <div><a id="header2" href="#2">header 2</a><div>Lorem ipsum.. <div><a id="header3" href="#3">header 3</a><div>Donec at dolor ac... <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> <script type="text/javascript"> //function to execute when doc ready $(function() { //configure accordion var accopts = { event:"mouseover", active:"#header3", alwaysopen:false, autoheight:false, navigation:true //turn specified element into an accordion $("#myaccordion").accordion(accopts); </script> </body> </html> 68
05 jquery UI plugin href navigation href href URL 3-4 destroy destroy 01 03-4 accordion7.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles/accordiontheme.css"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery UI Accordion Widget Example 8</title> </head> <body> <div id="myaccordion"> <span class="corner topleft"></span><span class="corner topright"></span> <span class="corner bottomleft"></span><span class="corner bottomright"> 69
05 01 03 </span> <div><a href="#">header 1</a><div>Wow, look at all this <div><a href="#">header 2</a><div>Lorem ipsum dolor <div><a href="#">header 3</a><div>Donec at dolor <button id="accordionkiller">kill it!</button> <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> <script type="text/javascript"> //function to execute when doc ready $(function() { //turn specified element into an accordion $("#myaccordion").accordion(); //attach click hander to button $("#accordionkiller").click(function() { Accordion //destroy the accordion $("#myaccordion").accordion("destroy"); </script> </body> </html> <body> <button> <script> <button> jquery click() accordian() destroy 70
05 jquery UI plugin accordion8.html enable disable destroy accordion8.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles/accordiontheme.css"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery UI Accordion Widget Example 9</title> </head> <body> <div id="myaccordion"> <span class="corner topleft"></span><span class="corner topright"></span> <span class="corner bottomleft"></span><span class="corner bottomright"> </span> <div><a href="#">header 1</a><div>Wow, look at all this <div><a href="#">header 2</a><div>Lorem ipsum dolor sit... <div><a href="#">header 3</a><div>Donec at dolor ac.. <button id="enable">enable!</button><button id="disable">disable!</button> <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> <script type="text/javascript"> //function to execute when doc ready $(function() { 01 03-4 ID //turn specified element into an accordion 71
05 01 03 Accordion $("#myaccordion").accordion(); //add click handler for enable button $("#enable").click(function() { //enable the accordion $("#myaccordion").accordion("enable"); //add click handler for disable button $("#disable").click(function() { //disable the accordion $("#myaccordion").accordion("disable"); </script> </body> </html> destroy accordion() enable disable accordion9.html Enable! 72
05 jquery UI plugin html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles/accordiontheme2.css"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery UI Accordion Widget Example 10</title> </head> <body> <div id="myaccordion"> <span class="corner topleft"></span><span class="corner topright"></span> <span class="corner bottomleft"></span><span class="corner bottomright"> </span> <div><a href="#">header 1</a><div>Wow, look at all this. <div><a href="#">header 2</a><div>Lorem ipsum dolor <div><a href="#">header 3</a><div>Donec at dolor ac <button id="enable">enable!</button><button id="disable">disable!</button> <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> <script type="text/javascript"> //function to execute when doc ready $(function() { 01 03-4 HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ <!DOCTYPE //turn specified element into an accordion $("#myaccordion").accordion().addclass("enabled"); //add click handler for enable button $("#enable").click(function() { //alert if already enabled, enable and change classes if not ($("#myaccordion").hasclass("enabled"))? alert ("Accordion already enabled!") : $("#myaccordion"). accordion("enable").addclass("enabled"). removeclass("disabled") ; 73
05 01 //add click handler for disable button $("#disable").click(function() { 03 </script> </body> </html> //alert if already disabled, disable and change classes if not ($("#myaccordion").hasclass("disabled"))? alert ("Accordion already disabled!") : $("#myaccordion"). accordion("disable").addclass("disabled"). removeclass("enabled") ; Enable! Disable! enabled disabled Accordion jquery addclass() enable JavaScript ternary enable jquery hasclass() alert addclass() removeclass() Enable! accordion10.html disabled accordiontheme.css 74
05 jquery UI plugin.disabled a { background:url(../img/accordion/disabled.gif) repeat-x 0px 0px; cursor:default;.disabled a.selected { background:url(../img/accordion/disabled.gif) repeat-x 0px 0px; cursor:default;.disabled a:hover { background:url(../img/accordion/disabled.gif) repeat-x 0px 0px; cursor:default; accordiontheme2.css <head> disable! selected hover activate accordion10.html 01 03-4 disabled state */ /* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles/accordiontheme2.css"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery UI Accordion Widget Example 11</title> </head> <body> <div id="myaccordion"> <span class="corner topleft"></span><span class="corner topright"></span> <span class="corner bottomleft"></span><span class="corner bottomright"> 75
05 01 03 </span> <div><a href="#">header 1</a><div>Wow, look at all this. <div><a href="#">header 2</a><div>Lorem ipsum dolor.. <div><a href="#">header 3</a><div>Donec at dolor ac. <p>choose a drawer to open</p> <input id="choice" type="text"><button id="activate">activate</button> <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> <script type="text/javascript"> //function to execute when doc ready $(function() { //turn specified element into an accordion $("#myaccordion").accordion(); //add click handler for activate button $("#activate").click(function() { Accordion //get the value from the text box var choice = $("#choice").val(); //open the chosen drawer $("#myaccordion").accordion("activate", choice - 1); </script> </body> </html> accordion11.html activate destroy accordion() activate JavaScript activate 1 76