1

私は現在、MooTools 用の編集スクリプトを書いていますが、JavaScript を使用せずに一部の機能を維持しながら適切に機能を低下させるにはどうすればよいか、少し困惑しています。プログレッシブエンハンスメントを何らかの方法で使用したいと思います。私はコードを探しているわけではありませんが、状況にどのようにアプローチするかについての概念です。適切に劣化するインプレース編集スクリプトのアイデアや知っている場合は、共有してください。

4

6 に答える 6

10

間違った方向からアプローチしているように思えます。その場で編集を作成して適切に劣化させるのではなく (Graceful Degradation 角度)、実際には編集用の非 Javascript バージョンを作成し、ページの読み込み後に Javascript を使用してその場で編集を追加する必要があります。プログレッシブエンハンスメントとして。

これには 2 つのオプションがあります。Javascriptなしで機能する送信ボタンを備えたフォームとして表示を作成し、Javascriptを使用して、入力をその場で編集を実行する何らかの種類のラベルに置き換えます。ラベルと id 属性の組み合わせを使用して、編集インプレースの実装が機能する正しいプロパティを選択できる必要があります。デフォルトでフォームを表示したくない場合のもう1つのオプションは、サーバー側の処理を使用してフォームに変換するためのボタン/リンクを使用して値を表示し、それに編集を追加することです。

于 2008-09-30T14:05:41.647 に答える
4

JavaScript がないと、その場で編集を行うことはまったくできないため、JavaScript が利用できない場合でも、ユーザーが問題の項目を編集できるようにすることで、適切な劣化が行われます。

そのため、問題のアイテム全体を編集するためのリンクを用意し、ページの読み込み時に JavaScript でインプレース編集コントロールを作成し、ユーザーがインプレース編集を使用したくない場合は編集リンクを非表示にします。可能な場合。

于 2008-09-30T13:50:54.723 に答える
0

テキストコンテンツの場合、編集可能なコンテンツを入力タイプの送信ボタンとして表示し、キャプションとしてコンテンツを表示できます。クリックすると、フォーム全体が送信され、他の値は保持され、編集ダイアログが表示されます。その後、フォームの値を復元できます。

于 2008-09-30T13:57:40.307 に答える
0

おそらく、その場で編集する各要素の下の div に入力を配置します。ページが読み込まれたら、JavaScript を使用してこれらの div を非表示にします。そうすれば、JavaScript が起動しない場合にのみ使用できます。

于 2008-09-30T13:59:00.570 に答える
0

あなたがやろうとしていることは、次のシナリオのようなものだと思います。

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

<a> は、編集できるように <span> を <input> に置き換えるボタンです。これを正常に低下させる (つまり、javascript なしで動作させる) 方法がいくつかあります。

理論的には：

CSS を使用して、疑似セレクターでそれを行います。:active は onclick イベントに似ているため、非表示の <input> を <li> にネストすると、この CSS は <span> を非表示にし、li がクリックされたときに <input> を表示します。

li:アクティブ #編集可能 {
    表示:なし;
}
li:アクティブな入力{
    表示ブロック;
}

これはお気に入りのブラウザーで動作する可能性がありますが、IE では機能しないことに間違いなく気付くでしょう。

実際には：

リンクを使用します。その <a> を、この入力/スパンの置換がサーバー側で行われたページに移動する実際のリンクにします。次のように、MooTools を使用して JS を持つ人々のクリック イベントをキャンセルするイベント ハンドラーを <a> に貼り付けます。 

関数 make_editable(evt) {
    var evt = 新しいイベント(evt);
    evt.preventDefault();
}
于 2008-09-30T14:15:35.817 に答える
0

スタイル付きの入力テキストを使用してみてください。ページが読み込まれた後、readonly 属性を使用して読み取り専用にします。それをクリックすると、読み取り専用属性が削除され、onblur が再び読み取り専用になります。「保存」ボタンまたは onblur イベントをクリックすると、データをサーバーに保存するための Ajax リクエストが作成されます。

于 2008-10-01T18:16:55.667 に答える