jQuery插件Moving Items
写了一个列表移动的简单例子，觉得还是不错的，可用的，上传上来，大家看看，给点意见。当然，对比过网上的很多例子，当前我要突出的一个特点是，这个例子可以不怎么写页面，即可完成相关的工作。
代码里面moveingItems方法，返回this实例，也就是说该对象不支持jQuery的连写操作，只能当一个对象使用，作为jQuery的控件来说，这种直接操作对象的方法是较流行的写法。
控件示意图：
http://dl.iteye.com/upload/attachment/349491/b1885dcd-bab1-343f-8281-70f31ce12319.jpg
脚本代码：
(function($){$.extend($.fn, {randomUUID : function () {var s = [], itoh = '0123456789ABCDEF';// Make array of random hex digits. The UUID only has 32 digits in it, but we// allocate an extra items to make room for the '-'s we'll be inserting.for (var i = 0; i < 36; i++) s = Math.floor(Math.random()*0x10);// Conform to RFC-4122, section 4.4s = 4;// Set 4 high bits of time_high field to versions = (s & 0x3) | 0x8;// Specify 2 high bits of clock sequence// Convert to hex charsfor (var i = 0; i < 36; i++) s = itoh];// Insert '-'ss = s = s = s = '-';return s.join('');},movingitems : function(settings) {/*---------------------------------------- attribute ----------------------------------------*/// leftitems, rightitems, id, leftListStyle, rightListStylesettings = $.extend(settings);function _getLeftList() {return $("#" + id + "_SelectLeft");}function _getRightList() {return $("#" + id + "_SelectRight");}/*---------------------------------------- api ----------------------------------------*/this.leftitems = function (datas) {var selectLeft = _getLeftList();if(typeof datas != 'undefined') {selectLeft.empty();$.each(datas, function(i, data){var option = $("<option>").attr("value",data.id).append(data.label);option.appendTo(selectLeft);});buildLeftListCss();settings.leftItems = datas;}var selectedItems = selectLeft.children("option");var selectValues = [];$.each(selectedItems, function(i, selectedItem){selectValues = $(selectedItem).attr("value");});return selectValues.join(",");};this.rightitems = function (datas) {var selectRight = _getRightList();if(typeof datas != 'undefined') {selectRight.empty();$.each(datas, function(i, data){var option = $("<option>").attr("value",data.id).append(data.label);option.appendTo(selectRight);});buildRightListCss();settings.rightItems = datas;}var selectedItems = selectRight.children("option");var selectValues = [];$.each(selectedItems, function(i, selectedItem){selectValues = $(selectedItem).attr("value");});return selectValues.join(",");};/*---------------------------------------- opt ----------------------------------------*/function _moveLeft(event) {_getRightList().children(":selected").remove();buildRightListCss();}function _moveLeftAll(event) {_getRightList().empty();}function _moveRight(event) { _move(_getLeftList().children(":selected")); buildRightListCss();}function _moveRightAll(event) {_move(_getLeftList().children());buildRightListCss();}function _move(selectedItems) {var selectRight = _getRightList();$.each(selectedItems, function(i, selectedItem) { var isContained = false; $.each(selectRight.children(), function(j,moveToItem){ if($(selectedItem).attr("value") == $(moveToItem).attr('value')) { isContained = true; } }); if(!isContained) { selectRight.append($("<option>") .attr("value",($(selectedItem).attr("value"))) .append($(selectedItem).text()) ); } });}/*---------------------------------------- define the css ----------------------------------------*/function buildLeftListCss() {var selectLeft = _getLeftList();$(":even", selectLeft).css({"background-color":"#ffffff"});$(":odd", selectLeft).css({"background-color":"#e9f0f8"});}function buildRightListCss() {var selectRight = _getRightList();$(":even", selectRight).css({"background-color":"#ffffff"});$(":odd", selectRight).css({"background-color":"#e9f0f8"});}/*---------------------------------------- build the html ----------------------------------------*/// init the id, if the attribute "id" of settings doesn't exist, try to get the attribute "id" of container,// else try to create a random idvar id = null;if(settings.id){id = settings.id;} else if($(this).attr("id")){id = $(this).attr("id");} else {id = $(this).randomUUID();}// init the html, use templatevar template = "<table>" + "<tr><td align='left' style='font-size:12px;'>&nbsp;待添加</td><td></td><td align='left' style='font-size:12px;'>&nbsp;已添加</td></tr>" + "<tr><td>"+ "<div class='movingitems-list-wrapper'><select multiple='multiple' class='movingitems-list' id='@id_SelectLeft'></select></div>"+ "</td><td>"+ "<div class='movingitems-btn-container'>"+ "<br/>"+ "<button id='@id_MoveLeft' class='i-item-remove'></button><br/><br/>"+ "<button id='@id_MoveRight' class='i-item-addselect'></button><br/><br/>"+ "<button id='@id_MoveLeftAll' class='i-item-removeall'></button><br/><br/>"+ "<button id='@id_MoveRightAll' class='i-item-addall'></button><br/><br/>"+ "</div>"+ "</td><td>"+ "<div class='movingitems-list-wrapper'><select multiple='multiple' id='@id_SelectRight' class='movingitems-list'></select></div>"+ "</td></tr>"+ "</table>";template = template.replace(new RegExp("@id","gm"), id);$(template).appendTo($(this));$("#" + id + "_MoveLeft").click(_moveLeft);$("#" + id + "_MoveRight").click(_moveRight);$("#" + id + "_MoveLeftAll").click(_moveLeftAll);$("#" + id + "_MoveRightAll").click(_moveRightAll);// init left listif(settings.leftitems) {leftitems(settings.leftitems);}// init right listif(settings.rightitems) {rightitems(settings.rightitems);}return this;}});})(jQuery); 页面代码：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>moving items</title> <script language="javascript" type="text/javascript" src="/aps-res/js/jquery/jquery.js"></script> <script language="javascript" type="text/javascript" src="../js/jquery.movingitems.js"></script> <script language="javascript" type="text/javascript"> var mi; $(function(){ // the other way to init the items //$("#itemsContainer").movingitems({"leftitems":[{"value":"001","text":"中国"},{"value":"003","text":"美国"}],"rightitems":[{"value":"002","text":"澳大利亚"},{"value":"004","text":"英国"}]}); // init the items mi = $("#itemsContainer").movingitems(jQuery); mi.leftitems([{"id":"001","label":"中国"},{"id":"003","label":"美国"},{"id":"005","label":"俄国"},{"id":"006","label":"法国"},{"id":"007","label":"德国"},{"id":"008","label":"朝鲜"},{"id":"009","label":"新加坡"},{"id":"010","label":"马来"}]); mi.rightitems([{"id":"002","label":"澳大利亚"},{"id":"004","label":"英国"}]); }); function getitems () { alert("左边数据：" + mi.leftitems()); alert("右边数据：" + mi.rightitems()); } </script> <style type="text/css"> button.i-item-addselect { background-color: transparent; background-image: url("../images/add-selected.gif"); background-repeat: no-repeat; border: 0 none; cursor: pointer; height: 16px; width: 16px; } button.i-item-addall { background-color: transparent; background-image: url("../images/add-all.gif"); background-repeat: no-repeat; border: 0 none; cursor: pointer; height: 16px; width: 16px; } button.i-item-remove { background-color: transparent; background-image: url("../images/remove-selected.gif"); background-repeat: no-repeat; border: 0 none; cursor: pointer; height: 16px; width: 16px; } button.i-item-removeall { background-color: transparent; background-image: url("../images/remove-all.gif"); background-repeat: no-repeat; border: 0 none; cursor: pointer; height: 16px; width: 16px; } </style> </head> <body> <div id="itemsContainer"></div> <div style="cursor:pointer;" > 测试获取数据 </div> </body></html>
页:
[1]