artdialog html4,js插件之artDialog
最早接触artdialog是v4那时感觉这个插件还蛮简单小巧的。artDialog.alert,artDialog.tip,artDialog.load,artDialog.confirm各种函数简单易懂,这个很容易理解学习,这里不多做介绍(这也算介绍- -?),本篇主要介绍v6版本。
v6版本整个插件的结构发生了改变,当初花了点时间才基本会用,据官网介绍,腾讯和盛大都在使用整个插件用户数超40W。
官方的介绍:
artDialog —— 经典的网页对话框组件,内外皆用心雕琢。
支持普通与 12 方向气泡状对话框
完善的焦点处理,自动焦点附加与回退
支持 ARIA 标准
面向未来:基于 HTML5 Dialog 的 API
支持标准与模态对话框
丰富且友好的编程接口
能自适应内容尺寸
仅 4kb (gzip)
v6版本最近一次更新是在2014年12月6号。
好了,进入正题
1.首先从官网下载artDialog插件,然后引入到项目中
//jquery,10以上
2.先来个最简单的对话框
content中可以加入HTML代码
var d = dialog({
title: '欢迎',
content: '欢迎访问祝福之风!'
});
d.show();
试试吧
3.模态对话框
模拟对话框弹出时,只能对弹出框内的对象进行操作,其他对象无法操作
d.show();改为d.showModal();
试试吧
4.警告框
以“删除”这个情景为例
var d = dialog({
title: '警告',
content: '确认删除?',
okValue: '确定',
ok: function () {
//删除操作
return false;//阻止dialog关闭
},
cancelValue: '取消',
cancel: function () {}
});
d.showModal();
试试吧
5.气泡,类似于v4中的tip
var d = dialog({
content: '欢迎访问祝福之风!'
});
d.show();
试试吧
气泡不消失?是的,插件只是负责显示哦,要设置成显示一会就消失的样子,就要手动加上setTimeout
var d = dialog({
content: '欢迎访问祝福之风!'
});
d.show();
setTimeout(function(){d.close().remove();},1000);//加上remove来销毁实例
试试吧
6.气泡浮层
一个点在于quickClose可以在点击空白处时让对话框关闭,另一个点事对话框在show的时候可以指定参数,该参数是个元素对象
var d = dialog({
content: '欢迎访问祝福之风!',
quickClose: true// 点击空白处快速关闭
});
d.show(document.getElementById('quickref-bubble'));
试试吧
12个方向演示,懒得写了,直接指向官网demo
7.给对话框左下脚添加复选框
var d = dialog({
title: '欢迎',
content: '欢迎访问祝福之风!',
ok: function () {},
statusbar: '不再提醒'
});
d.show();
试试吧
8.加载一个链接
首先要加载链接(页面)要使用dialog-plus.js(或dialog-plus-min.js),被坑过有木有,害我跟官网对照半天,没见写法上有什么错误,结果是引入的js的问题-0-
var d = dialog({
title: '欢迎',
url: '你想要加载的url',
ok: function () {}
});
d.show();
试试吧
基本功能差不多就是这些,还有就是dialog只有在加载的时候自动调整大小(reset)一次,之后由于在对话框内操作,导致需要调整对话框大小的话,要手动调用reset函数。
谢谢小伙伴们耐心得看完了,有啥问题请在评论中提出。
artdialog html4,js插件之artDialog相关推荐
- 记录一款好用的JS插件,artDialog中国人自己写的插件
2019独角兽企业重金招聘Python工程师标准>>> http://www.daimajiayuan.com/download/201304/yulan/artDialog4.1. ...
- 前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框 最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...
- flot介绍与使用(一款开源绘图js插件)
做了这么多年软件开发,图表库是经常使用到的,也踩过不少坑,我自己用过的就有: mschart(微软出品,asp.net 和winform都可以使用,需要.net3.5以上) DevExpress控件( ...
- viewer.js插件的应用
需求:商品列表中图片点击放大. 实现方法:使用viewer.js插件,实现点击图片图片放大 做法: 1.下载viewer.js插件 2.页面上引入相关的插件 <link rel="st ...
- skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件 skycons.js是一个开源的javascript天气动画图标渲染器.相当于gif动图一样. skycons CDN地址:https://w ...
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- 前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
- 解决pjax加载页面不执行js插件的问题
解决pjax加载页面不执行js插件的问题 参考文章: (1)解决pjax加载页面不执行js插件的问题 (2)https://www.cnblogs.com/fanwenhao/p/9643549.ht ...
最新文章
- 为什么做好数据安全这么难?黑客太牛?
- 设计模式5 行为模式
- C语言告警warning: missing braces around initializer详解
- java判断邮箱名和文件名_Java公开课|想学好Java,教你操作Java校验文件名和邮箱地址,快来看看...
- java反射api研究_深入研究Java 8中的可选类API
- mysql+默认值+default_十六、MySQL 中数据类型的默认值 - default 约束-搜云库
- jsonpickle数据序列化
- Flink 1.11 SQL 十余项革新大揭秘,哪些演变在便捷你的使用体验?
- 【Java学习】网络编程1
- python初学者必背函数_新手必看python vlog 1: 函数
- python做excel自动化-Python控制Excel实现自动化办公
- Redis 6.0 源码阅读笔记(5) -- List 数据类型源码分析
- linux系统怎么组内网,Linux/Unix操作系统处于内网的桌面控制
- 代码敲累了就来看看《创业计划书结构》
- cad计算机土方软件,CAD土方工程量算量插件(土方工程量计算工具)V1.1 正式版
- 微信小程序开发费用一览表
- 【unity 保卫星城】--- 开发笔记08(太空站篇)
- python画国际象棋棋盘图片_python3 turtle 画国际象棋棋盘
- display , visibility
- 产品设计之前,如何分析业务需求和用户痛点?