實質上鼓勵一下吧

用jQuery就要使用它的插件來發揮最大的威力,其中jQuery Tools是一個相當棒的工具,幾乎你能夠用到的東西它都有,有興趣可以看看它的功能展示。

jQuery Tools可以用來顯示Yes/No dialog,用起來也並不困難,不過沒有自己試過也根本玩不出來。首先建立你的HTML頁面:

<!-- the triggers -->
<p>
    <button class="modalInput" rel="#yesno">Yes or no?</button>
</p>

<!-- yes/no dialog -->
<div class="modal" id="yesno">
    <h2>This is a modal dialog</h2>

    <p>
        You can only interact with elements that are inside this dialog.
        To close it click a button or use the ESC key.
    </p>

    <!-- yes/no buttons -->
    <p>
        <button class="close"> Yes </button>
        <button class="close"> No </button>
    </p>
</div>

其中第三行是在畫面上弄個按鈕,並且透過 rel="#yesno" 去連接到yesno的視窗,如果你的對話框ID不一樣就是要修改這個值。接著建立你的對話框內容,裏面的程式碼應該很簡單,不用太多說明,CSS的部份我也不多著墨,請參考原文範例,重點就是把對話框先隱藏起來,然後美化。

var triggers = $(".modalInput").overlay({

    // some mask tweaks suitable for modal dialogs
    mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
    },

    closeOnClick: false
});

接著讓這個按鈕按下去的時候啟動一個overlay,也就是一個遮罩,讓你的整個頁面都無法點選,並且能夠啟動對話框。

var buttons = $("#yesno button").click(function(e) {
    
    // get user input
    var yes = buttons.index(this) === 0;

    // do something with the answer
    triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
});

接著就是綁定對話框的按鈕,使用的是指定ID=yesno裏面的所有按鈕,看你最後按的是哪個按鈕而替換掉原來畫面上按鈕的文字。看似簡單,直接做也沒有問題,但學問可大了。

當我們需要跟使用者確認的時候,通常都是在多筆記錄瀏覽的時候,例如畫面像這樣:

image

我們會希望使用者按下刪這個按鈕的時候跳出對話框,跟使用者確認一下,這個按鈕的程式碼大概會像是這樣:

<a href='/vender/delete/A0001' class='delete' rel="#yesno" title='刪除 (A0001) 大順'>刪</a>

加上了 rel="#yesno" 用來觸發對話框,我用 class='delete' 來識別是個刪除按鈕,如果沿用前面的程式碼也沒有甚麼問題,它會順利的替換掉你的按鈕上的文字,不過呢對話框裏面的文字還是一樣的,使用者怎麼能夠確認剛才按的是哪一筆資料的刪除按鈕呢?這時候就要動一點手腳了,把對話框的元素都加上ID。

<div class="modal" id="yesno">
    <h6 id='modal_title'>確認刪除</h6>
    <p id='modal_message'>
        You can only interact with elements that are inside this dialog.
        To close it click a button or use the ESC key.
    </p>
    <p>
        <button class="close"> Yes </button>
        <button class="close"> No </button>
    </p>
</div>

接著要想辦法替換對話框裏面的文字,我們可以在按下刪這個按鈕的時候去替換他,直接偷原來按鈕上面的提示文字是最容易的方法了。

$('.delete').bind('click', function() {
    $( "#modal_message").html($(this).attr("title"));
});

而按下YES按鈕的時候,我們同樣希望它能轉到原來按鈕上面的鏈接網址,所以一樣用偷的最容易。

var buttons = $("#yesno button").click(function(e) {
    // get user input
    var yes = buttons.index(this) === 0;
    // do something with the answer
    if(yes) {
        window.location.href = triggers.eq(0).attr("href");
    }
});

按下按鈕的時候你就可以看到如下畫面,剩下的就是美化的工作了:

image

或許把偷東西的程式碼加在遮罩出來之前更好,網址就藏在看不到而無關緊要的地方:

var triggers = $(".modalInput").overlay({
    mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
        onBeforeLoad: function() {
            $('#modal_message').html(triggers.eq(0).attr('title'));
            $('#yesno').attr('rel', triggers.eq(0).attr('href'));
        }
    },
    closeOnClick: false
});

按鈕就可以改成這樣:
var buttons = $("#yesno button").click(function(e) {
    // get user input
    var yes = buttons.index(this) === 0;
    // do something with the answer
    if(yes) {
        window.location.href = $("#yesno").attr("rel");
    }
});
創作者介紹

人生四十宅開始 二號宅

漠哥 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 訪客
  • $('#modal_message').html(triggers.eq(0).attr('title'));

    無法取得click的index… triggers.eq( index )…