インプレース編集を分解可能にする方法に関するアイデアはありますか？

StackOverflow https://stackoverflow.com/questions/153061

質問

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

役に立ちましたか？

解決

間違った方向からこれに近づいているようです。インプレース編集を作成して適切に劣化させる（グレースフルデグラデーションアングル）のではなく、編集用に非JavaScriptバージョンを作成し、ページの読み込み後にJavascriptを使用してインプレース編集を追加する必要があります。 Progressive Enhancement として。

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

他のヒント

JavaScriptなしではインプレース編集がまったくできないため、JavaScriptが利用できない場合でも、ユーザーが問題のアイテムを引き続き編集できるようにすることで、適切に機能を低下させることができます。

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

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

インプレース編集のある各要素の下のdivに入力を配置することもできます。ページが読み込まれたら、javascriptを使用してこれらのdivを非表示にします。そうすれば、JavaScriptが実行されない場合にのみ使用可能になります。

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

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

<！> lt; a <！> gt; <！> lt; span <！> gt;を置き換えるボタンです。 <！> lt; input <！> gt;を使用して、編集できるようにします。これを適切に低下させるには、いくつかの方法があります（つまり、javascriptなしで動作します）。

理論上：

CSSを使用して、psuedo-selectorsで実行します。 ：activeはonclickイベントに似ているため、非表示の<！> lt; input <！> gt;をネストすると、 <！> lt; li <！> gt;では、このCSSは<！> lt; span <！> gt;を非表示にします。 <！> lt; input <！> gt; liがクリックされたとき。

li:active #editable {
    display:none;
}
li:active input{
    display:block;
}

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

実際には：

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

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top