適應我的js代碼的輸入

我有一個創建一個滑塊這段JavaScript代碼：適應我的js代碼的輸入

http://jsfiddle.net/samccone/ZMkkd/

現在，我想在一個複選框，輸入使用此代碼。問題是代碼創建了一個使用css位置在父級中滑動的子元素，並且輸入不能有子級。

我的想法是使用背景位置，並使用css而不是使用真正的定位從左到右滑動輸入的背景。

我該如何改編這個腳本？我覺得這很容易，但經過幾次嘗試，我放棄了，我不夠好:)。

感謝您的幫助，

克里斯托弗

來源

2011-05-16 cmplieger

也許最好只使用你擁有的東西，不管你需要什麼樣的樣式，並且將隱藏輸入的值賦予開/關狀態？ – mVChr 2011-05-16 18:44:12

最終代碼將分發，所以我希望它是完美的:) 這就是爲什麼我喜歡自定義代碼一些凌亂的「它有效」的代碼。 – cmplieger 2011-05-16 18:45:00

我永遠不會回答一個問題：「任何人都可以爲我編寫這個腳本嗎？」。我會很樂意回答問題，但不會爲你工作！ – 2011-05-16 18:59:57

相信與否，對於複選框，無需JavaScript即可創建開關效果。

如果你按照你的複選框帶有標籤：

<input type="checkbox" id="jim" /> 
<label for="jim"></label>

你會發現，你可以選擇下一個兄弟選擇標籤：

input + label { /* some CSS */ }

這是爲什麼有用嗎？由於使用僞選擇：檢查您現在可以根據複選框的狀態樣式標籤：

input + label { background-position: 0 0; } 
input:checked + label { background-position: 100% 0; }

顯然，由於用於=「吉姆」的屬性，點擊標籤會改變的狀態複選框。所以，如果你隱藏複選框，你最終會得到一個樣式化的，可點擊的標籤。

input { display: none; }

當然，標籤可以有孩子，所以你可以像你想要的娛樂開關一樣花哨。而且，您應該小心地包括：對焦樣式，對於選中複選框而非點擊複選框的用戶。

對於不支持：checked僞類（IE8及以下版本）的瀏覽器，使用全局處理程序和「checked」類很容易模擬。例如：

jQuery(document).bind('change', function(e){ 
    var elem = jQuery(e.target); 

    // If this is not a checkox, do nothing. 
    if (elem.attr('type') !== 'checkbox') { return; } 

    // Add or remove checked class based on current state. 
    if (elem.attr('checked')) { elem.removeClass('checked'); } 
    else { elem.addClass('checked'); } 
});

...應該這樣做。

來源

2011-05-21 02:46:18 stephband

您可能需要存儲對象屬性（或.data() API）的一些數據，但你的後臺位置的想法應該只是罰款。只需將.offset().left的電話替換爲.css('background-position')（您必須將split和parseInt這個字符串返回tho）並將插件保留在其上。

來源

2011-05-16 20:07:52

適應我的js代碼的輸入

回答

相關問題