我需要将 jsFiddle 中的脚本放入工作 [关闭]

Posted 2023-03-27

【中文标题】我需要将 jsFiddle 中的脚本放入工作 [关闭]

【英文标题】：I need to put script from jsFiddle to work [closed]

【发布时间】：2012-08-18 17:52:31

【问题描述】：

我有一个小问题...我需要将此脚本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) + '"  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",
    );
);

我需要一些说明，比如在哪里粘贴代码（head、body），制作什么文件（js，html），还有要改变什么值，这样它才能工作！有人可以zipp示例或其他东西吗？

【参考方案1】：

我们可以通过在末尾添加/show/ 来查看小提琴的全页 版本。

保存this 版本的小提琴。它包含运行该特定小提琴所需的所有脚本和资源。

在您的应用程序中比较并满足它们。

【讨论】：

比较什么？我不相信 OP 在他们的应用程序中有任何东西可以比较。

@Curt，与他当前的版本比较，看看他的版本是否满足所有要求。比如检查脚本或 CSS。

【参考方案2】：

最简单的解决方案

Download jQuery，将.js 文件添加到您的网站，并将javascript 窗口（左下角）中的所有内容添加到HTML 页面的head 标记中的script 标记中。

<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 文件。

然后将第二部分添加到您的head 标记以及对您的 jQuery 库和插件文件的脚本引用。

<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>