jquery / jquery-ui

Source
Commits
Network (27)
Graphs
Tree: 8f680fb

The official jQuery user interface library. — Read more

This URL has Read+Write access

Widgets in Dialog compound visual test: Added more widgets and linked 
Slider with Progressbar

jzaefferer (author)

Sat Mar 20 13:51:12 -0700 2010

commit 8f680fb347add9f14999a8f5c8e328c4b9a8fe1c
tree ee71baf9d8debf1bc0741502273a7e5b62d186e6
parent f4fd024cdeb5be1715bb45aa44b16044f7c21b67

tests/visual/compound/widgets_in_dialog.html

73 ••••

tests/visual/compound/widgets_in_dialog.html

View file @ 8f680fb

@@ -12,35 +12,88 @@
   <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
-  <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script>
-  <script type="text/javascript" src="../../../ui/jquery.ui.datepicker.js"></script>
+  <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
-  <script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script>
-  <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
+  <script type="text/javascript" src="../../../ui/jquery.ui.datepicker.js"></script>
+  <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.progressbar.js"></script>
   <script type="text/javascript" src="../../../ui/jquery.ui.slider.js"></script>
+  <script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script>
   <script type="text/javascript">
   $(function() {
-    $('#datepicker').datepicker();
+    $("#accordion").accordion();
     $("#autocomplete").autocomplete({
       source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]
     });
-    $("button").button();
-    
-    // TODO add more widgets
+    $("button").button().click(function() {
+      $("#dialog2").dialog("open");
+    });
+    $("#datepicker").datepicker();
+    $("#progressbar").progressbar({
+      value: 30
+    });
+    $("#slider").slider({
+      // should be animated
+      animate: true,
+      value: 30,
+      slide: function(event, ui) {
+        $("#progress").val(ui.value);
+        $("#progressbar").progressbar("option", "value", ui.value);
+      }
+    });
+    $("#tabs").tabs();
     
-    $('#dialog').dialog();
+    $("#dialog").dialog();
+    $("#dialog2").dialog({
+      autoOpen: false,
+      width: 100,
+      height: 75,
+      modal: true
+    })
   });
   </script>
 </head>
 <body>
 
 <div id="dialog">
-  <button>A Button</button>
+  <div id="accordion">
+    <h3><a href="#">Accordion Header 1</a></h3>
+    <div>
+      Accordion Content 1
+    </div>
+    <h3><a href="#">Accordion Header 2</a></h3>
+    <div>
+      Accordion Content 2
+    </div>
+    <h3><a href="#">Accordion Header 3</a></h3>
+    <div>
+      Accordion Content 3
+    </div>
+  </div>
   <input id="autocomplete">
+  <button>A Button</button>
   <input id="datepicker">
   <button>Another button</button>
+  <div>
+    <label for="progress">Progress: <input id="progress" /></label>
+  </div>
+  <div id="progressbar">
+  </div>
+  <div id="slider"></div>
+  <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>
+</div>
+<div id="dialog2">
+  Yay, another dialog.
 </div>
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae urna quam. Fusce adipiscing erat eget magna malesuada vel mollis ligula ullamcorper. Donec pulvinar, libero et vehicula facilisis, odio orci fringilla magna, non ultricies ipsum justo a tellus. Proin facilisis magna vitae quam vestibulum tempor. Aenean semper placerat posuere. In nisi diam, ullamcorper sit amet viverra sed, pretium sed neque. Sed posuere vulputate mauris vitae placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam in odio elit, non tempor felis. Integer non iaculis ante. Sed erat mauris, aliquam nec consequat id, congue id libero. Maecenas elementum gravida tincidunt. Suspendisse lacinia enim sit amet nulla cursus pulvinar.

0 notes on commit `8f680fb` Show line notes below

Please log in to comment.

...	...	@@ -12,35 +12,88 @@
12	12	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
13	13	<script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script>
14	14	<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
15		- <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script>
16		- <script type="text/javascript" src="../../../ui/jquery.ui.datepicker.js"></script>
	15	+ <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
17	16	<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
18	17	<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
19		- <script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script>
20		- <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
	18	+ <script type="text/javascript" src="../../../ui/jquery.ui.datepicker.js"></script>
	19	+ <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script>
21	20	<script type="text/javascript" src="../../../ui/jquery.ui.progressbar.js"></script>
22	21	<script type="text/javascript" src="../../../ui/jquery.ui.slider.js"></script>
	22	+ <script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script>
23	23	<script type="text/javascript">
24	24	$(function() {
25		- $('#datepicker').datepicker();
	25	+ $("#accordion").accordion();
26	26	$("#autocomplete").autocomplete({
27	27	source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]
28	28	});
29		- $("button").button();
30		-
31		- // TODO add more widgets
	29	+ $("button").button().click(function() {
	30	+ $("#dialog2").dialog("open");
	31	+ });
	32	+ $("#datepicker").datepicker();
	33	+ $("#progressbar").progressbar({
	34	+ value: 30
	35	+ });
	36	+ $("#slider").slider({
	37	+ // should be animated
	38	+ animate: true,
	39	+ value: 30,
	40	+ slide: function(event, ui) {
	41	+ $("#progress").val(ui.value);
	42	+ $("#progressbar").progressbar("option", "value", ui.value);
	43	+ }
	44	+ });
	45	+ $("#tabs").tabs();
32	46
33		- $('#dialog').dialog();
	47	+ $("#dialog").dialog();
	48	+ $("#dialog2").dialog({
	49	+ autoOpen: false,
	50	+ width: 100,
	51	+ height: 75,
	52	+ modal: true
	53	+ })
34	54	});
35	55	</script>
36	56	</head>
37	57	<body>
38	58
39	59	<div id="dialog">
40		- <button>A Button</button>
	60	+ <div id="accordion">
	61	+ <h3><a href="#">Accordion Header 1</a></h3>
	62	+ <div>
	63	+ Accordion Content 1
	64	+ </div>
	65	+ <h3><a href="#">Accordion Header 2</a></h3>
	66	+ <div>
	67	+ Accordion Content 2
	68	+ </div>
	69	+ <h3><a href="#">Accordion Header 3</a></h3>
	70	+ <div>
	71	+ Accordion Content 3
	72	+ </div>
	73	+ </div>
41	74	<input id="autocomplete">
	75	+ <button>A Button</button>
42	76	<input id="datepicker">
43	77	<button>Another button</button>
	78	+ <div>
	79	+ <label for="progress">Progress: <input id="progress" /></label>
	80	+ </div>
	81	+ <div id="progressbar">
	82	+ </div>
	83	+ <div id="slider"></div>
	84	+ <div id="tabs">
	85	+ <ul>
	86	+ <li><a href="#tabs-1">First</a></li>
	87	+ <li><a href="#tabs-2">Second</a></li>
	88	+ <li><a href="#tabs-3">Third</a></li>
	89	+ </ul>
	90	+ <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>
	91	+ <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>
	92	+ <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>
	93	+ </div>
	94	+</div>
	95	+<div id="dialog2">
	96	+ Yay, another dialog.
44	97	</div>
45	98
46	99	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae urna quam. Fusce adipiscing erat eget magna malesuada vel mollis ligula ullamcorper. Donec pulvinar, libero et vehicula facilisis, odio orci fringilla magna, non ultricies ipsum justo a tellus. Proin facilisis magna vitae quam vestibulum tempor. Aenean semper placerat posuere. In nisi diam, ullamcorper sit amet viverra sed, pretium sed neque. Sed posuere vulputate mauris vitae placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam in odio elit, non tempor felis. Integer non iaculis ante. Sed erat mauris, aliquam nec consequat id, congue id libero. Maecenas elementum gravida tincidunt. Suspendisse lacinia enim sit amet nulla cursus pulvinar.

jquery / jquery-ui

0 notes on commit 8f680fb Show line notes below

0 notes on commit `8f680fb` Show line notes below