3

(jEditable を使用して) インライン編集を行うフォームを作成しようとしていますが、CSS に苦労しています。適度に使いやすいようにしたいのですが、クリーンアップしようとしている領域が 2 つあります。

  1. 「編集可能」なスパン/テキストをどのようにスタイルして、実際に編集可能であることがユーザーに明らかになるようにしますか?

  2. スパン/テキストから入力要素への移行を合理的な方法で行うにはどうすればよいですか (どの CSS スタイルを使用しますか)?

ありがとう

4

2 に答える 2

3

これは純粋な css の問題かもしれないと思いましたが、jeditable を使用しているようです。CSSの観点から対処できる場合、これが私がすることです。

領域を編集可能として表示するには、点線を付け、ホバリング時に境界線を点線から挿入に変更し、背景をわずかに灰色にします。

// normal state
.editable{
  border:2px dotted #CCC;
}

// hovered state
.editable:hover{
  border:2px inset #f5f5f5;
}

クリックすると、境界線を濃い色に変更し、背景を黄色にします。

// while editing
textarea{
    border:1px solid #333;
    background:#FFFFEB;
 }

これが例です。これが少なくともスタイリングの観点から役立つことを願っています。純粋に私の意見です。

（編集：ところで、（デモで）クリックしたときにスパンをハックしてテキストエリアに変更する必要がありました。私のjqueryを判断しないでください！）

于 2010-12-16T08:05:52.113 に答える
1

編集可能なフィールドの DOM 操作は不適切なスタイルです。ブラウザにすべてのページの再計算を強制します。

ユーザーが編集可能フィールドを操作したときに、そのフィールドの動作を変更するようブラウザに指示する標準的な方法があります。アウトラインCSS プロパティです。アウトラインは、ボックスやその他のボックスの位置やサイズには影響しません。したがって、アウトラインを表示または非表示にしても、リフローやオーバーフローは発生しません。

では、ユーザーが編集可能なフィールドを表示するためだけに CSS を使用するほうがよいのはなぜでしょうか?

  1. ユーザーは、フィールドの外観にすでに慣れています。彼らは、奇妙な形の振る舞いとの戦いで深刻な困難に直面するでしょう.
  2. テキスト編集には標準の html 要素があります。なぜ新しいものを発明する必要があるのですか？そんなに重要ですか？
  3. 最新のブラウザは、フィールドの外観を独自に変更できます。また、システム要素、色などを使用できます。

そのため、フィールドが編集可能であることをユーザーに表示しようとする場合は、標準にしてください。

とにかく、サイトのデザインに対応するようにフィールドの外観を変更する独自の追加ルールを追加できます。たとえば、:hover および :focus 疑似状態で Outline プロパティを使用し、デフォルトの背景を変更しました。

複製します (CSS のみ):

.editor
{
    width: 80%;
    height: 100px;
}
.editor:hover
{
    outline: 1px solid #ffd700; 
}
.editor:focus
{
    outline: 1px solid #ffffe0; 
    background: #ffffe0;
}
于 2010-12-16T11:58:34.357 に答える