color: white; border: 1px solid gray; text-align: center; font-weight: bold; }\r
\r
#accordion, #draggable, #droppable,\r
-#resizable, #selectable, #slider, #sortable, #tabs {\r
+#resizable, #selectable, #sortable, #tabs {\r
margin: 10px;\r
width: 190px; height: 180px;\r
text-align: center;\r
.ui-dialog .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: 0px; bottom: 0px; background: gray !important; border: none !important; }\r
.ui-dialog .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 29px; left: 0px; top: 0px; background: gray !important; border: none !important; }\r
.ui-dialog .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 29px; right: 0px; top: 0px; background: gray !important; border: none !important; }\r
+\r
+.ui-slider { margin: 10px; background: #FF9C08; height: 15px; }\r
+.ui-slider-handle { width: 10px; height: 15px; background: white; }\r
$("#draggable").draggable();\r
$("#resizable").resizable();\r
$("#selectable").selectable();\r
+ $("#slider").slider();\r
$("#sortable").sortable();\r
});\r
</script>\r
<div>9</div>\r
</div>\r
</li>\r
+<li>\r
+ Slider\r
+ <div id="slider"></div>\r
+</li>\r
<li>\r
Sortable\r
<div id="sortable">\r
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>Simple Slider</title>\r
+ <link rel="stylesheet" href="all.css" type="text/css" media="screen">\r
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.slider.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#slider").slider();\r
+ });\r
+ </script>\r
+</head>\r
+\r
+<body>\r
+\r
+<ul class="plugins">\r
+<li>\r
+ Slider\r
+ <div id="slider"></div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r
projects / jquery-ui.git / commitdiff