什麼技術用於顯示這些優雅的可點擊選項？

我創建一個小的形式，其中用戶什麼技術用於顯示這些優雅的可點擊選項？

進入在輸入框中鍵入一些文字
]選擇從一堆關於需要與數據所採取的行動選項
點擊一個提交按鈕

Disconnect做一些事情以更好的方式相似：

enter image description here

您可以點擊任何這裏的五個師的。這很棒，因爲它使用戶更容易執行相同的任務，並簡化choose and click至click。

什麼技術用來顯示這樣的菜單？

來源

2011-05-27 Lazer

這樣做，這是一個很好的方式 - 這並不需要JavaScript的 - 是使用單選按鈕，而且使無形的。可點擊的文本和圖標進入每個單選按鈕的標籤內部，因此您可以單擊標籤或圖標來選擇單選按鈕。

這保證一些重要的事情：

只有可以
選擇傳回與窗體中的一項
瀏覽器的原生形態的處理仍然有效
輔助功能選項仍然工作

您必須小心使標籤明顯可點擊，因爲您失去了單選按鈕可見的視覺提示。

IE6 & 7也需要黑客 - 他們有一個奇怪的行爲，顯示：無或可見性：隱藏單選按鈕或複選框不能通過單擊其標籤來選擇。

下面是一個例子：http://www.spookandpuff.com/examples/clickableToggles.html

（我沒有包括的圖標 - 你可以很容易地通過CSS將它們設置爲背景，爲每個項目（不使用<img>標籤）添加這些

。

編輯呵呵 - 我只是正確地閱讀了這個問題！對不起，你想要的行爲是'選擇'而不是'選擇並提交'...一個簡單的方法是添加一些JavaScript的輸入到讓他們在選擇時自動提交表單我已更新示例以顯示此內容

來源

2011-05-28 00:07:29 Beejamin

這個解決方案唯一的缺點是它需要用戶點擊選項然後提交。但在我看來，這很小，這會造成一個非常漂亮的「JS禁用」版本。 – sdleihssirhc 2011-05-28 00:13:25

此外 - 甚至更輕微 - 谷歌說[[：在非鏈接上懸停]可能導致IE7/8中的性能問題]（http://code.google.com/speed/page-speed/docs/rendering的.html＃UseEfficientCSSSelectors）。但是無所謂。 – sdleihssirhc 2011-05-28 00:15:51

最初的問題是選擇一個選項是第2步，點擊提交就是第3步。當然，當選擇該選項時，您可以自動提交表單，但這可能有點無情（沒有機會改變主意如果你點擊錯誤。 – Beejamin 2011-05-28 00:18:40

看起來像JavaScript：https://github.com/disconnectme/disconnect.me

來源

2011-05-27 21:43:49

什麼技術用於顯示這些優雅的可點擊選項？

回答

相關問題