Skip to content
Permalink
Browse files

Merge branch 'master' of github.com:jquery/jquery-ui into selectmenu

  • Loading branch information
fnagel committed Sep 24, 2011
2 parents 17c8ec5 + cf3e655 commit 55184e1e077a4a39292b9985f47aa2abc1c32702
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Popup - Animation demo</title>
<link rel="stylesheet" href="../demos.css" />
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
<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.button.js"></script>
<script src="../../ui/jquery.effects.core.js"></script>
<script src="../../ui/jquery.effects.blind.js"></script>
<script src="../../ui/jquery.effects.scale.js"></script>
<script src="../../ui/jquery.ui.popup.js"></script>
<script>
$(function() {
var selected = {
select: function( event, ui ) {
$( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
$(this).popup("close");
}
};

$("#login-form").popup({
show: {
effect: "blind",
direction: "up",
mode: "show",
duration: "fast"
},
hide: {
effect: "scale",
percent: 0,
duration: "fast"
}
})
.find(":submit").button().click(function(event) {
event.preventDefault();
});
});
</script>
<style type="text/css">
.ui-popup { position: absolute; z-index: 5000; }

#login-form {
width: 16em; border: 1px solid gray; border-radius: 5px;
padding: 1em;
box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
font-size: 1.3em; outline: none;
}
#login-form label { display: inline-block; width: 5em; }
#login-form .submit { margin-left: 5em; }
</style>
</head>
<body>

<div class="demo">
<a href="#login-form">Log In</a>
<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. Open and close animations have been used.</p>

</div><!-- End demo-description -->


</body>
</html>
@@ -9,7 +9,6 @@
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.menu.js"></script>
<script src="../../ui/jquery.ui.popup.js"></script>
<script>
$(function() {
@@ -28,17 +27,6 @@
</script>
<style type="text/css">
.ui-popup { position: absolute; z-index: 5000; }
.ui-menu { width: 200px; }

/*
table {
border-collapse: collapse;
}
th, td {
padding: 0.5em;
border: 1px solid black;
}
*/

#login-form {
width: 16em; border: 1px solid gray; border-radius: 5px;
@@ -10,6 +10,7 @@
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="animation.html">Popup - show/hide effects</a></li>
<li><a href="popup-menu.html">Menu's as popup</a></li>
<li><a href="popup-menu-table.html">Menu's as popup in a table</a></li>
</ul>
@@ -14,22 +14,29 @@
<style>
#parent {
width: 60%;
height: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid #777;
background-color: #fbca93;
text-align: center;
}
.positionable {
width: 75px;
height: 75px;
position: absolute;
display: block;
right: 0;
bottom: 0;
background-color: #bcd5e6;
text-align: center;
}
#positionable1 {
width: 75px;
height: 75px;
}
#positionable2 {
width: 120px;
height: 40px;
}
.ui-flipped-top {
border-top: 3px solid #000000;
}
@@ -93,13 +100,13 @@
</p>
</div>

<div class="positionable">
<div class="positionable" id="positionable1">
<p>
to position
</p>
</div>

<div class="positionable" style="width:120px; height: 40px;">
<div class="positionable" id="positionable2">
<p>
to position 2
</p>
@@ -21,8 +21,9 @@
map.setCenter( latlong() );
}
$( "#lat, #lng" ).spinner({
precision: 6,
change: position
step: .001,
change: position,
stop: position
});

var map = new google.maps.Map( $("#map")[0], {
@@ -44,10 +45,10 @@
<div class="demo">

<label for="lat">Latitude</label>
<input id="lat" name="lat" value="44.797916">
<input id="lat" name="lat" value="44.797">
<br>
<label for="lng">Longitude</label>
<input id="lng" name="lng" value="-93.278046">
<input id="lng" name="lng" value="-93.278">

<div id="map"></div>

@@ -39,6 +39,7 @@ <h2 id="qunit-userAgent"></h2>
<div id="ac-wrap1" class="ac-wrap"></div>
<div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo"></div>
<div id="autocomplete-contenteditable" contenteditable="" tabindex=0></div>
<textarea id="autocomplete-textarea"></textarea>

</div>
</body>
@@ -4,110 +4,75 @@ module( "autocomplete: events" );

var data = [ "Clojure", "COBOL", "ColdFusion", "Java", "JavaScript", "Scala", "Scheme" ];

asyncTest( "all events", function() {
expect( 13 );
var element = $( "#autocomplete" )
.autocomplete({
autoFocus: false,
delay: 0,
source: data,
search: function( event ) {
equal( event.originalEvent.type, "keydown", "search originalEvent" );
},
response: function( event, ui ) {
deepEqual( ui.content, [
{ label: "Clojure", value: "Clojure" },
{ label: "Java", value: "Java" },
{ label: "JavaScript", value: "JavaScript" }
], "response ui.content" );
ui.content.splice( 0, 1 );
},
open: function( event ) {
ok( menu.is( ":visible" ), "menu open on open" );
},
focus: function( event, ui ) {
equal( event.originalEvent.type, "menufocus", "focus originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" );
},
close: function( event ) {
equal( event.originalEvent.type, "menuselect", "close originalEvent" );
ok( menu.is( ":hidden" ), "menu closed on close" );
},
select: function( event, ui ) {
equal( event.originalEvent.type, "menuselect", "select originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" );
},
change: function( event, ui ) {
equal( event.originalEvent.type, "blur", "change originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" );
ok( menu.is( ":hidden" ), "menu closed on change" );
start();
}
}),
menu = element.autocomplete( "widget" );

element.focus().val( "j" ).keydown();
setTimeout(function() {
ok( menu.is( ":visible" ), "menu is visible after delay" );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
// blurring through jQuery causes a bug in IE 6 which causes the
// autocompletechange event to occur twice
element[0].blur();
}, 50 );
});

asyncTest( "all events - contenteditable", function() {
expect( 13 );
var element = $( "#autocomplete-contenteditable" )
.autocomplete({
autoFocus: false,
delay: 0,
source: data,
search: function( event ) {
equal( event.originalEvent.type, "keydown", "search originalEvent" );
},
response: function( event, ui ) {
deepEqual( ui.content, [
{ label: "Clojure", value: "Clojure" },
{ label: "Java", value: "Java" },
{ label: "JavaScript", value: "JavaScript" }
], "response ui.content" );
ui.content.splice( 0, 1 );
},
open: function( event ) {
ok( menu.is( ":visible" ), "menu open on open" );
},
focus: function( event, ui ) {
equal( event.originalEvent.type, "menufocus", "focus originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" );
},
close: function( event ) {
equal( event.originalEvent.type, "menuselect", "close originalEvent" );
ok( menu.is( ":hidden" ), "menu closed on close" );
},
select: function( event, ui ) {
equal( event.originalEvent.type, "menuselect", "select originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" );
},
change: function( event, ui ) {
equal( event.originalEvent.type, "blur", "change originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" );
ok( menu.is( ":hidden" ), "menu closed on change" );
start();
}
}),
menu = element.autocomplete( "widget" );

element.focus().text( "j" ).keydown();
setTimeout(function() {
ok( menu.is( ":visible" ), "menu is visible after delay" );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
// TODO: blurring through jQuery causes a bug in IE 6 which causes the
// autocompletechange event to occur twice
element[0].blur();
}, 50 );
$.each([
{
type: "input",
selector: "#autocomplete",
valueMethod: "val"
},
{
type: "textarea",
selector: "#autocomplete-textarea",
valueMethod: "val"
},
{
type: "contenteditable",
selector: "#autocomplete-contenteditable",
valueMethod: "text"
}
], function( i, settings ) {
asyncTest( "all events - " + settings.type, function() {
expect( 13 );
var element = $( settings.selector )
.autocomplete({
autoFocus: false,
delay: 0,
source: data,
search: function( event ) {
equal( event.originalEvent.type, "keydown", "search originalEvent" );
},
response: function( event, ui ) {
deepEqual( ui.content, [
{ label: "Clojure", value: "Clojure" },
{ label: "Java", value: "Java" },
{ label: "JavaScript", value: "JavaScript" }
], "response ui.content" );
ui.content.splice( 0, 1 );
},
open: function( event ) {
ok( menu.is( ":visible" ), "menu open on open" );
},
focus: function( event, ui ) {
equal( event.originalEvent.type, "menufocus", "focus originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" );
},
close: function( event ) {
equal( event.originalEvent.type, "menuselect", "close originalEvent" );
ok( menu.is( ":hidden" ), "menu closed on close" );
},
select: function( event, ui ) {
equal( event.originalEvent.type, "menuselect", "select originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" );
},
change: function( event, ui ) {
equal( event.originalEvent.type, "blur", "change originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" );
ok( menu.is( ":hidden" ), "menu closed on change" );
start();
}
}),
menu = element.autocomplete( "widget" );

element.focus()[ settings.valueMethod ]( "j" ).keydown();
setTimeout(function() {
ok( menu.is( ":visible" ), "menu is visible after delay" );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
// blurring through jQuery causes a bug in IE 6 which causes the
// autocompletechange event to occur twice
element[0].blur();
}, 50 );
});
});

asyncTest( "change without selection", function() {

0 comments on commit 55184e1

Please sign in to comment.
You can’t perform that action at this time.