0

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

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

4

2 回答 2

2

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

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

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

于 2012-08-23T08:43:13.537 回答
1

最简单的解决方案

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

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

然后将您的 HTML 代码（左上角）添加到body您希望这些元素出现的任何位置。

更好的解决方案

下载 jQuery，将.js文件添加到您的网站。

javascript 代码的第一部分是一个 jQuery 插件。创建一个新的 javascript 文件，名为jquery.imagetick.js.

然后将第二部分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>
于 2012-08-23T08:47:20.717 回答