JavaScriptを無効にしてUIを「優雅に」するにはどうすればよいですか？

Question

ユーザーがJavaScriptを無効にしている場合、理想的にはページが「優雅に劣化する」ようにするため、複数の投稿を読みました。一般的に、これを実現するためにどんな種類のことをすべきかはわかりません。

「スケジュール」を構成するためのHTMLの塊があります。選択ボックスの値に応じて、異なるフィールドが表示されます。

<select name="schedule.frequency"
    id="schedule.frequency" 
    onChange='updateScheduleFields()' >
        <option value="Manual">Run Manually</option>
        <option value="Monthly">Monthly</option>
        <option value="Weekly">Weekly</option>
        <option value="Daily">Daily</option>
        <option value="Hourly">Hourly</option>
</select>

選択が更新されると、「曜日」や「月の日」などが不適切なときに表示されないように、表示されるフィールドを非表示にします。 JavaScriptなしでこれを優雅に劣化させる方法は本当にわかりません。述べたように、一部のフィールドはさまざまなスケジュールタイプに完全に不適切です。

私の質問は次のとおりです。 一般に、不適切なフィールドを無効/隠すものを作成するにはどうすればよいですか、またはJavaScriptなしでいくつかの前/後処理が適切に低下しますか？

また、このタイプの劣化をよく扱うことができる特定のサイトにも興味がありますか？

Answer 1

基本的なアイデアは、何かをする標準的な（非JS）方法があり、そのデフォルトの動作をオーバーライドするためにJavaScriptを追加するということです。

あなたの場合、あなたはaを持っています select, 、したがって、JS以外の動作は、オプションを選択すると、異なるフィールドが表示されている新しいバージョンのページをロードするフォームを送信するということです。

JavaScript（有効にする場合）は、送信ボタンを非表示にし、更新をインプレースします。

それについての好ましい考え方はです プログレッシブエンハンスメント, 、そしてそのように達成する方がはるかに簡単です。ページをBarebones HTMLとして機能させ、CSSとJavaScriptで徐々に強化します。それから、それが優雅に劣化するなら、あなたは決して解決する必要はありません。

JavaScriptとCSSがインラインではなく個別のファイルにある場合、プログレッシブエンハンスメントを実行する方が簡単です。 jQuery*のようなAjaxライブラリを使用すると、CSSセレクターを備えた要素を選択して、これらの要素に動作を追加できます。あなたの場合、あなたはするでしょう $('#schedule_frequency').change(updateScheduleFields) （私はあなたがあなたのIDに期間を持つべきではないと思います）。

*免責事項：ライブラリなしでJavaScriptでHTML要素を選択することができ、jQuery以外のAjaxライブラリが存在する可能性があります。

Answer 2

サイトが優雅に劣化することを考えるとき、JavaScriptなしでサイトをどのように使用するかを考えてください。次に、JavaScriptとOnload/Ready Hookを使用して、サイトの要素をJavaScriptで元々望んでいたものに変更します。これにより、JavaScriptが無効になっている場合、サイトは機能します。有効になっている場合、セットアップJavaScriptがページを実行して変換します。

通常、これは、セットアップJavaScriptが隠れているかどうかなどの追加の「送信」ボタンを持つことを意味します。

Answer 3

この場合に私がすることは、選択をサーバーに投稿するドロップダウンリストの下に「次の」ボタンを持っていることです。その後、フィールドを表示/非表示にするには、サーバー側のロジックが必要になります。私は通常、最初にこのように動作させてから、戻ってJavaScriptのフレアを追加してボタンを隠し、往復を防ぎます。

Answer 4

簡単な答えは、あなたがそのようなことをしていないということだと思います。レンダリングされたページへの実行時間の変更は、JavaScriptを介して達成されます - それが無効になった場合、そのような効果を使用することはできません。

さらに、JavaScriptなしで事前処理を行うことはありません。バックエンドでチェック /テストを実装する必要があります。