library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

layout demo: minor js refactoring; decreased duration of loading overlay, improved indicator position, fixed overlay in IE (100% height for html and body)

Browse Source
This commit is contained in:
Jörn Zaefferer 2008-09-03 13:02:35 +00:00
parent d6a247afff
commit d0b0281db1
4 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demos/real-world/layout/demo-ie.css Normal file
View File

@ -0,0 +1 @@
#overlay #preloader img { margin-top: 11px; }

4
demos/real-world/layout/demo.css
View File

@ -1,3 +1,5 @@
html, body { height: 100% }
body { background-color:#666; color:#FFF; font:11px/1.5 Arial, sans-serif; margin:0; overflow:hidden; padding:30px 0 0 30px; } body { background-color:#666; color:#FFF; font:11px/1.5 Arial, sans-serif; margin:0; overflow:hidden; padding:30px 0 0 30px; }
h1 { font-size:18px; margin:0 0 20px; } h1 { font-size:18px; margin:0 0 20px; }
a { color:#FFF; } a { color:#FFF; }
@ -6,7 +8,7 @@ a { color:#FFF; }
#overlay { background:#666; height:100%; left:0; position:absolute; top:0; width:100%; z-index:2000; } #overlay { background:#666; height:100%; left:0; position:absolute; top:0; width:100%; z-index:2000; }
#overlay #preloader { background:url(loader_bg.gif) no-repeat; height:50px; left:50%; line-height:50px; margin:-25px 0 0 -25px; position:absolute; text-align:center; top:50%; width:50px; } #overlay #preloader { background:url(loader_bg.gif) no-repeat; height:50px; left:50%; line-height:50px; margin:-25px 0 0 -25px; position:absolute; text-align:center; top:50%; width:50px; }
#overlay #preloader img { margin:11px 0 0 0; vertical-align:middle; } #overlay #preloader img { margin:0; vertical-align:middle; }
.ui-sortable { background-color:#FFF; border:1px solid #555; color:#222; margin:0 15px 15px 0; padding:0 10px 10px; width:175px; } .ui-sortable { background-color:#FFF; border:1px solid #555; color:#222; margin:0 15px 15px 0; padding:0 10px 10px; width:175px; }
.ui-sortable h2 { background-color:#555; border-top:3px solid #666; color:#FFF; font-size:11px; margin:0 -10px 10px; line-height:2; padding:0 10px; } .ui-sortable h2 { background-color:#555; border-top:3px solid #666; color:#FFF; font-size:11px; margin:0 -10px 10px; line-height:2; padding:0 10px; }

14
demos/real-world/layout/demo.js
View File

@ -1,5 +1,5 @@
(function($){ (function($){
var updateUpDown = function(sortable){ function updateUpDown(sortable){
$('dl:not(.ui-sortable-helper)', sortable) $('dl:not(.ui-sortable-helper)', sortable)
.removeClass('first').removeClass('last') .removeClass('first').removeClass('last')
.find('.up, .down').removeClass('disabled').end() .find('.up, .down').removeClass('disabled').end()
@ -7,7 +7,7 @@
.filter(':last').addClass('last').find('.down').addClass('disabled').end().end(); .filter(':last').addClass('last').find('.down').addClass('disabled').end().end();
}; };
var moveUpDown = function(){ function moveUpDown(){
var link = $(this), var link = $(this),
dl = link.parents('dl'), dl = link.parents('dl'),
prev = dl.prev('dl'), prev = dl.prev('dl'),
@ -22,7 +22,7 @@
updateUpDown(dl.parent()); updateUpDown(dl.parent());
}; };
var addItem = function(){ function addItem(){
var sortable = $(this).parents('.ui-sortable'); var sortable = $(this).parents('.ui-sortable');
var options = '<span class="options"><a class="up">up</a><a class="down">down</a></span>'; var options = '<span class="options"><a class="up">up</a><a class="down">down</a></span>';
var tpl = '<dl class="sort"><dt>{name}' + options + '</dt><dd>{desc}</dd></dl>'; var tpl = '<dl class="sort"><dt>{name}' + options + '</dt><dd>{desc}</dd></dl>';
@ -32,11 +32,11 @@
updateUpDown(sortable); updateUpDown(sortable);
}; };
var emptyTrashCan = function(item){ function emptyTrashCan(item){
item.remove(); item.remove();
}; };
var sortableChange = function(e, ui){ function sortableChange(e, ui){
if(ui.sender){ if(ui.sender){
var w = ui.element.width(); var w = ui.element.width();
ui.placeholder.width(w); ui.placeholder.width(w);
@ -44,7 +44,7 @@
} }
}; };
var sortableUpdate = function(e, ui){ function sortableUpdate(e, ui){
if(ui.element[0].id == 'trashcan'){ if(ui.element[0].id == 'trashcan'){
emptyTrashCan(ui.item); emptyTrashCan(ui.item);
} else { } else {
@ -92,6 +92,6 @@
$('#overlay').fadeOut(function(){ $('#overlay').fadeOut(function(){
$('body').css('overflow', 'auto'); $('body').css('overflow', 'auto');
}); });
}, 750); }, 500);
}); });
})(jQuery); })(jQuery);

4
demos/real-world/layout/index.html
View File

@ -16,7 +16,9 @@
<link rel="icon" href="http://jquery.com/favicon.ico" type="image/x-icon" /> <link rel="icon" href="http://jquery.com/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" /> <link rel="stylesheet" href="demo.css" type="text/css" media="screen" />
<!-- saved from url=(0013)about:internet --> <!--[if IE]>
<link rel="stylesheet" href="demo-ie.css" type="text/css" media="screen" />
<![endif]-->
</head> </head>
<body id="uidemo"> <body id="uidemo">