Хороший CSS для вспышек (также как информационные сообщения в Rails, рычит в OSX)

Мне сложно заставить CSS работать, как будто я хочу, чтобы он показывался на вспышки (те небольшие сообщения, которые показываются при входе в систему или что-то делать или что-то еще, чтобы подтвердить действие, например, в Rails).

Я хочу, чтобы он:

  • жить в любом произвольном div
  • выглядят как центрированные поля с текстом в нем
  • быть настолько большим, насколько это необходимо, чтобы соответствовать тексту (если оно меньше заданной максимальной ширины) или обернуть текст (если больше)
  • имеют центрированный или выровненный по левому краю (или комбинированный) текст, в зависимости от вспышки (например, короткие ошибки центрированы, более длинные вступительные вхождения новичков выравниваются по левому краю); дополнительный CSS-класс (например, "flash info left" ), чтобы поддерживать это в порядке.
  • хорошо играть с несколькими вспышками на странице рядом друг с другом (как в примере)
  • предпочтительно состоят из одного элемента w/class вокруг текста, а не текста внутри элемента внутри элемента оболочки
  • желательно быть совместимым с YUI CSS и чистым CSS (не JS)
  • работает прямо на IE7 +, FFx 3+, Safari 3+; работа "достаточно хороша" в старых браузерах.

Большая часть CSS, которую я видел для этого, не делает ни одного из них - например. в большинстве случаев указывается фиксированная ширина, что означает, что либо он плохо упакован, либо слишком сильно заполнен.

Как я могу это сделать? (Или: Почему я не могу?)

Здесь мой текущий CSS:

<div class="flash info">
  <span class="close"><a href="AJAX callback">X</a></span>
  Some informational text here that can be closed w/ the X
</div>
<div class="flash error">
  Some other simultaneous error
</div>

.flash {
    text-align: center;
    padding:    .3em .4em;
    margin:     0 auto .5em;
    clear:      both;
    max-width:  46.923em; /* 610/13 */  
    *max-width: 45.750em; /* 610/13.3333 - for IE */
}

.flash.error {
    border: thin solid #8b0000;
    background: #ffc0cb;
}

.flash.notice, .flash.info {
    border: thin solid #ff0;
    background: #ffe;
}

.flash.warning {
    border: thin solid #b8860b;
    background: #ff0;
}

.flash .close {
    float:  right;
}

.flash .close a {
    color:              #f00;
    text-decoration:    none;
}

Бонусные очки: я достиг только того, что хочу только частично с помощью кода подсказки ниже; а именно, он не способен обертывать.

По какой-либо причине, если не указано значение nowrap или width, значение по умолчанию имеет очень малую ширину. Я не мог понять, почему, или как сделать его просто обертыванием на определенной, более широкой ширине (например, я хочу произойти с флэш-памятью).

Some text with <span class="tooltip">info <span>i can has info?</span></span> about a word

.tooltip {
  position: relative; /*this is the key*/
    background-color: #ffa;
}

.tooltip:hover{
    background-color: #ff6;
}

.tooltip span {
    display: none
}

.tooltip:hover span { /*the span will display just on :hover state*/
    z-index:        1; 
    display:        block;
    position:       absolute;
    top:            1.6em; 
    left:           0;
    border:         thin solid #ff0;
    background:     #ffe;
    padding:        .3em .6em;
    text-align:     left;
    white-space:    nowrap;
}

Спасибо!

  • Sai

Ответы

Ответ 2

Во-первых, при поиске таких стилей вы должны вызывать эти всплывающие окна "Growls". Это имя Apple использует, и оно использует их довольно агрессивно, так что имя, которое вы должны искать.

Во-вторых, таблица стилей Roar очень доступна, почему вы ее не загружаете и не копируете. Пока всплывающее окно находится в JS, сгенерированный script является чистым html.

mootools, JQ и Ext имеют свои собственные проекты уведомлений Growl.

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

Ответ 3

Это большой вопрос, но я постараюсь разбить его.

Во-первых, в отношении ваших первых трех требований вы, вероятно, застреваете, если у вас нет роскоши диктовать платформу вашего браузера. Чтобы центрировать ящик в произвольном формате DIV в большинстве браузеров, вы должны указать ширину для внутреннего элемента блока. Он должен быть блочным элементом, чтобы вы могли сделать его похожим на поле (раскраска, граница). Вы можете обойтись без ширины в браузерах, поддерживающих display: inline-block. Если бы вы захотели, вы можете попробовать взломать это с помощью некоторого script, задав ширину, исходя из того, как долго будет внутренний текст, до некоторого максимума.

Ваши следующие три требования не согласуются друг с другом. Если вы разрешаете множественные вспышки, некоторые из них центрированы и некоторые выравниваются по левому краю, одно только обоснование требует, чтобы каждая вспышка находилась в пределах своего собственного элемента блока, чтобы вы могли применить стиль выравнивания.

Это не очевидно, но вам нечего прибегать к примерам типов вспышки notice, warning или error. Если вы хотите различать те, которые должны быть центрированы (короткие ошибки), и те, которые должны быть выровнены по левому краю (новички), поместите их во вспышку разными клавишами. Итерируйте через свою вспышку, применяя необходимое имя класса, чтобы получить желаемый стиль для каждой клавиши. Если вы должны поддерживать более одного сообщения об ошибке, то flash[:error] может быть массивом. Я бы написал вспомогательные методы, чтобы облегчить добавление сообщений во флеш, поэтому у вас меньше условного кода в представлениях.

Ответ 4

Alertify.js имеет приятный интерфейс и прост в использовании, вы также можете попробовать его.

http://fabien-d.github.com/alertify.js/