jquery中lhgdialog插件(一)

一:前言

     最近在使用jquery的控件,其实以前也写但是突然之间遇到了需要从弹出窗口传值到父窗口,突然觉得这种传值的方式其实也是需要javascript的基础的,但是我自己还没有去真正的做过,所以还是先记载下吧。

  二:内容  

    先说说有关lhgdialog.js和lhgcore.lhgdialog.min.js、lhgdialog.min.js

    lhgdialog.min.js:是lhgdialog.js的压缩版,所谓压缩版就是将javascript的代码进行去空格、换行、去注解、简化不对外开放的变量名称等等手段达到不修改原代码的功能而减少文件的大小。所以在调试阶段使用压缩版,而在正式版部署时使用压缩版。

    lhgcore.lhgdialog.min.js:在导入js时需要先导入该js,因为lhgdialog.js里面有用到该js中的代码,如果你的框架中有jquery.js那么可以不导入lhgcore.lhgdialog.min.js,我先说说我自己用的效果,我在网页中导入了lhgcore.lhgdialog.min.js和lhgdialog.js,效果是弹出的窗体无法改变样式就是窗体颜色,但是我导入jquery.js和lhgdialog.js就可以改变样式,这可能就是兼容性问题

窗口lhgdialog.min.js文件的url参数
参数形式为:<script type="text/javascript" src="lhgdialog.min.js?self=true&skin=chrome"></script>
self:指定弹出窗口的页面
类型:String
默认:‘false‘
说明:此参数只用在框架页面中,如果不写此参数或值为false时则窗口跨框架弹出在框架最顶层页面,如果值为true则不跨框架,而在当前面页弹出。
skin:多皮肤共享CSS文件名
类型:String
默认:‘default‘
说明:不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口,此处的值就为多皮肤共存的CSS的文件名
url参数不需要设定的就可以不写,不写时就使用默认值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=GB2312" >
            <script type="text/javascript" src="jquery-1.9.1.js"></script>
            <script type="text/javascript" src="lhgdialog.js?self=true&skin=igreen"></script>
            <script type="text/javascript">
            $(document).ready(function(){
            $(".printbutton").bind("click",function(){
                $.dialog({title:‘第一次lhgdialog.js的测试!!!‘});
            });
            });
            </script>
        </meta>
    </head>
    <body>
        <input type="button" value="测试" class="printbutton">
    </body>
</html>

   先上js代码看看

$("#chooseGoods").click(function(){
                var arrs = new Array();
                $("input[class=‘xh‘]").each(function(){
                    arrs.push($(this).val());
                });
                $.dialog({
                    title:"选择商品",data:{"arrs":arrs},ok:function(){
                        var result = "";
                        var arrays = null;
                        var count = 0;
                        $("input[type=‘checkbox‘]:checked",this.content.document).each(function(index){
                            if($(this).attr("id") != ‘checkAll‘)
                            count++;
                        });
                        if(count == 0){
                            $.dialog.alert(‘没有选中记录,请选择‘,function(){},$dialogParent());
                            return false;
                        }
                        $("input[type=‘checkbox‘]:checked",this.content.document).each(function(index){
                            //动态给页面赋值
                            if($(this).attr("id") != ‘checkAll‘){
                                  result =  $(this).attr("returnvalue");//找到父窗口中的这个returnvalue
                                  arrays = result.split("##");
                      //$(this).parent()指td,$(this).parent().parent()指的就是tr,这里找得就是这一行的第三列
                      var jqmc=$(this).parent().parent().find("td:eq(3)").text();
                            var a = $.grep(arrs,function(n,i){
                      return n==arrays[0];//返回值相等的结果
          });
                                if($.type(a)==‘undefined‘ || a==‘‘){
                                    addsj(arrays[0],arrays[1],arrays[2],arrays[3],jqmc,arrays[5],arrays[6]);
                                }
                            }
                        });
                    },
                    content: "url:${base }/goods/goods_checkList.action",
                    width: "1000px",height: "500px",
                    lock:true,
                    parent:$dialogParent()
                });
            });
        });

grep的用法可以看如下:

http://www.jquery001.com/jquery-grep-function.html;

http://www.css88.com/archives/2472的介绍

在父窗口中显示有段这样的js用来判断已经选择的数据(比如说当你选了一次,发现选少了或者选错了时,再点一次的时候父窗口需要把你已经选择的选中)

jquery属性介绍:http://blog.csdn.net/mayanling0113/article/details/7403149

    //页面加载初始化
        $(document).ready(function () {
            var api = frameElement.api;//这个事获取界面的对象
            if(api.data.arrs!=null){//获取子窗口的值
                for(var i=0;i<api.data.arrs.length;i++){
                    $("input[type=‘checkbox‘][value=‘"+api.data.arrs[i]+"‘]").attr("checked", true);
                }
            }
        });
<td align="center"><input type="checkbox" value="${goods.Id}"  id="${goods.zfId}" return_value="${goods.Id}##${goods.Bh}##${goods.mc}##${goods.lx}##${goods.sl}##${goods.jg}##${goods.dz}" name="checkBoxname" /></td>

小知识点:

  有关parent和parents的区别

    parent:可以说是当前对象的父元素。比如说<td><input type="text" name="输入"></td>,在这里:$(:text).parent()的父元素就是<td></td>

    parents:可以说就是你的家族只要是你这一代的祖辈都是,可以看出找这些就是看该元素在那个包围圈内。

    这里有个链接可以直接去学习下,将的很详细了。我自己也是试验了一遍,觉得很好:

    http://blog.csdn.net/cui_angel/article/details/7903704

三:总结

  最近是自己在试着来试验这些前端的框架。觉得动手做还是不一样,有很多问题自己做了才知道的。努力!本来说要离开的,结果经理又让我留下来了,我自己也不知道是留是走,其实很矛盾的。因为我现在还是觉得可以学到很多东西的。知识在一点点的增长,现在才觉得自己还是经验不够啊。所以我自己可能还是决定。。。待定状态啊。

  开始行动就是从这个弹出框开始试验,决定用spring mvc来搭建框架做,用MyBatis来连接数据库。一步步来试验了。准备开始。Go!

        

时间: 2024-10-07 06:38:57

jquery中lhgdialog插件(一)的相关文章

jQuery中开发插件的两种方式(附Demo)

做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展的插件 类扩展的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关

Jquery中日期插件jquery.datepick的使用

jsp的代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd

jquery中validate插件表单验证

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

jQuery扩展与插件--附源码分析

扩展与插件 1. 编写JQuery插件 <script> $.extend(object) //为JQuery 添加一个静态方法. $.fn.extend(object) //为JQuery实例添加一个方法. jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); console.log($.min(3,4));

jquery数字打分插件与嵌入到EasyUI datagrid中的示例

这阵儿是断续折腾定性考评表打分的事儿了.虽是UI菜鸟,但却一直想让用户在操作上更加方便,之前基于"jQuery星级评分插件"实现了一个评分界面(因为比较简单,就不做总结了),用户反应还不错. 这一次的评分表中,各项分值的特点有:一是每个评分项的分值均不太一样:二是分值为整数,但分值范围大,从-1000到+1000都存在.若是采用在datagrid中嵌入编辑框的形式实现的话,总是觉得让用户使用不太方便,所以内心非常想做一个数字插件,然后就搜到中意的例子--"简单的jQuery用

Jquery 上传插件 FineUploader 在 webform 和 mvc 中的使用;

  多文件上传组件FineUploader使用心得 FineUploader 结合 一般处理程序 [上传示例] 参考:http://www.cnblogs.com/dudu/archive/2012/11/27/fine_uploader_mvc_ajax.html  asp.net mvc示例 参考 :http://www.cnblogs.com/chenkai/archive/2013/01/04/2844702.html  http://www.cnblogs.com/guero/p/38

Angular6 + Typescript 项目中怎么引用包装到jquery里面的插件

Angular6 + Typescript项目中用到了一个包含到jquery里面的插件 fontIconPicker https://github.com/fontIconPicker/fontIconPicker https://codeb.it/fonticonpicker/ 首先根据github上面的readme 安装 jquery 和 fonticonpicker npm install [email protected] @fonticonpicker/fonticonpicker -

web app中常用插件(zepto--用法类似于jquery、利用nodejs定制zepto)

1.移动端开发不用jquery的原因 jquery使用的优点中很大一个原因是解决了js的兼容性,但是在移动端开发中移动端的浏览器都很新进的浏览器,他的兼容性问题不需要jquery,所以不用考虑兼容性, 移动端的动画时支持css3的,所以直接使用css3来实现动画可以减少我们对jquery中动画函数的依赖 在移动端jquery对我们而言算是体积大,同时效率也不高 2.在移动端使用的插件---很多api都类似于jquery zepto是一个分模块的js库,他把不同的功能封装在不同模块(默认下载的ze

基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J