Geek asks and answers

Adapt my js code to input

I have this javascript code that creates a slider:

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

Now I want to use this code to enter a checkbox. the problem is that the code creates a child, which slides in it the parent, using the css position, and the input cannot have a child.

My idea was to use the background position and just shift the input background from left to right using css instead of real positioning.

How can I adapt this script? This is pretty easy, I think, but after several attempts I just gave up, I'm not good enough :).

Thank you for your help,

Christopher

+3
source share
2 answers

, 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; }

, - for = "jim" . , , .

input { display: none; }

, , , , . , : , , , .

, : (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'); }
});

... .

+1

( .data() api), . .offset().left .css('background-position') ( split parseInt , tho), .

0

More articles:


All Articles