//引入固定的3个js
  <script type="text/javascript" src="assets/lib/require/require.js"></script>
  <script type="text/javascript" src="assets/lib/jquery/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="assets/config.js"></script>
  <script type="text/javascript">
  //当 window.onload=function(){...};或者 $(function(){...});
  //加载完成之后require才会去根据配置异步的加载X-Control所需的js与css
  //所以页面的入口函数请使用：
  require(["ready!"], function() {
    //You can do something;
  });
  

                
              

              
  var test = function(){
      //这种方式 
      //1.页面html元素可以调到
      //2.script 中可以调到
      //3.require 中可以调到
      //4.temp不能调到
      //5.temp1能调到
  }
  function test1(){
      //同test
  }
  //require中是闭包的
  require(["ready!"], function() {
      var temp = "test";
      window.temp1 = "test";
      var internalTest = function(){
          //这种方式 
          //1.页面html元素不能调到
          //2.script 中require外不能调用
          //3.require 中可以调到
      }
      function internalTest1(){
          //同internalTest
      }
      window.internalTest2 = function(){
          //全局可调用，同test
      }
  });


              
            

          

  require(["ready!", "x/x-layout"], function() {});
  ...

  
  
中间 class="x-layout-center"
  
左 class="x-layout-left"
  
右 class="x-layout-right"
  
上 class="x-layout-top"
  
下 class="x-layout-bottom"
  
        
      

        
require(["ready!","x/x-layouttable"], function() {
});
 
        ...


  

    

      
宽度40%
      
宽度100px
      
自适应宽度
    
    

      
宽度50%
      

        
其他内容
      
    
  

        
      

        
require(["ready!","x-layouttablebootstrap"], function() {
});

...


  

    
宽度40%
    
宽度100px
    
自适应宽度
  
  

    
宽度50%
    

      
其他内容
    
  

      
    

        
  require(["ready!", "x/x-layout", "x/x-panel-tabs"], function() {
      var mainLayout = require("x/x-layout").get("#main_layout");
      var test_tab = require("x/x-panel-tabs").get("#test_tab");
      var text_setting= require("x/x-panel").get("#text_setting");
      test_tab.setTools({
          "addTab": {
              iconClass:"fa fw fa-plus",
              click:function(){
                  test_tab.add({
                      title:"嵌入数据源",
                      iconClass:"fa fw fa-pinterest-square",
                      src:"http://huaban.com/boards/19000000"
                  });
              }
          }
      })
  });

  ...

  

    
hello world!
    

    

      

        
Hi setting!
      
    
  

  
  

        
require(["ready!","x/x-layout-waterfallflow"],function(){
    var myAccordion = require("x/x-layout-waterfallflow").load("#waterfallflow",{
        autoCoverWindow: true,
        animateSpeed:300,
        itemClass:"waterfallflow-item",
        width:120,
        data:{
        "total":"14",
        "rows":[{
            "height":"200px","bgcolor":"red"
            },
            ....
        ]},

        drawElement:function(data,itemElement,callback){
            var mydiv =$("(div)").css({"width":"120px","height":data.height,"background-color":data.bgcolor});
            //注：$("(div)") 里的div应使用尖角号包裹
            callback(mydiv[0]);
        } 
    })
});




       
      

      
require(["ready!","x/x-squeezebox"],function(){
    var mySqueezebox = require("x/x-squeezebox").get("#squeezebox");
});


    

      
x-squeezebox for X-Control 1st
 
    
    

      
x-squeezebox for X-Control 2nd
 
    
    

      
x-squeezebox for X-Control 3rd
 
    

      
    

        

  require(["ready!", "x/x-panel"]);

  //获取已存在的实例的对象
  var myDiv = require("x/x-panel").get("#myDiv");
    myDiv.collapse();//折叠方法
  });

  ...

  

    

      

        
hello,x-panel!
      
    
  
      
  

          
  require(["ready!", "x/x-layout", "x/x-window"], function() {
      $("#openWindow").on("click",function(){
          var windowFactory = require("x/x-window");
          var xWindow = windowFactory.load({
              title: "x-window",
              width:"80%",
              height:"80%",
              windowClass:"x-panel-default",
              src:"window-example.html",
              onIframeLoad:function(){
              //alert("window-example.html 加载完成");
          },
          modalTools:{
              button1: {
                  btnClass:"btn  btn-primary",
                  iconClass: "fa fa-fw fa-check",
                  text: "确定",
                  click: function() {
                      alert("点了确定按钮");
                }
              },
              button2: {
                  btnClass:"btn  btn-danger",
                  iconClass: "fa fa-fw fa-times",
                  text: "取消",
                  click: function() {
                      alert("点了取消按钮");
                      xWindow.destroy();
                  }
              }
          }
      });
    })
  });

  ...

  

    

      点我打开窗口
    
  

  
  

                    
  require(["ready!", "x/x-layout","x/x-window-messager"], function() {
      var xWindowMessagerFactory = require("x/x-window-messager");
      $("#aaa").on("click",function(){
        xWindowMessagerFactory.alert("hello,wo x!");
      });
      $("#bbb").on("click",function(){
        xWindowMessagerFactory.confirm("你确定要那啥么？",function(r){
          if(r){
            alert('你确认了那啥！');    

          }else{
            alert('你取消了那啥！');   
          }
        });
      });
      $("#ccc").on("click",function(){
        xWindowMessagerFactory.prompt("请输入密码","",function(newval,oldval){
          if(newval.length>10){
            alert("输入过长")
            return false;
          }else{
            alert(newval);
          }
          
        });
      });
  });

  ...

  

    

      打开alert
      打开confirm
      打开prompt
    
  

        
      

          
require(["ready!","x/x-menu"],function(){
  $.post("json/menu1.json", function(data){
      var json1 = eval(data);
      var xDropDown1 = require("x/x-menu").load("#menu-1",{
                      hasContent:true,
                      icon:true,
                      fixed:true,
                      textoverflow:false,
                      data:json1 
                    });
  });
});
...

div标签菜单

      
    

          
require(["ready!", "x/x-layout", "x/x-panel", "x/x-panel-datagrid"], function() {
    
          var datagrid1 = require("x/x-panel-datagrid").load("#datagrid1", {
          title: "数据表格",
          iconClass: "fa fw fa-table",
          closable: false,
          maximize: true,
          collapsible: true,
          head: true,
          foot: true,
          tools:{
            test:{
              iconClass:"fa fa-fw fa-lock",
              click:function(){
                //显示列
                t1.xDatagrid.showColumn("id");
                //显示与隐藏列的切换
                t1.xDatagrid.toggleColumnVisible("orgName");
                //锁定列的切换
                t1.xDatagrid.toggleColumnLockable("workPos");
              }
            }
          },
          grid: {
            editable: false,
            checkOnSelect:false,//如果为true，当用户点击行的时候该复选框就会被选中或取消选中。                       如果为false，当用户仅在点击该复选框的时候才会被选中或取消。    
            headerColumns: {
              "num": {
                clazz: "text-center",
                attr: {
                  "x-data": "some thing"
                },
                formatter: function(value) {
                  return "序号";
                },
                render: function(th) {
                }
              }
            },
            columns: [{
                checkRow:false,
                lock:true
              },{
              field: "num",
              clazz: "text-center",
              attr: {
                "style": "min-width:50px; max-width:50px"
              },
              serialNumber: true,
              lock:true,
            }, {
              field:"xid",
              hidden:true,
              attr: {
                "style": "min-width:100px; max-width:100px"
              }
            },{
              field: "workNum",
              title: "登录名",
              attr: {
                "style": "min-width:100px; max-width:100px"
              },
              sort:["desc","asc"]
            }, {
              field: "name",
              title: "姓名",
              lock:true,
              attr: {
                "style": "min-width:80px; max-width:80px"
              } 
             
            }, {
              field: "orgName",
              title: "所属机构",
              attr: {
                "style": "min-width:200px; max-width:200px"
              }
            }, {
              field: "workPos",
              title: "职务",
              attr: {
                "style": "min-width:100px; max-width:100px"
              },
              sort:["desc"]
            }, {
              field: "roleNames",
              title: "拥有角色",
              attr: {
                "style": "min-width:300px; max-width:300px"
              }
            }],
            
            sync: true,
            ajax: {
              url: "json/datagrid1.json"
            },
            
            //data: json,
            pageable: {
              pageNum: 1,
              rowsCount: 5
            }
          },
          
        });
  });

  ...


 
  
  

        
  require(["ready!", "x/x-panel", "x/x-treeview"], function() {
  var tree = require("x/x-treeview").load("#example-treeview", {
      id: "id",
      pid: "pid",
      text: "text",
      icon: false,
      checkbox: true,
      select: true,
      icon: true,
      cascade: true,
      onLoad: function() {
          console.log("onLoad");
      },
      onSelected: function(node) {
          console.log("onSelected");
      },
      onChecked: function() {
          console.log("onChecked");
      },
      onClick: function() {
          console.log("onClick");
      },
      data: [{
          "text": "10",
          "id": "0",
          "pid": "5",
          "checked": true,
      }, {
          "text": "21",
          "id": "1",
          "pid": "0"
      }, {
          "text": "32",
          "id": "2",
          "pid": "0"
      }, {
        "text": "43",
        "id": "3",
        "pid": "2"
      }, {
        "text": "54",
        "id": "4",
        "pid": "",
        "open":true,
        selected: true
      }, {
        "text": "65",
        "id": "5",
        "pid": "4"
      }, {
        "text": "76",
        "id": "6",
        "pid": ""
      }, {
        "text": "87",
        "id": "7",
        "pid": "4"
      }, {
        "text": "98",
        "id": "8",
        "pid": "4"
      }, {
        "text": "109",
        "id": "9",
        "pid": "4"
      }, {
        "text": "210",
        "id": "10",
        "pid": "4"
      }, {
        "text": "222",
        "id": "11",
        "children":[
      {
        "text": "220",
        "id": "12",
      }
      ]
    }]
  });


  testPanel.setTools({
      addTabsItem: {
          iconClass: "fa fw fa-plus",
          text: "控制台打印",
          click: function() {
              //获取select的元素
              var selectedNode = tree.getSelectedNode();
              //获取check的元素
              var checkedNodeList = tree.getCheckedNodeList();
              ...
          }
      }
  });
});
  ...

  

  

  

  

  
  
  

    
 

 
var datagridCustom1 = require("x/x-datagrid-custom").load("#test_datagrid1", {
   //data:dataJson,
      ajax: {
        url: "json/datagridCustom1.json"
      },
    empty:true,
   //绘制html部分的回调，需要返回一个html字符串给控件
    //rowData：数据部分；pageNum:当前页数；rowsCount：每页行数；total：数据总数
    drawHtml:function(rowData,pageNum,rowsCount,total){
    //此处拼接表格的表头部分HTML字符串
        var htmltable = "<table class='table table-bordered'>"+
                        "<tbody>"+
                        "<tr>"+
                        "<th style='width: 10px'>#</th>"+
                        "<th>Name</th>"+
                        "<th>Progress</th>"+
                        "<th style='width: 40px'>Label</th>"+
                        "</tr>";

    var htmltr="";
    //此处拼接表格的内容部分，循环拼接HTML字符串
    for(var i =0;i<rowData.length;i++){

        htmltr = htmltr+"<tr>"+
                        "<td>"+(i+1)+"</td>"+
                        "<td>"+rowData[i].name+"</td>"+
                        "<td>"+
                        "<div class='progress progress-xs'>"+
                        "<div class='progress-bar progress-bar-danger' style='width: 55%'></div>"+
                        "</div>"+
                        "</td>"+
                        "<td><span class='badge bg-red'>"+rowData[i].updateTime+"</span></td>"+
                        "</tr>";

    }      
    //此处拼接表格的结尾部分HTML字符串
    var htmltablelast = "</tbody></table>";
    //此处拼接表格的所有部分HTML字符串
    var html = htmltable + htmltr + htmltablelast;
    //将拼接好的表格HTML字符串返回给控件      
    return html;

    },
    //html绘制完成后，用户自定义的方法回调,用来编写自定义方法
    //jqDomHtml是绘制完毕后的jquery文档对象     
    //painter是返回的绘制器对象     
    drawFn:function(jqDomHtml,painter){
    //如果用户有自定义的方法，可以在此处回调编写相应方法       
    }
    ...
      
  
    

          
require(["ready!","x-form-validate"], function() {
    var xForm = require("x/x-form-validate").init();
    window.dosubmit = function(){
        xForm.validateForm("#theform",function(isSuccess){
            if(isSuccess){
                alert("成功！");
                ...
            }
        });
    }
});

... 


  

  
  

        
            
   require(["ready!","x/x-form-combobox"],function(){
      
      $.post("json/combobox1.json",function(data){
        var data = eval(data);
        var combobox1 = data[0].combobox1;
        var combobox2 = data[0].combobox2;
        var xDropDown1 = require("x/x-form-combobox").load("#select1",{
                  newInputName: "xxxcombobox",//新建起来的input的name，默认false
                  isCheck:true,
                  //data:[{text:"123",children:[{text:"456"}]}]
                  treeOption:{
                      icon:false,//不使用图标时请置为false
                      id:"id",
                      text:"text",
                      pid:null,
                      checkbox:false,
                      data: combobox1
                  }
        });

        var xDropDown2 = require("x/x-form-combobox").load("#select2",{
                    icon:true,//不使用图标时请置为false
                    pid : null,//combobox必须把pid设为null
                    defaultNull:true,//是否有默认的空值（第一位），默认为false
                    //newInputName: "xxx",//新建的input的name，默认true
                    //data:[{text:"123",children:[{text:"456"}]}]
                    data: combobox2
          });

      });

      
  });

  ...

  
  
    
  

        
require(["ready!","x/x-form-combotree"],function(){             
    $.post("json/combobox1.json",function(data){
              var data = eval(data);
              var combotree1 = data[0].combobox1;

              var xDropDown1 = require("x/x-form-combotree").load("#select",{
                        icon:true,//不使用图标时请置为false
                        select:true,
                        newInputName: "xxxcombotree",//隐藏起来的input的name，如果不设置的话，默认没有隐藏的input
                        //data:[{text:"123",children:[{text:"456"}]}]
                        treeOption:{
                            id:"id",
                            text:"text",
                            pid:"pid",
                            checkbox:false,
                            data: combotree1
                        }
              });
          
              var xDropDown2 = require("x/x-form-combotree").load("#select2",{
                        icon:false,//不使用图标时请置为false
                        select:true,
                        search:false,
                        //newInputName: "xxxcombotree2",
                        //data:[{text:"123",children:[{text:"456"}]}]
                         treeOption:{
                            id:"id",
                            text:"text",
                            pid:"pid",
                            checkbox:true,
                            data:combotree1
                        } 
                });
        });
    });

  ...

  
  

        
      

      
      

          var xDropDown1 = require("x/x-form-combotree").load("#select",{
            ...

          });
       
          var xDropDown2 = require("x/x-form-combotree").load("#select2",{
            ...

          });

          var xDropDown3 = require("x/x-form-combotree").load("#select3",{
            ...

          });


          var xDropDown4 = require("x/x-form-combotree").load("#select4",{
            ...

          });

          ...

          var linkagedropFactory = require("x/x-link-combotree").load("#linkagedrop1",
                [{
                  father:xDropDown1,
                  child:xDropDown2,
                  fatherIdName:"xDropDown1id",
                  childIdName:"xDropDown2-jlid",
                  //lindHide:true,
                  linkCombotreecallback:function(thisData){
                   // console.log(thisData);
                  }
                },
                {
                  father:xDropDown2,
                  child:xDropDown3,
                  fatherIdName:"xDropDown2id",
                  childIdName:"xDropDown3-jlid",
                  linkCombotreecallback:function(thisData){
                  //console.log(thisData);
                  }
                },
                 {
                  father:xDropDown3,
                  child:xDropDown4,
                  fatherIdName:"xDropDown3id",
                  childIdName:"xDropDown4-jlid",
                  linkCombotreecallback:function(thisData){
                  //console.log(thisData);
                  }
                }]
            ); 
        ...
        大区： 
         国家 
        省  
        市 
        ...
      
    

        
               
require(["ready!","x/x-searchbox"],function(){
    $.post("json/searchbox.json",function(data){
          var searchbox = eval(data);
          var searchbox1 = require("x/x-searchbox").load("#searchbox1",{
                      prompt:"请输入您的搜索内容",//提示文字
                      menuName:"请选择类型",
                      isCheck:false,//是否可以复选
                      searchTypeMenuId:"xsearchbox1",//搜索类型框ID
                      searchType:searchbox
          });

        
          var searchbox2 = require("x/x-searchbox").load("#searchbox2",{
                      prompt:"请输入您的搜索内容",//提示文字
                      menuName:"请选择类型",
                      isCheck:false,//是否可以复选
                      isMenuBtn:false,//是否有左侧菜单按钮
                      searchTypeMenuId:"xsearchbox1",//搜索类型框ID
                      searchType:searchbox
          });
    });
});

  ...

    
  
 
      
    

            
  require([
    "ready!",
    "x/x-layout",
    "x/x-panel",
    "lib/codemirror/codemirror"
  ],function(){
      var codemirrorFactory = require("lib/codemirror/codemirror");
      var sqlCodeMirror = codemirrorFactory.createSql($('#sql_sql'),{height:"240px"});
      var xmlCodeMirror = codemirrorFactory.createXml($('#xml_xml'),{height:"240px"});
      var htmlCodeMirror = codemirrorFactory.createHtml($('#html_html'),{height:"240px"});
      
      var sql = "我是一个sql编辑器\n";
      sql+="select * from test1";
      sqlCodeMirror.setValue(sql);

      var xml = "我是一个xml编辑器\n";
      xml+='\n';
      xml+='\n';
      xml+='\n';
      xml+='\n';
      xmlCodeMirror.setValue(xml);

      var html = "我是一个html编辑器\n";
      html+='\n';
      html+='
hellow!Html!
\n';
      html+='\n';
      htmlCodeMirror.setValue(html);
  });

  ...

  

    

      
    
    

      
    
    

      
    
  
          
        

        
  require([
  "ready!",
  "x/x-layout",
  "lib/my97datepicker/my97datepicker"
  ],function(){
    WdatePicker({eCont:'div1',onpicked:function(dp){alert('Is the date you choose:'+dp.cal.getDateStr())}})
  });

  ...

  

    

      

    
    

      

      

      

      

      
      
    
  
          
        

        
require([
    "ready!",
    "lib/huploadify/huploadify"
    ],function(){
        var huploadifyFactory = require("lib/huploadify/huploadify");
        huploadifyFactory.createHuploadify($("#file_upload")[0],'*.*',
            function add_callback(data){
              console(data);
            },
            function delete_callback(data){
                console(data);
            }
        ,1);
});

...



  
  

        
  require(["ready!","x/x-webuploader-common"], function() {
    var initFileIds;
    var webuploader = require("x/x-webuploader-common").load("#btn1",{
      inputName:"asd",
      readOnly:false,
      url:"http://localhost:8080/zt-component-eform-web/uploadfile/displayer/commonUpload.do?businessType=test",
      downloadUrl:"http://localhost:8080/zt-component-eform-web/uploadfile/displayer/downloadFile.do",
      onDrawFinish:function($boxElement,$filesDiv,that){
          //已上传文件的初始化回显
          if(initFileIds){
            var url = contextPath+"/uploadfile/displayer/listByIds.do";
            $.post(url, {"ids":initFileIds}, function(result) {
              if(result.success&&result.success === false){
                alert(result.msg);
              }else{
                $.each(result,function(i,n){
                  that.addDefaultFileItem(n.id,n.fileName,n.fileSize);
                });
              }
           }, 'json');
          }
        },
    });
  });
...


  上传文件

        
      

        
  require(["ready!","x/x-webuploader-picture"], function() {
    var initFileIds;
    var webuploader = require("x/x-webuploader-picture").load("#btn11",{
      inputName:"asd1",
      readOnly:false,
      url:"http://localhost:8080/zt-component-eform-web/uploadfile/displayer/commonUpload.do?businessType=picture",
      downloadUrl:"http://localhost:8080/zt-component-eform-web/uploadfile/displayer/downloadFile.do",
      saveImageEditDataUrl:"http://localhost:8080/zt-component-eform-web/uploadfile/displayer/saveImgEditData.do",
      onDrawFinish:function($boxElement,$filesDiv,that){
          //已上传文件的初始化回显
          if(initFileIds){
            var url = contextPath+"/uploadfile/displayer/listByIds.do";
            $.post(url, {"ids":initFileIds}, function(result) {
              if(result.success&&result.success === false){
                alert(result.msg);
              }else{
                $.each(result,function(i,n){
                  that.addDefaultFileItem(n.id,n.fileName,n.fileSize);
                });
              }
           }, 'json');
          }
      }
    });
  });
...

.x-upload-file-picture{
      height:200px;//图片预览区高度
      width:150px;//图片预览区宽度
}
.x-upload-file-picture .x-upload-file-logo {
      margin: -65px -38px;//logo位置微调
}
.x-upload-file-picture .webuploader-container {
      margin: 24px -34px;//按钮位置微调
}
...


  上传头像

        
      

          
  require([
      "ready!",
      "x/x-layout",
      "x/x-panel",
      "lib/kindeditor/kindeditor"
      ],function(){
      var kindeditorFactory = require("lib/kindeditor/kindeditor");
      var k = kindeditorFactory.createkindeditor($("#kindeditor"));
  });

  ...


  

    
  

        
      

          
        ... 
        
        Apples
        
        
        Oranges 
            ...  
        
        Day
            
        
        Night
        ... 

          
      

          
            require(["ready!","lib/number/x-number"], function() {
              var xNumber1 = require("lib/number/x-number").load("#numberTest1",{
                decimals:2//小数位设定，2表示两位小数
                
              });
              var xNumber2 = require("lib/number/x-number").load("#numberTest2",{
                decimals:2,//小数位设定，2表示两位小数
                currency:'￥'//货币设定
                
              });
            });
            ...
            

            ...
            

            ...
          
      

        
  require(["ready!","lib/star/js/star","x/x-form-validate"],function(){
  var starFactory = require("lib/star/js/star");
  var starObj = starFactory.createStar('#star',{
    inputName:"starInput",//隐藏的输入框name，用来存放真实数据id
    data:[
        {desc:"凑合凑",text:"2分",val:"1"},
        {desc:"文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度测试",val:"2"},
        {text:"3分",val:"3"},
        {val:"4"},
        {desc:"5very good ，赞一个先",text:"6分",val:"5"},
        {desc:"5very good ，赞一个先",text:"12分",val:"6"},
        {desc:"5very good ，赞一个先",text:"22分",val:"7"},
        {desc:"25ery good ，赞一个先",text:"2232分",val:"8"},
        {desc:"32very good ，赞一个先",text:"dsad分",val:"9"}
       ]
  });
    //设定初始值
    window.aa =function(){
      starObj.setValue(document.getElementById("testinput").value);
    }
    //清空
    window.bb =function(){
      starObj.clearValue();
    }
    //锁定
    window.cc =function(){
      starObj.lock();
    }
    //解锁
    window.dd =function(){
      starObj.unlock();
    }
    window.ss = function(){
      require("x/x-form-validate").init().validateForm("#theform",function(isSuccess){
        if(isSuccess){
        }
      });
    }
  });
  ....

  

    

      
   
      

    
  
  

  
    设定初始值
    清空
    锁定
    解锁
    验证非空
  
  
  

        
  require(["ready!","lib/slider/slider"],function(){
    var sliderFactory = require("lib/slider/slider");

    var sliderObj0 = sliderFactory.createSlider('#slider0',{
            max: 10,
            value: 5
    });  

    var sliderObj1 = sliderFactory.createSlider('#slider1',{
        range: true,//范围滑块参数，true则有范围滑块
        values: [ 1, 3], //初始值参数，设置范围滑块的左滑块，右滑块的初始值
        max: 10,//范围最大值
        newInputName:"sliderInput0"//隐藏起来的输入框

    });
     
    //sliderFactory.setValue(sliderObj0,"1,9");
    sliderFactory.setValue(sliderObj1,"1,3");

  });
 
    ...
    
  

  

        
      

        
  require(["ready!", "lib/provinces-cities-address/address-linkage"], function() {
    var linkageFactory = require("lib/provinces-cities-address/address-linkage");
    var linkageFactory0 = linkageFactory.createAddress('#sjld',{
        //省配置
        province:{
          inputName:"x-lv-1",//省级的隐藏输入框，必填
          isShow: true,//是否展现，默认true
          //name:"河南",//初始化展现省名称
          disabled:false//是否禁用，默认为false
        },
        //市/区配置
        city:{
          inputName:"x-lv-2",//市/区级的隐藏输入框，必填
          isShow: true,//是否展现，默认true
          //name:"平顶山市",//初始化展现市/区名称
          disabled:false//是否禁用，默认为false
        },
        //县/区配置
        county:{
          inputName:"x-lv-3",//县/区级的隐藏输入框，必填
          isShow: true,//是否展现，默认true
          //name:"新华区",//初始化展现县/区名称
          disabled:false//是否禁用，默认为false
        },
        //其他详情输入框配置
        another:{
          isShow: true,//是否展现，默认false
          inputName:"anothername"//其他详情输入框的name
        }
    });
      
    var linkageFactory1 = linkageFactory.createAddress('#sjld1',{
        //省配置
        province:{
          inputName:"x-lv-11",//省级的隐藏输入框，必填
          isShow: true,//是否展现，默认true
          name:"陕西",//初始化展现省名称
          disabled:false//是否禁用，默认为false
        },
        //市/区配置
        city:{
          inputName:"x-lv-22",//市/区级的隐藏输入框，必填
          isShow: true,//是否展现，默认true
          name:"西安市",//初始化展现市/区名称
          disabled:false//是否禁用，默认为false
        },
        //县/区配置
        county:{
          inputName:"x-lv-33",//县/区级的隐藏输入框，必填
          isShow: true,//是否展现，默认true
          name:"雁塔区",//初始化展现县/区名称
          disabled:false//是否禁用，默认为false
        },
        //其他详情输入框配置
        another:{
          isShow: true,//是否展现，默认false
          inputName:"anothername-1"//其他详情输入框的name
        }
    });
         
    // linkageFactory0.setValues("陕西","宝鸡市","陈仓区","其他xxxxx xx");
    
    //禁用
    window.aa=function(){
       linkageFactory0.disabled("all");
      // linkageFactory0.disabled("city");
      // linkageFactory0.disabled("county");
    }
    //启用
    window.bb=function(){
       linkageFactory0.enable("all");
      // linkageFactory0.disabled("city");
      // linkageFactory0.disabled("county");
    }    
  });
    
····
  

  

  
默认的省市级联，默认选择北京-市辖区-东城区
  

  禁用  启用
  
    

  
  
  

  

  
默认的省市级联，但是配置的默认值，陕西-西安市-雁塔区
    

  
  

      
    

        
          require(["ready!","lib/color/x-color"], function() {
            var objC1 = require("lib/color/x-color").createClolr("#cp1",{
               ishex : true//是否以16进制表示颜色值，false为RGB模式。默认true
            });
          });
          ...
           
          ...


   
  

      
  require(["ready!","x/x-iconselect"],function(){
    var obj= require("x/x-iconselect").load("#iconselector",{
      "collapsible":true,
    }); 
  });

  ...

  
      
    

              
  require(["ready!","x/x-loading"],function(){
      var obj = require("x/x-loading").load("#loadingdiv",{
          iconStyle:"fa-spinner", 
          iconColor:"#fff", 
          iconSize:"28",
          bgColor:"#000", 
          bgOpacity:"0.5", 
          isText:true, 
          textContent:"加载ing",
      });  
  })

  ...

  


          
        

      
require(["ready!","x/x-stepbar"],function(){
  var stepbar = require("x/x-stepbar").load("#stepbar",{
    steps: [{
        //步骤名称
        title: "第一步",
        //步骤内容(鼠标移动到本步骤节点时，会提示该内容)
        content: "冰箱门打开"
        },{
        title: "第二步",
        content: "把大象塞进去"
        },{
        title: "第三步",
        content: "冰箱门关上"
        },{
        title: "第四步",
        content: "你有病么"
        },{
        title: "第五步",
        content: "你有药么"
        },{
        title: "第六步",
        content: "你吃多少"
        },{
        title: "第七步",
        content: "你有多少"
        },{
        title: "第八步",
        content: "你吃多少有多少"
        },{
        title: "第九步",
        content: "你有多少吃多少"
        }],
    onChange:function(index,data,dom,indexLast,dataLast,domLast){
      $("#stepbar_text").text(index)
      $("#stepbar_text").next().text(data.content)
    }
  })
});

...




 

      
    

            
  require(["ready!", "lib/poshytip/poshytip", "x/x-panel"], function() {

  var poshytipF = require("lib/poshytip/poshytip");

  poshytipF.popoversBox($('#asd'),"等等吧",function(){
      var str = '
';
      str += '按钮 1';
      str += '按钮 2';
      str += '我还有提示信息';
      str += '
';
      return str;
  });


  poshytipF.popoversBox($('#asd2'),"loading...",function(){
      //构建编码html
      var str = '
hello,x-panel!
';
      return str;
  },function(){
      //加载面板
      var myDiv = require("x/x-panel").load("#myDiv",{
          iconClass:"fa fa-cog fa-spin",
          title:"我是对象形式创建的面板"
      });
      //设置面板高宽
      $("#myDiv").css({
          width: "200px",
          height: "100px"
      });
  });
});

  ...

  

    这是一个气泡例子：
    hellow.........
    tip；
    还有泡芙效果，和
    泡芙效果2   
  
  
  

        
  require(["ready!","x/x-imager"], function() {
    $(".myImg").on("click",function(){
      require("x/x-imager").load(this)
    })
  });

  ...
  .myImg{
    cursor: -webkit-zoom-in;
  }
  ...

  
        
      

        
  require(["ready!", 
    "x/x-panel",
    "echarts",
    "echarts/chart/line"
    ], function() {
        var myChart = require("echarts").init($("#mychart")[0]).setOption({
            title : {
                text: '未来一周气温变化',
                subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['最高气温','最低气温']
              },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
        yAxis : [{
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }],
        series : [
        {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                {type : 'average', name : '平均值'}
                ]
            }
        }
        ]
        });
        console.log(myChart);
    });


  ...


  

    

  
  
  

      
  require(["ready!", "lib/bootstrap/bootstrap.min"],function(){
      ...
  });
      
    

      
require(["ready!","lib/sparkline/jquery.sparkline"],function(){
    /*图形的类型,共有'line' (default), 'bar', 'tristate', 'discrete', 'bullet', 'pie' , 'box' */
    // 直接读取span中的值
    $('.inlinesparkline').sparkline(); 

     // 给定值  
    var myvalues = [10,8,5,7,4,4,1];
    $('.dynamicsparkline').sparkline(myvalues);

    //给定值和参数，可以制定画图的类型以及颜色
    $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'blue'} );

    // 使用'html' 参数的话是制定数据在标签中，代替一个数组值
    $('.inlinebar').sparkline('html', {type: 'discrete', barColor: 'red'} );

    // 饼图
    $('.pie').sparkline([3,2,2], {
      type: 'pie', 
    });
    //子弹图
    $('.bullet').sparkline('html', {
      type: 'bullet', 
      
    });
    //盒子微型图表 
    $(".box").sparkline([4,27,34,52,54,59,61,68,78,82,85,87,91,93,100], {
      type: 'box'
    });
    //三态微型图表
    $(".tristate").sparkline([1,1,0,1,-1,-1,1,-1,0,0,1,1], {
      type: 'tristate'
    });
});
      
    

      
var rightmenuFactory = require("lib/rightmenu/rightmenu");
  
    //分组菜单配置
    rightmenuFactory.load('#testMenu', [
      //菜单标题
      {header: '分组一'},
      {text: '分组一菜单1'},
      {text: '分组一菜单2'},
      //分组线
      {divider: true},
      {header: '分组二'},
      {text: '分组二菜单1'},
      {text: '分组二菜单2'}
    ]);
    
    //多级菜单配置
    rightmenuFactory.load('#testMenu2', [
      //菜单标题·
      {header: '第二个测试右键菜单'},
      //每一级菜单的详细配置，subMenu是下级菜单配置，不配置则无下级菜单
      {text: '一级菜单1', subMenu: [
        {header: '一级菜单1下级展开'},
        {text: '二级菜单1', href: 'javascript:void(0)', target:'_blank', action: function(e){}}
      ]},
      {text: '一级菜单2', subMenu: [
        {text: '二级菜单2', href: 'javascript:void(0)', target:'_blank', action: function(e){}},
        {text: '二级菜单3', href: 'javascript:void(0)', target:'_blank', action: function(e){}}
      ]},
    ]);
   
    
   
...
右键点击此处 & testMenu

    
右键点击此处 & testMenu2
      
    

      
  var maskPrompt1 = require("x/x-mask-prompt").load("#body",{
        maskId:"#body",
        maskOpenType:"3",//1是载入时自动出现，2是触发按钮出现，3是混合模式，二者同时生效
        maskOpenId:"#maskOpenType-2",//maskOpenType为2的时候主动触发的标签id
        maskStep:[{
          stepId: "#prompt1",
          stepPrompt: "
提示信息1
这是网页的大标题
",
          position:"bottom",
          actionClose: function(e, that){},
          actionNext: function(e, that){}
        },{
          stepId: "#prompt2",
          stepPrompt: "
提示信息2
这是一个bootstrap自带面板的标题部分
",
          position:"bottom",
          actionClose: function(e, that){},
          actionNext: function(e, that){},
          actionPrev: function(e, that){}
        },{
          stepId: "#prompt3",
          stepPrompt: "
提示信息3
这是一个bootstrap自带面板的面板区域部分
",
          position:"bottom",
          actionClose: function(e, that){},
          actionNext: function(e, that){},
          actionPrev: function(e, that){}
        },{
          stepId: "#prompt4",
          stepPrompt: "
提示信息4
这是一个bootstrap自带面板
",
          position:"top"
        },
        {
          stepId: "#prompt5",
          stepPrompt: "
提示信息5
这是一个绝对定位的div标签
",
          position:"top",
          actionEnd: function(e, that){},
          actionPrev: function(e, that){}
        }]
        
      });
      ...
       
遮罩提示演示效果 x-mask-prompt
       ...
       
bootstrap自带面板一
       ...
       
面板区域部分 
       ...
       

         ...
       
       ...
       
测试绝对定位层的遮罩效果