CSS для встроенного редактирования - PullRequest
Новая
       9

CSS для встроенного редактирования

3 голосов
/ 16 декабря 2010

Я пытаюсь сделать форму, которая имеет встроенное редактирование (используя jEditable), и я борюсь с CSS. Я хочу, чтобы он выглядел умеренно удобным, и мне кажется, что есть две области, которые я пытаюсь очистить:

  1. Как оформить диапазон / текст, который является «редактируемым», чтобы пользователю было очевидно, что он действительно редактируемый?

  2. Как сделать разумный переход от span / text к элементу input (какие стили CSS вы бы использовали)?

Спасибо

Ответы [ 2 ]

3 голосов
/ 16 декабря 2010

Я думал, что это может быть чисто проблема 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;
 }

Вот пример , надеюсь, это как минимум поможет с точки зрения стиля. Чисто мое мнение.

(редактировать: кстати, мне пришлось взломать span, чтобы при щелчке перейти в текстовую область (на демоверсии), не судите о моем jquery!)

1 голос
/ 16 декабря 2010

DOM манипуляции с редактируемыми полями - плохой стиль.Вы заставляете браузер пересчитывать всю страницу.

Существует стандартный способ указать браузеру изменить поведение редактируемого поля, когда пользователь взаимодействует с этим полем.Это свойство outline CSS.Контур не влияет на положение или размер блока или любых других блоков.Следовательно, отображение или подавление контуров не вызывает перекомпоновки или переполнения.

Так почему же лучше использовать CSS только для отображения редактируемых пользователем полей?

  1. Пользователи уже привыкли к тому, как поля выглядят,У них будут серьезные трудности в их борьбе со странным поведением формы.
  2. Существуют стандартные элементы HTML для редактирования текста.Почему нужно изобретать что-то новое?Это так важно?
  3. Современные браузеры могут самостоятельно изменять внешний вид поля.Также они могут использовать системные элементы, цвета и т. Д.

Итак, если вы пытаетесь показать пользователю, что это поле доступно для редактирования, просто сделайте его стандартным.

В любом случае вы можете добавить свое собственноедополнительные правила для изменения внешнего вида поля в соответствии с дизайном сайта.Например, я использовал свойство структуры с псевдосостояниями: hover и: focus и изменил фон по умолчанию.

И повторил (только CSS): 

.editor
{
    width: 80%;
    height: 100px;
}
.editor:hover
{
    outline: 1px solid #ffd700; 
}
.editor:focus
{
    outline: 1px solid #ffffe0; 
    background: #ffffe0;
}
...