适应我的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代码的输入

回答

相关问题