[原创]基于Jquery的PANEL窗体插件

花生米AJAX-UI系列之:基于JQUERY的GooPanel窗体控件类0.1版 (从今起，以后所有的新控件均使用JQUERY 1.5以上的内核) 特点： 1、既可当浮动窗口用，也可以当作网页中的内容容器框使用。 2、具备relative,absolute两种定位方式，和两种风格。 3、不仅有“关闭、最大化/还原、最小化、收起/下拉，固定最前端”等默认的右上角功能按钮，用户还可自定义排列顺序以及自定设定的按钮。 4、支持手工调整大小，手工移动。 5、内容可以是从AJAX远端载入的内容，也可以是本页面中的一个DOM元素，也可以是嵌入一个iframe。 6、可以把移动的窗体限制在父框架可见的范围内， 也可以让窗体超出父框架显示。 7、使用单个或少数几个窗体时，可分别定义单独的GooPanel类对象;当使用多个窗体时或者在随时可能增减窗体的情况下时,就可用到GooPanelManager管理类 8、使用GooPanelManager管理类时，STICK功能状态（即把窗体固定在最前顶(z-index保持最大)）才会有效. 9、用户可以自定义右上角功能按钮点击时，另外要执行的事件方法。 10、用户可以自定义当“重定义窗体宽高”、“重定义绝对定位”、“重设置Z-INDEX值”时分别发生的事件方法。其中绑定“重定义窗体宽高”事件很有用，比如用在窗体尺寸变化后，将内容框里的DOM元素重新Resize. ------------------------------------------------------- /*窗体控件定义--GooPanel类*/ 创建函数:createGooPanel: function(panelDiv,property,[viewPoint]) //传参panelDiv：为JQ对象时直接渲染；如果为STRING，则会在viewPoint中APPEND一个ID为panelDiv的新DIV后对其渲染 //可选传参viewPoint：展示窗体所用的父框架ID，如果为NULL，则默认为document.body //传参property：详细的配置信息 构造函数 GooPanel(panelDiv,property): 类内成员变量： this.$width： //PANEL控件的宽度，必填 this.$height： //PANEL控件的高度，必填 this.$position： //控件的定位方式，默认不写时为relative,可定义为absolute this.$div： //用来作整个Panel控件渲染对象的DIV,为一个Jquery对象(技巧:其它JQ对象对this.$div进行append操作，就可随意把该窗体从一个父容器移至另一个父容器中) this.$id： //当然是ID了！索引时还要用的 this.$header： //窗体的HEADER头部，JQ对象，里面放了标题和按钮，通过控制HEADER可以拖动窗体 this.$label： //控件的标题内容 this.$icon： //左上方图标的背景样式，默认不写时，为“不要图标” this.$btn_park： //右上角的按钮集 this.$funParkBtn=[] //保存park按钮所触发方法的“方法”数组，索引值为按钮的css样式类(即使是用户自定义的按钮也一样) this.$main： //PANAL的BODY部分中的内容框 this.$mainHeight： //内容框的高度，不包括边框，这个变量在尺寸变化操作中极为重要 this.$loadingText：//载入远端内容而没有完成时显示的提示信息，不填时默认为"loading……"; this.$autoSize： //是否允许手动调宽高，默认为false不可以 this.$minWidth： //PANEL变换大小时允许的最小宽度，默认0时为不限 this.$minHeight： //PANEL变换大小时允许的最小高度，默认0时为不限 this.$maxWidth： //PANEL变换大小时允许的最大宽度，默认0时为不限 this.$maxHeight： //PANEL变换大小时允许的最大高度，默认0时为不限 this.$ghost： //手工调整PANEL大小时，使用到的半透明层，当this.$autoSize=false时该属性将不存在 this.$isDown： //内部使用的标志位，鼠标在PANEL的HEADER或者边框上按下时的标志位,初始为0 this.$autoMove： //是否允许手动移动，默认为false不可以 this.$overRange： //手工移动时，是否允许PANEL超出父框架显示默认为FALSE，当this.$autoMove为FALSE时，该属性将不存在 ---------------------------------------------------------------------------------------- 一些需要用户直接定义的事件方法（只作一般应用时，这些方法也可不定义）： this.eventResize：//用户自定义的事件方法,当重定义窗体尺寸后触发function(id,addWidth,addHeight)， //参数id为PANEL的ID，addWidth为宽度的变化值，addHeight为高度的变化值。 this.eventNewLocal：//用户自定义事件的方法，当重定义窗口位置后触发function(id,left,top), //参数id为PANEL的ID,left/top为PANEL相对于对其限制的当前视口的left/top（CSS定位） this.eventZcoorChange：//用户自定义事件的方法，当窗体的Z-INDEX被重新设定后触发function(id,z) //参数id为窗体的ID，z为更新后的Z-INDEX的值 ---------------------------------------------------------------------------------------- 方法集： //设置右上角的ICON图标背景background样式，传入null时，图标删掉 setIcon(background) //设置PANEL的标题 setLabe(text) //设置新的宽高（如果定义了this.eventResize事件，那么执行本方法时，事件会被触发） setSize(Width,Height) //折起窗体(如果用户另外自定了this.$funParkBtn["fold"]事件，那么执行本方法时，事件会被触发) fold() //展开窗体(如果用户另外自定了this.$funParkBtn["unfold"]事件，那么执行本方法时，事件会被触发) unfold() //隐藏窗体本身(如果用户另外自定了this.$funParkBtn["min"]事件，那么执行本方法时，事件会被触发) toMin() //将窗体从隐藏状态变成显示状态(如果用户另外自定了this.$funParkBtn["show"]事件，那么执行本方法时，事件会被触发) show() //最大化窗口(如果用户另外自定了this.$funParkBtn["max"]事件，那么执行本方法时，事件会被触发) toMax() //将最大化的窗口还原为原来的尺寸(如果用户另外自定了this.$funParkBtn["restore"]事件，那么执行本方法时，事件会被触发) toRestore() //销毁自己(如果用户另外自定了this.$funParkBtn["close"]事件，那么执行本方法时，事件会被触发) close() //设置窗口是/否始终被固定在页面最前端(此设置仅相对于其它的GooPanel对象而言，且单独使用是无效的) //(如果用户另外分别自定了this.$funParkBtn["stick"]/this.$funParkBtn["free"]事件，那么传入true/false执行本方法时，事件会被触发) setStick:function(bool) //设置内容框的背景样式(默认不设时,与PANEL的主色调一致)，传参css为CSS样式中background的设置这符串 setMainBackground(css) //设置右上角中要使用的按钮(参数为需要显示按钮的所有种类名称集合，用逗号隔开，渲染时将依参数中从左至右的顺序进行渲染) //目前的自带初始按钮种类有:"stick,fold,max,min,close"五种,如果是其它的,就当作是用户自定义的按钮CSS样式类 setParkBtn(park) //增加一个新按钮 //如果是PANEL自带的按钮类型，则第一个参数直接传入类型名称(并直接将名称作为CSS样式类名称，用户应按照此定义此按钮的CSS类)，第二个参数为位置（最左边为0） //如果是用户自定义按钮，则第一个参数传入一个JSON：{cssClass:"userDef",attachFun:attachFun(id,cssDef)}(cssClass为自定义按钮的CSS类,attendFun为传入PANEL的ID和被点中按钮的种类) addParkBtn(para,index) //为一个按钮类型附加一个额外执行方法，如果正好是PANEL自带的按钮类型，该附加方法会在PANEL执行完原有的按钮命令后再执行 //按钮类型名称必须和CSS类名称同名！附加的方法会做为一个单元添加到this.$funParkBtn[]数组中，索引值为cssClass attachFunToBtn(cssClass,attachFun) //给一个列表单元载入内容 //data:可以是jquery的append()方法中可以传入的任何一种数据对象 loadData(data) //给一个列表单元载入一个URL下的作为子框架的内容，传参url为链接网址 loadUrl(url) //将页面中现有的一个id值为DataId的DOM元素中的内容载入内容框中 loadHtmlById(DataId) //通过AJAX远端读取一个要载入的HTML内容 //参数para为JSON，里面有url,data,type,timeout四种属性，与JQ的ajax方法传参中的同名属性意义一样。 loadDataAjax(para) //清空内容 clearContent() //检查一个PANEL中的内容框是否已经载入内容 isLoaded() //获取将内容框中的所有内容以JQUERY对象方式返回 getData() //移动窗体到一个新的地址（如果用户定义了this.eventNewLocal事件，那么执行该方法时，事件会被触发） moveTo(left,top) //设置菜单及其子菜单的Z-INDEX样式(一般来说不用设让浏览器默认即可,但如果担心页面内其它浮动层影响菜单的显示,则需设置z-index) //（如果用户定义了this.eeventZcoorChange事件，那么执行该方法时，事件会被触发） setZcoor(z) ----------------------------------------------------------------------- 构造方法中，一些参数的格式规范 右上角的按钮种类：目前的自带初始按钮种类有:"stick/free,fold/unfold,max/restore,min,close"五种，其CSS类名与按钮类型同名（用户处定义的按钮也要遵守此规则）。 构造方法中的传参property: var property={ width:400, //控件的宽度(像素),必填 height:300, //控件的高度(像素),必填 top:100, //控件与父框架顶部距离(像素)，可不填 left:100, //控件与你框架左边距离(像素)，可不填 position:"absolute",//控件的定位方式,有relative和absolute两种,默认为absolute headType:2, //控件HEADER的样式，默认为1，2是另一种水晶样式 label:"我的窗口",//控件HEADER中的标题 bodyPadding:3, //内部边距，默认不写时为4PX，当为0PX时，连BODY框连白色特效边框都没了 iconCls:"background:url(codebase/img/bug.png) no-repeat",////左上方图标的背景样式，默认不写时，为“不要图标”