The icons used for the open and closed accordions can be any of the standard icons in the css framework or even a custom css class you create with an icon background image. For this example, we're using the arrow in a circle icons: -
+
icons: {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"}
diff --git a/demos/datepicker/inline.html b/demos/datepicker/inline.html
index 2ff26e32e..8e7f2d5c3 100644
--- a/demos/datepicker/inline.html
+++ b/demos/datepicker/inline.html
@@ -1,25 +1,25 @@
-
-
-
- jQuery UI Datepicker - Inline Demo
-
-
-
-
-
-
-
-
+
+
+
+ jQuery UI Datepicker - Inline Demo
+
+
+
+
+
+
+
+
+
+
+
+
+Date:
-
-
-
-Date:
-
@@ -28,7 +28,7 @@ Date:
This is an example of an inline date picker that is embedded in the page instead of opening in an overlay. This is done by calling .datepicker() in a div instead of an input.
-
-
-
-
+
+
+
+
diff --git a/demos/demos.css b/demos/demos.css
index 250c875fc..4541b8adf 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -110,7 +110,7 @@ body {
border-color: #BBBBBB;
}
-/* new styles for demo pages, added by Filament 12.29.08
+/* new styles for demo pages, added by Filament 12.29.08
eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts
*/
@@ -132,16 +132,16 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
#demo-config-menu li { font-size:11px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
-#demo-config-menu li a:link,
+#demo-config-menu li a:link,
#demo-config-menu li a:visited { display:block; padding:2px 8px 3px; border-bottom:1px dotted #b3b3b3; }
-#demo-config-menu li a:hover,
+#demo-config-menu li a:hover,
#demo-config-menu li a:active { background-color:#f6f6f6; }
#demo-config-menu li.demo-config-on { background: url(images/demo-config-on-tile.gif) repeat-x left center; }
-#demo-config-menu li.demo-config-on a:link,
-#demo-config-menu li.demo-config-on a:visited,
-#demo-config-menu li.demo-config-on a:hover,
+#demo-config-menu li.demo-config-on a:link,
+#demo-config-menu li.demo-config-on a:visited,
+#demo-config-menu li.demo-config-on a:hover,
#demo-config-menu li.demo-config-on a:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; }
#demo-source, #demo-notes {
@@ -168,13 +168,13 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
#demo-source a.source-closed:hover,
#demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); }
-div.demo {
- padding:12px;
+div.demo {
+ padding:12px;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
-div.demo-description {
- padding:12px;
+div.demo-description {
+ padding:12px;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
font-size: 1.3em;
line-height: 1.4em;
diff --git a/demos/dialog/default.html b/demos/dialog/default.html
index ebef1426e..de5570f54 100644
--- a/demos/dialog/default.html
+++ b/demos/dialog/default.html
@@ -22,7 +22,7 @@
This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
-
+
Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html
index a06451b5e..84e998e43 100644
--- a/demos/dialog/modal.html
+++ b/demos/dialog/modal.html
@@ -1,36 +1,36 @@
-
-
-
- jQuery UI Dialog - Modal Demo
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
+ });
+ });
+
+
+
+
Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.
-
+
Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
@@ -55,7 +55,7 @@
This is identical to the default dialog except a semi-transparent overlay layer is added as an option to make this look more modal and dim out the page content behind it to bring the user's attention to the dialog.
The dialog window can be moved, resized and closed with the 'x' icon.
-
-
-
-
+
+
+