一.在对话框自定义操作按钮

预览:

html调用代码:

var btnArray = [
{
value: '同意',
callback: function () {
this.content('你同意了');
return false;
},
autofocus: true
},
{
value: '不同意',
callback: function () {
alert('你不同意')
}
},
{
id: 'button-disabled',
value: '无效按钮',
disabled: true
},
{
value: '关闭我'
}
];
DialogBox("这里可以放自定义操作按钮",btnArray);

对话框编写代码:

function DialogBox(msg, btnArray) {
seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
var d = dialog({
content: msg,
button: btnArray
});
d.width(300);
d.height(200);
d.show();
});
}

属性:

button:    数组类型,自定义按钮

autofocus:   boolean类型,默认false,是否获取焦点(这个例子获取焦点颜色突出)

disabled:      boolean类型,是否禁用

callback:      function类型,回调函数,这里放我们自己想要做的动作代码

value:      string类型,按钮显示文本

二.没有关闭按钮对话框

预览:

1.                                         2.

对话框1编写代码

function NoCloseTip(msg) {
seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
var d = dialog({
title: '温馨提示',
content: msg,
cancel: false,
ok: function () { }
});
d.show();
});
}

对话框2编写代码

function NoCloseTip(msg) {
seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
var d = dialog({
title: '',
content: msg,
ok: function () { }
});
d.show();
});
}

cancel这里设为false代表没有关闭按钮。

title为空字符串或不设定时没有关闭选项。

三.对话框左下角有类似"不再提示"的复选框,这个例子通过写cookie实现让对话框"不再弹框"

预览:

对话框编写代码:

function OnceTip(msg,isShow) {
seajs.use(['jquery', '/Scripts/arale/artDialog/src/dialog-plus'], function ($, dialog) {
if (isShow) {
var d = dialog({
title: "welcome",
content: msg,
ok: function () { },
statusbar: '<label><input type="checkbox" onclick="SetCookie();">不再弹框</label>'
});
d.width(280);
d.height(50);
d.show();
}
});
}

html编写代码:

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<title>Dialog</title>
<script type="text/javascript" src="/Scripts/Arale/sea-modules/sea.js"></script>
<script type="text/javascript" src="/Scripts/artDialog.js"></script>
<script type="text/javascript">
seajs.config({
alias: {
"jquery": "jquery-1.10.2"
}
});
</script>
<script type="text/javascript">
function SetCookie() {
setCookie("barClick", "unshow", 1)();
} function ShowDialog() {
var cookieIsNull = true;
var cookieValue = getCookie("barClick");
if (cookieValue == "unshow") {
cookieIsNull = false;
}
OnceTip('点击“不再弹框”,弹框将不再出现', cookieIsNull);
} function ClearCookie() {
delCookie("barClick");
}
//以下读写删cookie来源于网上
function setCookie(NameOfCookie, value, expiredays) {
//参数:三个变量用来设置新的cookie:
//cookie的名称,存储的Cookie值,
// 以及Cookie过期的时间.
// 这几行是把天数转换为合法的日期
var ExpireDate = new Date();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
// 下面这行是用来存储cookie的,只需简单的为"document.cookie"赋值即可.
// 注意日期通过toGMTstring()函数被转换成了GMT时间。
document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
///获取cookie值
function getCookie(NameOfCookie) {
// 首先我们检查下cookie是否存在.
// 如果不存在则document.cookie的长度为0
if (document.cookie.length > 0) {
// 接着我们检查下cookie的名字是否存在于document.cookie
// 因为不止一个cookie值存储,所以即使document.cookie的长度不为0也不能保证我们想要的名字的cookie存在
//所以我们需要这一步看看是否有我们想要的cookie
//如果begin的变量值得到的是-1那么说明不存在
begin = document.cookie.indexOf(NameOfCookie + "=");
if (begin != -1) {
// 说明存在我们的cookie.
begin += NameOfCookie.length + 1;//cookie值的初始位置
end = document.cookie.indexOf(";", begin);//结束位置
if (end == -1) end = document.cookie.length;//没有;则end为字符串结束位置
return unescape(document.cookie.substring(begin, end));
}
}
// cookie不存在返回null
return null;
}
///删除cookie
function delCookie(NameOfCookie) {
// 该函数检查下cookie是否设置,如果设置了则将过期时间调到过去的时间;
//剩下就交给操作系统适当时间清理cookie啦
if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
</script>
</head>
<body>
<div>
<input type="button" value="点击我" onclick="ShowDialog();" />
<input type="button" value="清除Cookie" onclick="ClearCookie();" />
</div>
</body>
</html>

属性:

statusbar:  string类型,区域HTML代码。要显示此控件,必须要添加按钮

artDialog组件应用学习(四)的更多相关文章

  1. artDialog组件应用学习(一)

    个人觉得artDialog是一组很不错的对话框组件.写的是artDialog_v6应用. 官方称其兼容性测试通过:IE6~IE11.Chrome.Firefox.Safari.Opera. 官网:ht ...

  2. artDialog组件应用学习(五)

    一.artDialog事件应用 对话框编写代码 function DialogEvent() { seajs.use(['jquery', '/Scripts/arale/artDialog/src/ ...

  3. artDialog组件应用学习(三)

    一.可以加载url的对话框 预览: 对话框编写代码 //弹出一个对话框,加载页面 function OpenBox(url, title, width, height) { seajs.use(['j ...

  4. artDialog组件应用学习(二)

    一.没有操作选项的对话框 预览: html前台引入代码:(之后各种效果对话框引入代码致,调用方法也一样,就不一一写入) <script type="text/javascript&qu ...

  5. DocX开源WORD操作组件的学习系列四

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

  6. 基于GBT28181:SIP协议组件开发-----------第四篇SIP注册流程eXosip2实现(一)

    原创文章,引用请保证原文完整性,尊重作者劳动,原文地址http://www.cnblogs.com/qq1269122125/p/3945294.html. 上章节讲解了利用自主开发的组件SIP组件l ...

  7. DocX开源WORD操作组件的学习系列三

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

  8. DocX开源WORD操作组件的学习系列二

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

  9. DocX开源WORD操作组件的学习系列一

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

随机推荐

  1. django中ImageField模块使用

    https://blog.csdn.net/meylovezn/article/details/47124923

  2. pycharm自动调整html页面代码缩进不正确的解决办法

    pycharm自动调整html页面代码缩进不正确的解决办法

  3. 洛谷P4495 [HAOI2018]奇怪的背包(数论)

    题面 传送门 题解 好神仙的思路啊--orzyyb 因为不限次数,所以一个体积为\(V_i\)的物品可以表示出所有重量为\(\gcd(V_i,P)\)的倍数的物品,而所有物品的总和就是这些所有的\(\ ...

  4. SpringMVC中视图解析器

    视图解析器:固定写法直接coppy就行 1.dispatcherServlet-servlet.xml中添加 <!-- 视图解析器InternalResourceViewResolver --& ...

  5. SDUT OJ 数据结构实验之二叉树三:统计叶子数

    数据结构实验之二叉树三:统计叶子数 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...

  6. js 事件的阶段

    事件有三个阶段: 1.事件捕获阶段 :从外向内 2.事件目标阶段 :最开始选择的那个 3.事件冒泡阶段 : 从里向外   为元素绑定事件 addEventListener("没有on的事件类 ...

  7. Qt 学习之路 2(33):贪吃蛇游戏(3)

    Qt 学习之路 2(33):贪吃蛇游戏(3) 豆子 2012年12月29日 Qt 学习之路 2 16条评论 继续前面一章的内容.上次我们讲完了有关蛇的静态部分,也就是绘制部分.现在,我们开始添加游戏控 ...

  8. COCO2018 全景分割

    全景分割是18年新推出的一个任务,它要求同时分割出目标和背景,也就是既有实例分割也有语义分割,用官方的话讲是朝着真实世界视觉系统的重要一步 如图所示,里面既有对天空,草地等stuff的分割,也有对目标 ...

  9. QQ在线状态的使用

    在网页中显示QQ在线状态并点击后发起对话,是很多门户网站常见的一个功能,这两天就碰到这样一个.原以为很简单,结果还是折腾了半天,虽然是个小问题,但也值得记录一下. 按以前的经验,网上有很多QQ在线代码 ...

  10. sharepoint_study_1

    描述:机器上进行SharePoint开发,需要SQL Server提供最基本的服务 解决: SQL Server 的数据库引擎: SQL Server 代理: SQL Server 浏览器组件: