翻看了以前留下的笔记，发现自己竟然做过这么多的页面交互效果，没有使用原生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. BZOJ 3809: Gty的二逼妹子序列

    3809: Gty的二逼妹子序列 Time Limit: 80 Sec  Memory Limit: 28 MBSubmit: 1387  Solved: 400[Submit][Status][Di ...

  2. BZOJ2242 [SDOI2011]计算器

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  3. 如何学习Oracle

    如何学习Oracle?分清几个概念是关键     经常有一些Oracle的初学者问到以下几个问题,这里集中解答一下,希望对大家有帮助.   1.如果有一定的数据库基础,知道SQL是怎么回事,即使写不出 ...

  4. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  5. Zookeeper的安装和使用

    首先在Zookeeper官网下载最新版本,下载后解压到用户目录下. tar -zxvf zookeeper-3.4.8.tar.gz 重命名conf目录下zoo_sample.cfg文件为zoo.cf ...

  6. [NHibernate]一对多关系（关联查询）

    目录 写在前面 文档与系列文章 一对多查询 总结 写在前面 上篇文章介绍了nhibernate的一对多关系如何配置,以及级联删除,级联添加数据的内容.这篇文章我们将学习nhibernate中的一对多关 ...

  7. 什么叫session和cookie-及其设置

    http的无状态? 保持状态, 是指当程序关闭后重启, 上一次操作的历史还能继续, 保持的. 如word中的 "选项"设置. 如windows系统的设置等等. http的设计目的, ...

  8. ActiveMQ启动多个broker

    具体步骤如下: 1.把activemq目录下的conf文件复制一份,叫做conf2, 命令: cp -r conf conf2 2.修改conf2目录下的activemq.xml文件 a.修改brok ...

  9. [译]git log进阶

    格式化log输出 oneline --oneline标记将每个commit压缩成一行. 默认情况下显示一个commit ID和commit描述的第一行. 输出如下: 0e25143 Merge bra ...

  10. java表格的使用 单元格绘制二

    JTable单元格是由单元格绘制器绘制出来的,这是一些执行TableCellRenderer接口的类.TableCellRenderer接口定义了唯一的getTableCellRendererComp ...