10

私はpinesnotify（http://pines.sourceforge.net/pnotify/）を見ていますが、見た目は良いですが、実際のドキュメントがほとんどないようです。

松の使い方を理解するのに時間を費やしたくないのと同じように、数か月後に別のプラグインに変更する必要があった機能が不足していることがわかります。

これは、私が使用していたtablesorter 2.0で発生しました。その後、フィルタリングが必要でしたが、それらはちょっとひどいものだったので、このような大きなAPIを備えたデータテーブルを見つけてさらに開発しました。

ですから、代わりに通知用のデータテーブル（開発と機能の点で）のようなものがあるのではないかと思います。

編集

だから私はjgrowlを見ていて、テーマローラーの使い方とちょっと混乱しています。

そこで、サンプルファイルを1つ取り出して、ジャンクだと思ったものをすべて削除しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
    <head>
        <title>jGrowl meet Twitter</title>
        <link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
        <link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
        <script type="text/javascript">
            $(function(){
                $('.ui-state-default').hover(
                    function(){$(this).addClass('ui-state-hover');},
                    function(){$(this).removeClass('ui-state-hover');}
                )
                .mousedown(function(){$(this).addClass('ui-state-active');})
                .mouseup(function(){$(this).removeClass('ui-state-active');})
                .mouseout(function(){$(this).removeClass('ui-state-active');});
            });
        </script>

        <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript" src="../jquery-1.3.2.js"></script>
        <script type="text/javascript" src="../jquery.jgrowl.js"></script>
        <script type="text/javascript">

            $(document).ready(function(){
                // This value can be true, false or a function to be used as a callback when the closer is clciked
                $.jGrowl.defaults.closer = function() {
                    console.log("Closing everything!", this);
                };

                $.jGrowl("Sticky notification with a header", 
                    { 
                        header: 'A Header', 
                        sticky: true,
                    });
            });

        </script>
    </head>
    <body>
    <div id="trdevtool_contain" class="ui-widget ui-widget-content ui-corner-all">
        <div class="ui-widget-header ui-corner-top">
            <h1>jQuery UI ThemeRoller <span>Developer Tool</span></h1>
        </div>
    </div>

    </body>
</html>

これが何のためにあるのか分かりません

    <script type="text/javascript">
        $(function(){
            $('.ui-state-default').hover(
                function(){$(this).addClass('ui-state-hover');},
                function(){$(this).removeClass('ui-state-hover');}
            )
            .mousedown(function(){$(this).addClass('ui-state-active');})
            .mouseup(function(){$(this).removeClass('ui-state-active');})
            .mouseout(function(){$(this).removeClass('ui-state-active');});
        });
    </script>

テーマの適用とは何の関係もないようです。私はそれを取り去りました、そして、テーマはまだ適用されました。また、私のjgrowを見れば

$.jGrowl("Sticky notification with a header", 
    { 
        header: 'A Header', 
        sticky: true,
    });

テーマについては触れませんが、それでもテーマの使い方は多少あります。なぜテーマを取っているのですか？

4

4 に答える 4

17

お気に入りのtoastrにリンクして2セントを追加したいと思います。

http://codeseven.github.com/toastr/

于 2012-07-20T17:26:42.563 に答える
9

そこにはたくさんのこれらがあります、私はjQueryプラグインサイト、特に通知カテゴリに分類されたプラグインをチェックアウトします:)

ここにいくつかあります：

于 2010-06-12T18:15:59.733 に答える
1

個人的にはjGrowlを使用しています。しかし、ここに他のいくつかがあります。

編集：以下のコメントに応えて、ここにjGrowlサイトがあります。それは何をより良くしますか？使い方は簡単で、うまく機能します。他の人も同じことを達成できますが、私の経験はFunkaの経験と同じです。試してみて、うまくいき、簡単で、完了しました。

于 2010-06-12T18:16:49.337 に答える
1

私はこの答えに遅れるかもしれませんが、シンプルで軽量、ミニマリストで目立たない通知プラグインを探している人がいれば、 jNotifyOSDと呼ばれるWebアプリとシームレスに統合できるオープンソースのjQuery通知プラグインを作成しました。そのリンクでデモを見ることができます。私はAPIをクリーンで使いやすいものに保つように努めました。次に例を示します。

$.notify_osd.create({
  'text'        : 'Hi!',             // notification message
  'icon'        : 'images/icon.png', // icon path, 48x48
  'sticky'      : false,             // if true, timeout is ignored
  'timeout'     : 6,                 // disappears after 6 seconds
  'dismissable' : true               // can be dismissed manually
});

今後のすべての通知にグローバルデフォルトを設定することもできます（通知ごとに上書きできます）。

$.notify_osd.setup({
  'icon'        : 'images/default.png',
  'sticky'      : false,
  'timeout'     : 8
});

ホバー時に透明度のある非常に優れたデフォルトのテーマが含まれています（つまり、マウスポインターが近づくにつれて通知がますます半透明になります）が、定義されたクラスのスタイルを指定するCSSファイルを挿入するだけで、テーマを非常に簡単に変更できます。私はより多くの機能を含めるように取り組んでいるので、GitHubリポジトリに注目する必要があります。

更新[2012年12月13日]：

しばらく経ちましたが、キューシステムを使用して複数の表示通知のサポートをようやく実装しました。したがって、たとえば：

$.notify_osd.setup({
  // ... config ...
  'visible_max' : 5                  // max 5 notifications visible simultaneously
  'spacing'     : 30                 // spacing between consecutive notifications
});

ここでデモを見ることができます。プラグインは、さまざまなユースケースを処理するのに十分な柔軟性を備えていると思います。

于 2011-08-21T18:17:12.883 に答える