Реализация функциональности вида OnClick и форматирование в Rails Partial-Views - PullRequest
0 голосов
/ 08 апреля 2011

Я пытаюсь реализовать функциональность, аналогичную методу onclick в Javascript, с помощью Rails Helpers.

Я реализовал функцию автозаполнения для нескольких полей в Rails 2.0.2 и Ruby 1.8.7,Эта конфигурация запускается в Ubuntu 10.04, и да, я знаю ... вы можете почувствовать, почему Rails 2.x, когда у нас есть Rails 3.x, это так из-за конкретных целей проекта.У меня нет особого выбора в этом вопросе .. :).

Я могу успешно получить фотографию профиля группы, название группы и общее количество членов, принадлежащих группе, на основезаданный «заголовок» в качестве основного поискового запроса, который пользователь вводит в текстовое поле, в котором выполняется функция автозаполнения.Заставить функционал автозаполнения работать по описанному выше сценарию само по себе было непростой задачей.

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

Вы также можете лучше понять, что я реализовал, обратившись к http://imagepaste.nullnetwork.net/viewimage.php?id=2048, http://imagepaste.nullnetwork.net/viewimage.php?id=2050 и http://imagepaste.nullnetwork.net/viewimage.php?id=2049.

Обратите внимание, что имя фотографии профиля конкретной группы совпадает с названием заголовка группы, за исключением того, что к фотографии также добавлен .jpg.

IЯ использую настроенный метод автозаполнения, плагин автозаполнения, а также использую партиалы Rails.Метод cusotmized auto complete позволяет мне изменять базовую функциональность в соответствии с моими требованиями.

Переходя к моему вопросу, теперь скажите, если пользователь вводит «I» в текстовое поле согласно функции автозаполнения, которую яреализовали, результаты (для более чем одного найденного совпадения (то есть, если существует более одной группы, начинающейся с «I») по конкретному поисковому запросу), заполненной в пользовательском интерфейсе, будут иметь все следующее: -

  • Картинки профиля группы, начинающиеся с имени, совпадающего с названием, в данном случае «I%». Jpg
  • Имя заголовка группы.
  • Общее количество членов, принадлежащихгруппа

Скажем, у меня в качестве имен групп указаны Индия и Независимость. Я получу следующие результаты, отображаемые в текстовом поле моего автозаполнения.

India.jpg(image will be displayed)     India(Group title name displayed)               3(dummy value here)

и аналогично

Independence.jpg                     Independence
4

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

Если вы не можете понять, как будет выглядеть пользовательский интерфейс, пожалуйста, зарегистрируйтесь на сайте www.diasp.org и выполните поиск любого случайного пользователя с помощью функции поиска, как только ваша учетная запись будет создана.

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

Код для партиала, который отображает все это: -

<ul>
  <% for inv_group in @investor_group2 %>
  <%=image_tag "investor_groups/#{inv_group.title}.jpg" , :width =>

'40 ',: height => '22',: align =>' left '%>

<% = h inv_group.title%> (<% = h inv_group.activation_members.size%>) <% end%>

Теперь, если пользователь наводит указатель мыши на Индию, а затем нажимает на нее, текстовое поле заполняется **India(3)**.

. Мне нужно реализовать при щелчке в Rails *.1056 *, который выберет только название группы .Я попытался реализовать заголовок группы и размер группы с отдельными тегами <li>, затем я смог навести курсор мыши и выбрать только заголовок и заполнить его для текстового поля.

Проблема с этим подходом заключается в том, чтополностью портит форматирование и промежутки / пробелы между изображением, заголовком и размером группы.Это требует форматирования, чтобы улучшить внешний вид интерфейса.

Если я смогу выяснить, как уменьшить пространство форматирования между каждым из трех title.jpg, заголовком и размером группы.Эту опцию можно рассматривать как альтернативное исправление, но не самое лучшее исправление.

Я не слишком уверен, как мне поступить так же (предложенное исправление), как я новичок по многим вещам в RoR.Я не очень уверен в том, какие команды RoR я могу использовать, и которые помогут мне упростить / решить мою задачу.Не могли бы вы помочь мне в этом.

Буду также признателен за любые предложения по более эффективному исправлению этого сценария.

Позже я каким-то образом смог выяснить, чтос помощью события onclick в javascript я мог решить свою проблему.Я не слишком уверен в эквивалентном синтаксисе для того же самого с помощью Rails Helpers. Я обратился к http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-javascript_tag, чтобы понять, как javascript_tag может быть использован для моей цели, но если это выход, яЯ действительно не знаю, как изменить базовый синтаксис в соответствии с моими требованиями.Пожалуйста, помогите мне с тем же, если это возможно.

Спасибо ..

Ответы [ 2 ]

1 голос
/ 12 апреля 2011

Ajax.Autocompleter Script.aculo.us имеет простую функцию для такого рода вещей. Любой элемент, который вы хотите исключить из автоматически заполняемых результатов, просто должен быть заключен в тег span.informal. Таким образом, ваши результаты будут выглядеть так:

<li>
    <span class="informal">[img tag]</span>
    India
    <span class="informal">whatever else</span>
</li>

Если щелкнуть этот результат в списке подсказок автозаполнения, в текстовое поле будет введено только слово Индия.

0 голосов
/ 13 апреля 2011

Добавить к предложению Уолтера из http://www.ruby -forum.com / topic / 1475454? Reply_to = 992312 .

Этот код ниже сделал волшебство для меня ...

<ul>
  <%= javascript_include_tag :defaults, :cache => true %>
  <%=stylesheet_link_tag "groups"%>
  <% for inv_group in @investor_group2 %>

   <li><div class="autocomp_field_width_modify" ><%=image_tag "investor_groups/#{inv_group.title}.jpg" , :width => '40', :height => '22', :align => 'left' %><%=h inv_group.title%><span class="informal">(<%=h inv_group.activated_members.size %>)</span></div></li>

  <%end%>
</ul>

и в мои groups.css я добавил следующее: -

.autocomp_field_width_modify
{
      text-align: justify;
      text-indent: 3%;
}

Спасибо за ваше предложение Уолтер, я знаю, что, возможно, я не совсем соблюдаю стандарты HTML-разметки (у меня еще есть много возможностей, чтобы усилить мои концепции в HTML ..). Но я просто счастлив, что, наконец, это работает на основе требования.

Еще раз спасибо .. Уолтер ..

...