我编写了一个小部件,效果很好,但是现在我正在为我的用户提供指向远程脚本的链接,指向我的脚本和div的链接放在他们的页面上。我想将其简化为 my 脚本和div的链接。我想在下面的代码中包含的远程链接是
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
有人可以告诉我如何在我的代码中添加第二个链接吗?我已经链接到远程jquery和远程样式表,但我不知道如何/在哪里包含另一个远程链接。我尝试了很多地方和方法,但是我一直在打破我的页面,哈哈。 感谢提供任何帮助。
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.12.4') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src", "//code.jquery.com/jquery-1.12.4.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function() { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
/******* Load CSS *******/
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
});
css_link.appendTo('head');
/******* Load HTML *******/
var jsonURL = "//www.myurl.com/mssql.php/ws_nfy";
jQuery(document).ready(function() {
jQuery.ajax({
url: jsonURL,
success: searchCallback
});
});
function searchCallback(data) {
var ws_nfy = data.ws_nfy.records;
jQuery.each(ws_nfy, function(index, nfy) {
jQuery("#tabs ul").append('<li><a href="#tabs-' + nfy[0] + '">' + nfy[2] + '</a></li>');
jQuery("#tabs ul").after("<div id='tabs-" + nfy[0] + "'>" + nfy[1] + "</div>");
});
$("#tabs").tabs();
};
});
}
})(); // We call our anonymous function immediately
答案 0 :(得分:0)
在注入jQuery之前,你是否已经加载了jQuery ...这很好。现在你应该为jQuery-UI做同样的事情。
这就是同样的程序......
试试这个:
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.12.4') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src", "//code.jquery.com/jquery-1.12.4.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function() {
// For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
//main(); // Not now! Check for UI first.
checkUI();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
//main(); // Not now! Check for UI first.
checkUI();
}
// ========================== Check if jQuery-UI is already loaded
function checkUI(){
if(typeof(jQuery.ui) != "undefined"){
// UI is loaded already.
console.log("UI is defined");
console.log( typeof(jQuery.ui) );
main();
}else{
// UI is not loaded. Got to load it.
console.log("UI is NOT defined");
//console.log( typeof(jQuery.ui) );
var ui = document.createElement('script');
ui.setAttribute("type", "text/javascript");
// For UI
window.$ = jQuery;
ui.setAttribute("src", "https://code.jquery.com/ui/1.12.1/jquery-ui.js");
console.log(ui);
document.getElementsByTagName("head")[0].appendChild(ui);
if (ui.readyState) {
console.log( "READYSTATE" );
ui.onreadystatechange = function() { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
console.log( "STATELOADED" );
main();
}
};
} else {
console.log( "ELSE" );
jQuery(ui).on("load", function(){
console.log("UI loaded...");
main();
});
}
}
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
console.log("jQuery: "+jQuery.fn.jquery+"\njQuery-UI: "+jQuery.ui);
console.log("Tabs element: "+jQuery("#tabs").length);
/******* Load CSS *******/
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
});
css_link.appendTo('head');
/******* Load HTML *******/
var jsonURL = "//www.myurl.com/api.php/ws_nfy";
jQuery.ajax({
url: jsonURL,
success: searchCallback
});
function searchCallback(data) {
var ws_nfy = data.ws_nfy.records;
jQuery.each(ws_nfy, function(index, nfy) {
jQuery("#tabs ul").append('<li><a href="#tabs-' + nfy[0] + '">' + nfy[2] + '</a></li>');
jQuery("#tabs ul").after("<div id='tabs-" + nfy[0] + "'>" + nfy[1] + "</div>");
});
jQuery("#tabs").tabs();
};
});
}
})(); // We call our anonymous function immediately