r3151 committed - updated static content for the selectables; it shows how the states sh...
Revision: 3151
Author: fg.maggie
Date: Thu Aug 27 08:26:40 2009
Log: updated static content for the selectables; it shows how the states
should be applied (see commented notes)
http://code.google.com/p/jquery-ui/source/detail?r=3151
Modified:
/branches/dev/selectable/tests/static/selectable/default.html
=======================================
--- /branches/dev/selectable/tests/static/selectable/default.html Fri Feb
20 03:40:25 2009
+++ /branches/dev/selectable/tests/static/selectable/default.html Thu Aug
27 08:26:40 2009
@@ -1,20 +1,62 @@
<!doctype html>
-<html>
+<html lang="en">
<head>
- <title>Selectable Static Test : Default</title>
+ <title>jQuery UI Selectable - Default functionality</title>
+
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css"
type="text/css" />
<link rel="stylesheet" href="../static.css" type="text/css" />
- <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
- <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
- <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
- <script type="text/javascript" src="../static.js"></script>
+
+ <!-- NOTES to developer:
+ * all selectable items should have the "ui-selectable-item" by default,
not the default state class "ui-state-default"
+ * for the selectables, all state classes should be considered mutually
exclusive - only one should be applied at a time. This includes the state
classes for -hover, -active, and -focus.
+ * the "ui-selectable-item" class should be added to the stylesheet,
ui.selectable.css
+ * the focus outline will be reinstated in the theme stylesheet,
ui.theme.css
+ -->
+
+ <style type="text/css">
+ /* Demo styles only */
+ #selectable {
+ list-style: none; margin: 0; padding: 10px;
+ }
+
+ #selectable li {
+ margin: 2px;
+ width: 200px;
+ }
+
+ /* Widget styles - should be added to ui.selectable.css */
+ .ui-selectable-item {
+ border: 1px dashed transparent;
+ padding: .2em .3em;
+ }
+ </style>
</head>
<body>
-
-<div class="ui-selectable">
- <div class="ui-selectee">Selectable 1</div>
- <div class="ui-selectee">Selectable 2</div>
- <div class="ui-selectee">Selectable 3</div>
-</div>
+<div class="demo">
+
+<ul id="selectable" tabindex="1" class="ui-widget ui-widget-content">
+ <li class="ui-selectable-item"><h2>Item 1</h2></li>
+ <li class="ui-selectable-item">Item 2 - default style</li>
+ <li class="ui-selectable-item ui-state-active">Item 3 - active (selected)
style</li>
+ <li class="ui-selectable-item ui-state-focus">Item 4- focus style</li>
+ <li class="ui-selectable-item">Item 5</li>
+ <li class="ui-selectable-item">Item 6</li>
+ <li class="ui-selectable-item">Item 7</li>
+ <li class="ui-selectable-item">Item 8</li>
+ <li class="ui-selectable-item">Item 9
+ <ul>
+ <li class="ui-selectable-item"> Sub Item 1</li>
+ <li class="ui-selectable-item"> Sub Item 2</li>
+ <li class="ui-selectable-item"> Sub Item 3</li>
+ </ul>
+ </li>
+ <li class="ui-selectable-item">Item 10</li>
+ <li class="ui-selectable-item">Item 11</li>
+ <li class="ui-selectable-item">Item 12</li>
+</ul>
+
+</div><!-- End demo -->
+
</body>
</html>
Topic Participants
Richard Worth