Rails 3.1 - Нужно показать JS-всплывающее окно с содержимым поля - это легко сделать?

Question

У меня ограничено место на экране для отображаемой таблицы, поэтому я показываю усеченное представление поля описания:

<td><%= simple_format car.description.truncate(200, :separator => ' ') %></td>

Мне нужно событие мыши или щелчка, чтобы создать простое всплывающее окно («предупреждение», «подсказка», «диалог» и т. Д.), Отображающее полное содержимое поля car.description.

Я - признанный новобранец JS. Все учебники / информация по JS-Rails, которые я вижу, сфокусированы на ненавязчивом JS, касающемся, в основном, взаимодействия AJAX / удаленного сервера. Я не вижу ничего, что помогло бы понять, как вы можете использовать данные из вашего Rails-приложения в богатых функциях пользовательского интерфейса JS в своих представлениях. Я видел драгоценный камень всплывающей подсказки, но с этим драгоценным камнем содержание подсказок статически генерируется, и подсказки хранятся в отдельной таблице. Он не позволяет генерировать всплывающую подсказку на основе поля, извлеченного из базы данных.

Есть ли какой-нибудь очень простой способ заставить JS всплывать в тексте в поле Rails?

Answer 1

Я создал проект фиктивных рельсов @ https://github.com/rahul/SO_9347471. Я использовал модальную библиотеку, предоставленную загрузчиком Twitter @ http://twitter.github.com/bootstrap/index.html.

Загрузите этот проект и

1. комплектация
2. rake db: migrate
3. rake db: seed
4. сервер рельсов
5. Хит localhost: 3000 в вашем браузере

Я создал модальный div для каждого автомобиля, и когда загружается библиотека javascript начальной загрузки, он преобразует все такие div в модальные загрузки (и скрывает их, ожидая, пока пользователь нажмет на усеченный текст)

====================================

Взгляните

http://jqueryui.com/demos/dialog/

, а затем

http://twitter.github.com/bootstrap/javascript.html#modals

Они содержат легкую в использовании документацию, которая поможет вам начать работу. Дайте мне знать, если вам нужно больше разъяснений.

Answer 2

Я думал, что выложу свое окончательное решение.Мне удалось решить это с использованием строго HTML и CSS - JS не требуется.Всякий раз, когда курсор перемещается по усеченному описанию, всплывающее окно сразу же появляется, а затем исчезает при удалении мыши.

Вот HTML-код, который я использовал:

<a href="#" class="tt"><%=  @car.description.truncate(90, :separator => ' ') %>
    <span class="overlay"><%=  simple_format @car.description %></span>
</a>

Затем я добавил следующий CSS:

/*  *****************  tool tips  ********************/
a.tt p {
    position:relative;
    z-index:24;
    color: #0066CC;
    text-decoration:none;
}
a.tt span{ display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    z-index:25;
    top:0px; left:0;
    padding: 15px 0 0 0;
    color: #993300;
    text-align: center;
    filter: alpha(opacity:90);
    KHTMLOpacity: 0.90;
    MozOpacity: 0.90;
    opacity: 0.90;
}
a.tt:hover span.overlay{ /* different middle bg for stretch */
    display: block;
    position:absolute;
        z-index:27;
    padding: 0 8px; 
    background: #E4EBF0;
    width: 250px;
}