iT邦幫忙

3

jQuery套件開發之(十四),自己寫dialog的時刻到了!

  • 分享至 

  • xImage
  •  

自己開發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') ;

今天就先分享這樣吧


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言