- 浏览: 425913 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
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 2797jQuery链式代码风格:jQuery(“#one_div”) ... -
jQuery中的traversing查找及遍历
2012-04-19 00:21 1770jQuery提供了一整套非常好用的遍历Dom树节点的API,下 ... -
对于jQuery中的queue和data的理解
2012-04-05 00:37 0现在还有几个大块:event,attr,css,ajax ... -
jQuery中的support对象
2012-08-29 13:27 1618jQuery.support是为了替换jQuery.brows ... -
从jQuery中抽取工具函数
2012-04-05 00:07 1931每一个JS框架中都首先包含一些工具函数,为框架代码打下基础: ... -
jQuery1.7中的Callbacks
2012-03-30 01:35 2625严格来讲,jQuery的Callback对象只是对于回调的一种 ... -
jQuery的各种分支及如何做符合自己的前端框架
2012-03-28 01:50 2524话说现在已经是知识大爆炸的年代,不管你想到什么 ...
相关推荐
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编程相当有用,你可以把它当作一个相册来用,也可以借鉴...
在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本教程将深入讲解如何使用jQuery来实现文字的左右来回移动效果,这是一个常见的动态效果,常用于网站的...
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 ...
标题中的"ansys moving heat flux.zip"表明这是一个与ANSYS软件相关的压缩文件,重点在于"moving heat flux",即移动热流。这通常涉及到热力学分析中的动态问题,特别是当热源不是静止而是随时间或空间变化时的场景...
".cpp"扩展名表明这是一段C++代码,可能使用了STL(Standard Template Library)等C++特性。"POJ1083-Moving Tables.doc"则可能是一个Word文档,包含了对问题的解析、解题思路、算法分析以及代码解释等内容。 详细...
align-items: center; } #dynamic-background { position: absolute; width: 100%; height: 100%; z-index: -1; /* 确保背景在其他元素下方 */ } <div id="dynamic-background"></div> 欢迎来到动态...
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 ...
moving nest wrf ncl file
在本文中,我们将深入探讨如何使用jQuery库来创建一个左右移动文字的特效。这个特效能够使文字在页面上从左向右或者从右向左平滑地移动,从而为用户界面增添动态效果和视觉吸引力。 首先,理解jQuery是至关重要的。...
Life in moving fluids : the physical biology of flow Steven Vogel ; illustrated by Sally A. Schrohenloher Princeton University Press
《jQuery Moving Form Service.js:一个被废弃的JavaScript库探索》 在JavaScript的世界里,jQuery以其易用性和强大的功能,成为了无数开发者的选择。然而,随着时间的推移,技术和框架的更新迭代,一些曾经流行过...
分享一个JQuery背景插件,有动态效果,类似于深海气泡的效果。我也是摘自某DIV+CSS的前端模板(具体是出自哪里的模板记不清了),感觉不错,在此分享一下。
exp moving average的matlab代码
2. **Moving Boxes Carousel with jQuery**:通过这个教程,你可以学习如何构建一个带有滑动面板和缩放功能的轮播图。这有助于展示信息并吸引用户的注意力。 3. **Quick Feedback Form – jQuery & PHP**:这个实例...
- **标题**:“On The Electrodynamics Of Moving Bodies,爱因斯坦著,英文原版” - **描述**:“On The Electrodynamics Of Moving Bodies,爱因斯坦著,英文原版.pdf” 爱因斯坦在1905年发表的这篇论文被认为是现代...
摘要:脚本资源,jQuery,jQuery相册 Moving Boxes Menu是一款菜单,但更像是一款带有JS特效的相册,综合运用了许多常见的网页特效,比如弹出浮动层,JS滚动,淡入淡出效果等,对研究前端JS编程相当有用,你可以把它...
4. **运动图片(Moving Images)** jQuery 提供了 `animate()` 方法,使得我们可以创建自定义的动画效果,包括移动、缩放、旋转等。例如,我们可以设置一个计时器,每隔一段时间改变图片的位置,从而模拟图片在页面...
移动平均线(Moving Averages,MA)是一种在金融市场分析中广泛应用的技术指标,尤其在MetaTrader 4(MT4)这样的交易平台中。它可以帮助交易者识别趋势的方向,确定支撑和阻力水平,以及设置入场和出场点。这个zip...