1

次のコードサンプルがあります。

<div id="dlgTest1" style="display: none">
    <p>
        Lorem ipsum test popup dialog<br />
        <br />
        Click the OK button to resume activity.
    </p>
</div>
<script type="text/javascript">
$(document).ready(function () {
        var myTitle = 
        "<div style='float: left'>LEFT TEXT</div><div style='float: right'>RIGHT TEXT</div>";
        $("#dlgTest1").dialog({
            title: '', //  new jquery-ui-1.10.2 doesn't allow HTML here
            autoOpen: false,
            minWidth: 500, width: 500,
            minHeight: 200, height: 200,
            resizable: true,
            modal: true,
            show: "blind",
            hide: "explode",
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                }
            }
        }).siblings('.ui-dialog-titlebar').html(myTitle); // title goes here
        $("#dlgTest1").dialog("open").dialog("moveToTop");
});
</script>

このサンプル コードは jQuery ダイアログを開き、左側と右側のタイトル バーにテキストを表示します。これは、2 つの要素myTitleを持つ HTML コードを含む変数によって実現されます。<div>

jQueryUI の以前のバージョン (V1.8.20 など) では、 title 属性にコンテンツを直接割り当てることができmyTitle、魅力的に機能しました。V1.10.2 にアップグレードしたところ、タイトルが HTML を解釈しなくなり<div> ...、代わりに がタイトルに表示されることに気付きました。ご覧のとおり、微調整を使用して、.siblings('.ui-dialog-titlebar').html(myTitle);基本的に機能する HTML コードを通過させています。

ただし、ダイアログを閉じるための (X) ボタンが非表示になるという副作用があります (この副作用は、古い jQuery UI バージョン V1.8.20 では発生しませんでした)。最新バージョンに依存するコントロールが必要なため、以前のバージョンの jQueryUI に戻ることはできません。

質問: (X) 閉じるボタンが右揃えのテキストで隠れないようにするにはどうすればよいですか?

注: HTML 形式のテキストではなく通常のテキストを使用するとアイコンが表示されるため、スタイルやビットマップが欠落しているわけではありません。

私はすでにどこでも（ http://jqueryui.com/で始まる）、Googleなどで検索しましたが、解決策が見つかりませんでした。

どんな助けでも大歓迎です。

更新：（以下のコメントへの回答）

  • 私はui-lightness css テーマを変更せずに使用しています
  • 右揃えの属性に追加padding-right:20pxしても問題は解決しません。stylediv

最後の注意:

皆さんとの話し合いは、問題を解決するのに大いに役立ちました。私は最終的に私のために働いた答えを投稿しました。

私を支えてくれたすべての人に感謝します、あなたたちは本当に素晴らしいです！回答を投稿した人は全員、私から +1 を受け取りました。

4

2 に答える 2

1

問題は、タイトルバーのhtmlを置き換えているため、閉じるボタンを削除していることです。

に変更html()するとappend()、見栄えを良くするためにマージン/パディングを調整する必要があります。

var myTitle = 
    "<div style='float: left'>LEFT TEXT</div><div style='float: right; margin-right:10px;'>RIGHT TEXT</div>";

と

}).siblings('.ui-dialog-titlebar').append(myTitle);

JSFiddle

于 2013-03-21T16:44:21.783 に答える
1

Epascarello が提案したアプローチ.append(myTitle) は .html(myTitle)、JSFiddle の例では正常に機能しますが、残念ながら、ui-lightness私が使用している jQueryUI のカスタマイズでは機能しません。

しかし、次の関数はそれを行います:

// Insert HTML formatted title in jQuery dialog V1.10.2
// Parameters: 
// dialog = reference to jQueryUI dialog, 
// hmtlTitle = the title with containing HTML to apply to dialog
function applyHtmlToDialog(dialog, htmlTitle) {
    dialog.data("uiDialog")._title = function (title) { 
            title.html(this.options.title); };
    dialog.dialog('option', 'title', htmlTitle);
}

これを使用するには、次の方法で呼び出すだけです。

applyHtmlToDialog($("#dlgTest1").dialog(), myTitle);

または、複数行で実行したい場合：

var myDiag = $("#dlgTest1").dialog(//... your dialog definition ...
                                    );
var myTitle = '<div> ... </div>'; 
applyHtmlToDialog(myDiag, myTitle);

myTitle適切に挿入され、含まれている HTML コードが考慮されます。

NB (いくつかの背景情報): このソリューションは、次の Stackoverflow 記事に触発されました: Icons in jQueryUI dialog title。

この動作の理由は、jQuery チームがダイアログの XSS 脆弱性に関する懸念を持っていたため、意図的に変更したためであることがわかりました。

興味があれば、ここで彼らの議論の詳細を読むことができます。したがって、_titleタイトルで HTML コードを使用する場合に備えて、jQuery によって提供される公式の機能です。.dialog({ title: $("... html ...") })彼らは、私が個人的に好んだ (つまり、タイトルに HTML を含めることを示すために $ を使用する) ほど単純ではないアプローチを選択したと思います。

于 2013-03-22T09:57:58.113 に答える