[size=medium]js对象:(面向对象的思路)
首先,关于js对象的创建有几种需要注意的地方:
(1)定义函数就是创建对象的方式:
testS=function(){//公有方法和属性
this.fun=function(confirmId,titleCon,tipContent){},
this.success=function(msg){},
this.error=function(msg){}}
(2)prototype扩展属性:两种方式
第一,testS.prototype.fun=function(){};//注意加分号
第二,testS.prototype = { fun:function(confirmId,titleCon,tipContent){};}
其次,js创建弹出对话框的插件:
借助ui.dialog(jquery-ui-1.8.18.custom.min.js),是用该插件主要思路是定义显示的对话框,初始化对话框(自动弹出还是open触发,标题,按钮等)
主要的思路是定义一个对象,对象里的方法是拼对话框的html,然后追加到form元素后面,并隐藏,然后调用open函数,然后new一个对象,调用属性方法。
<1>在对象里
testS=function(){
this.fun=function(confirmId,titleCon,tipContent){
var htmlStr='<div id="'+confirmId+'" title="'+confirmId
+'" style="display: none">'
+'<p><span class="ui-icon ui-icon-alert"
style="float: left; margin: 0 7px 20px 0;"></span><div>'
+tipContent+'</div></p></div>';
$('form').append(htmlStr);
$("#"+confirmId).dialog({
autoOpen:false,
bgiframe: true,
title:titleCon,
modal: true,
buttons: {
'确定':function() {
$(this).dialog('close');
}
}
});
$("#"+confirmId).dialog('open');
},
this.success=function(msg){
this.fun("success-confirm","成功",msg);
},
this.error=function(msg){
this.fun("fail-confirm","失败",msg);
}
}
testS=new testS();
<2>扩展
testS=function(){}
testS.prototype = {
fun:function(confirmId,titleCon,tipContent){
var htmlStr='<div id="'+confirmId+'" title="'+confirmId+'" style="display: none">
+'<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><div>'
+tipContent+'</div></p></div>';
$('form').append(htmlStr);
$("#"+confirmId).dialog({
autoOpen:false,
bgiframe: true,
title:titleCon,
modal: true,
buttons: {
'确定':function() {
$(this).dialog('close');
}
}
});
$("#"+confirmId).dialog('open');
},
success:function(msg){
testS.fun("success-confirm","成功",msg);
},
error:function(msg){
testS.fun("fail-confirm","失败",msg);
}
}
testS=new testS();
<3>扩展:
testS=function(){}
testS.prototype.fun=function(confirmId,titleCon,tipContent){
var htmlStr='<div id="'+confirmId+'" title="'+confirmId+'" style="display: none">'
+'<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><div>'
+tipContent+'</div></p></div>';
$('form').append(htmlStr);
$("#"+confirmId).dialog({
autoOpen:false,
bgiframe: true,
title:titleCon,
modal: true,
buttons: {
'确定':function() {
$(this).dialog('close');
}
}
});
$("#"+confirmId).dialog('open');
};
testS.prototype.error=function(msg){
testS.fun("fail-confirm","失败",msg);
};
[/size]
首先,关于js对象的创建有几种需要注意的地方:
(1)定义函数就是创建对象的方式:
testS=function(){//公有方法和属性
this.fun=function(confirmId,titleCon,tipContent){},
this.success=function(msg){},
this.error=function(msg){}}
(2)prototype扩展属性:两种方式
第一,testS.prototype.fun=function(){};//注意加分号
第二,testS.prototype = { fun:function(confirmId,titleCon,tipContent){};}
其次,js创建弹出对话框的插件:
借助ui.dialog(jquery-ui-1.8.18.custom.min.js),是用该插件主要思路是定义显示的对话框,初始化对话框(自动弹出还是open触发,标题,按钮等)
主要的思路是定义一个对象,对象里的方法是拼对话框的html,然后追加到form元素后面,并隐藏,然后调用open函数,然后new一个对象,调用属性方法。
<1>在对象里
testS=function(){
this.fun=function(confirmId,titleCon,tipContent){
var htmlStr='<div id="'+confirmId+'" title="'+confirmId
+'" style="display: none">'
+'<p><span class="ui-icon ui-icon-alert"
style="float: left; margin: 0 7px 20px 0;"></span><div>'
+tipContent+'</div></p></div>';
$('form').append(htmlStr);
$("#"+confirmId).dialog({
autoOpen:false,
bgiframe: true,
title:titleCon,
modal: true,
buttons: {
'确定':function() {
$(this).dialog('close');
}
}
});
$("#"+confirmId).dialog('open');
},
this.success=function(msg){
this.fun("success-confirm","成功",msg);
},
this.error=function(msg){
this.fun("fail-confirm","失败",msg);
}
}
testS=new testS();
<2>扩展
testS=function(){}
testS.prototype = {
fun:function(confirmId,titleCon,tipContent){
var htmlStr='<div id="'+confirmId+'" title="'+confirmId+'" style="display: none">
+'<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><div>'
+tipContent+'</div></p></div>';
$('form').append(htmlStr);
$("#"+confirmId).dialog({
autoOpen:false,
bgiframe: true,
title:titleCon,
modal: true,
buttons: {
'确定':function() {
$(this).dialog('close');
}
}
});
$("#"+confirmId).dialog('open');
},
success:function(msg){
testS.fun("success-confirm","成功",msg);
},
error:function(msg){
testS.fun("fail-confirm","失败",msg);
}
}
testS=new testS();
<3>扩展:
testS=function(){}
testS.prototype.fun=function(confirmId,titleCon,tipContent){
var htmlStr='<div id="'+confirmId+'" title="'+confirmId+'" style="display: none">'
+'<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><div>'
+tipContent+'</div></p></div>';
$('form').append(htmlStr);
$("#"+confirmId).dialog({
autoOpen:false,
bgiframe: true,
title:titleCon,
modal: true,
buttons: {
'确定':function() {
$(this).dialog('close');
}
}
});
$("#"+confirmId).dialog('open');
};
testS.prototype.error=function(msg){
testS.fun("fail-confirm","失败",msg);
};
[/size]