加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

基于jquery的表现窗体控件 可节制位置

发布时间:2018-09-03 16:39:56 所属栏目:业界 来源:站长网
导读:基于jquery开放的表现窗体控件,可配置div的位置在中间或左下角,或右下角。 //表现一个指定位置的窗口,这个是基于jquery开拓的,必需引入jquery包,没有的搜下,处处都是,一脚踩一个 /* *@param position假如是center就在赏识器的中间 假如是rigthDown

基于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>

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读