论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

Javascript教程_javascript对话框(弹出层)组件artDialog源码教程

文章类别:Javascript | 发表日期:2010-4-29 9:09:25

Javascript教程_javascript对话框(弹出层)组件artDialog 源码教程

artDialog2采用全新的UI

功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤、穿越框架

优点


  • 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Safari
  • 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮),并且支持消息框大小拖动调节
  • 智能消息对齐: 如果设置了对话框宽度,文本会自动居中或者居左对齐
  • 容错: 如果定义的宽度高度小于内容大小不会出现错位,
  • 智能定位: 使用自定义坐标的时候智能修正位置,确保其在可视范围 (适用于弹出菜单)
  • 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
  • 轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)
  • 制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。
  • IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果
  • IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)


使用建议:


  • 锁屏功能是用来显示非常重要的操作或者消息,相当于一个漂亮的alert。它作用就是中断用户操作,而不是用来炫耀,所以那些交互比较频繁的网站尽量少用锁屏,可以学习一下facebook等一些网站优秀的交互设计。
  • 非必要无需开启静止定位,它总是静止在一个位置同样会干预用户操作
  • artDialog本身并不提供获取框架内容的功能,鉴于近日收到很多兄弟的留言询问此,不太熟悉js的朋友可以下载本帖附件看看



附带皮肤:

google chrome[支持ie6覆盖下拉控件]

facebook[只用了一张不到1k的背景图]


更新列表
------------------------------------------------------------------------------------------------
v2.0.9[见演示页面,暂未提供下载]


  • 优化代码结构,弹出后仍可访问内部方法( 如关闭:artDialog({id:'dg_test'}).close() ),大大增强了灵活性。
  • 修正IE7锁屏的时候滚动条没有禁止的问题
  • 让焦点自动附加到确定按钮或关闭按钮



v2.0.8


  • 修正超大对话框并使用定位时候可能被截取的BUG
  • 修复Opera无法正确处理对话框叠加高度(z-index)的BUG
  • 修复Opera设置坐标时候出现的变形BUG



v2.0.7


  • url参数加载外部页面的时候显示loading动画
  • 预加载皮肤背景图片
  • 优化拖动



v2.0.6


  • 解决页面载入即弹出的情况造成水平对齐不正常的BUG(主要是dom ready事件绑定)
  • 增加parent参数,支持对话框穿越框架在父页面弹出



v2.0.5


  • 剔除yesClose参数,如果要点击确定或者取消按钮不自动关闭对话框,让回调 函数返回false即可
  • 更改x参数名为left,y为top,为后续版本拓展right与bottom参数需要
  • 修改皮肤aero和chrome的图标布局,让回行消息文本留出图标的宽度



v2.0.4


  • 修改一小处兼容框架样式,防止调用页面body设置了文本对齐导致对话框标题文本也居中



v2.0.3


  • 增加id参数,可以方便外部脚本控制整个对话框,同时可防止对话框重复弹出
  • 增加yesClose参数,用于阻止对话框点击确定后自动关闭



v2.0.0       ...

视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058