3

この問題の背景は、入力用のいくつかのドロップダウンボックスと、ユーザーが日付を入力できるテキスト入力を含むコンピューティングプロジェクトを行っていることです。

YUIを使用してフォームを拡張したので、カレンダー入力はYUIカレンダーウィジェットを使用し、ドロップダウンリストは入力の水平リストに変換されます。ユーザーは2回クリックするのではなく、1回クリックするだけで入力を選択できます。ドロップダウンボックス（それが理にかなっていることを願っています、それを明確に説明する方法がわかりません）

問題は、私のプロジェクトの設計セクションで、プログレッシブエンハンスメントの原則に従うと述べたことです。ただし、JavaScriptを使用していないユーザーが、そのページのドロップダウンボックス/テキスト入力を表示できるようにするのに苦労しています。

これは、必ずしも方法がわからないためではありませんが、私が試した2つの方法では不十分なようです。

方法1 -YUIを使用してテキストボックスとドロップダウンリストを非表示にしようとしましたが、これは理想的な解決策のように見えましたが、ページの読み込み時に（特に初めて）、テキストボックスとドロップダウンリストにかなりの遅延がありました。少なくとも1秒間表示されます。bodyタグの終わりの直前にこのスクリプトを含めましたが、YUIを使用してオンロードで実行する方法はありますか？それは役に立ちますか？

方法2 -noscriptタグを使用します。。。ただし、これは簡単な解決策ですが、noscriptタグに関するさまざまな悪い点を読んだことがあるため、これを行うのは嫌です。

メソッド1を機能させる方法はありますか？それとも、私がまだ遭遇していない、これを行うためのより良い方法はありますか？

4

3 に答える 3

2

通常、要素を表示/非表示にするスクリプトはかなり高速です。私が最初に考えることができる唯一の理由は、要素がレンダリングされた後、スクリプトが長時間実行されているためです。非表示またはその他の種類の遅延を行う前に、高価なスクリプトが実行されている可能性があります。

解決策は、必要に応じて、ドロップダウンがレンダリングされた直後にスクリプト ブロックで実行されるコードの最初の部分に非表示スクリプトを作成することだと思います。

于 2012-03-27T12:15:44.980 に答える
1

JavaScript がない場合に何を表示/非表示にするかは完全にはわかりませんが、何らかの方法でその要素を選択できる限り、CSS を使用して表示と非表示を切り替えることができます。たとえば、次のマークアップに基づいています。

<form action="#" method="post">
    <fieldset>
        <label for="dateStart">Start date</label>
        <input type="text" name="dateStart" id="dateStart" />
    </fieldset>
</form>

input次の CSS で表示/非表示を切り替えることができます。

label {
    color: #f90;
    cursor: pointer;
}
label:hover {
    text-decoration: underline;
}
label + input {
    display: inline-block; /* or 'display: none' and omit the following two lines */
    height: 0;
    border-width: 0;
}
label + input:focus {
    height: auto; /* or 'display: inline', and omit the following line */
    border-width: auto;
}

(これは、dateStartクリック後の入力を示しています ( UI の期待との一貫性を保つために、要素labelに似たスタイルになっています)。明らかに、JavaScript がないと、YUI カレンダー ウィジェットは表示できません (JS で追加/使用されるため)。しかし、基本的な日付入力フィールドはそこにあり、アクセス可能です。a

Editedinput 、次のテスト (Chromium 17/Ubuntu 11.04 を使用) (localhost での以前の成功したテストにもかかわらず) は、ページに表示されるまで受信できないことを示唆していましたが:focus、次の修正された CSS はその問題を解決するようです:

label + input {
    display: none;
}
label:hover + input, /* <- added this selector */
label + input:focus {
    display: inline-block;
}​

JS フィドルのデモ。

于 2012-03-27T12:08:20.273 に答える
1

Yui には domready イベントがあります (onload の少し前に発生します)。

http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_domready

function bootstrap(ev) {
    alert("This is the code to launch on domready");
}

YUI().use(
    "event", 
    function (Y) {
        Y.on("domready", bootstrap);  
    }
);

あなたが探していることをするべきです

于 2012-03-27T12:17:33.890 に答える