1

同じページの2か所でjQuerydatepickerを使用しています。しかし、私は彼らに異なるスタイルを与えたいと思います。両方がすべて同じクラスを持っている間に、どうすればそれを行うことができますか？

コード：

$('#startDate').datepicker({ dateFormat: "DD, MM d, yy" });
$('#endDate').datepicker({ dateFormat: "DD, MM d, yy" });

これらの日付ピッカーは両方とも異なって見えるはずです。

4

3 に答える 3

2

jQuery UIをダウンロードするときに、テーマのCSSスコープを指定できます。ダウンロードページに移動したら、[テーマの詳細設定]のドロップダウンをクリックします。

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

テーマスコーピングを利用するには、最初にテーマを選択する必要があります。ThemeRollerでテーマをダウンロードすると、ダウンロードビルダーに戻って、ダウンロードをカスタマイズします。

テーマスコープフィールドは、テーマを適用するページ（またはサイト）の一部を表すCSSセレクターを入力する場所です。たとえば、サイトのサイドナビゲーション列にアコーディオンウィジェットがあり、サイトの他の領域とは異なるテーマを設定したい場合は、そのサイドナビゲーション列に対応するCSSセレクター（など）を入力できます。 internalNavigation）とテーマをダウンロードします。Builderは、スコープセレクターの後にスペースも追加するので、スペースを追加する必要はありません。

CSSスコープを入力すると、ビルダーは対応するテーマフォルダー名を提案します。この名前は編集可能であり、スコープフィールドに入力したときにフォルダフィールドが空であるか編集されていない場合を除いて、別の名前を自動提案することはありません。

zipファイルをダウンロードして解凍すると、「theme」（または入力したカスタム名）という名前のテーマフォルダーが含まれていることがわかります。そのフォルダー内には、jQuery UICSSFrameworkを構成するすべてのファイルがあります。[テーマスコープ]フィールドにスコープを入力したとすると、このフォルダーに含まれるすべてのCSSがセレクターにスコープされます。

このテーマをページに含めるには、CSSリンクを「theme_internalNavigation」フォルダーのui.all.cssに送信するだけです。

<link type="text/css" href="theme_interiorNavigation/ui.all.css" rel="Stylesheet" />

追加のヘルプは、フィラメントグループのページにあります。

于 2012-05-08T19:19:45.437 に答える
1

幸い、デザインが変更になりました。私の日付ピッカーの1つはインラインである必要があり、もう1つは通常の日付ピッカーです。目的のスタイルを実現するために、このコードを作成しました。

<input type="text" name="startDate" id="startDate" onclick="applyDatepickerBorder();"/>

Javascriptで私はこのメソッドを定義しました：

function applyDatepickerBorder(){
    // Inline datepicker doesn't have this id
    $('#ui-datepicker-div').css('border','1px solid');
}

これが私がついに得たものです：

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

于 2012-05-09T13:10:22.137 に答える
0

beforeShow関数も使用できます。

例えば。データピッカー幅を変更する場合：

$('#input-field-id')
    .datepicker({ 
        beforeShow: function(input_element, dp_instance){
            setTimeout(function(){
                // enter your styling here 
                $(dp_instance.dpDiv).css('width', '300px');
            },1, dp_instance);
        }
    });
于 2016-09-14T12:12:44.497 に答える