{"success":true,"code":0,"msg":"","data":{"themeEx":{"tid":24,"replies":0,"views":48979,"searchs":7,"topGmtUpdate":null,"top":false},"theme":{"id":24,"title":"js插件之artDialog","content":"\n最早接触artdialog是v4那时感觉这个插件还蛮简单小巧的。artDialog.alert,artDialog.tip,artDialog.load,artDialog.confirm各种函数简单易懂,这个很容易理解学习,这里不多做介绍(这也算介绍- -?),本篇主要介绍v6版本。\n
\n\t
\n
\n\tv6版本整个插件的结构发生了改变,当初花了点时间才基本会用,据官网介绍,腾讯和盛大都在使用整个插件用户数超40W。\n
\n\n\t官方的介绍:\n
\n\n\tartDialog —— 经典的网页对话框组件,内外皆用心雕琢。\n
\n\n\tv6版本最近一次更新是在2014年12月6号。\n
\n\n\t好了,进入正题\n
\n\n\t1.首先从官网下载artDialog插件,然后引入到项目中 \n
\n//jquery,10以上\n<script src=\"theme/jquery/1.11.3/jquery.min.js\">\n\n
\n\t2.先来个最简单的对话框
\ncontent中可以加入HTML代码\n
var d = dialog({\n title: '欢迎',\n content: '欢迎访问祝福之风!'\n});\nd.show();\n\n\n \n
\n\t
\n3.模态对话框
\n模拟对话框弹出时,只能对弹出框内的对象进行操作,其他对象无法操作\n
d.show();改为d.showModal();\n\n \n
\n\t
\n
\n4.警告框
\n以“删除”这个情景为例\n
var d = dialog({\n title: '警告',\n\tcontent: '确认删除?',\n\tokValue: '确定',\n\tok: function () {\n\t//删除操作\n return false;//阻止dialog关闭\n\t},\n\tcancelValue: '取消',\n\tcancel: function () {}\n});\nd.showModal();\n\n\n \n
\n\t
\n
\n5.气泡,类似于v4中的tip \n
var d = dialog({\n content: '欢迎访问祝福之风!'\n});\nd.show();\n\n\n \n
\n\t
\n
\n气泡不消失?是的,插件只是负责显示哦,要设置成显示一会就消失的样子,就要手动加上setTimeout\n
var d = dialog({\n content: '欢迎访问祝福之风!'\n});\nd.show();\nsetTimeout(function(){d.close().remove();},1000);//加上remove来销毁实例\n\n\n \n
\n\t
\n
\n6.气泡浮层
\n一个点在于quickClose可以在点击空白处时让对话框关闭,另一个点事对话框在show的时候可以指定参数,该参数是个元素对象\n
var d = dialog({\n content: '欢迎访问祝福之风!',\n quickClose: true// 点击空白处快速关闭\n});\nd.show(document.getElementById('quickref-bubble'));\n\n\n \n
\n\t
\n
\n12个方向演示,懒得写了,直接指向官网demo \n
\n\t7.给对话框左下脚添加复选框 \n
\nvar d = dialog({\n title: '欢迎',\n content: '欢迎访问祝福之风!',\n ok: function () {},\n statusbar: '不再提醒'\n});\nd.show();\n\n\n \n
\n\t
\n
\n8.加载一个链接
\n首先要加载链接(页面)要使用dialog-plus.js(或dialog-plus-min.js),被坑过有木有,害我跟官网对照半天,没见写法上有什么错误,结果是引入的js的问题-0-\n
var d = dialog({\n title: '欢迎',\n url: '你想要加载的url',\n ok: function () {}\n});\nd.show();\n\n\n\n \n
\n\t
\n
\n\t基本功能差不多就是这些,还有就是dialog只有在加载的时候自动调整大小(reset)一次,之后由于在对话框内操作,导致需要调整对话框大小的话,要手动调用reset函数。\n
\n\n\t谢谢小伙伴们耐心得看完了,有啥问题请在评论中提出。\n
","contentView":"最早接触artdialog是v4那时感觉这个插件还蛮简单小巧的。artDialog.alert,artDialog.tip,artDialog.load,artDialog.confirm各种函数简单易懂,这个很容易理解学习,这里不多做介绍(这也算介绍- -?),本篇主要介绍v6版本。 \n\tv6版本整个插件的结构发生了改变,当初花了点时间才基本会用,据官网介绍,腾讯和盛大都在使用整个插件用户数超4","author":"幻幻Fate","authorId":1,"fid":3,"forumName":"H5&CSS3","reprint":false,"status":2,"statusName":"已发布","tags":"js,artdialog,artDialog.js","tagList":["js","artdialog","artDialog.js"],"imgList":"","topImg":null,"url":"https://www.reinforce.cn/t/24.html","imgs":[],"css":"","js":"","publishTime":1421549916000,"timeForRead":"2015年01月","gmtCreate":null,"gmtModified":1546071926000,"replies":0,"views":48956,"searchs":7,"top":false}}}