自己開發dialog看看
可能要寫好幾天 QQ
終於走到今天這一步了
要來寫自己的dialog了!(給自己拍拍手~~~)
首先先拿出我們的流程之寶!
第一個,套件初始化。
第二個,套件觸發。
第三個,邏輯計算。
第四個,畫面改變。
第五個,事件綁定。
現在狀況,當然已經跟以前不一樣了喔
所以,我們要針對我們的範疇,進行些許的討論喔!
1.甚麼是dialog
對話框有三個部分,標題、內容頁、按鈕。
2.內容頁,我打算不但可以直接透過選擇器選擇內容,甚至可以支援打網址的方式
用get的方式讀取,酷吧!
3.按鈕的部分,我知道很多人喜歡右上角那個黑色的XX。
你們喜歡我們就作吧!不過當然也有下方的按鈕列嚕。
以上是有關於畫面的規劃
然後討論開發者使用的狀況
$('abc').ryDialog() ;
$.ryDialog(
{
content: 'abc'
, title: 'Hello My Dear'
, buttons:
{
button1: function()
{
alert(‘click three small’) ;
}
, button2: function()
{
alert(‘thank you for everything.’) ;
}
}
, clickRm: true
}) ;
當然啦,上面是我隨便打的
然後就隨便想一想會發生的事情,不可以想的太認真喔!
A:如果沒有設定標題,標題留白,高度保留。
B:如果標題字太多,那就強制放大標題寬度
C:content可以寫網址,用get去抓抓看。
D:buttons如果沒綁定事件的話,預設事件就是關閉這個dialog
E:關閉dialog是remove,因為我們要容納多個dialog
把多的移掉才不會出問題
ESC,可以強制把當前dialog關閉。
但是也要先檢查設定的時候可不可以關掉。
F:Dialog可以有scroll bar,沒有給人高一整個document的。
G:有最小、最大、打X
隨便想好之後,想下面的問題。
這套件可以全域設定的部分
$.ryDialog(‘escRm’, true) ; //defaults false
$.ryDialog(‘rmCross’, true) ; //defaults false
然後,開始畫畫面嚕。
真的很害怕你們看了我畫的畫面就把瀏覽器關掉XDDD
(我決定拿以前的東西…來用
反正重點不是畫畫面,自己請美工弄啦!)
—
首先我們要知道我們的dialog可不可以一次出現兩個呢!?
為了證明我們的實力,我們就來想一次可以出現兩個的狀況吧
所以我們可以這樣用
$.ryDialog('xxx') ;
今天就先分享這樣吧