學(xué)習(xí)從實踐開始之jQuery插件開發(fā) 對話框插件開發(fā)
更新時間:2012年04月26日 00:39:22 作者:
之所以寫下這篇文章,是想將我的想法分享給大家;對于初學(xué)者,我希望他能從這篇文章中獲取對他有用的東西,對于經(jīng)驗豐富的開發(fā)者,我希望他能指出我的不足,給我更多的意見和建議;目的就是共同進步
前言:
之所以寫下這篇文章,是想將我的想法分享給大家;對于初學(xué)者,我希望他能從這篇文章中獲取對他有用的東西,對于經(jīng)驗豐富的開發(fā)者,我希望他能指出我的不足,給我更多的意見和建議;目的就是共同進步。
一.要做什么插件?
我想要實現(xiàn)一個插件可以取代瀏覽器默認的彈出對話框或窗體,就是我們通過調(diào)用window.alert,window.confirm,window.prompt這些方法 所彈出的網(wǎng)頁對話框,通過調(diào)用window.open,window.showModalDialog,window.showModelessDialog 所彈出的窗體。
之所以這樣做是因為:瀏覽器默認的對話框功能簡單,不能滿足更多需要;用戶體驗差。現(xiàn)代瀏覽器很多都會默認阻止彈出窗體(可能是因為在以前彈出廣告太猖獗的原因吧,還記得03,40年那陣,看個XX網(wǎng)站彈了一堆窗口,關(guān)都關(guān)不過來,瀏覽器都弄死了,甚至電腦都當(dāng)機了。)。
二.想要的效果是什么?
關(guān)于對話框插件,我們都知道在不同的瀏覽器里顯示樣式是有一些分別的,但基本上布局結(jié)構(gòu)都一樣。我們的插件想要的效果是:在任何瀏覽器里顯示的樣式和布局結(jié)構(gòu)都保持一致,位于瀏覽器正中央(這樣用戶能夠第一時間看到)。
彈出窗體在實現(xiàn)上與對話框類似(我是指我們要開發(fā)的插件,并非是說瀏覽器默認的實現(xiàn))。
三.設(shè)計一下功能
我們看著圖片一步步來說:

1、遮擋頁面內(nèi)容(圖片上灰色半透明部分),透明度可以設(shè)置(不透明0-1完全透明),這樣的好處是 在用戶關(guān)閉對話框之前不能對頁面進行操作。
2、對話框居中顯示,對話框大小可以設(shè)置(長寬)。
3、圖中(1)和(2)為對話框圖標(biāo),都可以設(shè)置。
4、對話框標(biāo)題可以內(nèi)容都可以設(shè)置。
5、可以不顯示關(guān)閉按鈕(x)。
6、底部按鈕可以為0個或多個,并且可以為其設(shè)置回調(diào)函數(shù)。
四.如何實現(xiàn)功能?
1.使用CSS樣式控制外觀。
*為了避免CSS命名沖突,我們需要為插件確定一個名字空間,其下所有樣式都在該命名空間下。
2.遮擋所有內(nèi)容
*我們在CSS里設(shè)置基本樣式。
position:absolute;
left:0;
top:0;
background-color:#000;
z-index:99999;
*這里需要注意的是z-index的值有一個安全范圍,來自微軟的說明“The maximum value is 2147483647 for IE6, 7 and 8.But it is 16777271 for Safari 3, so a safe cross browser maximum value is 16777271.”大意是說ie6,7,8支持的最大值是2147483647,但是Safari 3是16777271,所以保險起見不要超過16777271。
*用js代碼設(shè)置其寬和高,我們通過$(document).width()獲取頁面寬度,通過$(document).height()獲取頁面高度度。
3.對話框居中顯示
對于對話框居中顯示,有兩種方式實現(xiàn)。
一是通過CSS實現(xiàn)。
position:absolute;如果頁面有滾動條的時,當(dāng)滾動條滾動時,對話框也會移動。
position:fixed;比較理想,無論如何滾動,對話框始終停留在頁面居中位置,唯一的缺點就是不支持IE6(網(wǎng)上有關(guān)于如果兼容IE6的方法,感興趣的朋友可以自己去實現(xiàn))。
二是通過js腳本控制。
通過計算頁面長寬來定位,當(dāng)改變頁面大小時,對話框位置不會改變,效果不理想。(當(dāng)然了,可以通過監(jiān)聽頁面發(fā)生改變時,自動調(diào)整位置,但是實現(xiàn)起來比較麻煩,感興趣的朋友可以自己去嘗試)
五.瀏覽器兼容
瀏覽器兼容什么的最討厭了,不過話說回來最理想的效果當(dāng)然是能夠兼容所有瀏覽器,事實上如果我們花更多的時間也確實可以做到兼容所有瀏覽器。但是這樣做值得嗎?如果問頁面設(shè)計人員最討厭的瀏覽器是什么?我想大多數(shù)都會回答是IE6,是的,這個曾經(jīng)風(fēng)靡全球,霸占全球超過90%用戶電腦的瀏覽器,我們曾經(jīng)覺得它很好,好吧,也許我該說不錯,又或者還可以;不管怎么樣,它曾經(jīng)確實是全球最受歡迎的瀏覽器。但是現(xiàn)在,它是我們開發(fā)者眼中最不受歡迎的瀏覽器,在全球平均使用不超過5%的情況下,在天朝卻仍然超過20%的用戶在使用它(來自http://www.ie6countdown.com/的統(tǒng)計),這是為什么呢?同樣一個功能如果要做到兼容IE6這些老版本的瀏覽器,我們大概要多花三分之一甚至更多的時間,生命是短暫的,同志們,為何不把有限的時間拿去做更有意義的事情呢?殺死IE6從我做起!
六.功能實現(xiàn)和調(diào)用
CSS部分
<style type="text/css">
/*為了避免命名沖突,我們將該插件所有樣式都放在該類之下*/
.ctcx-dialog
{
font-size:14px;
}
.ctcx-dialog .mark /*遮罩層樣式*/
{
position:absolute;
left:0;
top:0;
background-color:#000;
z-index:99999;
}
.ctcx-dialog .dialog /*對話框樣式*/
{
position:fixed;
left:50%;
top:50%;
background-color:#FFF;
z-index:99999;
border:2px solid #000;
padding:2px;
}
.ctcx-dialog .dialog .bar /*對話框標(biāo)題欄*/
{
height:30px;
background-color:#999;
color:#FFF;
}
.ctcx-dialog .dialog .bar .icon /*對話框標(biāo)題欄圖標(biāo)*/
{
width:25px;
height:30px;
background-repeat:no-repeat;
background-position:center;
display:inline-block;
}
.ctcx-dialog .dialog .bar .title /*對話框標(biāo)題欄標(biāo)題*/
{
width:340px;
height:30px;
line-height:30px;
overflow:hidden;
display:inline-block;
vertical-align:top;
font-weight:bold;
}
.ctcx-dialog .dialog .bar .close /*對話框標(biāo)題欄關(guān)閉按鈕*/
{
width:20px;
height:30px;
background-image:url(close.png);
background-repeat:no-repeat;
background-position:center;
display:inline-block;
cursor:pointer;
}
.ctcx-dialog .dialog .container /*對話框內(nèi)容容器*/
{
margin-top:5px;
overflow:auto;
}
.ctcx-dialog .dialog .container .icon /*對話框內(nèi)容容器*/
{
background-image:url(icon-big.png);
background-repeat:no-repeat;
background-position:center;
width:48px;
height:48px;
}
.ctcx-dialog .dialog .container .content /*對話框內(nèi)容容器*/
{
position:relative;
}
.ctcx-dialog .dialog .buttons /*對話框按鈕欄*/
{
text-align:center;
margin-top:5px;
height:30px;
position:relative;
bottom:0px;
}
.ctcx-dialog .dialog .buttons a /*對話框按鈕*/
{
background-color:#DDD;
color:#000;
text-decoration: none;
display:inline-block;
padding:5px;
}
.ctcx-dialog .dialog .buttons a:hover /*對話框按鈕*/
{
background-color:#333;
color:#FFF;
}
.ctcx-dialog .dialog .buttons a:active /*對話框按鈕*/{}
</style>
JS部分
(function ($) {
$.alert = function (options) {
if (typeof options === 'string') options = { content: options };
var opts = $.extend({}, $.alert.defaults, options);
if (opts.content == null || opts.content.length == 0) return this;
var me = $('<div></div>').addClass('ctcx-dialog').appendTo(document.body);
var doc = $(document);
$('<div class="mark"></div>').css({ opacity: opts.opacity }).width(doc.width()).height(doc.height()).appendTo(me);
var _dialog_ = $('<div class="dialog"></div>').css({
width: opts.width,
height: opts.height,
marginLeft: 0 - opts.width / 2,
marginTop: 0 - opts.height / 2
}).appendTo(me);
var _bar_ = $('<div class="bar"></div>').appendTo(_dialog_);
var _titleWidth_ = opts.width - 0;
if (opts.icon != null) {
$('<div class="icon"></div>').css('background-image', 'url(' + opts.icon + ')').appendTo(_bar_);
_titleWidth_ -= 25;
}
if (opts.close) _titleWidth_ -= 20;
$('<div class="title"></div>').css({ width: _titleWidth_ }).html(opts.title).appendTo(_bar_);
if (opts.close) {
$('<div class="close"></div>').click(function () {
me.remove();
}).appendTo(_bar_);
}
var _containerHeight_ = opts.height - 40;
var _container_ = $('<div class="container"></div>').appendTo(_dialog_);
var _contentCss_ = {};
if (opts.iconBig != null) {
$('<div class="icon"></div>').css('background-image', 'url(' + opts.iconBig + ')').appendTo(_container_);
_contentCss_.top = -48;
_contentCss_.marginLeft = 48;
}
var _content_ = $('<div class="content"></div>').css(_contentCss_).html(opts.content).appendTo(_container_);
if (opts.buttons != null && opts.buttons.length > 0) {
_containerHeight_ -= 30;
var _buttons_ = $('<div class="buttons"></div>').appendTo(_dialog_);
$.each(opts.buttons, function (i, _button) {
$('<a href="javascript:;">' + _button.text + '</a>').click(function () {
_button.fn(me);
}).appendTo(_buttons_);
})
}
_container_.css({ height: _containerHeight_ });
this.close = function () {
me.remove();
}
this.setContent = function (content) {
_content_.html(content);
}
return this;
}
//設(shè)置默認參數(shù)
$.alert.defaults = {
title: '信息提示', //對話框標(biāo)題
content: null, //對話框內(nèi)容
width: 200, //寬
height: 100, //高
opacity: 0.5, //透明度
icon: null, //顯示在標(biāo)題前面的小圖標(biāo)
iconBig: null, //顯示在內(nèi)容左側(cè)的大圖標(biāo)
buttons: null, //按鈕集合[{text:'按鈕顯示文字',fn:回調(diào)函數(shù)(event)}],event = {}
close: true//是否顯示關(guān)閉按鈕
}
})(jQuery);
調(diào)用
$.alert({
title: '火星向你發(fā)出警告', //對話框標(biāo)題
content: '我們是火星人,我們就要入侵地球了,你們準(zhǔn)備好了嗎?', //對話框內(nèi)容
width: 300, //寬
height: 150, //高
opacity: 0.5, //透明度
icon: 'icon.png', //顯示在標(biāo)題前面的小圖標(biāo)
iconBig: 'icon-big.png', //顯示在內(nèi)容左側(cè)的大圖標(biāo)
buttons: [{ text: '好怕怕', fn: function () { $.alert('我好怕怕呀')} }], //按鈕集合[{text:'按鈕顯示文字',fn:回調(diào)函數(shù)(event)}],event = {}
close: true//是否顯示關(guān)閉按鈕
});
七.下載
下面是我測試和使用的例子,感興趣的朋友可以自己下載修改。
點擊這里下載
之所以寫下這篇文章,是想將我的想法分享給大家;對于初學(xué)者,我希望他能從這篇文章中獲取對他有用的東西,對于經(jīng)驗豐富的開發(fā)者,我希望他能指出我的不足,給我更多的意見和建議;目的就是共同進步。
一.要做什么插件?
我想要實現(xiàn)一個插件可以取代瀏覽器默認的彈出對話框或窗體,就是我們通過調(diào)用window.alert,window.confirm,window.prompt這些方法 所彈出的網(wǎng)頁對話框,通過調(diào)用window.open,window.showModalDialog,window.showModelessDialog 所彈出的窗體。
之所以這樣做是因為:瀏覽器默認的對話框功能簡單,不能滿足更多需要;用戶體驗差。現(xiàn)代瀏覽器很多都會默認阻止彈出窗體(可能是因為在以前彈出廣告太猖獗的原因吧,還記得03,40年那陣,看個XX網(wǎng)站彈了一堆窗口,關(guān)都關(guān)不過來,瀏覽器都弄死了,甚至電腦都當(dāng)機了。)。
二.想要的效果是什么?
關(guān)于對話框插件,我們都知道在不同的瀏覽器里顯示樣式是有一些分別的,但基本上布局結(jié)構(gòu)都一樣。我們的插件想要的效果是:在任何瀏覽器里顯示的樣式和布局結(jié)構(gòu)都保持一致,位于瀏覽器正中央(這樣用戶能夠第一時間看到)。
彈出窗體在實現(xiàn)上與對話框類似(我是指我們要開發(fā)的插件,并非是說瀏覽器默認的實現(xiàn))。
三.設(shè)計一下功能
我們看著圖片一步步來說:

1、遮擋頁面內(nèi)容(圖片上灰色半透明部分),透明度可以設(shè)置(不透明0-1完全透明),這樣的好處是 在用戶關(guān)閉對話框之前不能對頁面進行操作。
2、對話框居中顯示,對話框大小可以設(shè)置(長寬)。
3、圖中(1)和(2)為對話框圖標(biāo),都可以設(shè)置。
4、對話框標(biāo)題可以內(nèi)容都可以設(shè)置。
5、可以不顯示關(guān)閉按鈕(x)。
6、底部按鈕可以為0個或多個,并且可以為其設(shè)置回調(diào)函數(shù)。
四.如何實現(xiàn)功能?
1.使用CSS樣式控制外觀。
*為了避免CSS命名沖突,我們需要為插件確定一個名字空間,其下所有樣式都在該命名空間下。
2.遮擋所有內(nèi)容
*我們在CSS里設(shè)置基本樣式。
復(fù)制代碼 代碼如下:
position:absolute;
left:0;
top:0;
background-color:#000;
z-index:99999;
*這里需要注意的是z-index的值有一個安全范圍,來自微軟的說明“The maximum value is 2147483647 for IE6, 7 and 8.But it is 16777271 for Safari 3, so a safe cross browser maximum value is 16777271.”大意是說ie6,7,8支持的最大值是2147483647,但是Safari 3是16777271,所以保險起見不要超過16777271。
*用js代碼設(shè)置其寬和高,我們通過$(document).width()獲取頁面寬度,通過$(document).height()獲取頁面高度度。
3.對話框居中顯示
對于對話框居中顯示,有兩種方式實現(xiàn)。
一是通過CSS實現(xiàn)。
position:absolute;如果頁面有滾動條的時,當(dāng)滾動條滾動時,對話框也會移動。
position:fixed;比較理想,無論如何滾動,對話框始終停留在頁面居中位置,唯一的缺點就是不支持IE6(網(wǎng)上有關(guān)于如果兼容IE6的方法,感興趣的朋友可以自己去實現(xiàn))。
二是通過js腳本控制。
通過計算頁面長寬來定位,當(dāng)改變頁面大小時,對話框位置不會改變,效果不理想。(當(dāng)然了,可以通過監(jiān)聽頁面發(fā)生改變時,自動調(diào)整位置,但是實現(xiàn)起來比較麻煩,感興趣的朋友可以自己去嘗試)
五.瀏覽器兼容
瀏覽器兼容什么的最討厭了,不過話說回來最理想的效果當(dāng)然是能夠兼容所有瀏覽器,事實上如果我們花更多的時間也確實可以做到兼容所有瀏覽器。但是這樣做值得嗎?如果問頁面設(shè)計人員最討厭的瀏覽器是什么?我想大多數(shù)都會回答是IE6,是的,這個曾經(jīng)風(fēng)靡全球,霸占全球超過90%用戶電腦的瀏覽器,我們曾經(jīng)覺得它很好,好吧,也許我該說不錯,又或者還可以;不管怎么樣,它曾經(jīng)確實是全球最受歡迎的瀏覽器。但是現(xiàn)在,它是我們開發(fā)者眼中最不受歡迎的瀏覽器,在全球平均使用不超過5%的情況下,在天朝卻仍然超過20%的用戶在使用它(來自http://www.ie6countdown.com/的統(tǒng)計),這是為什么呢?同樣一個功能如果要做到兼容IE6這些老版本的瀏覽器,我們大概要多花三分之一甚至更多的時間,生命是短暫的,同志們,為何不把有限的時間拿去做更有意義的事情呢?殺死IE6從我做起!
六.功能實現(xiàn)和調(diào)用
CSS部分
復(fù)制代碼 代碼如下:
<style type="text/css">
/*為了避免命名沖突,我們將該插件所有樣式都放在該類之下*/
.ctcx-dialog
{
font-size:14px;
}
.ctcx-dialog .mark /*遮罩層樣式*/
{
position:absolute;
left:0;
top:0;
background-color:#000;
z-index:99999;
}
.ctcx-dialog .dialog /*對話框樣式*/
{
position:fixed;
left:50%;
top:50%;
background-color:#FFF;
z-index:99999;
border:2px solid #000;
padding:2px;
}
.ctcx-dialog .dialog .bar /*對話框標(biāo)題欄*/
{
height:30px;
background-color:#999;
color:#FFF;
}
.ctcx-dialog .dialog .bar .icon /*對話框標(biāo)題欄圖標(biāo)*/
{
width:25px;
height:30px;
background-repeat:no-repeat;
background-position:center;
display:inline-block;
}
.ctcx-dialog .dialog .bar .title /*對話框標(biāo)題欄標(biāo)題*/
{
width:340px;
height:30px;
line-height:30px;
overflow:hidden;
display:inline-block;
vertical-align:top;
font-weight:bold;
}
.ctcx-dialog .dialog .bar .close /*對話框標(biāo)題欄關(guān)閉按鈕*/
{
width:20px;
height:30px;
background-image:url(close.png);
background-repeat:no-repeat;
background-position:center;
display:inline-block;
cursor:pointer;
}
.ctcx-dialog .dialog .container /*對話框內(nèi)容容器*/
{
margin-top:5px;
overflow:auto;
}
.ctcx-dialog .dialog .container .icon /*對話框內(nèi)容容器*/
{
background-image:url(icon-big.png);
background-repeat:no-repeat;
background-position:center;
width:48px;
height:48px;
}
.ctcx-dialog .dialog .container .content /*對話框內(nèi)容容器*/
{
position:relative;
}
.ctcx-dialog .dialog .buttons /*對話框按鈕欄*/
{
text-align:center;
margin-top:5px;
height:30px;
position:relative;
bottom:0px;
}
.ctcx-dialog .dialog .buttons a /*對話框按鈕*/
{
background-color:#DDD;
color:#000;
text-decoration: none;
display:inline-block;
padding:5px;
}
.ctcx-dialog .dialog .buttons a:hover /*對話框按鈕*/
{
background-color:#333;
color:#FFF;
}
.ctcx-dialog .dialog .buttons a:active /*對話框按鈕*/{}
</style>
JS部分
復(fù)制代碼 代碼如下:
(function ($) {
$.alert = function (options) {
if (typeof options === 'string') options = { content: options };
var opts = $.extend({}, $.alert.defaults, options);
if (opts.content == null || opts.content.length == 0) return this;
var me = $('<div></div>').addClass('ctcx-dialog').appendTo(document.body);
var doc = $(document);
$('<div class="mark"></div>').css({ opacity: opts.opacity }).width(doc.width()).height(doc.height()).appendTo(me);
var _dialog_ = $('<div class="dialog"></div>').css({
width: opts.width,
height: opts.height,
marginLeft: 0 - opts.width / 2,
marginTop: 0 - opts.height / 2
}).appendTo(me);
var _bar_ = $('<div class="bar"></div>').appendTo(_dialog_);
var _titleWidth_ = opts.width - 0;
if (opts.icon != null) {
$('<div class="icon"></div>').css('background-image', 'url(' + opts.icon + ')').appendTo(_bar_);
_titleWidth_ -= 25;
}
if (opts.close) _titleWidth_ -= 20;
$('<div class="title"></div>').css({ width: _titleWidth_ }).html(opts.title).appendTo(_bar_);
if (opts.close) {
$('<div class="close"></div>').click(function () {
me.remove();
}).appendTo(_bar_);
}
var _containerHeight_ = opts.height - 40;
var _container_ = $('<div class="container"></div>').appendTo(_dialog_);
var _contentCss_ = {};
if (opts.iconBig != null) {
$('<div class="icon"></div>').css('background-image', 'url(' + opts.iconBig + ')').appendTo(_container_);
_contentCss_.top = -48;
_contentCss_.marginLeft = 48;
}
var _content_ = $('<div class="content"></div>').css(_contentCss_).html(opts.content).appendTo(_container_);
if (opts.buttons != null && opts.buttons.length > 0) {
_containerHeight_ -= 30;
var _buttons_ = $('<div class="buttons"></div>').appendTo(_dialog_);
$.each(opts.buttons, function (i, _button) {
$('<a href="javascript:;">' + _button.text + '</a>').click(function () {
_button.fn(me);
}).appendTo(_buttons_);
})
}
_container_.css({ height: _containerHeight_ });
this.close = function () {
me.remove();
}
this.setContent = function (content) {
_content_.html(content);
}
return this;
}
//設(shè)置默認參數(shù)
$.alert.defaults = {
title: '信息提示', //對話框標(biāo)題
content: null, //對話框內(nèi)容
width: 200, //寬
height: 100, //高
opacity: 0.5, //透明度
icon: null, //顯示在標(biāo)題前面的小圖標(biāo)
iconBig: null, //顯示在內(nèi)容左側(cè)的大圖標(biāo)
buttons: null, //按鈕集合[{text:'按鈕顯示文字',fn:回調(diào)函數(shù)(event)}],event = {}
close: true//是否顯示關(guān)閉按鈕
}
})(jQuery);
調(diào)用
復(fù)制代碼 代碼如下:
$.alert({
title: '火星向你發(fā)出警告', //對話框標(biāo)題
content: '我們是火星人,我們就要入侵地球了,你們準(zhǔn)備好了嗎?', //對話框內(nèi)容
width: 300, //寬
height: 150, //高
opacity: 0.5, //透明度
icon: 'icon.png', //顯示在標(biāo)題前面的小圖標(biāo)
iconBig: 'icon-big.png', //顯示在內(nèi)容左側(cè)的大圖標(biāo)
buttons: [{ text: '好怕怕', fn: function () { $.alert('我好怕怕呀')} }], //按鈕集合[{text:'按鈕顯示文字',fn:回調(diào)函數(shù)(event)}],event = {}
close: true//是否顯示關(guān)閉按鈕
});
七.下載
下面是我測試和使用的例子,感興趣的朋友可以自己下載修改。
點擊這里下載
您可能感興趣的文章:
- jQuery validate+artdialog+jquery form實現(xiàn)彈出表單思路詳解
- 分享2個jQuery插件--jquery.fileupload與artdialog
- 用jquery中插件dialog實現(xiàn)彈框效果實例代碼
- jquery插件之信息彈出框showInfoDialog(成功/錯誤/警告/通知/背景遮罩)
- 修改jquery里的dialog對話框插件為框架頁(iframe) 的方法
- jQuery Dialog 彈出層對話框插件
- jquery插件hiAlert實現(xiàn)網(wǎng)頁對話框美化
- jBox 2.3基于jquery的最新多功能對話框插件 常見使用問題解答
- 非常強大的 jQuery.AsyncBox 彈出對話框插件
- 強大的jquery插件jqeuryUI做網(wǎng)頁對話框效果!簡單
- 基于jQuery的彈出警告對話框美化插件(警告,確認和提示)
- jQuery對話框插件ArtDialog在雙擊遮罩層時出現(xiàn)關(guān)閉現(xiàn)象的解決方法
相關(guān)文章
淺談$(document)和$(window)的區(qū)別
本人在做項目的時候遇到$(document),$(window)這兩種寫法立馬讓我蒙圈了,那么他們的區(qū)別是什么呢,在網(wǎng)友的幫助下,徹底了解了他們的區(qū)別,這里分享給大家。2015-07-07BootStrap輕松實現(xiàn)微信頁面開發(fā)代碼分享
本文給大家分享一段代碼關(guān)于bootstrap實現(xiàn)微信開發(fā)頁面的代碼,非常不錯代碼簡單易懂,感興趣的朋友一起看看吧2016-10-10關(guān)于jQuery中的each方法(jQuery到底干了什么)
這篇文章主要介紹了關(guān)于jQuery中的each方法,需要的朋友可以參考下2014-03-03