2

これは、バージョン 1.10.3 の時点で修正されていないjQuery UI の制限に対処します。

jQuery UI には、 jQuery UI ウィジェットのスタイルを設定できるテーマローラー機能がありますが、1 つのページに複数のテーマが必要な場合があるため、テーマローラーを使用すると、ウィジェットを作成するときに CSS の「スコープ」を指定できます。これは、テーマの CSS を明確にするためにテーマロールされた CSS で使用される単なるカスタム CSS クラス名です。以下は、themeroller によって生成される CSS ルールの例です。

.myCustomClass .ui-buttonset { margin-right: 7px; }

ここで、myCustomClassは、テーマ付きウィジェットを生成するときに指定された「スコープ」です。アイデアは、フォーム、div、またはウィジェットがレンダリングされるコンテナーにクラスを割り当てることにより、ページのどの部分にカスタム テーマを設定するかを指定できるということです。

<div class="myCustomClass">
...your custom themed widgets go here...
</div>

問題は、一部のウィジェット、特に日付ピッカーが、ドキュメントの本文に追加される別のdivを作成することです。次のようになります。

<div id="ui-datepicker-div"
     class="ui-datepicker ui-widget ui-..."
     style="position: absolute; ..."
>...</div>

通常、スタイルdisplay: noneを割り当てることで非表示になっているため、この div は表示されませんが、datepicker が作成されると常に表示されます。ページ上のすべての日付ピッカーによって共有されます。日付ピッカーが「ピッカー」を表示する必要がある場合、これは表示される div です。

しかし、このピッカー div は、フォーム、div、またはウィジェットを含むものの中にはありません。そのため、class="myCustomClass" のコンテナー内にないため、すべてのスタイリングが失われます。これは、ピッカーが表示されている場合には明らかです。

一般的な回避策は、ドキュメントの準備ができたらこれを実行することです。

$("#ui-datepicker-div").wrap('<div class="myCustomClass" />');

ただし、これは、日付ピッカーがページで既にインスタンス化されている場合にのみ機能します。しかし、オンザフライでウィジェットを作成する必要があるため、この場合、datepicker を機能させるにはどうすればよいでしょうか?

4

1 に答える 1

2

私の解決策は、次のように.wrap回避策を適用する前に、ダミーの日付ピッカーを作成することです。

$(document).ready(function(){
    // The following is a workaround for datepicker not working with
    // a CSS "scope" setting.
    $("<input type='hidden'/>").appendTo($('body')).datepicker();
    $("#ui-datepicker-div").wrap('<div class="myCustomClass" />');
});

ただし、これは 1 回しか実行できず、すべてのピッカーが指定されたテーマで表示されます。

于 2013-09-05T22:57:31.910 に答える