jQuery Notty 右上角訊息提示視窗

建立互動式網頁時，有時候會需要一些方式來提醒使用者該做別的動作，或者是不要做哪些事情抑或者是提醒使用者一些事情。這個時候 jQuery Notty 就是很好用的一個套件，基於 jQuery 框架製作件單容易使用。還可以設定提示秒數、顯示秒數還有點擊後的回調函示等等的。

使用方法：
第一步 載入  jQuery Notty 所需要用到的 JavaScript 和 CSS 檔
<!--使用Google ajax API 直接連結 jQuery 1.8.2的min版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- jQuery Notty 的主程式碼 -->
<script type="text/javascript" src="js/jquery.notty.js"></script>
<!-- jQuery Notty 的CSS 設計樣式 -->
<link rel="stylesheet" type="text/css" href="css/jquery.notty.css" />


第二步 寫入 HTML 設計出現的連結列表
<p><a id="sample1" href="#">簡單的文字</a></p>
<p><a id="sample2" href="#">標題加大塊的文字</a></p>
<p><a id="sample3" href="#">標題大塊的文字加圖片</a></p>
<p><a id="sample4" href="#">五秒鐘的時間</a></p>
<p><a id="sample5" href="#">點擊的回調函示</a></p>
<p><a id="sample6" href="#">使用者定義</a></p>

第三步 寫入 JavaScript 程式碼片段
$(function(){
    $('#sample1').click(function() {
        $.notty({
            content: "This is a <strong>text notification</strong>."
        });
        return false;
    });
    $('#sample2').click(function() {
        $.notty({
            title: "2011 England riots",
            content: "Widespread public disturbances, including looting, arson attacks, burglary, robbery and some rioting, are ongoing in some cities and towns in England."
        });
        return false;
    });
    $('#sample3').click(function() {
        $.notty({
            title: "Juno (spacecraft)",
            content: "Juno is a NASA New Frontiers mission to the planet Jupiter. It was originally proposed at a cost of approximately US$700 million (FY03) for a June 2009 launch.",
            img: "images/demo/thumb.jpg",
            showTime: false
        });
        return false;
    });
    $('#sample4').click(function() {
        $.notty({
            content: 'This notification will disappear in <strong>five seconds</strong>.',
            timeout: 5000,
            showTime: false
        });
        return false;
    });
    $('#sample5').click(function() {
        $.notty({
            content: "Click on me to try the <strong>callback</strong> function",
            click:
                function() {
                $.notty({
                    content: 'This notification was just created.',
                    title: 'Callback!'
                });
            }
        });
        return false;
    });
    $('#sample6').click(function() {
        var title = prompt("Please enter the title of the notification","Just another title");
        var text = prompt("Please enter the the text of the notification","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur enim massa, euismod id sollicitudin vitae, iaculis quis erat. Duis et ligula sapien, sed varius lectus. Sed quis urna orci.");
        var img = prompt("Please specify an image src","");
        if(img != '') {
            $.notty({
                content: text,
                title: title,
                img: img
            });
        } else {
            $.notty({
                content: text,
                title: title
            });
        }
        return false;
    });
});

附上程式可修改參數表

參數	型態	預設	說明
title	字串	undefined	標題文字
content	字串	undefined	提示內容文字
img	字串	undefined	提示圖片連結
showTime	布林	true	是否持續顯示
timeout	數字	0	幾秒後顯示
click	函示	undefined	點擊回調函示

作者網站：http://www.class.pm/
檔案大小：39.8 KB(包含範例)
檔案下載：http://www.userdot.net/files/jquery/jquery.notty-1.0.0.zip
檔案備份：下載