第一次写jquery组件

约定不等于承诺〃 2022-08-19 01:58 135阅读 0赞

/**
     * @author LiCheng
     * 
     *  功能:该插件用于点击input,弹出子窗口,并自动创建隐藏的input,将子窗口的返回值赋值到父窗口
     *  
     *  使用:
     *  1.在使用页面导入comm_openWin.css
     *  2.在使用页面导入comm_openWin.js
     *  3.在需要弹出框的input上指定对应class,并添加fname,fvalue属性,加入singleSelect属性,值随意填,则为单选,多选则不用加singleSelect属性.
     *  4.回调函数changeCallback
     * 
     */
    ;(function($,window,document,undefined){
        // 定义OpenTabWin的构造函数
        var OpenTabWin = function(opt){
            this.defaults = {
                    'width':'500px',
                    'height':'550px',
                    classTwin : {
                        'deptTabWin' : 'comm.do?method=forwardPage&pg=comm/departmentTableWin',
                        'userTabWin' : 'comm.do?method=forwardPage&pg=comm/userTableWin',
                        'comparisonTabWin' : 'tcomparison.do?method=forwardComparisonPage&pg='+encodeURI('traffic/talarmcomparisontypewin') 
                    },
                    changeCallback:function(target,returnVal){}
            },
            this.options = $.extend({}, this.defaults, opt);
        };
    
        //  绑定click事件
        OpenTabWin.prototype = {
                openWin:function(){
                    var opt = this.options;
                    var width = opt.width;
                    var height = opt.height;
                    var jsonObj = opt.classTwin;
                    for(var item in jsonObj){
                        $('.'+item).unbind('click').bind('click',function(event){
                            var target = event.target;
                            var returnVal ;
                            var classNames = $(this).attr('class');
                            var selectedShowVals = $(this).attr('value');
                            var fid = 'com_sunshine_jcbk_myotwPlugin_' + $(this).attr('fname');
                            var selectedHideVals = $('#'+fid).attr('value');
                            var singleSelect = $(this).attr('singleSelect');
                            if(singleSelect){
                                singleSelect = true;
                            }else {
                                singleSelect = false;
                            }
                            var classNameAgrs = classNames.split(' ');
                            var urlPage = '';
                            for(var i=0;i<classNameAgrs.length;i++){
                                var className = classNameAgrs[i];
                                if(opt.classTwin[className]) urlPage = eval('opt.classTwin.'+className);
                            }
                            if(urlPage == null || typeof(urlPage)=='undefined'||urlPage==''){
                                return ;
                            }else if(selectedShowVals != null && typeof(selectedShowVals)!='undefined' && selectedShowVals != ""){
                                urlPage += '&selectedShowVals='+encodeURI(encodeURI(selectedShowVals))
                                    +'&selectedHideVals='+encodeURI(encodeURI(selectedHideVals));
                            }
                            returnVal = openTabWin($(this), width, height,urlPage, singleSelect);
                            opt.changeCallback(target,returnVal);
                        });
                    }
                }
        };
        
        // 定义创建隐藏input的方法
        function createHideInput(jsonObj){
            for(var item in jsonObj){
                $('.'+item).each(function(){
                    var fname = $(this).attr('fname');
                    var fid = 'com_sunshine_jcbk_myotwPlugin_'+fname;
                    var fvalue = $(this).attr('fvalue');
                    $(this).addClass('icon-win');
                    $(this).after('<input type="hidden" name="'+fname+'" id="'+fid+'" value="'+fvalue+'">');
                });
            }
        }
        
        // 定义弹出窗的方法
        function openTabWin(ele, width, height,urlPage,singleSelect){
            var $element = ele;
            var obj = new Object();
            obj.singleSelect = singleSelect;
            // onclick监听事件
            //urlPage
            str = window.showModalDialog(urlPage,obj,'dialogWidth='+width+';dialogHeight='+height);
            // 回调函数创建隐藏域并并赋值
            var fname = $element.attr('fname');
            var fid = 'com_sunshine_jcbk_myotwPlugin_'+fname;
            var showVals = (str==null || typeof(str)=='undefined')?'':str.showVals;
            var hideVals = (str==null || typeof(str)=='undefined')?'':str.hideVals;
            
            if(showVals && hideVals){
                $element.val(showVals);
                $('#'+fid).val(hideVals);
            }
            
            return str;
        }
    
        // 在插件中使用OpenTabWin对象
        $.fn.myotwPlugin = function(options){
            // 创建OpenTabWin的实体
            var openTabWin = new OpenTabWin(options);
            // 创建隐藏input
            createHideInput(openTabWin.options.classTwin);
            // 添加窗口监听事件
            openTabWin.openWin();
            return;
        }
    })(jQuery, window, document);

子窗口中的js,使用了easyui