問題タブ [progressive-enhancement]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
944 参照

jquery - JQuery で Html.Action を防止する

クイック質問、私はこれを私の見解で持っています

そしてコントローラーは単純です

次に、GetProducts ビューは各製品を foreach ループでレンダリングします。

JS が有効で、JQuery を使用してサービスを非同期に呼び出す場合に、これが発生するのを防ぎたいと思います。何かのようなもの

これどうやってするの?

0 投票する
1 に答える
494 参照

javascript - Django で Ajax を使用してメタ リクエストを処理する

調査を試みましたが、Ajax を使用して Django で META リクエストを処理する方法が見つかりませんでした。毎回ページを更新すると、UX が破壊されます。したがって、コードが次のような場合:

テンプレート

ビュー.py

したがって、テンプレートはオブジェクトの ID を送信し、ビューでは、これが発生するたびに like を 1 ずつ増やします。ここでの問題は、Ajax を使用しないと、発生するたびにページがリロードされることです。私はバックエンド開発者なので、jQuery と Ajax の経験がほとんどないため、この問題にアプローチする方法がわかりません。

どんな助けでも大歓迎です。ありがとう :)

0 投票する
3 に答える
2843 参照

ajax - Modernizrを使用してブラウザのAJAXサポートをテストするにはどうすればよいですか?

プログレッシブエンハンスメントの大ファンとして、私はブラウザの機能をテストするためにModernizrを使用しています。Modernizrを使用してブラウザーのAJAX(具体的には、jQueryのAJAX関数)のサポートをテストするにはどうすればよいですか?

0 投票する
3 に答える
6641 参照

html -
タグの内側にスペースを使用する必要があります

または見出し?

<br>見出し(例)内でタグを使用しておりh1、プログレッシブエンハンスメントを備えたレスポンシブデザインの一部として(これは例外ですか?)—狭いビューポートでタグを非表示にします。

当然、CSSルールは次のとおりです。

しかし、HTMLでこれにアプローチする正しい方法は何ですか?

このようにすると、brが非表示になっている場合、「heading」と「with」の間にスペースはありません。

では、次は意味的に正しいのでしょうか?

またはこれはどうですか?

非常につまらない、私は知っていますが、私は聞きたいです。

PSこの場合、br「例の見出し」という言葉は「ブレークライトサー」よりも短いため、絶対に使用する必要があります。液体コンテナを使用すると、望ましくない場所でブレークが強制されます。

また、Davidが指摘したように、例2と例3はどちらも機能しますが、意味的には正しいのでしょうか。HTMLタグの周りのスペースはセマンティックであり、無視されますが(これにより、マークアップが読みやすくなります)...しかし、要素タグ内のスペースはどうでしょうか。彼らはそこにいるべきですか?

0 投票する
1 に答える
1410 参照

javascript - anglejsを使用してHTMLリストをプログレッシブエンハンスする方法は?

JSを無効にして相談できるアクセシブルなサイトを持っているとしましょう。

私はこのように要約できるニュースリストを持っています:

ページをリロードするたびに、最新のニュースが追加され、10を超えるニュースを取得した場合、古いニュースは破棄されます。

ここで、Angulard JSを使用した場合、データをモデルに配置し、ng-repeatを実行して、静的HTMLを削除する必要があります。リストは動的に入力されるため、JSを使用しているユーザーには、ほぼリアルタイムで更新されたリストが表示されます。

私が必要としているのは、2つを一緒に機能させることです。静的リストが必要です。JSがアクティブ化されている場合は、現在の要素をモデルに挿入し、angularjsで管理する必要があります。

今それをする私の現在の方法は次のとおりです:

  • モデルが初期化されたら、リストDOMを分割し、データを手動で抽出して、すべての子リストを削除します
  • リストにAngularテンプレートコードを挿入します
  • Angularに魔法をかけてもらいましょう

Angularの宣言型の良さを失うので、それはひどいです。さらに、ボイラーコードがたくさんあるので、一般的ではないので、ページ内のすべてのウィジェットに対して書き直します。

0 投票する
1 に答える
147 参照

css - div 内のプログレッシブ エンハンスメント

メディアタグが機能する方法と同様に、div のサイズに基づいてコンテンツを非表示/表示する div をターゲットにする方法を誰もが知っています。

メディアタグを使用して、次のようにターゲットにすることができます:

画面全体ではなくdivをターゲットにする方法はありますか??

0 投票する
0 に答える
359 参照

c# - .NET MVC - 要素を単純に非表示/表示する方法は?

私はこれを完全に間違って見ている可能性があり、通常は jQuery でこれを行うだけですが、Progressive Enhancement のトピックがこれを引き起こしました。

私が持っている瞬間:

そして、moveNext (Knockout.js) は、この機能を表示/非表示にします。

ただし、プログレスエンハンスメントでは、これは不可能です。だから私は、それを ActionLink として貼り付け、これを介してセクションを非表示/表示すると考えました (私は Web フォームから移動したばかりです)。明らかに、ActionLink には独自の View/PartialView が必要です。これは MVC 経由でも可能ですか?

文字通り、要素を非表示/表示する分離コードだけが必要です。

0 投票する
1 に答える
735 参照

python - より優れた制御のために散在するモバイル検出を備えたレスポンシブウェブデザイン

モバイルファーストのレスポンシブデザインプロセスを念頭に置いて、最初のWebサイトの構築を完了しました。このサイトはモバイルデバイスで見た目も機能も優れていますが、デスクトップエクスペリエンスはかなり不足しています。モバイルエクスペリエンスを損なうことなくデスクトップエクスペリエンスを向上させる良い方法はありません。それでも、純粋なクライアント側のアプローチでは実行できないことがいくつかあります。

2つの別々のWebサイト(モバイル、デスクトップ)を管理する必要はありません。私がやりたいのは、モバイル検出サーバー側で、より多くのデータをロード/表示するタイミングなどをより細かく制御できるようにすることです。

私は次のようなことをしたい:

驚いたことに、私はこの方法で物事を行うことについてのオンラインディスカッションをあまり見ていません。私が読んだほとんどの記事は、純粋な(モバイルファーストの)レスポンシブデザインまたは別のモバイルWebサイトを推奨していますが、これはまともなアイデアのようです。これを行うことの欠点はありますか?

0 投票する
3 に答える
1029 参照

javascript - Django と Backbone によるプログレッシブ エンハンスメント - 2 つを統合する方法は?

ユーザーがフォームを送信し、国、期間、価格に基づいてフィルター処理された休日のリストを表示できる非常に単純な Django アプリがあります。

フロントエンドでバックボーンを使用して、JS が有効になっているユーザーが結果を表示するために GET する必要がなく、結果を動的にロードできるようにしたいと考えています。

プログレッシブ エンハンスメントを使用して、JS を使用するユーザーが Backbone エクスペリエンスを取得し、JS を使用しないユーザーが引き続きフォームを使用できるようにしたいと考えています。私もDRY 原則に従いたいと思っています。

私の質問は、これを行う最善の方法です。最小限の繰り返しで2つを一緒に使用する例はありますか? 私は特に次のことを考えています:

  1. URL のルーティング-国/期間/価格パラメーターを取得するために、/italy/1-week/from-500-to-1000/Django のルーターとバックボーンのルーターに 1 つずつ、2 セットのルーティング コードを記述する必要がありますか?urls.py
  2. パラメータに基づくデータのフィルタリングviews.py-バックボーンとバックボーンの 2 つの別々の方法でこれを行う必要がありますか? (少なくとも、両方の呼び出しに 1 つの API を使用できると思います。)
  3. テンプレートでのレンダリング- Django 用に 1 つのリスト テンプレートを作成し、Backbone 用に別のリスト テンプレートを作成する必要がありますか? それとも両方で同じテンプレートを使用できますか?

Backbone を Django に統合するためにこれまでに見つけた最良の (唯一の) 例は、Josh Bohde のDjango Backbone repoであり、これは段階的に強化されていません。

Backbone と Rails を使用したプログレッシブ エンハンスメントに関するこのブログ投稿も見つけましたが、Django で同様のものを見ると非常に役立ちます。

更新:同様のトピックでこのSOの質問を見つけました-答えが聞こえるほど状況は本当に絶望的ですか?

0 投票する
1 に答える
886 参照

google-maps - モバイルでは静的な Google マップを提供するが、デスクトップでは動的にするにはどうすればよいですか?

より広いビューポートでGoogle の静的マップを非表示にし、代わりに動的なGoogle JavaScript マップを表示するには、どのようなアプローチがありますか?

モバイル ファーストの Web サイトを構築することは一般的であり、より大きなビューポート用の CSS メディア クエリによって強化されます。

マップに関して言えば、モバイル UX (スマートフォンも同様)には静的マップの方が優れていることはほぼ間違いありません。しかし、Web サイトの目的によっては、より大きなビューポート (コンピューター ディスプレイやタブレットでさえも) の場合、インタラクティブ/ダイナミック マップの方がユーザーに適していると判断する場合があります。

この 2 つを組み合わせる最適なアプローチを選択するには、どのような基準を使用することが重要ですか? 何に注意する必要がありますか?



決定的な答えを見つけることはできませんでしたが、これまでの私の研究は次のとおりです。


2010 年にある著者は、フォールバック オプションが JavaScipt API に組み込まれていることを提案しました。

ここでの基本的な前提は、API が map_canvasコンテナーのコンテンツをマップ表示に置き換えることです。では、そのコンテナーにフォールバック コンテンツを追加してみませんか?

div彼のコードを変更すると、JS 対応の Google マップになる画像を に挿入できます。この場合、画像は Static Maps V2 のものです。

ただし、これはスマートフォンで JavaScript マップを無効にするものではなく、JS を使用しないデバイスにフォールバックを提供するだけです。


別の著者(同じく 2010 年) も、jQuery の 1 行を使用してその画像を非表示にすることを提案しています。V3 の更新コードは次のようになります。

しかし、それは、ビューポートが狭いデバイス (スマートフォン) で Google の JS マップを無効にすることにもなりません。


これらのガイドはどちらも 2010 年のものです — おそらく Google マップの V2 を使用しているのでしょうか? (私は2009年に巧妙な正規表現を使用した別の著者のガイドに出くわしましたが、彼はまだ「物事を行う新しい方法[V3]」に更新していません。)