4

そのため、ユーザーが削除ボタンをクリックしたときに小さな確認ダイアログ（インライン、toopltip）を作成しようとしています。

こんな感じだと思います

ここに画像の説明を入力してください

（ただし、小さなテキストと[OK]および[キャンセル]ボタンがあります）。 しかし、私はそれをどのようにスタイリングするかを尋ねるためにここにいるのではありません。

私は仕事のプラグインとしてqTip2を使用したいと思いますが、より良い代替手段があれば私もそれを選びます。

それで、いくつかのinteratice要素を使用してツールチップを起動し、フォーカスを失うか、閉じるボタンがクリックされた場合にのみツールチップを閉じるにはどうすればよいですか。また、削除ボタンはAjaxによってロードされます。

何か案は？

ありがとう、平和！

4

1 に答える 1

2

qTip2を使用すると簡単に実行できます。私はあなたにスタートを与えます、それは私のデモを見てください

結果

デモ写真

HTML

<button id="gear">Gear</button>
<div style="display:none;" id="menu">
    <div class="menuitem">Rename</div><br>
    <div class="menuitem">Duplicate</div><br>
    <div class="menuitem">Delete</div><br>
</div>

CSS

#gear {
    margin:100px;
}
.menuitem {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 9px;
    margin-bottom: 3px;
    width: 75px;
}

</ p>

JavaScript

$(function() {
    $("#gear").button({
        icons: {
            primary: "ui-icon-gear",
            secondary: "ui-icon-triangle-1-s"
        },
        text: false
    }).qtip({
        content: {
            text: $('#menu')
        },
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        style: {
            classes: 'ui-tooltip-dark ui-tooltip-shadow'
        },
        position: {
            my: 'top center',
            at: 'bottom center',
        }
    });
    $(".menuitem").button().click(function(){
        alert($(this).text());
    });
});​

ニーズに合わせて調整するには、qTip2ドキュメントとjQueryUIドキュメントをお読みください。

于 2012-05-06T21:14:47.517 に答える