上記のプログラムをさらに改変しました。
外部JSファイル内で、下記の機能を実行可能にしました。
Setting.jQuery([url]) ・・・ jQueryファイルを読み込み(URL任意指定)
javascript
1// デフォルトで設定されているjQueryファイルを実行
2Setting.jQuery();
3
4// 指定したURLのjQueryファイルを実行
5Setting.jQuery(url);
6
Setting.mobile([css],[js]) ・・・ jQuery mobileファイルを読み込み(css,jsURL任意指定)
Setting.ui([css],[js]) ・・・ jQuery uiファイルを読み込み(css,jsURL任意指定)
javascript
1// デフォルトで設定されているjQuery_uiファイルを実行
2Setting.jQuery().ui();
3
4// 指定したURLのjQuery_uiファイルを実行
5Setting.jQuery().ui(css,js);
6
Setting.wr(str) ・・・ document.write(str)を実行
javascript
1// HTML読み込み途中で、タグを書き込み
2Setting.wr('<div></div>');
3
4// 以下と同一
5document.write('<div></div>');
6
Setting.css(arr) ・・・ CSSファイルを読み込み(URL,配列任意)
Setting.js(arr) ・・・ JSファイルを読み込み(URL,配列任意)
Setting.file(arr) ・・・ 外部ファイルを読み込み(URL,配列任意、css,jsファイルのみ実行可能)
javascript
1// 外部ファイルをURLを指定して読み込み
2Setting.css('./test.css');
3
4// 複数の外部ファイルをURLを指定して一括読み込み
5var arr = [ './test1.css' , './test2.css' ]
6Setting.css(arr);
7
Setting.load(func) ・・・ window.onLoadイベント発生時に実行する処理を設定
javascript
1// HTML読み込み完了時の処理を追加
2Setting.load(function(){
3 alert('test');
4});
5
6// 複数処理 追加可能
7Setting.load(function(){
8 alert('test1');
9}).load(function(){
10 alert('test2');
11});
12
!!! 注意事項 !!!
- Setting以降はメソッドチェーンが可能です。
- 既にjQueryが定義されている場合は、
新たにjQueryを再定義する事は出来ません。
HTML
1<!DOCTYPE html>
2<html>
3<head>
4 <title>linkSetup</title>
5 <script type="text/javascript" src="linkSetup.js"></script>
6 <script type="text/javascript">
7 $(function() {
8 ・・・jQuery 本文
9 })();
10 </script>
11</head>
12<body>
13 <!-- ぺージ -->
14 <div data-role="page">
15 <!-- ヘッダー -->
16 <div data-role="header">
17 <h1>linkSetup</h1>
18 </div>
19 <!-- コンテンツ -->
20 <div data-role="content">
21 <div class="ui-field-contain">
22 <input type="file" id="fileItem" >
23 </div>
24 <div id="val"></div>
25 </div>
26 <!-- フッター -->
27 <div data-role="footer">
28 <h4><div id="test"></div></h4>
29 </div>
30 </div>
31</body>
32</html>
javascript
1(function(){
2 var Setting = (function(){
3 var def = {
4 wr : function(str){
5 str ? document.write(str) : "";
6 return this;
7 },
8 init : function(){
9 return this.wr("<meta charset='UTF-8'>")
10 .wr("<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />")
11 .wr("<meta name='viewport' content='width=device-width, initial-scale=1'>");
12 },
13 load : function (func){
14 var oldload = window.onload;
15 if(typeof window.onload != 'function'){
16 window.onload = func;
17 }else{
18 window.onload = function(){
19 oldload();
20 func();
21 }
22 }
23 return this;
24 },
25 jQuery : function(URL){
26 var _URL = URL ? URL : "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
27 return (typeof jQuery == "undefined") ? this.wr("<script type='text/javascript' src='"+_URL+"'></script>") : this;
28 },
29 ui : function(css,js){
30 var _ui = {
31 css : css ? css : "//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css",
32 js : js ? js : "//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"
33 };
34 return (typeof jQuery == "undefined") ? this.file([ _ui.css , _ui.js ]) : this;
35 },
36 mobile : function(css,js){
37 var _mob = {
38 css : css ? css : "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css",
39 js : js ? js : "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"
40 };
41 return (typeof jQuery == "undefined") ? this.file([ _mob.css , _mob.js ]) : this;
42 },
43 js : function(urlarr){
44 var item;
45 var vArr = (urlarr instanceof Array) ? urlarr : [ urlarr , ""];
46 for (var i = 0; i < vArr.length; i++) {
47 item = vArr[i];
48 item ? this.wr("<script type='text/javascript' src='"+item+"'></script>") : this;
49 }
50 return this;
51 },
52 css : function(urlarr){
53 var item;
54 var vArr = (urlarr instanceof Array) ? urlarr : [ urlarr, ""];
55 for (var i = 0; i < vArr.length; i++) {
56 item = vArr[i];
57 item ? this.wr("<link rel='stylesheet' href='"+item+"'>") : this;
58 }
59 return this;
60 },
61 file : function(arr){
62 var item;
63 var vArr = (arr instanceof Array) ? arr : [ arr, ""];
64 for (var i = 0; i < vArr.length; i++) {
65 item = vArr[i];
66 if (item.slice(-3) == ".js") {
67 this.js(item);
68 } else {
69 if (item.slice(-4) == ".css") {
70 this.css(item);
71 }
72 }
73 }
74 return this;
75 }
76 };
77 return def.init();
78 })();
79
80 Setting.jQuery().mobile()
81 .load(function(){
82 alert('test1')
83 }).load(function(){
84 alert('test2')
85 });
86})();
87