2

複数のフィールドを同時にインライン編集するための JavaScript ライブラリまたはサンプル コードを推奨できる人はいますか? Flickr に似たものを探しています。写真の名前または説明のいずれかをクリックすると、両方がテキスト ボックスに変わり、ユーザーが [保存] をクリックすると両方が保存されます。

私は jQuery を使用しているので、jQuery プラグインは便利ですが、必須ではありません。私はすでにhttps://stackoverflow.com/questions/708801/whats-the-best-edit-in-place-plugin-for-jqueryを見てきましたが、複数のフィールドをサポートするものは見つかりませんでした。

4

2 に答える 2

4

プラグインを使用しないことを選択できます。あなたは次のようなものを持つことができます：HTML：

<form>
  <table>
    <tr>
      <td>
        <span name="displayText">Text to edit1</span>
        <input type="text" name="editText" value="Text to edit1" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <span name="displayText">Text to edit2</span>
        <input type="text" name="editText" value="Text to edit2" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="save" value="Save">
      </td>
    </tr>
  </table>
</form>

次に、同様のjQueryを$（document）.ready（）に記述できます。

$('span[name=displayText]').click(function() {
  $(this).hide();
  $('input[name=editText]', $(this).closest('td')).show();
});

もちろん、好きなだけスタイルを設定できます。

（PSコードはテストされ、機能しています！）

于 2011-05-04T03:42:50.830 に答える
0

ジョセフ・スコットによるエディターはかなりうまく機能します。すべてがテンプレートと CSS クラスで行われるため、かなりカスタマイズ可能です。ここでデモを参照してください。(彼はこれを FLickr に倣ってモデル化しました。)

Another In-Place Editorも有望に見えますが、私自身は試していません。

于 2011-05-04T02:58:37.730 に答える