一覧画面とかで、表示されているテキストクリックしたら入力フォームが出現して、 サクッと内容変更できたらカッコ良いじゃないですか。
というわけで毎度のメモです。
#posts
- @posts.each do |post|
.title
.value= post.value
= text_field :post, :title, class: :field
.title {
.value {
display: inline;
}
.field {
display: none;
}
}
$('.value').on('click', ->
$(@).hide()
$(@).next('.field').show()
.val($(@).text())
.focus()
)
$('.field').on('blur', ->
# $.ajax
# hogehoge
$(@).hide()
$(@).prev('.value').show()
# 直感的にはEnterで確定したいので作ったる
$('.label_field').keypress (e) ->
if e.which == 13
e.target.blur()
単純なテキストの切り替えだったらこんな感じ。
#toggle_me
#showing.toggle_pair Toggle Me!!
#hidden.toggle_pair Toggled!!
:scss
#hidden {
display: none;
}
$('#toggle_me').on 'click', ->
$(@).children('.toggle_pair').toggle()