7 | | Following is my test case: |
8 | | |
9 | | |
10 | | {{{ |
11 | | <!DOCTYPE HTML> |
12 | | <html lang="en"><head> |
13 | | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
14 | | <meta charset="utf-8"> |
15 | | <title>jQuery UI Accordion - Test Case</title> |
16 | | <link rel="stylesheet" href="default_files/jquery.css"> |
17 | | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> |
18 | | <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> |
19 | | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css"> |
20 | | <script> |
21 | | $(document).ready(function() { |
22 | | $( "#accordion" ).accordion(); |
23 | | $("#readEvent").bind('click', function (){ |
24 | | var event = $( "#accordion" ).accordion( "option", "event" ); |
25 | | $("#eventStatus").text(event); |
26 | | }); |
27 | | $("#changeEvent").bind('click', function (){ |
28 | | $( "#accordion" ).accordion( "option", "event", 'mouseover' ); |
29 | | alert("Change event to " + $( "#accordion" ).accordion( "option", "event" )); |
30 | | }); |
31 | | |
32 | | }); |
33 | | </script> |
34 | | <script> |
35 | | function showEventStatus(){ |
36 | | //var event = $( "#accordion" ).accordion( "option", "event" ); |
37 | | //$("#eventStatus").text(event); |
38 | | alert('Show'); |
39 | | } |
40 | | function changeEvent(){ |
41 | | //$( "#accordion" ).accordion( "option", "event", 'mouseover' ); |
42 | | alert('Change'); |
43 | | } |
44 | | |
45 | | |
46 | | </script> |
47 | | </head><body> |
48 | | |
49 | | <div class="demo"> |
50 | | |
51 | | <div id="accordion"> |
52 | | <h3><a href="#">Section 1</a></h3> |
53 | | <div> |
54 | | Section 1 content |
55 | | </div> |
56 | | <h3><a href="#">Section 2</a></h3> |
57 | | <div> |
58 | | Section 2 content |
59 | | </div> |
60 | | <h3><a href="#">Section 3</a></h3> |
61 | | <div> |
62 | | Section 3 content |
63 | | </div> |
64 | | </div> |
65 | | |
66 | | </div> |
67 | | |
68 | | </div> |
69 | | |
70 | | <div class="demo-description"> |
71 | | <p> |
72 | | <div id="changeEvent">Change Event</div> |
73 | | </p> |
74 | | <p> |
75 | | <div id="readEvent">Read Event</div> |
76 | | </p> |
77 | | <p id="eventStatus"> |
78 | | Display event Status here |
79 | | </p> |
80 | | </div> |
81 | | |
82 | | </body></html> |
83 | | }}} |
| 7 | [http://jsfiddle.net/ubMrz/ test case] |