我需要把腳本的jsfiddle工作

Question

我有一個小問題...我需要把這個腳本http://jsfiddle.net/mctcs/到我的網頁上工作，但我不知道該怎麼做。什麼要複製到哪裏，以及如何讓jquery工作！我沒有關於jquery的知識，也不知道它的功能。

(function($){ 

$.fn.imageTick = function(options) { 

    var defaults = { 
     tick_image_path: "images/radio.gif", 
     no_tick_image_path: "no_images/radio.gif", 
     image_tick_class: "ticks_" + Math.floor(Math.random()), 
     hide_radios_checkboxes: false 
    }; 

    var opt = $.extend(defaults, options); 

    this.each(function(){ 

     var obj = $(this); 
     var type = obj.attr('type'); // radio or checkbox 

     var tick_image_path = typeof opt.tick_image_path == "object" ? 
      opt.tick_image_path[this.value] || opt.tick_image_path["default"] : 
      opt.tick_image_path; 

     var no_tick_image_path = function(element_id) { 
      var element = document.getElementById(element_id) || { value: "default" }; 
      return typeof opt.no_tick_image_path == "object" ? 
       opt.no_tick_image_path[element.value] || opt.no_tick_image_path["default"]: 
       opt.no_tick_image_path; 
     } 

     // hide them and store an image background 
     var id = obj.attr('id'); 
     var imgHTML = '<img src="' + no_tick_image_path(id) + '" alt="no_tick" class="' + opt.image_tick_class + '" id="tick_img_' + id + '" />'; 

     obj.before(imgHTML); 
     if(!opt.hide_radios_checkboxes){ 
      obj.css('display','none'); 
     } 

     // if something has a checked state when the page was loaded 
     if(obj.attr('checked')){ 
      $("#tick_img_" + id).attr('src', tick_image_path); 
     } 

     // if we're deadling with radio buttons 
     if(type == 'radio'){ 

      // if we click on the image 
      $("#tick_img_"+id).click(function(){ 
       $("." + opt.image_tick_class).each(function() { 
        var r = this.id.split("_"); 
        var radio_id = r.splice(2,r.length-2).join("_"); 
        $(this).attr('src', no_tick_image_path(radio_id)) 
       }); 
       $("#" + id).trigger("click"); 
       $(this).attr('src', tick_image_path); 
      }); 

      // if we click on the label 
      $("label[for='" + id + "']").click(function(){ 
       $("." + opt.image_tick_class).each(function() { 
        var r = this.id.split("_"); 
        var radio_id = r.splice(2,r.length-2).join("_"); 
        $(this).attr('src', no_tick_image_path(radio_id)) 
       }); 
       $("#" + id).trigger("click"); 
       $("#tick_img_" + id).attr('src', tick_image_path); 
      }); 

     } 

     // if we're deadling with checkboxes 
     else if(type == 'checkbox'){ 

      $("#tick_img_" + id).click(function(){ 
       $("#" + id).trigger("click"); 
       if($(this).attr('src') == no_tick_image_path(id)){ 
        $(this).attr('src', tick_image_path); 
       } 
       else { 
        $(this).attr('src', no_tick_image_path(id)); 
       } 

      }); 

      // if we click on the label 
      $("label[for='" + id + "']").click(function(){ 
       if($("#tick_img_" + id).attr('src') == no_tick_image_path(id)){ 
        $("#tick_img_" + id).attr('src', tick_image_path); 
       } 
       else { 
        $("#tick_img_" + id).attr('src', no_tick_image_path(id)); 
       } 
      }); 

     } 

    }); 
} 

})(jQuery); 

$(function() { 
    $("input[name='gender']").imageTick({ 
     tick_image_path: { 
      male: "http://i47.tinypic.com/13yjdac.jpg", 
      female: "http://i49.tinypic.com/261kfia.jpg" 
      //"default": "images/gender/default_checked.jpg" //optional default can be used 
     }, 
     no_tick_image_path: { 
      male: "http://i45.tinypic.com/vr4nwy.jpg", 
      female: "http://i47.tinypic.com/2m5mr9s.jpg" 
      //"default": "images/gender/default_unchecked.jpg" //optional default can be used 
     }, 
     image_tick_class: "gender", 
    }); 
}); 

我需要想去哪就貼上的代碼（頭部，身體）的說明，並作出什麼文件（JS，HTML）也什麼值改變，因此它的作品！可以有人zipp例子什麼的？

Answer 1

我們可以通過在結尾處加一個/show/看到全分頁版小提琴的。

保存this小提琴的版本。它包含特定小提琴運行所需的所有腳本和資源。

比較並在您的應用程序滿足這些需求。

Answer 2

簡單的解決方案

Download jQuery，則.js文件添加到您的網站，並在JavaScript的窗口中添加的一切（左下）爲script標籤在你的HTML頁面的head標籤。

<script type="text/javascript" src="/js/jQuery.js"></script> 
<script type="text/javascript"> 
    ..script here 
</script> 

添加您的HTML代碼（左上）到任何你想要的這些元素出現在body標籤。

---

更好的解決方案

Download jQuery，則.js文件添加到您的網站。

的JavaScript代碼的第一部分是一個jQuery插件。創建一個名爲jquery.imagetick.js的新JavaScript文件。

然後第二部分用腳本引用到你的jQuery庫和插件文件一起添加到您的head標籤。

<script type="text/javascript" src="/js/jQuery.js"></script> 
<script type="text/javascript" src="/js/jQuery.imagetick.js"></script> 
<script type="text/javascript"> 
     $(function() { 
    $("input[name='gender']").imageTick({ 
     tick_image_path: { 
      male: "http://i47.tinypic.com/13yjdac.jpg", 
      female: "http://i49.tinypic.com/261kfia.jpg" 
      //"default": "images/gender/default_checked.jpg" //optional default can be used 
     }, 
     no_tick_image_path: { 
      male: "http://i45.tinypic.com/vr4nwy.jpg", 
      female: "http://i47.tinypic.com/2m5mr9s.jpg" 
      //"default": "images/gender/default_unchecked.jpg" //optional default can be used 
     }, 
     image_tick_class: "gender", 
    }); 
}); 
</script>