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: update up/down controls when adding elements from toolbox

Browse Source
This commit is contained in:
Jörn Zaefferer 2008-09-03 15:29:45 +00:00
parent 4ea6490a7b
commit b48b8db2d1
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
(function($){ (function($){
function updateUpDown(sortable){ function updateUpDown(sortable) {
console.log(this, 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 +8,7 @@
.filter(':last').addClass('last').find('.down').addClass('disabled').end().end(); .filter(':last').addClass('last').find('.down').addClass('disabled').end().end();
}; };
function moveUpDown(){ 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,9 +23,15 @@
updateUpDown(dl.parent()); updateUpDown(dl.parent());
}; };
function addControls() {
$(this).append('<span class="options"><a class="up">up</a><a class="down">down</a></span>')
.find('a.up, a.down').bind('click', moveUpDown);
updateUpDown($(this).parents(".ui-sortable:first"));
}
var counter = 1; var counter = 1;
function addItem(){ function addItem() {
var sortable = $(this).parents('.ui-sortable'); var sortable = $(this).parents('.ui-sortable:first');
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>';
var html = tpl.replace(/{name}/g, 'Dynamic name ' + counter).replace(/{desc}/g, 'Description'); var html = tpl.replace(/{name}/g, 'Dynamic name ' + counter).replace(/{desc}/g, 'Description');
@ -33,11 +40,11 @@
updateUpDown(sortable); updateUpDown(sortable);
}; };
function emptyTrashCan(item){ function emptyTrashCan(item) {
item.remove(); item.remove();
}; };
function sortableChange(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);
@ -45,7 +52,7 @@
} }
}; };
function sortableUpdate(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 {
@ -60,10 +67,11 @@
var $els = $(els.toString()); var $els = $(els.toString());
$('h2', $els.slice(0,-1)).append('<span class="options"><a class="add">add</a></span>'); $('h2', $els.slice(0,-1)).append('<span class="options"><a class="add">add</a></span>');
$('dt', $els).append('<span class="options"><a class="up">up</a><a class="down">down</a></span>'); $('dt', $els).each(addControls);
//$('dt', $els).append('<span class="options"><a class="up">up</a><a class="down">down</a></span>');
$('a.add').bind('click', addItem); $('a.add').bind('click', addItem);
$('a.up, a.down').bind('click', moveUpDown); //$('a.up, a.down').bind('click', moveUpDown);
$els.each(function(){ $els.each(function(){
updateUpDown(this); updateUpDown(this);
@ -85,6 +93,8 @@
}, },
change: sortableChange, change: sortableChange,
update: sortableUpdate update: sortableUpdate
}).bind("sortreceive", function(e, ui) {
$(ui.item).removeClass('ui-draggable').find('dt').each(addControls);
}); });
$('#components > dl').draggable({ $('#components > dl').draggable({
connectToSortable: $els.not("#trashcan"), connectToSortable: $els.not("#trashcan"),