--- /dev/null
+\r
+body { margin: 0; padding: 20px; background: black; }\r
+ul.plugins { margin: 0; padding: 0; }\r
+ul.plugins li { margin: 0 12px 12px 0;\r
+ list-style-type: none; width: 210px; height: 220px; float: left;\r
+ color: white; border: 1px solid gray; text-align: center; font-weight: bold; }\r
+\r
+#accordion, #draggable, #droppable,\r
+#resizable, #selectable, #slider, #sortable, #tabs {\r
+ margin: 10px;\r
+ width: 190px; height: 180px;\r
+ text-align: center;\r
+ background: #FF9C08; color: white; font-weight: bold;\r
+}\r
+#selectable div {\r
+ width: 45px; height: 45px; float: left; margin: 6px;\r
+ border: 1px solid white;\r
+}\r
+#selectable .ui-selecting {\r
+ background: gray;\r
+}\r
+#selectable .ui-selected {\r
+ background: black;\r
+}\r
+#sortable div {\r
+ width: 45px; height: 45px; float: left; margin: 6px;\r
+ border: 1px solid white;\r
+}\r
+#sortable .ui-sortable-helper {\r
+ background: black;\r
+}\r
+\r
+.ui-dialog { background-color: #FF9C08; }\r
+.ui-dialog .ui-dialog-titlebar { background: black; padding: 0px; height: 28px; _height: 29px; }\r
+.ui-dialog.ui-draggable .ui-dialog-titlebar { cursor: move; }\r
+\r
+.ui-dialog .ui-dialog-titlebar-close {\r
+ width: 16px; height: 16px; position: absolute; top: 6px; right: 7px;\r
+ cursor: default; color: white;\r
+}\r
+\r
+.ui-dialog .ui-dialog-titlebar-close-hover { color: #FF9C08; }\r
+\r
+.ui-dialog .ui-dialog-title {\r
+ margin-left: 5px; color: white; font-weight: bold;\r
+ position: relative; top: 7px; left: 4px;\r
+}\r
+\r
+.ui-dialog .ui-dialog-content {\r
+ margin: 1.2em;\r
+}\r
+\r
+.ui-dialog .ui-dialog-buttonpane {\r
+ position: absolute;\r
+ bottom: 8px;\r
+ right: 12px;\r
+ width: 100%;\r
+ text-align: right;\r
+}\r
+\r
+.ui-dialog .ui-dialog-buttonpane button {\r
+ margin: 6px;\r
+}\r
+\r
+/* Dialog handle styles */\r
+.ui-dialog .ui-resizable-n { cursor: n-resize; height: 6px; width: 100%; top: 0px; left: 0px; background: gray !important; border: none !important; }\r
+.ui-dialog .ui-resizable-s { cursor: s-resize; height: 8px; width: 100%; bottom: 0px; left: 0px; background: gray !important; border: none !important; }\r
+.ui-dialog .ui-resizable-e { cursor: e-resize; width: 7px; right: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }\r
+.ui-dialog .ui-resizable-w { cursor: w-resize; width: 7px; left: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }\r
+.ui-dialog .ui-resizable-se { cursor: se-resize; width: 9px; height: 9px; right: 0px; bottom: 0px; background: gray !important; border: none !important; }\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
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>Simple All</title>\r
+ <link rel="stylesheet" href="all.css" type="text/css" media="screen">\r
+ <link rel="stylesheet" href="../../themes/ui.datepicker.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.accordion.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.dialog.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.selectable.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.slider.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.sortable.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.tabs.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#datepicker").datepicker();\r
+ $("#dialog").click(function() { $("<div/>").dialog(); });\r
+ $("#draggable").draggable();\r
+ $("#resizable").resizable();\r
+ $("#selectable").selectable();\r
+ $("#sortable").sortable();\r
+ });\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<ul class="plugins">\r
+<li>\r
+ Datepicker\r
+ <div style="text-align:left;margin-left:10px;">\r
+ <input type="text" id="datepicker">\r
+ </div>\r
+</li>\r
+<li>\r
+ Dialog\r
+ <div id="dialog">\r
+ <button>Open</button>\r
+ </div>\r
+</li>\r
+<li>\r
+ Draggable\r
+ <div id="draggable"></div>\r
+</li>\r
+<li>\r
+ Resizable\r
+ <div id="resizable"></div>\r
+</li>\r
+<li>\r
+ Selectable\r
+ <div id="selectable">\r
+ <div>1</div>\r
+ <div>2</div>\r
+ <div>3</div>\r
+ <div>4</div>\r
+ <div>5</div>\r
+ <div>6</div>\r
+ <div>7</div>\r
+ <div>8</div>\r
+ <div>9</div>\r
+ </div>\r
+</li>\r
+<li>\r
+ Sortable\r
+ <div id="sortable">\r
+ <div>C</div>\r
+ <div>I</div>\r
+ <div>G</div>\r
+ <div>F</div>\r
+ <div>D</div>\r
+ <div>H</div>\r
+ <div>A</div>\r
+ <div>E</div>\r
+ <div>B</div>\r
+ </div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>Simple Datepicker</title>\r
+ <link rel="stylesheet" href="all.css" type="text/css" media="screen">\r
+ <link rel="stylesheet" href="../../themes/ui.datepicker.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.datepicker.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#datepicker").datepicker();\r
+ });\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<ul class="plugins">\r
+<li>\r
+ Datepicker\r
+ <div style="text-align:left;margin-left:10px;">\r
+ <input type="text" id="datepicker">\r
+ </div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>Simple Dialog</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.dialog.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ var offset = $("#dialog").offset();\r
+ $("#dialog").click(function() { $("<div/>").dialog(); });\r
+ });\r
+ </script>\r
+</head>\r
+<body class="flora">\r
+\r
+<ul class="plugins">\r
+<li>\r
+ Dialog\r
+ <div id="dialog">\r
+ <button>Open</button>\r
+ </div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>Simple Draggable</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.draggable.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#draggable").draggable();\r
+ });\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<ul class="plugins">\r
+<li>\r
+ Draggable\r
+ <div id="draggable"></div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>Simple Resizable</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.resizable.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#resizable").resizable();\r
+ });\r
+ </script>\r
+</head>\r
+\r
+<body>\r
+\r
+<ul class="plugins">\r
+<li>\r
+ Resizable\r
+ <div id="resizable"></div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>Simple Selectable</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.selectable.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#selectable").selectable();\r
+ });\r
+ </script>\r
+</head>\r
+\r
+<body>\r
+\r
+<ul class="plugins">\r
+<li>\r
+ Selectable\r
+ <div id="selectable">\r
+ <div>1</div>\r
+ <div>2</div>\r
+ <div>3</div>\r
+ <div>4</div>\r
+ <div>5</div>\r
+ <div>6</div>\r
+ <div>7</div>\r
+ <div>8</div>\r
+ <div>9</div>\r
+ </div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>Simple Sortable</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.sortable.js"></script>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#sortable").sortable();\r
+ });\r
+ </script>\r
+</head>\r
+\r
+<body>\r
+\r
+<ul class="plugins">\r
+<li>\r
+ Sortable\r
+ <div id="sortable">\r
+ <div>C</div>\r
+ <div>I</div>\r
+ <div>G</div>\r
+ <div>F</div>\r
+ <div>D</div>\r
+ <div>H</div>\r
+ <div>A</div>\r
+ <div>E</div>\r
+ <div>B</div>\r
+ </div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r
projects / jquery-ui.git / commitdiff