怎么修改artdialog已经打开的弹出框标题?
展开全部
能够自适应内容
artDialog的特殊布局结构能够原生的适应内容变化,你不必像以前一样去考虑消息内容大小,她能自己去适应内容。当然她仍然可以接受一个固定高宽的参数,她能够防止内容溢出或截断,同时也不会产生难看的滚动条,甚至能够自动处理文本对齐方式。
优雅灵活的接口
artDialog很用心的设计了她的接口,她拥有丰富的配置参数控制初始化状态,并且每次调用后还会返回一些实用的内部控制接口,你可以先用变量把它保存起来,需要的时候在其他地方自由控制对话框。
精心设计的UI机制
artDialog采用九宫格的XHTML结构,CSS类钩子比较丰富,可以定制类似桌面软件般精致的皮肤。她支持多皮肤共存,这些皮肤的背景图片在页面载入时就会被缓存好,调用时几乎感觉不到延时。
细致的用户体验
她支持Esc快捷键关闭;如果对话框内容有输入控件她将支持Ctrl+Enter提交;智能给按钮添加焦点;小对话框自动采用黄金比例垂直居中;超过指定面积大小的对话框拖动自动采用替身挪动;自动计算边界防止超出可操作范围……
跨浏览器兼容
兼容:IE6+、Firefox、Chrome、Safari、Opera,浏览器版本越高体验越好。并且IE6下也能支持现代浏览器的静止定位(fixed),支持覆盖下拉控件。
与jQuery协作
artDialog所有功能是不需要其他库就可以使用的,但是如果页面引入了jQuery,artDialog会奉献自己成为它的插件,利用它增强自身功能。
编辑本段使用帮助
调用方式
一、使用传统的参数传值卜键 art.dialog(String, Function, Function) art.dialog('artDialog崇尚:简单、强大、优雅', function(){alert('yes');}); 运行» 二、使用字面量传值 art.dialog(Object) art.dialog({ content: '欢迎使用artDialog对话框组件!', skin: 'aero', icon: 'succeed', follow: 'btn2', yesFn: function(){ this.follow('btn1').time(2); return false; }}); 运行销闭» 是不是很简单?接下来将有几个表格列举artDialog的全部功能,你需要的时候可以使用它们。配置参数 [除了content参数其余的都是可选项]名称 类型 默认值 描述
内容
title 字符串 '提示' 标题内容。为false不显示标题栏(需要皮肤文件支持)
布尔
content 字符串 null 消息内容,如果传入的是一个JSON,还需要与tmpl参数配合解析模板
对象
按钮
yesFn 函数 null 确定按钮回调函数。
函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮;传入的第一个参数为对话框所在页面window对象(这个在穿越框架后有用)
布尔
noFn 函数 null 取消按钮回调函数。
函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮;传入的第一个参数为对话框所在页面window对象(这个在穿越框架后有用)
布尔
yesText 字符串 '确定' "确定按钮"文字
noText 字符串 '取消' "取消按钮"文字
尺寸
width 数值 'auto' 设置内容固定宽度,可以指定单位。没有则对话框自动适配
字符串
height 数值 'auto' 设置内容固定高度,可以指定单位。没有则对话框自动适配
字符串
位置
fixed 布尔 false 开启静止定位
follow 元素 null 让对话框依附在指定元素附近。如果是字符串则表示使用ID获取元素
字符串
left 数值 'center' X轴的坐标。如果开启了fixed则原点以浏览亏弊裂器视口为基准。可以使用'left'、'center'、'right'这些关键字
字符串
top 数值 'center' Y轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'top'、'center'、'bottom'这些关键字
字符串
界面
lock 布尔 false 开启锁屏。中断用户对话框之外的交互,用于显示非常重要的操作/消息
skin 字符串 'default' 自定义风格
border 布尔 true 是否显示边框。(需要皮肤文件支持)
icon 字符串 null 定义消息图标。(需要皮肤文件支持)
高级
id 字符串 自定义对话框ID属性。用途:1、防止重复弹出 2、返回已存在ID对话框的API接口
time 数值 null 设置对话框显示时间。以秒为单位
drag 布尔 true 是否允许用户拖动对话框
limit 布尔 true 是否限制挪动与定位范围
focus 布尔 true 定位焦点到对话框中指定元素,默认定位到按钮上。如果传入字符串则使用ID获取元素
字符串
元素
effect 布尔 true 是否开启动画特效
show 布尔 true 是否显示。为false表示不显示对话框,后面可以通过控制接口show()恢复显示
tmpl 字符串 null 启用模板引擎拼接消息内容,还需要与content参数传入JSON才能生效
esc 布尔 true 是否允许Esc键关闭对话框
window 字符串 'self' 指定窗口弹出对话框,可使用'top'、'parent'、'self'等关键字或者指定其他window对象。如果是'top'则表示让对话框在顶级页面弹出
对象
initFn 函数 null 对话框弹出后执行的函数
closeFn 函数 null 对话框关闭前执行的函数
上面这些的默认设置都可以统一被改变,如默认标题:art.dialog.defaults.title = '我是标题' 需要对弹出后的对话框操作?下面介绍的就是artDialog的控制接口了。 每次生成一个对话框后,它都会返回控制接口,这个控制接口还可以在回调函数的"this"指针获取到。 如调用关闭接口,我们可以先定义一个变量引用对话框返回值: var testDialog = art.dialog({ id: 'testDialog01', content: '我初始化后会返回控制接口,请注意接收'});然后在可以在其他地方调用"close"方法关闭对话框: testDialog.close();当然还可以利用重复定义ID让它返回原来API(如果此ID对话框存在): art.dialog({id: 'testDialog01'}).close();好了,介绍了控制接口的用途,下面就是控制接口列表:
控制接口
名称 返回值 描述
close() null 关闭对话框
show() {Object} 显示对话框
hide() {Object} 隐藏对话框
content() {HTMLElement} 获取消息内容容器对象
content(value) {Object} 向消息容器中写入内容(innerHTML)
follow(element) {Object} 让对话框吸附到指定元素附近。(可传入对象的ID名称)
position(left, top) {Object} 重新定位对话框。无参数则居中定位
size(width, height) {Object} 重新设定对话框大小。注意此时参数类型必须为数值
focus(element) {Object} 定位焦点
artDialog还对一些常用的前后端交互方法进行扩展,并且这些对话框生下来就具有穿越框架的功能。这部分代码是作为插件实现的,你也可以根据自己需要去拓展新的方法(包括与jQuery结合使用),如果不需要也可以从源码中剔除掉:
自带的扩展方法 [具体使用见演示文档]
名称 描述
art.dialog.alert(content) 警告
art.dialog.confirm(content, yesFn, noFn) 确认
art.dialog.prompt(content, yesFn, value) 提问
art.dialog.open(url, options) 弹窗(iframe)
art.dialog.close() open方法创建的iframe里可用此关闭对话框
art.dialog.parent open方法创建的iframe里可用此获取来源窗口的window对象
art.dialog.tips(content, time) 短暂提示
art.dialog.load(url, options, cache) Ajax加载内容
jQuery + artDialog
如果页面引用了jQuery,将会献身成为jQuery的一个插件,方法与参数同上。例: // 普通调用 $.dialog({content:'hello world!'});// 使用jQuery强大的选择器让对话框跟随到元素附近 $('#main .test').dialog({content: 'hello world'});
应用到你的项目
一、在页面head引入一个js文件。 <script src="artDialog.min.js"></script> 二、在页面head设置默认配置(可选)。 <script>// 设置对话框全局默认配置(function(){ var d = art.dialog.defaults; // 按需加载要用到的皮肤,数组第一个为默认皮肤 // 如果只使用默认皮肤,可以不填写skin d.skin = ['default', 'chrome', 'facebook', 'aero']; // 支持拖动 d.drag = true;})();</script>
artDialog的特殊布局结构能够原生的适应内容变化,你不必像以前一样去考虑消息内容大小,她能自己去适应内容。当然她仍然可以接受一个固定高宽的参数,她能够防止内容溢出或截断,同时也不会产生难看的滚动条,甚至能够自动处理文本对齐方式。
优雅灵活的接口
artDialog很用心的设计了她的接口,她拥有丰富的配置参数控制初始化状态,并且每次调用后还会返回一些实用的内部控制接口,你可以先用变量把它保存起来,需要的时候在其他地方自由控制对话框。
精心设计的UI机制
artDialog采用九宫格的XHTML结构,CSS类钩子比较丰富,可以定制类似桌面软件般精致的皮肤。她支持多皮肤共存,这些皮肤的背景图片在页面载入时就会被缓存好,调用时几乎感觉不到延时。
细致的用户体验
她支持Esc快捷键关闭;如果对话框内容有输入控件她将支持Ctrl+Enter提交;智能给按钮添加焦点;小对话框自动采用黄金比例垂直居中;超过指定面积大小的对话框拖动自动采用替身挪动;自动计算边界防止超出可操作范围……
跨浏览器兼容
兼容:IE6+、Firefox、Chrome、Safari、Opera,浏览器版本越高体验越好。并且IE6下也能支持现代浏览器的静止定位(fixed),支持覆盖下拉控件。
与jQuery协作
artDialog所有功能是不需要其他库就可以使用的,但是如果页面引入了jQuery,artDialog会奉献自己成为它的插件,利用它增强自身功能。
编辑本段使用帮助
调用方式
一、使用传统的参数传值卜键 art.dialog(String, Function, Function) art.dialog('artDialog崇尚:简单、强大、优雅', function(){alert('yes');}); 运行» 二、使用字面量传值 art.dialog(Object) art.dialog({ content: '欢迎使用artDialog对话框组件!', skin: 'aero', icon: 'succeed', follow: 'btn2', yesFn: function(){ this.follow('btn1').time(2); return false; }}); 运行销闭» 是不是很简单?接下来将有几个表格列举artDialog的全部功能,你需要的时候可以使用它们。配置参数 [除了content参数其余的都是可选项]名称 类型 默认值 描述
内容
title 字符串 '提示' 标题内容。为false不显示标题栏(需要皮肤文件支持)
布尔
content 字符串 null 消息内容,如果传入的是一个JSON,还需要与tmpl参数配合解析模板
对象
按钮
yesFn 函数 null 确定按钮回调函数。
函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮;传入的第一个参数为对话框所在页面window对象(这个在穿越框架后有用)
布尔
noFn 函数 null 取消按钮回调函数。
函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮;传入的第一个参数为对话框所在页面window对象(这个在穿越框架后有用)
布尔
yesText 字符串 '确定' "确定按钮"文字
noText 字符串 '取消' "取消按钮"文字
尺寸
width 数值 'auto' 设置内容固定宽度,可以指定单位。没有则对话框自动适配
字符串
height 数值 'auto' 设置内容固定高度,可以指定单位。没有则对话框自动适配
字符串
位置
fixed 布尔 false 开启静止定位
follow 元素 null 让对话框依附在指定元素附近。如果是字符串则表示使用ID获取元素
字符串
left 数值 'center' X轴的坐标。如果开启了fixed则原点以浏览亏弊裂器视口为基准。可以使用'left'、'center'、'right'这些关键字
字符串
top 数值 'center' Y轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'top'、'center'、'bottom'这些关键字
字符串
界面
lock 布尔 false 开启锁屏。中断用户对话框之外的交互,用于显示非常重要的操作/消息
skin 字符串 'default' 自定义风格
border 布尔 true 是否显示边框。(需要皮肤文件支持)
icon 字符串 null 定义消息图标。(需要皮肤文件支持)
高级
id 字符串 自定义对话框ID属性。用途:1、防止重复弹出 2、返回已存在ID对话框的API接口
time 数值 null 设置对话框显示时间。以秒为单位
drag 布尔 true 是否允许用户拖动对话框
limit 布尔 true 是否限制挪动与定位范围
focus 布尔 true 定位焦点到对话框中指定元素,默认定位到按钮上。如果传入字符串则使用ID获取元素
字符串
元素
effect 布尔 true 是否开启动画特效
show 布尔 true 是否显示。为false表示不显示对话框,后面可以通过控制接口show()恢复显示
tmpl 字符串 null 启用模板引擎拼接消息内容,还需要与content参数传入JSON才能生效
esc 布尔 true 是否允许Esc键关闭对话框
window 字符串 'self' 指定窗口弹出对话框,可使用'top'、'parent'、'self'等关键字或者指定其他window对象。如果是'top'则表示让对话框在顶级页面弹出
对象
initFn 函数 null 对话框弹出后执行的函数
closeFn 函数 null 对话框关闭前执行的函数
上面这些的默认设置都可以统一被改变,如默认标题:art.dialog.defaults.title = '我是标题' 需要对弹出后的对话框操作?下面介绍的就是artDialog的控制接口了。 每次生成一个对话框后,它都会返回控制接口,这个控制接口还可以在回调函数的"this"指针获取到。 如调用关闭接口,我们可以先定义一个变量引用对话框返回值: var testDialog = art.dialog({ id: 'testDialog01', content: '我初始化后会返回控制接口,请注意接收'});然后在可以在其他地方调用"close"方法关闭对话框: testDialog.close();当然还可以利用重复定义ID让它返回原来API(如果此ID对话框存在): art.dialog({id: 'testDialog01'}).close();好了,介绍了控制接口的用途,下面就是控制接口列表:
控制接口
名称 返回值 描述
close() null 关闭对话框
show() {Object} 显示对话框
hide() {Object} 隐藏对话框
content() {HTMLElement} 获取消息内容容器对象
content(value) {Object} 向消息容器中写入内容(innerHTML)
follow(element) {Object} 让对话框吸附到指定元素附近。(可传入对象的ID名称)
position(left, top) {Object} 重新定位对话框。无参数则居中定位
size(width, height) {Object} 重新设定对话框大小。注意此时参数类型必须为数值
focus(element) {Object} 定位焦点
artDialog还对一些常用的前后端交互方法进行扩展,并且这些对话框生下来就具有穿越框架的功能。这部分代码是作为插件实现的,你也可以根据自己需要去拓展新的方法(包括与jQuery结合使用),如果不需要也可以从源码中剔除掉:
自带的扩展方法 [具体使用见演示文档]
名称 描述
art.dialog.alert(content) 警告
art.dialog.confirm(content, yesFn, noFn) 确认
art.dialog.prompt(content, yesFn, value) 提问
art.dialog.open(url, options) 弹窗(iframe)
art.dialog.close() open方法创建的iframe里可用此关闭对话框
art.dialog.parent open方法创建的iframe里可用此获取来源窗口的window对象
art.dialog.tips(content, time) 短暂提示
art.dialog.load(url, options, cache) Ajax加载内容
jQuery + artDialog
如果页面引用了jQuery,将会献身成为jQuery的一个插件,方法与参数同上。例: // 普通调用 $.dialog({content:'hello world!'});// 使用jQuery强大的选择器让对话框跟随到元素附近 $('#main .test').dialog({content: 'hello world'});
应用到你的项目
一、在页面head引入一个js文件。 <script src="artDialog.min.js"></script> 二、在页面head设置默认配置(可选)。 <script>// 设置对话框全局默认配置(function(){ var d = art.dialog.defaults; // 按需加载要用到的皮肤,数组第一个为默认皮肤 // 如果只使用默认皮肤,可以不填写skin d.skin = ['default', 'chrome', 'facebook', 'aero']; // 支持拖动 d.drag = true;})();</script>
展开全部
so easy. 可以添加一个自定义的button按钮 当点击按钮的时候触发callback事件,修改title弹出框段吵虚的标题
具体操作如下握燃:
art.dialog({
id: '碰颂testID',
title:'没修改之前的标题',
content: 'hello world!',
button:[
{
name: '修改弹出框标题',
callback: function () {
this.title('标题修改了');
return false;
},
focus: true
}
]
})
记得给分啊 ,O(∩_∩)O谢谢
具体操作如下握燃:
art.dialog({
id: '碰颂testID',
title:'没修改之前的标题',
content: 'hello world!',
button:[
{
name: '修改弹出框标题',
callback: function () {
this.title('标题修改了');
return false;
},
focus: true
}
]
})
记得给分啊 ,O(∩_∩)O谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
title: "<span id='span_Title'>Title</span>"
想改变title时 改变#span_Title的html() 就行了!败宴丛
例 (点祥稿击察樱一个按钮)
$("#btn_ChangeTitleContent").click(function() {
$("#span_Title").html("Title Change");
});
想改变title时 改变#span_Title的html() 就行了!败宴丛
例 (点祥稿击察樱一个按钮)
$("#btn_ChangeTitleContent").click(function() {
$("#span_Title").html("Title Change");
});
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |