jquery easyuiのEasyLoader機能の概要


EasyLoaderは、スクリプトとCSSファイルを動的にロードすることもできるし、EasyUIの既存のコンポーネントを動的にロードするにはEasyLoaderを参照する必要がある.jsファイル、注意:ここではjqueryを参照する必要はありません.easyui.min.jsファイルです.たとえばlinkbuttonコンポーネントをロードする必要がある場合は、classを設定することによって、カレンダーをロードするclassがeasyui-コンポーネント名を設定すると、easyloaderは対応するコンポーネントを自動的に動的にロードします.またはeasyloader.load('calendar',function(){alert("ロード成功!")});
ここでusingはeasyloaderに等しい.load、つまりusingはeasyloader.loadメソッドの略記.
 
常用属性:1)Locale:ローカライズ用法:easyloader.locale = "zh_CN";//ローカライズ設定2)Theme:テーマの使い方:easyloader.theme = "gray";//テーマイベントの設定:1)onProgress:各コンポーネントのロードが完了するとトリガーされます2)onLoad:onProgressイベントの後にトリガーされます.コンポーネントと関連コンポーネントのすべてのロードが完了するとトリガーされる違いは、名前から明らかになります.onProgressイベントは進捗状況を表示するために使用できますが、onLoadイベントはユーザーにコンポーネントの使用を促すために使用できます.
共通のプロパティと実践の使用コードは次のとおりです.
easyloader.locale = "zh_CN"; //      
        easyloader.theme = "gray"; //     
        //            
        easyloader.onProgress = function (name) {
            $("#loadMsg").append("<br />onProgress --> ");
            $("#loadMsg").append(name);
        };

        //  onProgress     ,                  
        easyloader.onLoad = function (name) {
            $("#loadMsg").append("<br />onLoad --> ");
            if (typeof name == "string") {
                $("#loadMsg").append(name);
            } else {
                for (var i = 0; i < name.length; i++) {
                    $("#loadMsg").append(name[i] + ",");
                }
            }
        };
 
EasyLoaderメソッドのコードは次のとおりです.
function load1() {
            // using     easyloader.load
            using('calendar', function () {
                $('#cc').calendar({
                    width: 180,
                    height: 180
                });
            });
        }
        function load2() {
            //            
            using(['dialog', 'messager'], function () {
                $('#dd').dialog({
                    title: '   ',
                    width: 300,
                    height: 200
                });
                $.messager.show({
                    title: '    ',
                    msg: '      !'
                });
            });
        }