技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
创建买车的工厂模式 jquery+js API(原创)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>创建买车的工厂模式 jquery+js API</title>
</head>
<style type="text/css">
.btnDialog01,
.btnDialog02{
padding:12px 12px;
}
</style>
<body>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
//工厂模式
var bicycleShop = function(){};
bicycleShop.prototype = {
confirmBox: function(msg, fn){
this.dialog.confirm({
id : 'dialog-confirm',
title : 'Confirm',
msg : '<p class="txtMessage"><span>' + msg + '</span></p>' ,
buttonY : {
func : function(event){
var self = this;
fn.apply(self, arguments);
return this.destroy();
}
},
buttonN : {
func : function(event){
return this.destroy();
}
}
}).open();
},
dialog: {
confirm: function(setting){
return this._create(setting);
},
options: {
id : "dialog-confirm",
title : "Confirm",
msg : "",
overlay : true,
buttonY : {
id : "dialog-btnYes",
cssClass : "btnDialog01",
text : "Yes",
data : {},
func : function(){}
},
buttonN : {
id : "dialog-btnNo",
cssClass : "btnDialog02",
text : "No",
data : {},
func : function(){
return this.destroy();
}
}
},
_create: function(setting){
var self = this;
options = self.options;
//alert('_create');
$(".btnDialog01").show();
$.extend(true, options, setting);
Dialog = (self.Dialog = $('<div class="dialogPanel"></div>'));
$('.dialogPanel').remove();
Dialog.appendTo(document.body)
.html(setting.msg);
self._createButtons(options.buttonY);
self._createButtons(options.buttonN);
return self;
},
_createButtons: function(button){
var self = this;
var DialogButton = $('<a href="#01"></a>')
.show()
.attr('id', button.id)
.addClass(button.cssClass)
.text(button.text)
.bind('click', button.data, function(){button.func.apply(self, arguments);})
.appendTo(".dialogPanel");
return DialogButton;
},
open: function(){
var self = this;
//alert('open');
$(".btnDialog02").show();
return self;
},
destroy: function(){
var self = this;
$(".dialogPanel").remove();
}
}
};
$('#objClick01').click(function(){
bicycleShop.prototype.confirmBox('Are you sure you want to buy bicycle?', function(){
alert('OK,successfully,I get bicycle!');
});
});
$('#objClick02').click(function(){
bicycleShop.prototype.confirmBox('Are you sure you want to buy car?', function(){
alert('OK,successfully,I get car!');
});
});
$('#objClick03').click(function(){
bicycleShop.prototype.confirmBox('Are you sure you want to buy bus?', function(){
alert('OK,successfully,I get bus!');
});
});
$('#objClick04').click(function(){
bicycleShop.prototype.dialog.confirm({
title : 'Add friend',
msg : '<p class="txtMessage"><span>Are you sure you want to buy about?</span></p>',
buttonY : {
text : 'Yes',
func : function(event){
alert('OK,successfully,I get bus!');
return this.destroy();
}
},
buttonN : {
text : 'No'
}
});
});
})
</script>
<div >创建买车的工厂模式 jquery+js</div>
<a href="#" id="objClick01">Click here buy bicycle</a><br/>
<a href="#" id="objClick02">Click here buy car</a><br/>
<a href="#" id="objClick03">Click here buy bus</a><br/>
<a href="#" id="objClick04">Click here buy boat</a><br/>
</body>
</html>