05 01 accordion UI containers 03 Accordion accordion UI accordion 54

Size: px

Start display at page:

Download "05 01 accordion UI containers 03 Accordion accordion UI accordion 54"

右磋陈
5 years ago
Views:

1 jquery UI plugin Accordion

2 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.

3 05 jquery UI plugin 3-1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 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>

05 01 03 <script type="text/javascript" src="jqueryui/jquery-1.2.6.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.

4 <script type="text/javascript" src="jqueryui/jquery 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 js UI ui.core.js ui.accordion.js 56

5 05 jquery UI plugin jquery UI script <script> <ul> jquery $ $(document).ready(function(){) ID $("#myaccordion") accordion() <div> <a> # href href UI % widget stylesheet jquery UI flora Theme Roller flora accordion1.html <head> <link> 57

6 05 01 <link rel="stylesheet" type="text/css" href="jqueryui/themes/flora/flora. accordion.css"> accordion2.html jqueryui Accordion CSS <li> Firefox Firebug DOM un-minified Firebug 58

7 05 jquery UI plugin accordion2.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 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

8 </ul> <script type="text/javascript" src="jqueryui/jquery 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

9 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;

10 05 01 accordiontheme.css styles accordion3.html img accordion 03 Accordion Property active first child alwaysopen true animated "slide" autoheight true clearstyle false jquery UI

11 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 self- explanatory accordion3.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 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

12 <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 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

13 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" " 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 js"></script> <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui/ui/ui.accordion.js"></script> type="text/javascript"> <script 65

14 <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.

01//EN" "http://www.w3.org/tr/ html4/strict.

15 05 jquery UI plugin 3-6 alwaysopen false autoheight true false 3-7 alwaysopen false autoheight accordion6.html fillspace autoheight clearstyle autoheight navigation accordion6. html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 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

16 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 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

17 05 jquery UI plugin href navigation href href URL 3-4 destroy destroy accordion7.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 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

18 </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 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

19 05 jquery UI plugin accordion8.html enable disable destroy accordion8.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 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 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() { ID //turn specified element into an accordion 71

20 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

21 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 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() { HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!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

22 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

23 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 disabled state */ /* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 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

24 </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 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

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05