about 11 years ago
太常講了。乾脆寫成一篇...。主要是對 btn-danger 濃濃的不滿...=_=
Delete - Bad Pattern （Don't do it)
在 List 裡面列出 Delete Link
(這些 Example 只會讓使用者看到就想按一下而已）
在 List 裡面列出 Delete Button 並上色
(這根本提醒使用者趕快去按一下）
在 Show 裡面列出 Delete Button 放在「Edit Button 的旁邊」並上色
(太容易手滑按一下）
在文章列出「刪除 / 取消」行為並上色
(我好有衝動按一下）
Delete - Good Pattern
還是想放 List 裡面的話，用 Dropdown Menu 去作
把 Delete Button 搬到 Show / Edit 去作
(在 Show )
丟到「很難被順手按到」的角落，並以淺灰淺紅「字」的方式表示
（淺灰表示這不是常用 function，不希望你常按。刷淺紅表示這是重要危險功能）
<%= ibutton('Delete This Post', edit_post_path(@post), :class=>"btn btn-small", :iclass => "icon icon-trash", :style => "font-weight: bold;background-color: #efefef; border-color: #e1e1e1; color:#cb7f7f;") %>
(在 Edit )
其實還是儘量把 Delete 搬到 Edit 去作。在 Show 不是個好選擇..。放到右上角以淺灰淺紅「字」的方式表示
Form Cancel - Bad Pattern （Don't do it)
From Cancel - Good Pattern
<div class="form-actions">
<%= f.submit "Submit", :disable_with => 'Submiting...', :class => "btn btn-primary pull-left" %>
<div style="margin-left: 10px;margin-top:7px" class="pull-left"> or <%= link_to("Cancel", "#", :style => "text-decoration:underline;") %></div>
</div>
Modal Cancel - Bad Pattern （Don't do it)
(很容易順手按到）
Modal Cancel - Good Pattern
<div class="modal-footer">
<a href="#cancel" class="btn btn-link muted pull-left" data-dismiss="modal">
<span class="muted">Cancel</span>
</a>
<%= f.submit "Submit", :class => "btn btn-primary", :id => "submit_data" %>
</div>