翻看了以前留下的笔记，发现自己竟然做过这么多的页面交互效果，没有使用原生js，全是通过jquery实现的，于是把他们整理下来，附上表现效果图及源代码

1 业务应用：授权商品组和删除商品组

本质：复选框及文字的左右移动

表现效果：点击确定时谈框提示哪些商品组已新授权或新删除，只是记录的并非商品组文字，而是商品组编码，各商品组之间以~号分隔

 <html >

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

     <script src="jquery-1.8.3.js">

     </script>

 </head>

    <body>

       <div  style="margin-left:30%;margin-top:10%;width:400;height:400px;border:solid">

       <table >

          <tr>

             <td>

             <div id="leavediv" style="border:solid;width:150;height:340px">

                 <input type="checkbox" autocomplete="off" value="" name="leaved"/><span>电视机</span><br/>

                 <input type="checkbox" autocomplete="off" value="" name="leaved"/><span>洗衣机</span><br/>

                 <input type="checkbox" autocomplete="off" value="" name="leaved"/><span>冰箱</span><br/>

                 <input type="checkbox" autocomplete="off" value="" name="leaved"/><span>手表</span><br/>

                  <input type="checkbox" autocomplete="off" value="" name="leaved"/><span>奶粉</span><br/>

                 <input type="checkbox" autocomplete="off" value="" name="leaved"/><span>空调</span><br/>

                 <input type="checkbox" autocomplete="off" value="" name="leaved"/><span>音像</span><br/>

             </div>

             </td>

             <td>

             <input id="addstr" type="button" value="授权>"><br/>

             <input id="delstr" type="button" value="<删除">

             </td>

             <td>

             <div id="gaineddiv" style="border:solid;width:150;height:340px">

                  <input type="checkbox" autocomplete="off" value="" name="gained"/><span>箱包</span><br/>

                 <input type="checkbox" autocomplete="off" value="" name="gained"/><span>3C数码</span><br/>

                 <input type="checkbox" autocomplete="off" value="" name="gained"/><span>美妆</span><br/>

                 <input type="checkbox" autocomplete="off" value="" name="gained"/><span>彩票</span><br/>

                   <input type="checkbox" autocomplete="off" value="" name="gained"/><span>百货</span><br/>

             </div>

             </td>

          </tr>

       </table>

       <div align="center">

       <input align="center" type="button" value="关闭" /><input id="confirm" type="button" value="确定"/>

       </div>

       <div>

       <form id="changedstr" action="cataca.action">

       <input id="ch" type="hidden" value="" /><br/>

       </form>

    </body>

 <script>

    $(document).ready(function(){

      var addstr="";

      var delstr="";

      $("#addstr").click(function(){

           var obj=$("input[type=checkbox][name=leaved]:checked");

           var count=obj.length;

           for(var i=;i<count;i++){

               $("#gaineddiv").append("<input type='checkbox' value='"+obj[i].value+"' name='gained'/><span>"+$(obj[i]).next().html()+"</span><br/>");

               var objvalue=obj[i].value;

               $(obj[i]).next().next().remove();

               $(obj[i]).next().remove();

               $(obj[i]).remove();

               if(delstr.indexOf(objvalue)>-){

                             delstr=delstr.replace(objvalue+"~","");

                             }else{

                                addstr=addstr+objvalue+"~";

                             }

           }

      })

      $("#delstr").click(function(){

           var obj=$("input[type=checkbox][name=gained]:checked");

           var count=obj.length;

           for(var i=;i<count;i++){

               $("#leavediv").append("<input type='checkbox' value='"+obj[i].value+"' name='leaved'/><span>"+$(obj[i]).next().html()+"</span><br/>");

               var objvalue=obj[i].value;

               $(obj[i]).next().next().remove();

               $(obj[i]).next().remove();

               $(obj[i]).remove();

               if(addstr.indexOf(objvalue)>-){

                                 addstr=addstr.replace(objvalue+"~","");

                                            }else{

                                                 delstr=delstr+objvalue+"~";

                                                }

      }

     })

           $("#confirm").click(function(){

                alert("授权的商品组:"+addstr);

                alert("删除的商品组:"+delstr);

           })

      })

 </script>

 </html>

2业务应用：需要对表格相同的部分进行合并，但后台程序往往无法做到这样的效果，或者即使做到也很复杂

对于内容相同的行进行合并

合并的js相对还是比较难理解的,需要注意的是，js代码必须放在html结尾，否则浏览器会先加载js，js被加载后就好立马执行，但这时页面的表格并未加载完成，js会因为找不到表格的行而不进行任何操作，这样不会有任何效果。

         

　　　　　　　　　　　　　　　　　　　　　　　　　　如上图所示，重复的单元格被合并

Code如下：

 <head>

      <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

      <script src="jquery-1.8.3.js"></script>

 </head>

 <div id="groupManage">

 <table   border="" cellpadding ="" cellspacing="" >

     <tr><td>年级</td><td>班级</td><td>姓名</td></tr>

     <tr><td>二年级</td><td>二年级（）班</td><td>小红</td></tr>

     <tr><td>二年级</td><td>二年级（）班</td><td>小明</td></tr>

     <tr><td>三年级</td><td>三年级（）班</td><td>花花</td></tr>

     <tr><td>三年级</td><td>三年级（）班</td><td>草草</td></tr>

 </table>

 </div>

 <script>

     var grid = $("#groupManage");

     var rowCount = grid.find("tr").length - ;

     var flagRow = grid.find("tr:eq("+rowCount+")").find("td:eq(0)").html();

     var sp = ;

     for(var i = rowCount; i >=; i--) {

         var tempRow = grid.find("tr:eq("+i+")");

         if(flagRow == tempRow.find("td:eq(0)").html()) {

             tempRow.find("td:eq(0)").remove();

         }

         else {

             $("<td/>").attr("rowspan", rowCount-i-sp).html(flagRow).prependTo(tempRow.parent().find("tr:eq("+(i+)+")"));

             flagRow = tempRow.find("td:eq(0)").html();

             sp = rowCount-i;

             if(i != ) {

                 tempRow.find("td:eq(0)").remove();

             }

           }

     }

 </script>

3实现遮罩层和弹窗效果

写到这不得不讲一个故事，

　　联合利华引进了一条香皂包装生产线，结果发现这条生产线有个缺陷：常常会有盒子里没装入香皂。总不能把空盒子卖给顾客啊，他们只得请了一个学自动化的博士后设计一个方案来分拣空的香皂盒。博士后拉起了一个十几人的科研攻关小组，综合采用了机械、微电子、自动化、X射线探测等技术，花了几十万，成功解决了问题。每当生产线上有空香皂盒通过，两旁的探测器会检测到，并且驱动一只机械手把空皂盒推走。　
　　中国南方有个乡镇企业也买了同样的生产线，老板发现这个问题后大为发火，找了个小工来说：“你他妈给老子把这个搞定，不然你给老子爬走。”小工很快想出了办法：他花了90块钱在生产线旁边放了一台大功率电风扇猛吹，于是空皂盒都被吹走了。

　　抛开故事的瑕疵不论，这个故事告诉我们要化繁为简，用简单的方法去实现目的，达到效果。

我写弹框的时候就是这样，当时千方百计想要通过 jquery 去创建一个弹框对象，后来发现用window.open()方法更加方便快捷，这种方法实际上是打开另外一个浏览器窗口叠加在原窗口上，并不是本页面的弹框，但确足够好用

js代码：

window.open ('${ctx}/emailTmpl/queryEmailTmplForMass.do', 'newwindow', 'left=400,top=150,height=400,width=800,resizable=yes,scrollbars=yes');

　　

jquery实现页面交互的几个小例子的更多相关文章

  1. Javascript一个在页面内追加元素的小例子

    如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  2. jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题

    jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery ...

  3. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  4. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  5. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  6. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式

    在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...

  8. 10 个基于 jQuery 的 Web 交互插件推荐

    英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的 ...

  9. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

随机推荐

  1. python 下 tinker、matplotlib 混合编程示例一个

    该例是实现了 Tinker 嵌入 matplotlib 所绘制的蜡烛图(k 线),数据是从 csv 读入的.花一下午做的,还很粗糙,仅供参考.python 代码如下: import matplotli ...

  2. linux系统的学习

    通过<鸟哥的linux私房菜>的学习,自己得到的收获! 关机与重启 shutdown -k now "message" 用以发送所有信息,并不是真的关机.还可以登录新的 ...

  3. welcome to learn prgram

    Tips for your suceess(成功的秘诀) 1. Practice every day(每天练习) 每天用两小时来学习.你可以使用各种零碎时间,积少成多.你可以使用搞这些时间用来巩固练习 ...

  4. 迭代器学习之一：使用IEnumerable和IEnumerator接口

    写博客是检验我学习的成果之一以及自我总结的一种方式,以后会经常利用这种方式进行技术交流和自我总结,其中认识不深难免会有错误,但是一直懂得不懂就问,不懂就学的道理! 1.首先看一个简单的列子 , , , ...

  5. 面试题目——《CC150》数学与概率

    面试题7.2:三角形的三个顶点上各有一只蚂蚁.如果蚂蚁开始沿着三角形的边爬行,两只或三只蚂蚁撞到一起的概率有多大?假定每只蚂蚁会随机选一个方向,每个方向被选到的几率相等,而且三只蚂蚁的爬行速度相同. ...

  6. Python之路【第二十篇】其他WEB框架

    WEB框架功能分析 WEB框架本质上,就是一个SOCKET Server WEB框架前面有WSGI或者是自己写的SOCKET,然后交给URL路由系统处理,然后交给某个函数或某个类,然后在模板里拿到模板 ...

  7. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  8. JavaScript学习链接

    Js中this的用法:http://www.cnblogs.com/RitaRichard/archive/2011/10/14/2212161.html JavaScript\ActionScrip ...

  9. Test Regular Expressions Online with RegExr免费的正则表达式检验网站

    免费的正则表达式检验网站: http://www.regexr.com

  10. 加载默认图片，如何避免img标签陷入onerror事件死循环

    当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...