mousemove事件只需要在鼠标按下标题栏的时候才需要触发

原理相当粗略,通过JS动态营造多少个div层,将其插入到body中,然后经过调解position的CSS属性为absolute或fixed,使其抽离原来的文书档案流的职位。再经过适当的加工艺美术品化就成了。
复制代码 代码如下:

标题 [关闭]

剧情部分

这就是七个div层的构造,第三个背景隐瞒层唯有在急需的时候才创设。种种div都定义了二个CSS类,那样有助于自定义其外观。
一些幼功用的落到实处 移动框体
只要在mousemove事件中,计算四遍活动鼠标地方的差值,再加上被移动框的原本的top,left,正是对话框新的岗位。mousemove事件只供给在鼠标按下题目栏的时候才须求接触,所以独有在触发标题栏的mousedown事件时才绑定mousemove事件,而鼠标释放时也还要免去mousemove的绑定。
mousemove和清除绑定mousemove事件的mouseup却不曾绑定到标题栏上,而是document上,之所以如此,是因为不经常候鼠标移动过快时,会移出标题栏范围,那时如若绑定到标题栏上的风波就能失灵,而绑定到document就不会。
复制代码 代码如下: var mouse={x:0,y:0};
function moveDialog { var e = window.event || event; var top = parseInt

  • ; var left = parseInt + ; dialog.css; mouse.x = e.clientX; mouse.y =
    e.clientY; }; dialog.find.mousedown{ var e = window.event || event;
    mouse.x = e.clientX; mouse.y = e.clientY;
    $.bind(‘mousemove’,moveDialogState of Qatar; }State of Qatar; $.mouseup{ $.unbind(‘mousemove’,
    moveDialog卡塔尔(قطر‎; }卡塔尔; 定位 居中定位相当轻巧完毕,IE下的clientWidth,
    offsetWidth等一雨后春笋属性和其余浏览器好像有个别不相似,所以不要用那一个属性,能够直接用jQuery下的width(State of Qatar函数:
    复制代码 代码如下: var left = –
    dialog.width / 2; var top = – dialog.height / 2;
    dialog.css;IE6下并不曾fixed形式,不过能经过window.onscroll事件模拟达成:
    // top 对话框到可视区域最上端地方的离开。 var top = parseInt – $; var left
    = parseInt – $.scrollLeft.scroll{ dialog.css.scrollTop(卡塔尔 +
    top,’left’:$.scrollLeft; z-index
    为了能完成多个对话框并存,接受了八个静态的zIndex变量,每趟成立新对话框时,都贯彻一遍自增操作,并将新值赋值给新创设的对话框的z-index,那样就能够承保最后创造的对话框总在最前面。
    对外接口 插件通过以下的法门调用: 复制代码 代码如下: var dlg = new Dialog;
    dlg.show(卡塔尔(قطر‎;当然倘若只是常常的行使,能够更简便一些: new Dialog.show(卡塔尔(قطر‎;
    // 或是 dialog;还能通过以下八个函数,对插件实行进一层的主宰:
    show:掩饰对话框,但并不删除对话框内的内容。
    close(卡塔尔国:关闭对话框,通透到底剔除其内容。 setContent:改良对话框内的原委。
    架构函数的参数
    结构函数有五个参数。content和options。content表示对话框的剧情;options表示对话框的各种配置选项。
    content可以是多个字符串,表示凸显的内容。或是二个Object类型,若是Object类型,则须求包蕴以下五个属性:type和value。type表示数据类型,而value则是type对应的从头到尾的经过。type选择以下三种档期的顺序:
    id:展现某一ID的剧情,但并不饱含此ID本人的原委。value对应该为某一HTML成分的ID值。
    img:显示一张图片。value对应该为图片的uri。
    url:通过ajax情势体现某一UCR-VL的剧情,所以一定要在同一域名下。value为对应的U科雷傲L地址。
    iframe:将一U奥迪Q5L钦赐的内容呈现到iframe中,它去除了AJAX调用的有的限量(雷同域名,重回的HTML代码中无法包涵head头等。)。value为对应的UKoleosL。
    options则是对Dialog行为和外观的具体设置: 选项

名称

描述

默认值

title

标题栏的文本标题

closeText

www.602.net,闭馆开关文字[关闭]

showTitle

是还是不是出示标题栏,若为否,则标题和停业按键都将不显示。true

draggable

是不是足以拖动框体。true

modal

模态对话框,若为是,则不行操作背景层。true

center

是不是居中显示,若为否,则通过CSS中的内容举办固定。true

fixed

对话框是或不是跟随滚动条移动。true

time

自行关闭对话框时间,单位飞秒,若为0,表示不会活动关闭。0

id

对话框的ID。若为false,则表示自动发出。false回调函数

名称

描述

回去值类型

beforeShow

在展现以前调用,若重回false,则不显示对话框。bool

afterShow

显示之后调用。无

beforeHide

在隐身以前调用,若重返false,则不隐讳对话框。bool

afterHide

掩瞒之后调用。无

beforeClose

在关门从前调用,若重临false,则不破产对话框。bool

afterClose

关门之后调用。无

自定义CSS

插件为对话框的每三个有的都提供了一个CSS类名,超轻便落成CSS的自定义:

类名

描述

.dialog-overlay

模态对话框时,的背景隐讳层。

.dialog

对话框的CSS。

.dialog .bar

标题栏的CSS。包括了标题和停业按键。

.dialog .bar .title

标题栏的标题部分。

.dialog .bar .close

题目栏的关门开关部分。

.dialog .content

内容部分。

您能够直接改过这几个CSS类,举办全局的退换,也能够经过id加类名的情势修正某八个对话框。
复制代码 代码如下: /*
只修改id为#dialog的对话框。 */ #dialog1 .bar {
text-transform:lowercase; } // 通过id属性钦点对话框的id。 new
Dialog(‘text’,{id:’dialog1′}卡塔尔; 在线演示代码代码打包下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注