劃分不作爲背景

我想做拖動框，它改變複選框的狀態，殭屍它不是我想現在要做的成就，我試圖達到我的div不作爲背景拖動圖片。 Div必須不是背景圖片，可以添加背景圖片。劃分不作爲背景

(function($){ 
$.fn.slideCheckbox = function(){ 

    return this.each(function(){ 

     //init, native js for better performance 
     slidesHolder = document.createElement('div'); 
     slidesHolder.setAttribute('class', 'slides_holder'); 
     slides = document.createElement('div'); 
     slides.setAttribute('class', 'slides'); 
     slidesHolder.appendChild(slides); 

     slide_on = document.createElement('div'); 
     slide_on.setAttribute('class', 'slide_on'); 
     slide_off = document.createElement('div'); 
     slide_off.setAttribute('class', 'slide_off'); 
     slides.appendChild(slide_on); 
     slides.appendChild(slide_off); 
     this.parentNode.insertBefore(slidesHolder, this.nextSibling); 

     // mouse hold and position 
     var down = false; 
     var clickPos = null; 

     $(slidesHolder).bind({ 

      mousedown : function(e){ 

       clickPos = e.pageX; 
       down = true; 
      }, 
      mousemove : function(e){ 
       if (!down) return; 

       // slinkimas i desine 
       if (clickPos < e.pageX) { 

        $(slides).offset({ left: e.pageX - clickPos }); 
       } 

       // slinkimas i kaire 
       if (clickPos > e.pageX) { 

        $(slides).offset({ left: e.pageX - clickPos }); 
       } 

      }, 
      mouseup : function(){ 

       down = false; 
      } 
     }); 
    }); 
} 
})(jQuery); 

$(function(){ 

    $('#slide_checkbox').slideCheckbox(); 
});

全部下面的例子：

http://jsfiddle.net/GomatoX/w2DBU/

來源

2012-10-31 GomatoX

當你寫的代碼，你忘了，你在哪裏一個jQuery插件裏面？ – adeneo

爲什麼我忘記了？爭論。 – GomatoX

好的，我找到了一個解決方案，它只是關注的焦點。 $（document.body）.foucs（）; e.stopPropagation（）; – GomatoX

如果你爲什麼不使用這樣的事情已經使用jQuery？

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Slider - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
$(document).ready(function() { 
    $("#slider").slider({ max: 1 }); 
    $("#slider").bind("slidechange", function(event, ui) { 
    document.getElementById('slide_checkbox').checked=$(this).slider("option","value"); 
    }); 

}); 
</script> 
</head> 
<body> 
<label for="slide_checkbox">Slider Checkbox</labeL> 
    <input type="checkbox" value="" name="" id="slide_checkbox" /> 
<div id="slider"></div> 
</body> 
</html>

http://jsfiddle.net/q3hBj/

來源

2012-10-31 13:28:22 Jake

劃分不作爲背景

回答

相關問題