- 浏览: 417997 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
xiaomuxingren:
你好,请问update-alternatives --inst ...
JDK8安装及jenkins安装 -
wahahachuang8:
我觉得这种东西自己开发太麻烦了,就别自己捣鼓了,找个第三方,方 ...
HTML5 WebSocket -
晨曦的朝阳:
刚好有需求,学习一下!
MySql主从配置 -
mfkvfn:
这是恶意的商业竞争呀
解决 android 微信5.0及后续版本无法打开电话号码的问题 -
fwyhf:
require('./monitor/module_liste ...
NodeJS Server 进程自动重启
列表移动例子,对比过网上的很多实例,当前组件突出的特点是:页面尽可能简单,代码量少。
代码moveingItems方法,返回this实例,该对象不支持jQuery的连写操作,只能当对象使用,作为jQuery的控件来说,这种直接操作对象的方法是较流行的写法。
控件示意图:
代码moveingItems方法,返回this实例,该对象不支持jQuery的连写操作,只能当对象使用,作为jQuery的控件来说,这种直接操作对象的方法是较流行的写法。
控件示意图:
(function($){ $.extend($.fn, { // 生成随机UUID数,用于唯一标识节点 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[i] = Math.floor(Math.random()*0x10); // Conform to RFC-4122, section 4.4 s[14] = 4; // Set 4 high bits of time_high field to version s[19] = (s[19] & 0x3) | 0x8; // Specify 2 high bits of clock sequence // Convert to hex chars for (var i = 0; i < 36; i++) s[i] = itoh[s[i]]; // Insert '-'s s[8] = s[13] = s[18] = s[23] = '-'; return s.join(''); }, movingitems : function(settings) { /*---------------------------------------- attribute ----------------------------------------*/ // leftitems, rightitems, id, leftListStyle, rightListStyle settings = $.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[i] = $(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[i] = $(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 id var 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 template var template = "<table>" + "<tr><td align='left' style='font-size:12px;'> 待添加</td><td></td><td align='left' style='font-size:12px;'> 已添加</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 list if(settings.leftitems) { leftitems(settings.leftitems); } // init right list if(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;" onclick="getitems();"> 测试获取数据 </div> </body> </html>
发表评论
-
jQuery链式操作实现原理 (Array-Like Object)
2012-05-07 01:13 2764jQuery链式代码风格:jQuery(“#one_div”) ... -
jQuery中的traversing查找及遍历
2012-04-19 00:21 1727jQuery提供了一整套非常好用的遍历Dom树节点的API,下 ... -
对于jQuery中的queue和data的理解
2012-04-05 00:37 0现在还有几个大块:event,attr,css,ajax ... -
jQuery中的support对象
2012-08-29 13:27 1573jQuery.support是为了替换jQuery.brows ... -
从jQuery中抽取工具函数
2012-04-05 00:07 1899每一个JS框架中都首先包含一些工具函数,为框架代码打下基础: ... -
jQuery1.7中的Callbacks
2012-03-30 01:35 2570严格来讲,jQuery的Callback对象只是对于回调的一种 ... -
jQuery的各种分支及如何做符合自己的前端框架
2012-03-28 01:50 2491话说现在已经是知识大爆炸的年代,不管你想到什么 ...
相关推荐
It was written to make DOM manipulation (so, moving things around a web page) easier for developers. It acts through JavaScript to ascribe ...
Moving Boxes Menu是一款个性的菜单,但更像是一款带有JS特效的相册,综合运用了许多常见的网页特效,比如弹出浮动层,JS滚动,淡入淡出效果等,对研究前端JS编程相当有用,你可以把它当作一个相册来用,也可以借鉴...
Moving on, we'll learn how the ECMAScript 6 features affect your web development process with jQuery. we'll discover how to use the newly introduced JavaScript promises and the new animation API in ...
Chapter 9 explores additional jQuery UI features including moving, sorting, resizing, and selection elements with a mouse. Chapter 10 teaches a variety of techniques, best practices, and patterns ...
可以使用ANSYS对移动热源进行数值仿真,常用在材料加工工程的焊接领域,运用高斯移动热源来模拟焊接过程
Moving Hadoop to The Cloud 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
Recently, new techniques to efficiently manage current and past location information of moving objects have received significant interests in the area of moving object databases and location based ...
北大POJ1083-Moving Tables 解题报告+AC代码
moving nest wrf ncl file
On The Electrodynamics Of Moving Bodies,爱因斯坦著,英文原版 .pdf
Life in moving fluids : the physical biology of flow Steven Vogel ; illustrated by Sally A. Schrohenloher Princeton University Press
moving-window algorithm we developed to fulfill these requirements. This algorithm uses pattern matching of the images of the areas around each minutia. it is fast and uses a stepping stone scan. it ...
分享一个JQuery背景插件,有动态效果,类似于深海气泡的效果。我也是摘自某DIV+CSS的前端模板(具体是出自哪里的模板记不清了),感觉不错,在此分享一下。
exp moving average的matlab代码
摘要:脚本资源,jQuery,jQuery相册 Moving Boxes Menu是一款菜单,但更像是一款带有JS特效的相册,综合运用了许多常见的网页特效,比如弹出浮动层,JS滚动,淡入淡出效果等,对研究前端JS编程相当有用,你可以把它...
The Expert Adviser Moving Average uses for trade signal generation one moving average.
Tracking a Moving Target in Cluttered Environments with Ranging Radios
scanners.This paper focuses on an algorithm for moving-object detection and tracking,given a sequence of distributed laser scan data of an intersection.The goal is to detect each moving object that ...
The Moving Average Indicator shows the mean instrument price value for a certain period of time.
course_notes_moving_frostbite_to_pbr_v32