`
kevinlog
  • 浏览: 3784 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论
阅读更多

<div class="iteye-blog-content-contain" style="font-size: 14px">

使用默认的HTML模板

var btnFn = function(){
  alert( e.target );
  return false;
};

easyDialog.open({
  container : {
    header : '弹出层标题',
    content : '欢迎使用easyDialog : )',
    yesFn : btnFn,
    noFn : true
  }
});

默认的HTML模板分成3个部分
header:包含弹出层的标题和关闭按钮
conent:包含弹出层的内容
footer:包含确定和取消按钮

如果header没有内容将不显示,content必须要有内容,footer没有2个按钮也不显示。
yesFn:确定按钮的回调函数,回调函数返回false将不关闭弹出层。
noFn:取消按钮的回调函数,回调函数返回false将不关闭弹出层,取消按钮的回调函数也同样会绑定在关闭按钮上,如果参数不是函数而是true,那么取消按钮就只有关闭弹出层的功能。
如果没有给按钮传回调函数,按钮将不显示。 

默认模板只有content

easyDialog.open({
  container : {
    content : '弹出层将在2秒后关闭...'
  },
  autoClose : 2000
});
默认模板如果只有content有内容,将不显示header和footer部分,将显示最简模式。
autoClose:自动关闭窗口,单位为毫秒(ms)。 

自定义弹出层

<div id="imgBox" style="display:none">
  <img src="test_img.jpg" alt="" />
</div>

easyDialog.open({
  container : 'imgBox',
  autoClose : 2000,
  fixed : false
});
自定义弹出层时,需要先将HTML结构添加到页面中,然后设置其隐藏(display:none),传参必须为id。
fixed:该参数为false时,弹出窗口为绝对定位(不跟随页面的滚动而滚动),为true时,弹出窗口为固定定位(跟随页面的滚动而滚动)。  

遮罩层

easyDialog.open({
  container : {
    header : '没有遮罩层',
    content : '欢迎使用easyDialog : )'
  },
  overlay : false
});
overlay:该参数为false时,将不显示遮罩层,没有遮罩层的情况下可以方便对页面继续进行操作

跟随定位

easyDialog.open({
  container : {
    header : '跟随定位',
    content : '弹出窗口可以跟随某元素绝对定位'
  },
  follow : 'demoBtn5',
  followX : -137,
  followY : 24
});
follow:被跟随元素,参数可以是元素的id,也可以是DOM对象。
followX:相对于被跟随元素的X轴偏移。
followY:相对于被跟随元素的X轴偏移。

关闭拖拽

easyDialog.open({
  container : {
    header : '关闭拖拽',
    content : '欢迎使用easyDialog : )'
  }
  drag : false
});
跟随定位

easyDialog.open({
  container : {
    header : '跟随定位',
    content : '弹出窗口可以跟随某元素绝对定位'
  },
  follow : 'demoBtn5',
  followX : -137,
  followY : 24
});
follow:被跟随元素,参数可以是元素的id,也可以是DOM对象。
followX:相对于被跟随元素的X轴偏移。
followY:相对于被跟随元素的X轴偏移。

关闭拖拽

easyDialog.open({
  container : {
    header : '关闭拖拽',
    content : '欢迎使用easyDialog : )'
  }
  drag : false
});
drag:该参数为false时将关闭拖拽的功能。
如果是自定义弹出层,要实现拖拽需要满足2个条件,首先要确保drag为true,然后需要一个id为“easyDialogTitle”的DOM元素。

关闭弹出层

easyDialog.close();

调用easyDialog.close()方法可以关闭当前的弹出层,另外使用ESC键也可以关闭弹出层,如果不想使用ESC键来关闭弹出层设置lock为true即可。

如果是自定义弹出层,也想使用关闭按钮来关闭弹出层,除了给该按钮手动绑定一个关闭弹出层的方法外,还可以添加一个id为“closeBtn”的DOM元素,这样不绑定事件就也可以关闭弹出层。

回调函数

var callFn = function(){
  alert( 'hello' );
};

easyDialog.open({
  container : {
    header : '回调函数',
    content : '欢迎使用easyDialog : )'
  },
  callback : callFn
});
callback:设置弹出层关闭后执行的回调函数。

参数列表

参数 参数类型 默认参数 参数说明
container String / Object null

弹出窗口内容

参数为DOM元素的id,那么弹出层内容将是自定义的,如果是object将自动创建一个默认的弹出层内容模板。

内容模板的参数:

header:弹出层的标题,并包含了关闭按钮,如果没有参数将不显示。

content:弹出层的内容,参数可以是字符串,也可以是HTML代码。

yesFn:确定按钮的回调函数,回调函数返回false将不关闭弹出层,回调函数的this指向easyDialog,无参数将不显示按钮。

noFn:取消按钮的回调函数,回调函数返回false将不关闭弹出层,回调函数的this指向easyDialog,该回调函数也同样会绑定在关闭按钮上,如果参数不是函数而是true,那么取消按钮仅有关闭弹出层的功能,无参数将不显示按钮。

yesText:确定按钮的文本,默认为“确定”。

noText:取消按钮的文本,默认为“取消”。

drag Boolean true

拖拽效果

true:启用拖拽效果。

false:禁用拖拽效果。

自定义弹出层,要实现拖拽需要满足2个条件,首先要确保drag参数为true,然后需要一个id为“easyDialogTitle”的DOM元素。

fixed Boolean true

设置定位

true:固定定位,弹出窗口跟随页面滚动而滚动。

false:绝对定位,弹出窗口不跟随页面的滚动。

overlay Boolean true

设置遮罩层

true:显示遮罩层,不可对页面其他元素进行操作。

false:不显示遮罩层,可以对页面其他元素进行操作。

follow String / Object null

跟随定位

设置弹出窗口跟随某元素进行绝对定位,跟随定位时将不显示遮罩层,参数可以是元素id也可以是DOM对象。

followX Number 0

设置跟随定位时,相对于被跟随元素的X轴偏移,单位为px,传参时无需带单位。

followY Number 0

设置跟随定位时,相对于被跟随元素的Y轴偏移,单位为px,传参时无需带单位。

lock Boolean false

锁定弹出层

true:ESC键不可以关闭弹出层。

false:ESC键可以关闭弹出层。

autoClose Number 0

设置弹出层自动关闭,单位为ms,传参时无需带单位。

callback Function null

设置关闭弹出层后执行的回调函数,this指向easyDialog。

默认内容模板的样式和结构

如果要自定义默认模板的样式,可以修改下载文档中的easydialog.css文件,下面是相应的HTML源码部分:

<div class="easyDialog_wrapper" id="easyDialogWrapper" >
  <div class="easyDialog_content">
    <h4 class="easyDialog_title" id="easyDialogTitle">
      <a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">&times;</a>
      弹出层标题
    </h4>
    <div class="easyDialog_text">欢迎使用easyDialog : )</div>
    <div class="easyDialog_footer">
      <button class="btn_normal" id="easyDialogNoBtn">取消</button>
      <button class="btn_highlight" id="easyDialogYesBtn">确定</button>
    </div>
  </div>
</div>
下载easyDialog:http://stylechen.com/wp-content/uploads/download/easydialog-v2.0.zip

</div>

 

分享到:
评论

相关推荐

    大学生Web前端静态网页设计期末大作业(高分必看).zip

    大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页...

    web前端初级.pdf

    Web前端是用户与网站或APP交互的第一界面,对于用户体验至关重要。本次串讲教案初级内容涵盖Web前端开发的多个基础知识点,接下来将按照教案内容逐一阐述。 首先,在Web页面制作基础这一部分,首先介绍了HTML的基本...

    Web前端开发职业技能等级标准.pdf

    1+X”Web前端人才标准 Web前端开发职业技能分为初、中、高三个等级,其中高级证书持有者具有复杂网页设计开发能力和网站架构设计规划能力;中级证书持有者具有动态网页设计开发能力;初级证书持有者具有静态网页...

    Web前端开发中级样题一理+实.zip

    【标题】"Web前端开发中级样题一理+实.zip" 涵盖了Web前端开发的理论与实践,这是一份针对1+x Web前端开发技能等级考试的中期练习题目集合。1+x标准旨在衡量和提升学员在Web前端领域的专业技能,确保他们具备企业级...

    WEB前端开发案例WEB开发源代码合集(81例)

    WEB前端开发案例WEB开发源代码合集(81例),前端资源大汇总;适合初学者进阶,几乎涵盖前端开发所有案例 360Barrage 360Game 360huanji 360movies 360pic 3D accordion accordion2 baidudwy baiduhf baidutm banner ...

    Delphi+Web前端开发教程基于TMS+WEB+Core框架.pdf

    **Delphi Web前端开发教程——基于TMS WEB Core框架** Delphi Web前端开发教程是针对想要使用TMS WEB Core框架创建Web应用程序的开发者,无论你是初学者还是高级开发者,本教程都提供了丰富的学习资源。TMS WEB ...

    阿里web前端开发手册.pdf

    "阿里web前端开发手册" 阿里web前端开发手册是一份详细的前端开发规范,涵盖了项目命名、目录命名、JS、CSS、SCSS、HTML、PNG 文件命名等多个方面的命名规范。下面是本手册中的一些重要知识点: 1. 命名规范: 在...

    大巧不工Web前端设计修炼之道.pdf

    《大巧不工:Web前端设计修炼之道》以Web前端设计的流程为主线,以前端设计的方法和原则为基础,围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳...

    Web前端开发初级样题一理+实.zip

    【标题】"Web前端开发初级样题一理+实.zip" 涵盖了Web前端开发的初级理论和实践知识,是针对“1+x WEB前端开发初级考试”的备考资料。这个压缩包很可能是为了帮助初学者或者准备参加该级别认证考试的人员进行系统性...

    web前端开发技术 在线投票网站系统设计

    1. **Web前端基础**:前端开发是构建Web应用程序的关键部分,它负责用户在浏览器中看到和交互的所有内容。这个项目涉及到HTML、CSS和JavaScript的基础知识,HTML用于创建网页结构,CSS负责样式设计,JavaScript则...

    Web前端开发试卷及答案.pdf

    Web 前端开发试卷及答案 以下是根据给定的文件生成的相关知识点: HTML 基础知识 1. 常用的 WEB 标准静态页面语言是 HTML。 2. 在 HTML 中,TR 是 table row 的缩写,TD 是 table data 的缩写。 3. 在 HTML 中,...

    WEB前端开发-案例汇总(81例).zip

    《WEB前端开发-案例汇总(81例)》是一个丰富的前端学习资源库,包含了81个不同的实战案例,旨在帮助初学者逐步进阶,并为有经验的开发者提供设计和参考。这个压缩包中的每个文件代表一个独立的项目,涵盖了前端开发的...

    Web前端设计课程思政教学设计.pdf

    Web 前端设计课程思政教学设计 Web 前端设计是计算机专业课的一门重要课程,对于学生的技术能力和思想政治素质的培养具有重要影响。为了更好地融合课程思政和 OBE 两种理念,研究者对 Web 前端设计课程思政教学...

    Web前端开发的现状和未来

    资源名称:Web前端开发的现状和未来内容简介:主题大纲前端的发展和现状行业内前端的位置前端的实际工作面临的问题未来的机遇建议的修炼之路行业内前端的位置前端很Cool?标签语义化、css布局、浏览器兼容、css ...

    程序员web前端视频教程(文档+代码+视频).rar

    Web前端开发是IT行业中至关重要的一环,它涉及到用户在浏览器端看到和交互的所有内容。本教程资源包"程序员web前端视频教程(文档+代码+视频).rar"为初学者提供了一个全面的学习路径,旨在帮助他们掌握这个领域的...

    web前端课程设计.zip

    在本课程设计中,我们将深入探讨“Web前端开发”这一主题。Web前端是构建互联网应用程序和网站的关键部分,它涉及到用户与网站互动的所有视觉和交互元素。本压缩包"web前端课程设计.zip"包含了实现这一目标所需的...

    WEB前端毕业实习报告.doc

    【标题】:WEB前端毕业实习报告 【描述】:这份报告详细记录了一位学生在WEB前端领域的毕业实习经历,包括实习目的、实习公司介绍、实习过程以及实习中的学习与体会。 【标签】:HTML5, CSS盒子模型, 块元素, 行内...

    Web前端框架技术综述.pdf

    "Web前端框架技术综述" 在了解Web前端框架技术的重要性之前,我们首先需要了解什么是Web前端框架技术。Web前端框架技术是一种基于Web的开发模式,它提供了一种高效、灵活的方式来开发和部署Web应用程序。这种技术的...

    资料-Web前端入门教程资料下载地址.txt

    |- web前端培训班_web前端开发优质教程_前端工程师培训-黑马程序员.png |- HTML入门及基础02资料.zip |- HTML5入门及基础01资料.zip |- CSS3入门及提高 08资料.zip |- CSS3入门及提高 07资料.zip |- CSS3入门及提高 ...

    Web前端大作业.zip

    《Web前端大作业——构建漫步时尚广场完整项目》 在本次Web前端的大作业中,我们面临的挑战是构建一个名为“漫步时尚广场”的完整项目。这个项目涵盖了网页设计、交互实现以及后端数据处理等多个方面,旨在提升我们...

Global site tag (gtag.js) - Google Analytics