aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2011-07-25 11:53:14 -0400
committerScott González <scott.gonzalez@gmail.com>2011-07-25 11:53:14 -0400
commit19a9de7e668cdb3b76c3b733d0147f1853cb38a5 (patch)
treea259b421dd77cbec27e55db9b4d1104bf5214a2a /demos
parentdaadc343be2f139e82719e2e5ff466aa19ec166f (diff)
parent51ee3be39829e339c8e4bccb532347944e600ca5 (diff)
downloadjquery-ui-19a9de7e668cdb3b76c3b733d0147f1853cb38a5.tar.gz
jquery-ui-19a9de7e668cdb3b76c3b733d0147f1853cb38a5.zip
Merge branch 'master' into core-1.6.1
Conflicts: demos/menubar/default.html tests/unit/autocomplete/autocomplete.html tests/visual/effects/effects.all.html ui/jquery.ui.menu.js ui/jquery.ui.popup.js
Diffstat (limited to 'demos')
-rw-r--r--demos/menubar/default.html119
-rw-r--r--demos/popup/default.html30
-rw-r--r--demos/position/default.html18
-rw-r--r--demos/widget/default.html26
4 files changed, 70 insertions, 123 deletions
diff --git a/demos/menubar/default.html b/demos/menubar/default.html
index 121b12225..34742bb52 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.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
@@ -13,56 +13,32 @@
<script src="../../ui/jquery.ui.menubar.js"></script>
<script>
$(function() {
- $("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
-
- $("#bar1, .menubar").menubar({
- select: function(event, ui) {
- $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+ function select(event, ui) {
+ $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+ if (ui.item.text() == 'Quit') {
+ $(this).menubar('destroy');
}
+ }
+ $("#bar1").menubar({
+ position: {
+ within: $("#demo-frame").add(window).first()
+ },
+ select: select
});
-
+
$(".menubar-icons").menubar({
+ autoExpand: true,
menuIcon: true,
buttons: true,
- select: function(event, ui) {
- $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
- }
+ position: {
+ within: $("#demo-frame").add(window).first()
+ },
+ select: select
});
});
</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 +136,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 ce696c4bb..97fc01fb2 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/position/default.html b/demos/position/default.html
index 22c3713e9..6a753e2f1 100644
--- a/demos/position/default.html
+++ b/demos/position/default.html
@@ -12,7 +12,7 @@
<script src="../../ui/jquery.ui.position.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
- div#parent {
+ #parent {
width: 60%;
margin: 10px auto;
padding: 5px;
@@ -20,7 +20,7 @@
background-color: #fbca93;
text-align: center;
}
- div.positionable {
+ .positionable {
width: 75px;
height: 75px;
position: absolute;
@@ -30,6 +30,18 @@
background-color: #bcd5e6;
text-align: center;
}
+ .ui-flipped-top {
+ border-top: 3px solid #000000;
+ }
+ .ui-flipped-bottom {
+ border-bottom: 3px solid #000000;
+ }
+ .ui-flipped-left {
+ border-left: 3px solid #000000;
+ }
+ .ui-flipped-right {
+ border-right: 3px solid #000000;
+ }
select, input {
margin-left: 15px;
}
@@ -101,7 +113,7 @@
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
- </select>
+ </select>
<select id="my_vertical">
<option value="top">top</option>
<option value="middle">center</option>
diff --git a/demos/widget/default.html b/demos/widget/default.html
index ff85bee43..4dad912c2 100644
--- a/demos/widget/default.html
+++ b/demos/widget/default.html
@@ -6,15 +6,23 @@
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
- <script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.custom-colorize {
- font-size: 25px;
+ font-size: 20px;
+ position: relative;
width: 75px;
height: 75px;
}
+ .custom-colorize-changer {
+ font-size: 10px;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
</style>
<script>
$(function() {
@@ -40,8 +48,15 @@
// prevent double click to select text
.disableSelection();
- // bind click events to random method
- this._bind({
+ this.changer = $( "<button>", {
+ text: "change",
+ className: "custom-colorize-changer"
+ })
+ .appendTo( this.element )
+ .button();
+
+ // bind click events on the changer button to the random method
+ this._bind( this.changer, {
// _bind won't call random when widget is disabled
click: "random"
});
@@ -78,6 +93,9 @@
// events bound via _bind are removed automatically
// revert other modifications here
_destroy: function() {
+ // remove generated elements
+ this.changer.remove();
+
this.element
.removeClass( "custom-colorize" )
.enableSelection()
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 22:53:07 +0000