best_in_place показване на опция от падащото меню

Реших, че това ще бъде обща нужда, но не успях да намеря решение. Следях този ASCIIcast от Райън Бейтс http://railscasts.com/episodes/302-in-place-editing?view=asciicast и вече разполагам с функционално редактиране на място на моя уебсайт. Мисля обаче, че не е интуитивно, че тези записи изобщо могат да се редактират, тъй като те просто се показват като обикновен текстово представяне на текущата стойност на записа, докато не щракнете върху тях. Искам нещо, така че падащото меню за избор да се показва по подразбиране, както би било в нормална форма, както е показано на изображението. Има ли все пак да направите това с помощта на best_in_place или rest_in_place? Бих искал да имам това шоу през цялото време


ruby-on-rails edit-in-place best-in-place
person ohhh    schedule 05.08.2014    source източник
comment
Често срещан проблем с въпросите на SO е, че те очакват читателят да излезе и да гледа видео, преди да погледне въпроса. Като цяло хората не могат да се притесняват да правят това. Освен това е трудно да разберете от тази снимка кой аспект от избраното искате да промените. Искате да кажете, че искате да има две малки стрелки в него, но всъщност да не може да се редактира?   -  person Max Williams    schedule 05.08.2014
comment
Виждам как това може да е разочароващо, но винаги има ASCII каст, който съдържа всички изображения: railscasts.com/episodes/302-in-place-editing?view=asciicast, прав си, че трябваше просто да свържа това. В момента полето за редактиране е просто обикновен текст на екрана с текущата стойност и се превръща в падащо меню само когато щракнете върху него. Искам ВИНАГИ да изглежда като на снимката по-горе. Това има ли повече смисъл?   -  person ohhh    schedule 05.08.2014
comment
Кой плъгин за gem/jquery/каквото и да използвате, за да получите този стил на избрания фокус?   -  person Max Williams    schedule 05.08.2014
comment
OIC, скъпоценният камък на BestInPlace, github.com/bernat/best_in_place   -  person Max Williams    schedule 05.08.2014
comment
Bootstrap 2.3.2 за стилизиране и за действителната js мощност, използвам github.com/bernat/best_in_place   -  person ohhh    schedule 05.08.2014

Отговори (3)


arrow_upward
1
arrow_downward

Знам, че това не е точно отговорът, който търсите, но можете да стилизирате стойностите best_in_place, като използвате класа .best_in_place.

Направих нещо подобно на моя уебсайт, което помага да се покаже, че стойността може да се редактира:

.best_in_place {
    padding-right: 18px;
    background-image: url('*/ link to an edit icon /*');
    background-size: 15px auto;
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.best_in_place:hover {
  background-color:#eeeeee;
}
person NicoFerna    schedule 05.08.2014

arrow_upward
0
arrow_downward

Това, което мисля, че искате да направите, е да намерите стиловете, които се прилагат към състоянието на задържане на елемента, и да ги копирате също в нормалното състояние на елемента.

В инспектора на chrome:

  • Щракнете с десния бутон върху етикета за избор и изберете „Проверка на елемента“
  • Щракнете с десния бутон върху елемента, както се вижда в раздела „Елементи“ и изберете „Принудително състояние на елемента“ и след това „задръжте“

Отдясно на инспектора сега трябва да видите стиловете, които се прилагат към състоянието :hover на елемента. Копирайте ги във вашата таблица със стилове и премахнете частта ":hover" от края на правилото. Може да се наложи да добавите някои допълнителни селектори към правилото, за да сте сигурни, че няма да направите това за всички селекции в целия си сайт.

person Max Williams    schedule 05.08.2014
comment
Принудителното принудително активиране, задържане на мишката, фокусиране, посетено не води до падащо меню. Не знам толкова много javascript, но моето предположение е, че при събитие onclick той променя елемента по някакъв начин в падащо меню. изображение на проблем - person ohhh; 06.08.2014

arrow_upward
0
arrow_downward

Падащото меню е поведението по подразбиране за best_in_place, ако първоначалното въвеждане на формуляр е чрез радио бутони. В противен случай можете да използвате :collection поне за валидиране на новото въвеждане на данни. напр. в haml актуализираният отговор трябва да е червен, зелен или син:

.flex1=best_in_place :color, :type => :select, :collection => (["red","blue","green"])

person dctalbot    schedule 07.07.2017