0

jQuery と BlockUI プラグインを追加しようとしている静的ページがあります。BlockUI を使用するには、まず jQuery をロードする必要があります。jQuery は問題なくロードできますが、後で BlockUI をロードして、ロードされたハンドラを呼び出すことができないため、作業を行うことができません。自分の HTML ページに BlockUI スクリプト タグが表示されているので、少なくとも、私が確認できる限り問題なく挿入されています。これが私のコードです：

var jqueryScript = document.createElement( "script" );
jqueryScript.src = "/glptools/scripts/jquery-1.9.1.min.js";
if ( jqueryScript.addEventListener ) {
    jqueryScript.addEventListener( "load", jqueryReady, false );
}
else if ( jqueryScript.readyState ) {
    jqueryScript.onreadystatechange = jqueryReady;
}
document.getElementsByTagName( 'head' )[0].appendChild( jqueryScript );

function jqueryReady() {
    if ( typeof jQuery != 'undefined' ) {
        $( document ).ready( function () {
            //Initialize Tabber
            tabberAutomatic( "" );

            // Add BlockUI plugin
            var blockUIScript = document.createElement( "script" );
            blockUIScript.src = "/glptools/scripts/blockui/jquery.blockUI.js";
            if ( blockUIScript.addEventListener ) {
                blockUIScript.addEventListener( "load", blockUIReady, false );
            }
            else if ( blockUIScript.readyState ) {
                blockUIScript.onreadystatechange = blockUIReady;
            }
            document.getElementsByTagName( 'head' )[0].appendChild( blockUIScript );
        } );
    }
}

function blockUIReady() {
    $( "#tabbertabhide" ).each( function ( index, elem ) {
        $( elem ).block();
    } );
}

私の目標は、BlockUI を使用して、自分のページにあるタブをブロックすることです。ブロック UI ロード コードを ready() 呼び出しの外側に配置しようとしましたが、jQuery がロードされる前に、ロードされたハンドラーが呼び出されます。

4

3 に答える 3

1

BlockUI が jQuery に依存している場合は、順次ロードする必要があります。次のようなことができます。

//This function creates a script element using "resource" and
//adds it to the head. callback is used as the onload callback
//for the script
function loadScript(resource, callback) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");

    script.type = "text/javascript";
    script.src = resource + "?t=" + new Date().getTime(); //prevent caching

    if (callback) {
        script.onload = callback;
    }

    head.appendChild(script);
}

//Array of scripts to load
var resources = [
        "/glptools/scripts/jquery-1.9.1.min.js",
        "/glptools/scripts/blockui/jquery.blockUI.js"
];

//This function will load the scripts one after the other, using a callback
//that calls this function itself.
function load(i) {
    if(i < resources.length) {
        loadResource(resources[i], function() {                
            load(++i);
        });
    } else {
        //Everything has finished loading so you can start
        //using jQuery and BlockUI
    }
}

load(0);
于 2013-05-08T15:53:39.853 に答える