jquery实现页面交互的几个小例子

翻看了以前留下的笔记，发现自己竟然做过这么多的页面交互效果，没有使用原生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实现页面交互的几个小例子的更多相关文章

Javascript一个在页面内追加元素的小例子
如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery ...
使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片
查看本章节查看作业目录需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片实现思路: 在 ...
php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
JQuery 实现页面无刷新
对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...
基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式
在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...
10 个基于 jQuery 的 Web 交互插件推荐
英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的 ...
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

随机推荐

hbase-0.94 Java API
Hierarchy For Package org.apache.hadoop.hbase Package Hierarchies: All Packages Class Hierarchy java ...
Servlet和JSP学习指导与实践（三）:JSP助阵
前言: JSP(Java Server Page)虽然作为一门服务端的语言,但它并没有创新新的语言标准.有些人一接触jsp之后发现易学易懂.实际上,jsp的内部原理仍然是基于Servlet,它是Ser ...
.NET 学习书籍推荐
时间过得好快啊,转眼三月过了1周多了,今天把看书的目录记录下,方便初学者最近由于项目需要研究下dotnet 技术,参考书籍如下: 1.深入理解C# 2.CLR via C# 3.Framework ...
BZOJ 1432: [ZJOI2009]Function
1432: [ZJOI2009]Function Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1046 Solved: 765[Submit][Sta ...
【poj3875】 Lights
http://poj.org/problem?id=3875 (题目链接) 题意有M个N位的不同的二进制数,他们异或起来前v位等于1,求这m个数的不同组合方式(同一组数不同顺序不算). Soluti ...
Alpha阶段第六次Scrum Meeting
情况简述 Alpha阶段第六次Scrum Meeting 敏捷开发起始时间 2016/10/27 00:00 敏捷开发终止时间 2016/10/28 00:00 会议基本内容摘要提出了目前阶段遇到的 ...
【Phylab2.0】Alpha版本项目展示
团队成员冯炜韬(PM)http://www.cnblogs.com/toka 岳桐宇(后端)http://www.cnblogs.com/mycraftmw 杨子琛(测试&LaTeX)htt ...
ubuntu14.04 安装pip
参考链接: 1.http://www.liquidweb.com/kb/how-to-install-pip-on-ubuntu-14-04-lts/ 2.http://idroot.net/tuto ...
AXIS 调用 webservice服务时传递服务器验证需要的用户名密码
System.setProperty("javax.net.ssl.trustStore", T.class.getResource(".").getPath( ...
arcgis engine 监听element的添加、更新和删除事件（使用IGraphicsContainerEvents）
IGraphicsContainerEvents Interface 如何监听 element事件? 如,当我们在Mapcontrol上添加.删除.更新了一个Element后,如何捕捉到这个事件? ...

jquery实现页面交互的几个小例子

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

随机推荐

热门专题