aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
Diffstat (limited to 'demos')
-rw-r--r--demos/menubar/default.html106
-rw-r--r--demos/popup/default.html30
-rw-r--r--demos/widget/default.html35
3 files changed, 44 insertions, 127 deletions
diff --git a/demos/menubar/default.html b/demos/menubar/default.html
index 79662bd9f..57a3209ce 100644
--- a/demos/menubar/default.html
+++ b/demos/menubar/default.html
@@ -3,7 +3,7 @@
<head>
<title>jQuery UI Menubar - Default demo</title>
<link rel="stylesheet" href="../demos.css" type="text/css" />
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" />
<script src="../../jquery-1.5.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
@@ -13,56 +13,29 @@
<script src="../../ui/jquery.ui.menubar.js"></script>
<script>
$(function() {
- $("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
-
- $("#bar1, .menubar").menubar({
+ $("#bar1").menubar({
+ position: {
+ within: $("#demo-frame").add(window).first()
+ },
select: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
}
});
-
+
$(".menubar-icons").menubar({
menuIcon: true,
buttons: true,
+ position: {
+ within: $("#demo-frame").add(window).first()
+ },
select: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
}
});
});
</script>
- <style type="text/css">
- #bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */
- .ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; }
- .ui-menu .ui-icon { float: right; }
- .ui-menu li.ui-state-disabled {
- font-weight: bold;
- padding: .0em .4em;
- margin: .4em 0 .2em;
- line-height: 1.5;
- }
-
- /* menubar styles */
- .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
- .ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
-
- .ui-menubar {
- list-style: none;
- margin: 0;
- padding-left: 0;
- }
-
- .ui-menubar-item {
- float: left;
- }
- /*
- table {
- border-collapse: collapse;
- }
- th, td {
- padding: 0.5em;
- border: 1px solid black;
- }
- */
+ <style>
+ #bar1, #bar2 { margin: 0 0 4em; }
</style>
</head>
<body>
@@ -160,63 +133,6 @@
</li>
</ul>
-<!--
-<table id="movies" class="ui-widget">
- <thead>
- <tr>
- <th data-field="Name" class="ui-widget-header">Name</th>
- <th data-field="ReleaseYear" class="ui-widget-header">Release Year</th>
- <th data-field="AverageRating" class="ui-widget-header">Average Rating</th>
- <th class="ui-widget-header"></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td>
- <td class="ui-widget-content">1993</td>
- <td class="ui-widget-content">3.6</td>
- <td class="ui-widget-content">
- <ul class="menubar">
- <li>
- <a href="#Options">Options</a>
- <ul>
- <li><a href="#Order...">Order...</a></li>
- <li class="ui-state-disabled">Write a Review...</li>
- <li><a href="#Find Similar Movies...">Find Similar Movies...</a></li>
- <li>
- <a href="#Rate">Rate</a>
- <ul>
- <li><a href="#5 stars">5 stars</a></li>
- <li><a href="#4 stars">4 stars</a></li>
- <li><a href="#3 stars">3 stars</a></li>
- <li><a href="#2 stars">2 stars</a></li>
- <li><a href="#1 stars">1 stars</a></li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </td>
- </tr>
- <tr>
- <td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
- <td class="ui-widget-content">1991</td>
- <td class="ui-widget-content">3.1</td>
- </tr>
- <tr>
- <td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
- <td class="ui-widget-content">1991</td>
- <td class="ui-widget-content">3.9</td>
- </tr>
- <tr>
- <td class="ui-widget-content">Spike and Mike's Sick &amp; Twisted Festival of Animation</td>
- <td class="ui-widget-content">1997</td>
- <td class="ui-widget-content">2.6</td>
- </tr>
- </tbody>
-</table>
--->
-
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Log:
<div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
diff --git a/demos/popup/default.html b/demos/popup/default.html
index 71b3c8dd2..7b63d9e1d 100644
--- a/demos/popup/default.html
+++ b/demos/popup/default.html
@@ -29,7 +29,7 @@
<style type="text/css">
.ui-popup { position: absolute; z-index: 5000; }
.ui-menu { width: 200px; }
-
+
/*
table {
border-collapse: collapse;
@@ -55,26 +55,24 @@
<div class="demo">
<a href="#login-form">Log In</a>
- <div id="login-form" class="ui-widget-content" tabIndex="0">
- <form>
- <div>
- <label>Username</label>
- <input type="username" />
- </div>
- <div>
- <label>Password</label>
- <input type="password" />
- </div>
- <div>
- <input type="submit" class="submit" value="Login" />
- </div>
- </form>
+ <div class="ui-widget-content" id="login-form" aria-label="Login options">
+ <div>
+ <label for="un">Username</label>
+ <input type="text" id="un" />
+ </div>
+ <div>
+ <label for="pw">Password</label>
+ <input type="password" id="pw" />
+ </div>
+ <div>
+ <input type="submit" value="Login" class="submit" />
+ </div>
</div>
</div>
<div class="demo-description">
-<p>A link to a login form that opens as a popup. [Not quite functional, focus handling needs to get better]</p>
+<p>A link to a login form that opens as a popup.</p>
</div><!-- End demo-description -->
diff --git a/demos/widget/default.html b/demos/widget/default.html
index 410318e0a..c2b520983 100644
--- a/demos/widget/default.html
+++ b/demos/widget/default.html
@@ -10,7 +10,7 @@
<script src="../../ui/jquery.ui.position.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
- .colorize {
+ .custom-colorize {
font-size: 25px;
width: 75px;
height: 75px;
@@ -28,20 +28,21 @@
blue: 0,
// callbacks
+ change: null,
random: null
},
// the constructor
_create: function() {
this.element
- // add a class for themeing
- .addClass("colorize")
+ // add a class for theming
+ .addClass( "custom-colorize" )
// prevent double click to select text
.disableSelection();
// bind click events to random method
this._bind({
- // _bind won"t call random when widget is disabled
+ // _bind won't call random when widget is disabled
click: "random"
});
this._refresh();
@@ -68,7 +69,7 @@
blue: Math.floor( Math.random() * 256 )
};
- // trigger an event, check if it"s canceled
+ // trigger an event, check if it's canceled
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
}
@@ -78,24 +79,26 @@
// revert other modifications here
_destroy: function() {
this.element
- .removeClass( "colorize" )
+ .removeClass( "custom-colorize" )
.enableSelection()
.css( "background-color", "transparent" );
},
- _setOption: function( key, value ) {
- // prevent invalid color values
- if ( /red|green|blue/.test(key) && value < 0 || value > 255 ) {
- return;
- }
- this._super( "_setOptions", options );
- },
-
+ // _setOptions is called with a hash of all options that are changing
// always refresh when changing options
_setOptions: function() {
- // _super handles keeping the right this-context
+ // _super and _superApply handle keeping the right this-context
this._superApply( "_setOptions", arguments );
this._refresh();
+ },
+
+ // _setOption is called for each individual option that is changing
+ _setOption: function( key, value ) {
+ // prevent invalid color values
+ if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
+ return;
+ }
+ this._super( "_setOption", key, value );
}
});
@@ -131,7 +134,7 @@
red: 0,
green: 0,
blue: 0
- } );
+ });
});
});
</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-28 21:54:02 +0000