0

小さな問題が 1 つあります...このスクリプト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) を作成するか、どの値を変更するかなどの指示が必要です。誰かが例などを圧縮できますか?

4

2 に答える 2

2

最後に を追加することで、フィドルの完全なページバージョンを見ることができます/show/。

このバージョンのフィドルを保存します。その特定のフィドルを実行するために必要なすべてのスクリプトとリソースが含まれています。

アプリケーションでそれらを比較して満たしてください。

于 2012-08-23T08:43:13.537 に答える
1

最も簡単な解決策

jQuery をダウンロードし、.jsファイルを Web サイトに追加し、javascript ウィンドウ (左下) のすべてをHTML ページのタグのscriptタグに追加します。head

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

body次に、これらの要素を表示したい場所に HTML コード (左上) をタグに追加します。

より良い解決策

jQuery をダウンロードし、ファイルを Web サイトに追加し.jsます。

JavaScript コードの最初の部分は jQuery プラグインです。のような名前の新しい JavaScript ファイルを作成しますjquery.imagetick.js。

head次に、jQuery ライブラリとプラグイン ファイルへのスクリプト参照とともに、2 番目の部分をタグに追加します。

<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 に答える