基于jquery开放的表现窗体控件,可配置<div>的位置在中间或左下角,或右下角。
//表现一个指定位置的窗口,这个是基于jquery开拓的,必需引入jquery包,没有的搜下,处处都是,一脚踩一个 /* *@param position假如是center就在赏识器的中间 假如是rigthDown就在赏识器的右下角 假如是leftDown就在赏识器的坐下角 假如输入的是个json工具就安坐标配置位置譬喻:{left:100,top:100} */ $.fn.myWindows = function(position) {
var windowobj = $(window); var browserWidth = windowobj.width(); //赏识器的宽 var browserHieght = windowobj.height(); //赏识器的高 var scrollLeft = windowobj.scrollLeft(); //转动条的横位置 var scrollTop = windowobj.scrollTop(); //转动条的竖位置 var selfWidth = this.outerWidth(true); //这个元素的宽包罗magin,padding var selfHeight = this.outerHeight(true); //这个元素的高包罗magin,padding
var left; var top; //中间的窗口 if (position == "center") { left = scrollLeft + (browserWidth - selfWidth) / 2; //获取左边的间隔 top = scrollTop + (browserHieght - selfHeight) / 2; //获取上边的间隔 } else if (position == "rigthDown") { //右下角窗口 left = scrollLeft + browserWidth - selfWidth; top = scrollTop + browserHieght - selfHeight; } else if ("leftDown") { left = scrollLeft + 0; top = scrollTop + browserHieght - selfHeight; } else if (position && position instanceof Object) { left = position.left; top = position.top; } this.css("position", "absolute"); //让这个容器绝对定位 this.css("left", left).css("top", top); //配置这个元素的位置
var self = this; //找到这个元素下clsss是title的元素,这个元素下的图片点击变乱,让这个窗口潜匿 this.children(".title").children("img").click(function() { self.hide("show"); });
return this; //返回工具自己利便连级操纵 }
下面是挪用的要领:
html代码:
<div style="width:100px;height:100px;display:none"> <div class="title"> <img src=''/> 这个是窗体的问题部门,class必需便是title这个图片用来封锁这个窗口的 <div> 这里是你的内容 <div> <input type="button" id="showDiv" value="表现窗体" onclick="showWindows()">
javascript代码:
<script> function showWindows() { $("#windwosDiv").myWindows("leftDown"); } </script> (编辑:河北网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|