前言 版本1.2.x

X-Control是一组基于JavaScript面向对象思想、遵循AMD规范的UI插件集合体,而X-Control的目标就是提高插件的可维护性与延展性、提高加载速度、并且帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。目前各项不足正已版本递增的方式不断完善。

使用须知

1.插件的引入

                
  //引入固定的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;
  });
  

                
              

2.闭包问题

              
  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
      }
  });


              
            

3.API的“试一试”功能

因为浏览器安全性限制,请使用chrome浏览器创建快捷方式配置

 --allow-file-access-from-files --disable-web-security --allow-outdated-plugins

4.bootstrap可视化布局系统

提供一个bootstrap的快速布局系统

进入可视化布局系统



布局

布局容器有5个区域: top bottom left right中间 center 。 中间区域面板是必须的,边缘的面板都是可选的。 每个边缘区域面板都可以通过方法折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。

require只需引入库"x/x-layout"

简单示例

          

  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"

注意

1.x-layout-center不用设置宽高,他的宽度与高度是根据其他部分计算得来的

2.因为父元素采用 position: absolute; 所以子元素可使用高度百分比定义

参数方法

工厂方法

目前不支持对象的方式构建实例,只支持标签定义的方式定义,工厂类提供了 get 方法获取的实例,以便api操作

获取工厂实例: var xLayoutFactory = require("x/x-layout");

方法名 方法属性 方法描述
get selector(jQuery选择器) 获取一个已有的x-layout实例

实例方法

方法名 方法属性 方法描述
hide zoneStr zoneStr:top,bottom,left,right;显示某一区域
show zoneStr zoneStr:top,bottom,left,right;隐藏某一区域
toggle zoneStr zoneStr:top,bottom,left,right;显示或隐藏某一区域
changeSize zoneStr,int zoneStr:top,bottom,left,right;改变某一区域大小
changeSizeAsAnimate zoneStr,int zoneStr:top,bottom,left,right;动画渐变的方式改变某一区域大小
changeCollapsibleMode zoneStr,int zoneStr:top,bottom,left,right;更改某一区域的收缩模式“1”(挤压),“2”(覆盖)
changeZIndex zoneStr,int zoneStr:top,bottom,left,right;更改某一区域的z-index
addDraging zoneStr zoneStr:top,bottom,left,right;增加可拖拽响应
removeDraging zoneStr zoneStr:top,bottom,left,right;删除可拖拽响应
getZoneIsHide zoneStr zoneStr:top,bottom,left,right;获取指定区域是否收起的状态
getDragingElement zoneStr zoneStr:top,bottom,left,right;获取指定区域的拖拽元素对象

区域标签属性

可以直接定义在上下左右面板的div标签属性中

标签属性名 属性值类型 描述 默认值
x-collapsible-mode string 当collapsible为true时生效提供:“1”(挤压),“2”(覆盖)两种模式 1
x-isDraging bollen 定义是否可拖动 false
x-isShowShrink bollen 定义是否显示收缩按钮 false

试一试




表格布局根据表格生成相应描述的div+css的布局。

require只需引入库x/x-layouttable

简单示例

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

宽度40% 宽度100px 自适应宽度
宽度50%
其他内容

参数方法

工厂方法

目前只支持标签定义的方式定义,插件在加载时后自动加载页面上所有class为x-layouttable的table元素

获取工厂实例: var xlayouttableFactory = require("x/x-layouttable");

方法名 方法属性 方法描述
load selector(jQuery选择器) 获取一个新的实例并加载
init selector(jQuery选择器) 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例
resize selector(jQuery选择器) 重新计算大小通过选择器
resizeAll 全部重新计算大小 .x-layouttable

标签属性

table标签属性
属性名 参数 描述 默认值
x-layouttable-outMargin number 布局最外层边距(单位为px) 10
x-layouttable-outPadding number 布局最外层内边距(单位为px) 0
x-layouttable-innerMargin number 布局内元素间距(单位为px) 10
x-layouttable-viewPadding number 布局内元素内边距(单位为px) 1
x-layouttable-outBorder boolean 是否显示布局外边框 false
x-layouttable-innerBorder boolean 是否显示布局内元素边框 false
x-layouttable-overflow boolean 是否显示布局内元素滚动条 true
style(原生的样式属性) css table上原生的css会携带到新的布局最外层div上
一般用于设置min-widthmax-width
tr标签属性
属性名 参数 描述 默认值
x-layouttable-height 像素 布局row层高(未设置时行内元素高为流式挤压、设置高度后行内元素高度为固定高度,超过了出滚动条)
x-layouttable-width 像素或百分百 布局row层宽(不建议修改) 100%
td标签属性
属性名 参数 描述 默认值
x-layouttable-height 像素 布局col层高
x-layouttable-width 像素或百分百 布局col层宽(当未设置时将自适应宽度)

实例方法

方法名 方法参数 描述
show 显示控件
hide 隐藏控件
destroy 销毁控件
resize 重新计算自适应

试一试




扩展自x-layouttable,重写默认值对象,继承了x-layouttable的所有特性。

表格布局根据表格生成相应描述的div+css的布局。并且具备响应式布局的特性,由于响应特性不建议在表格布局响应式中设置行高。

require只需引入库x/x-layouttablebootstrap

简单示例

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

...

宽度40% 宽度100px 自适应宽度
宽度50%
其他内容

参数方法

工厂方法

目前只支持标签定义的方式定义,插件在加载时后自动加载页面上所有class为x-layouttablebootstrap的table元素

获取工厂实例: var xlayouttableFactory = require("x/x-layouttablebootstrap");

方法名 方法属性 方法描述
load selector(jQuery选择器) 获取一个新的实例并加载
init selector(jQuery选择器) 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例
resize selector(jQuery选择器) 重新计算大小通过选择器
resizeAll 全部重新计算大小 .x-layouttablebootstrap

标签属性

table标签属性

继承LayoutTable,table标签属性同LayoutTable的table标签属性,新增属性如下:

属性名 参数 描述 默认值
x-layouttable-respondWidth number 响应宽度(单位px,设为0为不响应) 750
tr标签属性

继承LayoutTable,tr标签属性同LayoutTable的tr标签属性

td标签属性

继承LayoutTable,td标签属性同LayoutTable的td标签属性

实例方法

继承LayoutTable,方法同LayoutTable

试一试




扩展自x-panel,重写默认值对象,继承了x-panel的所有特性。

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和关闭按钮。

require只需引入库"x/x-panel-tabs"

简单示例

        
  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!

参数方法

工厂方法

目前支持标签定义的方式定义

获取工厂实例: var xLayoutFactory = require("x/x-layout");

方法名 方法参数 描述
load selector 获取一个新的实例并加载
init selector 获取一个新的实例
get selector 获取一个已有的x-layout实例

实例属性

继承了x-panel的属性,新增或重新定义的属性如下:

标签属性名 属性值类型 描述 默认值
x-tabsPosition string 定义选项卡的显示位置 "135px"
x-tabsWidth string 定义选项卡的宽度 "135px"
x-tabsHeight string 定义选项卡的高度 "35px"
x-title string 定义选项卡的标题
x-icon-class string 定义选项卡的图标
x-src string 定义远程数据源地址
x-id string 定义选项卡id 默认将使用uuid
x-closable string 定义选项卡是否可关闭 true
x-active string 定义了选项卡是否默认显示 true

实例方法

继承了x-panel的方法,新增或重新定义的方法如下:

方法名 方法参数 描述
add options(选项卡面板) 添加一个新选项卡面板
var test_tab = require("x/x-panel-tabs").get("#test_tab");
test_tab.add({
    title:"一个很长很长的标题",
    iconClass:"fa fw fa-pinterest-square",
    src:"http://huaban.com/boards/"+(++iiiii)
},false);
close id(面板) 关闭一个选项卡面板,'id'参数是面板对象的x-id属性,以指定要关闭的面板。
show id(面板) 展示一个选项卡面板,'id'参数是面板对象的x-id属性,以指定要展示的面板。
setTools obj(面板) 工具栏添加在面板头的右侧。
tabs 获取所有的选项卡对象
getSelected 获取当前选中的选项卡对象
isHasTab id 判断指定选项卡是否存在
refresh id(或obj) , url 刷新指定选项卡,id为选项卡id,obj为选项卡对象,url不写则刷新初始值

实例事件

事件名 事件参数 描述
onBeforeClose item 在一个选项卡被关闭之前触发,返回false将取消关闭。返回true将继续执行
onClose item 在用户关闭一个选项卡面板后触发。
onAdd item 在一个选项卡面板被添加后触发
onUpdate item 在一个选项卡面板被更新后触发(内容区域时iframe时)

选项卡面板

选项卡面板属性与x-panel组件属性的定义类似,下面是2个组件的一些公共属性。
属性名 属性值类型 描述 默认值
title string 在面板头部显示的标题文本。 null
iconClass string 设置一个16x16图标的CSS类ID显示在面板左上角。 null
fit boolean 当设置为true的时候面板大小将自适应父容器。 TRUE
src string 设置选项卡面板的 iframe src null
id string 作为选项卡面板的唯一标识,不能重复,当未设置且src有值时,src的值将作为此标识。当未设置且src未设置时,插件将生成uuid作为此标识 null

试一试




x-layout-waterfallflow瀑布流布局可以实现页面内容的自动布局,完成较为优雅的布局显示效果。

require只需引入库"x/x-layout-waterfallflow"

简单示例

        
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]);
        } 
    })
});

参数方法

工厂方法

获取工厂实例:var xWaterfallflowFactory = require("x/x-layout-waterfallflow");

方法名 方法参数 描述
load selector,option 获获取一个新的实例并加载
init selector,option 获取一个新的实例
get selector 获取一个已有的实例

实例属性

属性名 属性值类型 描述 默认值
autoResize boolean 是否自适应 true
changAsAnimate boolean 是否以动画形式展现内容 true
animateSpeed init & string 以动画形式展现时动画的速度,可选值有数值、"slow","fast","normal" 700
changBeforeStopAnimate boolean 新动画开始之前是否结束当前和队列中的动画 true
autoCoverWindow boolean 是否子自动铺满窗口(在数据足够的情况下) true
width init 设置内容宽度 200
itemClass string item 选择器类名称 "x-waterfallflow-item"
offset init 设置内容间水平间距 20
verticalOffset init 设置内容间垂直间距 20
pageCount init 定义在data模式下,每页显示的数据量 false
ajaxParmName string 定义在ajax模式下,分页参数名称
ajax object
      数据源参数:ajax
      ajax:{
          url: "#",
          parm: {
            ajaxParmName:1
          },  //分页参数
          success: function() {},
          error: function() {},
          before: function() {
              return true;//true请求,false阻断请求
          }
      }
                  
null
data array 数据源参数:静态数据,data数据格式:[{ },{ },{ },...]
drawElement itemData,itemElement(新增参数),callback 根据返回的数据自定义绘制样式和事件,
itemData为遍历出的每条数据, itemElement为遍历出的每个item的dom对象, callback用于开发者返回绘制的内容对象,
具体实现可参考示例

实例方法

方法名 方法参数 描述
reload 重新请求数据
getItemClass 获取每个item的class
getPageIndex 获取当前分页值
show 显示内容
hide 隐藏内容
toggle 切换内容显示状态
destroy 销毁对象和dom

实例事件

事件名 事件参数 描述
onLoad 内容开始加载时触发
onLoadSuccess painterCount 内容加载成功时触发,参数painterCount为当前加载成功的数据索引
onLoadError 内容加载失败时触发
onLoadComplete 全部内容加载完成时触发

注意:data和ajax数据格式要求如下


data数据格式:[{ }, { }, { }, ...]

ajax数据格式:{"total":999,"rows":[...]}

试一试




扩展自x-panel,重写默认值对象,继承了x-panel的所有特性。

手风琴插件可以主体内容的切换,实现较好的交互效果。

require只需引入库"x/x-squeezebox"

简单示例

      
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

参数方法

工厂方法

目前支持对象的方式构建实例,也支持标签定义的方式定义

获取工厂实例: var xSqueezeboxFactory = require("x/x-squeezebox");

方法名 方法属性 方法描述
load selector(jQuery选择器),option 获取一个新的实例并加载
init selector(jQuery选择器) 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例

实例属性

继承了x-panel的属性,新增或重新定义的属性如下:

属性名 属性值类型 描述 默认值 对应标签属性
direction string 手风琴内容区展开方向,可选值为top,bottom,left,right bottom x-direction
isOnly boolen 手风琴是否唯一展开 true x-isOnly
content string 手风琴展开的内容(html格式) x-content
themeStyle string 定义主题色彩,
可选值有defaultprimaryinfosuccess
dangerinverselink
default x-themeStyle
leftWidth string (重定义)面板左侧宽度,direction为right时可用 40px x-left-width
rightWidth string (重定义)面板右侧宽度,direction为left时可用 40px x-right-width

实例方法

继承了x-panel的方法,新增或重新定义的方法如下:

方法名 方法参数 描述
add data 添加一个新的手风琴面板,方法示例如下:
mySqueezebox.add({
   isCollapse:true,
   themeStyle:"warning",
   title : "X-Control Four" ,
   content:"X-Control Four content"
})
remove arg 删除指定的手风琴面板,arg可选值有id(面板id),title(面板标题),index(面板索引)
collapse arg 收缩指定的手风琴面板,arg可选值有id(面板id),title(面板标题),index(面板索引)
expansion arg 展开指定的手风琴面板,arg可选值有id(面板id),title(面板标题),index(面板索引)
collapseToggle arg 切换指定的手风琴面板的折叠状态,arg可选值有id(面板id),title(面板标题),index(面板索引)
getPanel arg 获取指定的手风琴面板,arg可选值有id(面板id),title(面板标题),index(面板索引)
getSelected 获取被选择的面板
on callbackName, fn 添加事件监听函数
hide 隐藏手风琴
show 显示手风琴
destroy 销毁手风琴对象和dom

实例事件

继承了x-panel的事件,新增或重新定义的事件如下:

事件名 事件参数 描述
onSelect obj 当一个伸缩面板被选择时触发。
onAdd obj 在一个新面板被添加时触发。
onBeforeRemove obj 在一个面板被删除前触发。需要返回值 true 或 false
onRemove obj 在一个面板被删除时触发。
onExpansion obj 在一个面板展开时触发。
onCollapse obj 在一个面板收起时触发。

试一试




面板&窗口

面板作为承载其它内容的容器。这是构建其他组件的基础(比如:窗口等)。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

面板定义了五个区域,可以通过属性配置需要显示的区域,并通过方法获取五个区域的dom

关于面板大小可以使用fit自适应(在fit模式下可使用top bottom left right 来控制面板位置),也可以自己通过css来设置宽高。

require只需引入库"x/x-panel"

简单示例

        

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

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

  ...

  
hello,x-panel!

参数方法

工厂方法

目前支持对象的方式构建实例,也支持标签定义的方式定义

获取工厂实例: var xPanelFactory = require("x/x-panel");

方法名 方法属性 方法描述
load selector(jQuery选择器),option 获取一个新的实例并加载
init selector(jQuery选择器) 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例

实例属性

属性名 属性值类型 描述 默认值 对应标签属性
title string 在面板头部显示的标题文本。 null x-title
iconClass string 设置一个16x16图标的CSS类ID显示在面板左上角。 null x-icon-class
tools array

工具栏添加在面板头的右侧。值为:数组。

var panel = PanelFactory.load(selector,{

  tools:{

    butt1:{

      iconClass:'icon-add',

      text:'添加',

      click:function(e){

        alert('添加')

      }

    },

    butt2:{

      iconClass:'icon-save',

      text:'保存',

      click:function(e){

        alert('保存')

      }

    }

  }

});

null
collapsible boolean 定义是否显示可折叠按钮。 FALSE x-collapsible
isCollapse boolean 定义面板默认是否收起 FALSE x-isCollapse
maximize boolean 定义是否显示最大化或还原按钮 FALSE x-maximize
closable boolean 定义是否显示关闭按钮。(当fit为TRUE时,closable会强制设置为FALSE) FALSE x-closable
head boolean 是否显示面板头部 TRUE x-head
src string 从URL读取远程数据并且显示到面板。注意:内容将不会被载入,直到面板打开 null x-src
foot boolean 是否显示面板底部 FALSE x-foot
left boolean 是否显示面板左侧 FALSE x-left
leftWidth init 面板左侧宽度 FALSE x-left-width
right boolean 是否显示面板右侧 FALSE x-right
rightWidth init 面板右侧宽度 FALSE x-right-width
customTools string 自定义面板头部内容,可选值为id或class属性 x-customTools
fit boolean 根据父元素最大化(当fit为TRUE时,closable会强制设置为FALSE) FALSE x-fit

实例事件

事件名 事件参数 描述
onLoad 当绘制结束时
onIframeLoad 在加载url时触发。
onSetTitle oldTitle, newTitle 在setTitle()方法调用完成时触发
onRefresh oldSrc, newSrc 在refresh()方法调用完成时触发
onMaximize 在maximize()方法调用完成时触发
onRestore 在restore()方法调用完成时触发
onResize 在resize()方法调用完成时触发
onCollapse 在collapse()方法调用完成时触发
onExpansion 在expansion()方法调用完成时触发
onDestroy 在面板被关闭时触发

实例方法

方法名 方法参数 描述
load 当需要加载且第一次加载时调用
on 事件名称 注册事件
举例: obj.on("onRestore",fn)
off 事件名称和函数指针 移除on注册的事件,fn为可选参数
举例: obj.off("onRestore",fn)
setTitle string 设置面板头的标题文本。
show 打开
hide 关闭(隐藏)
getAreaElement 参数可选为leftrighttopbottomcenter
如果无参数则返回所有区域的对象
获得指定区域的dom,返回值为null则区域不存在
destroy 销毁
refresh string 刷新面板来装载url
maximize 最大化
restore 最大化还原
resize 重新计算
collapse 折叠
expansion 折叠还原

试一试




扩展自x-panel,重写默认值对象,继承了x-panel的所有特性。

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,最大化和关闭。它的内容通过src属采用iframe动态加载。

require只需引入库"x/x-window"

简单示例

          
  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();
                  }
              }
          }
      });
    })
  });

  ...

  

  
  

参数方法

工厂方法

目前支持对象的方式构建实例,不支持标签定义的方式定义

获取工厂实例: var xWindowFactory = require("x/x-window");

方法名 方法属性 方法描述
load option 获获取一个新的实例并加载

实例属性

窗口继承了x-panel的属性,窗口新增或重新定义的属性如下:

属性名 属性值类型 描述 默认值
windowClass string 窗口风格样式:
x-panel-default、x-panel-primary、x-panel-success、
x-panel-info、x-panel-warning、x-panel-danger
null
modal boolean 定义窗口是否为模态模式 true
windowId string 定义窗口的id值。非模态模式时为必须定义值。(即modal=false时,必须定义) null
resizable bollean 定义窗口是否可缩放 false
minimize bollean 定义窗口是否是否显示最小化按钮 false
width string 设置窗口宽度,支持px与百分比 null
height string 设置窗口高度,如果父元素采用position: absolute;布局,高度则可以使用百分比 null
isDrag boolean 是否可拖动 TRUE
isResizable boolean 是否可修改大小 false
isCenter boolean 是否居中显示(不建议修改) TRUE
modalTools array

工具栏添加在窗口面板底部的右侧。值为:数组。

var xWindow = xWindowFactory.load({

  modalTools:{

    butt1:{

      btnClass:'btn btn-info',

      iconClass:'icon-add',

      text:'添加',

      click:function(e){

        alert('添加')

      }

    },

    butt2:{

      btnClass:'btn btn-danger',

      iconClass:'icon-save',

      text:'保存',

      click:function(e){

        alert('保存')

      }

    }

  }

});

null

实例事件

窗口继承了x-panel的事件,新增或修改的事件如下。

事件名 事件参数 描述
onDrawFinish containerElement 当绘制(渲染)完成时调用 containerElement:窗口渲染的容器dom对象

实例方法

窗口继承了x-panel的方法,新增或重新定义的方法如下:

方法名 方法参数 描述
load 当需要加载切第一次加载时调用
redraw option 根据option重新渲染绘制组件,参数option 会与 内部option进行合并
destroy 销毁窗口面板与窗口遮罩
hcenter 仅水平居中窗口。
vcenter 仅垂直居中窗口。
center 将窗口绝对居中。
minWindow callback(非必须) 将窗口以小窗口展示,callback为执行完后的回调 obj.minWindow(function(){
    //doSomthing
})
maxWindow callback(非必须) 将小窗口以原始窗口展示,callback为执行完后的回调 obj.maxWindow(function(){
    //doSomthing
})
checkExistsminWindow 获取当前窗口是否被最小化
getDefaultToolsBtn btnKey 根据btnKey获取按钮jQuery对象,未找到则返回null
hide 隐藏当前窗口
show 显示当前窗口
toggle 切换当前窗口显示/隐藏状态

试一试




扩展自x-window,重写默认值对象,继承了x-window的所有特性。

消息窗口提供了不同的消息框风格,包含alert(提示框), confirm&prompt(对话框)。

require只需引入库"x/x-window-messager"

简单示例

                    
  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);
          }
          
        });
      });
  });

  ...

  

        
      

参数方法

工厂方法

目前支持对象的方式构建实例,不支持标签定义的方式定义

获取工厂实例:var xWindowMessagerFactory = require("x/x-window-messager");

方法名 方法参数 描述
alert String,function,String 模仿js-alert,参数:
1.提示信息
2.回调function()
2.提示框类型 define、primary、 success、info、 warning、danger
confirm String,function,String
模仿js-confirm,参数:
1.提示信息
2.回调
  function(boolean)
3.提示框类型 
  define、primary、 
  success、info、 
  warning、danger
                
prompt String,String,function,String
模仿js-prompt,参数: 
1.提示信息
2.默认值
3.回调
  function(status,newValue,oldValue)
  *status===true 时为确认按钮 
  *status===false 时为取消按钮 
4.提示框类型 
  define、primary、 
  success、info、 
  warning、danger
                

试一试




菜单

菜单可以在多种元素上使用,例如a标签,div标签等。

require只需引入库"x/x-menu"

简单示例

          
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 
                    });
  });
});
...



      
    

参数方法

工厂方法

目前支持对象的方式构建实例,不支持标签定义的方式定义

获取工厂实例: var xMenuFactory = require("x/x-menu");

方法名 方法参数 描述
load selector 获取一个新的实例并加载
init selector 获取一个新的实例

实例属性

属性名 属性值类型 描述 默认值
hasContent boolean 设置在菜单有子菜单的时候是否有图标提示 TRUE
menuWidth int 设置每个菜单的长度 160
textOverflow boolean 设置菜单内的文字如果超出长度是否已省略号显示 TRUE
fixed boolean 设置菜单不会被父元素或者布局元素覆盖,默认false,不开启 FALSE
showTitle boolean 设置菜单是否有内容气泡提示框 FALSE
menuDirection String 设置子菜单弹出时方向是左还是右 "right"
showStyle String 设置菜单弹出时的动画效果,默认为none无效果,slide-滑动,fade-淡入 "none"
shadow boolean 设置菜单是否有阴影效果 TRUE
menuWidthAuto boolean 如果按钮的长度大于160时,菜单自适应按钮长度 FALSE

实例事件

事件名 事件参数 描述
action none action:function(node,li){
    //菜单每一行点击后的回调,返回值为node,li。分别为当前点击的节点(node)对象和dom对象
}
注意:该回调方法要在配置中的data属性中的每个节点配置中写。
onDrawFinish none onDrawFinish:function(){
    //当绘制结束时
}
onClick nodeData,dom 在菜单项被点击的时候触发。 onClick:function(nodeData,dom){
    //点击事件
}
onShow dom 在菜单显示之后触发。 onShow:function(dom){ //在菜单显示之后触发。 }
onHide dom 在菜单隐藏之后触发。 onHide:function(dom){ //在菜单隐藏之后触发。 }

实例方法

方法名 方法参数 描述
show 显示菜单方法
hide 隐藏菜单方法
destroy 销毁方法
redraw array 重绘方法
该方法需要传入一个新的option参数

试一试




表格与树

扩展自x-panel,重写默认值对象,继承了x-panel的所有特性。

DataGrid以表格形式展示数据,并提供了丰富的选择、排序和编辑数据的功能支持。DataGrid的设计用于缩短开发时间。

require只需引入库"x/x-panel-datagrid"

简单示例

          
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
            }
          },
          
        });
  });

  ...

参数方法

工厂方法

获取工厂实例: var xDatagridFactory = require("x/x-panel-datagrid");

方法名 方法参数 描述
load selector,option 获取一个新的实例并加载
init selector,option 获取一个新的实例

实例属性

继承了x-panel的属性、事件与方法,新增或重新定义的属性如下:

属性名 属性值类型 描述 默认值
reset boolean 是否显示刷新按钮 true
refresh boolean 是否显示复位(复位至表格最初)按钮 true
search boolean 是否显示搜索框 true
lock boolean 是否显示列锁定按钮 true
visible boolean 是否显示列可见按钮 true
grid object 表格数据option对象(详见表格grid属性说明) null

表格grid属性

属性名 属性值类型 描述 默认值
class String 表格css样式 null
editable boolean 设置grid是否可编辑 false
headerResize boolean 设置grid是否可通过拖动头部调整大小 true
footColumns boolean grid是否显示合计列 false
complexTableHead array

参数array表示复杂表头的行数,每个元素表示一行
子元素为要展示的列,类型为object,其中的属性为td的原生属性

示例: complexTableHead:[ [ {colspan:1,rowspan:2,title:"测试",style:"text-align:center"}, {colspan:3,title:"测试",style:"text-align:center"}, {colspan:3,title:"测试",style:"text-align:center"}, {colspan:3,title:"测试",style:"text-align:center"}, ], [ {colspan:2,title:"测试",style:"text-align:center"}, {colspan:1,title:"测试",style:"text-align:center"}, {colspan:5,title:"测试",style:"text-align:center"}, {colspan:2,title:"测试",style:"text-align:center"}, ] ],
null
checkOnSelect boolean 如果为true,当用户点击行的时候该复选框就会被选中或取消选中。
如果为false,当用户仅在点击该复选框的时候才会被选中或取消。
false
pageable object
  包含两个参数 'pageNum','rowsCount'用于设置获取某页数据以及数据量
  pageable: {
  pageNum: 1,
  rowsCount: 5
}
null
data array 数据源参数:静态数据 null
sync boolean 设置数据请求模式 false
ajax object
              数据源参数:ajax
              ajax:{
              url: "#",
              parm: {},
              success: function() {},
              error: function() {},
              before: function() {
              return true;//true请求,false阻断请求
            }
          }
        
null
columns array 列配置(详见列配置属性) null
tree object
        tree:{
          id:"id",//树形数据解析id
          pid:"parentId",//树形数据解析pid
          openAll:false,//设置是否默认打开全部节点
        }
      
null

columns(列配置)

属性名 属性值类型 描述 默认值
title String 列标题文本 null
field String 列字段名称 null
formatter function
//列绘制前可以修改列中显示的value
formatter: function(columnData, rowData, rowIndex) {
  return "hello" + columnData;
}              
            
null
render function
//列头绘制后,可修改本<td>dom对象
render: function(tdElement, column, row, rowIndex) {
  //获取单例jQuery
  var jquery = require("jquery");
  jquery(tdElement)
    .css("color", "#6f5499")
    .prepend(
      jquery("<i>", {
        "class": "fa fa-info-circle",
        "style": "margin-right:5px;"
      })
    );
}       
        
null
class String 列css类型 null
attr String 列html属性 null
serialNumber boolean 设置当前列是否为序号列 FALSE
checkRow boolean 设置当前列是否为多选功能列 FALSE
lock boolean 设置当前列是否锁定 FALSE
hidden boolean 设置当前列是否隐藏 FALSE
sort Array 设置当前列的排序方式,如["desc","asc"]
header object
标题列配置,可以对指定列的标题栏进行详细设置例:
header:{
  formatter: function(value) {
    //列头绘制前可以修改列中显示的value
    return value;
  },
  render: function(th) {
    //列头绘制后,可修改本< th >  dom对象
  }
}

  
null
foot object
//按照如下方式配置数据表格合计列
foot:{
  clazz: "text-center",
  attr: {
    "x-data": "some thing"
  },
  formatter: function(rowList) {
    var count = 0;
    if(rowList){                    
      for (var i = 0; i < rowList.length; i++) {
        var row = rowList[i];
        var data = parseInt(row.columns.workNum.data);
        count += data;
      }
    }
    return count;
  },
  render: function(th) {

  }
}
  
null
editor object 参照下面的editor子项配置表
例:
        
editor:{
  //目前可用类型:“checkbox”、“text”、“select”、“number”
  type:"checkbox",
  //当控件初始化数据时会调用此方法
  onSetValue:function(value,e){
    return value==1?true:false;
  },
  //当控件同步表格数据时会调用此方法
  onGetValue:function(value,e){
    return value?1:0;
  },
  //当控件加载时会调用此方法
  onLoad:function(e){
  },
  //如何需要的控件type中没有提供,可在此方法中自行定义
  init:function(e,change){
    return [DOMElementObject];
  },
  //系统自带的控件需要的某些配置项
  option:{

  }
}
      
null
treeIndicator boolean 配置当前列是否已树形图的样式显示 false

editor 子项配置

名称 属性值类型 描述 默认
type string x-control默认提供几种编辑器可直接使用,可参照下面的列表 undefined
onSetValue function 当设置编辑器初始值的时候会触发这个事件
onGetValue function 当表格从编辑器中获取值的时候会触发这个事件
onLoad function 当编辑器加载的时候会触发这个事件
init function

此回调函数在用户没有设置"type"项的时候会生效
允许自定义编辑器,用户可以在指定的位置自己绘制一个编辑器
此函数会传回来三个参数,init(editor[object],push[function],listener[object]);
editor:
表示当前编辑器的对象
push:
是一个函数,当数据准备好的时候,可以调用这个函数把数据推送到表格以同步
listener:
一个监听器对象,内包含两个回调函数in和out,in通过第一个参数传递回来表格发送给编辑器的数据, out返回准备好要发送给表格的数据

type 子项配置可选值以及对应的option

type option
text N/A
checkbox N/A
select
option:{
  id:"id",
  text:"text",
  ajax:{},
  data:[{}]
}
              
number N/A
combotree
option:{
  icon:true,
  id:"name",
  text:"name",
  checkbox:true,
  select:false,
  ajax:{
    url:""
  }
}
              
date
option:{
  dateFmt:"yyyy-MM-dd HH:mm:ss",
  isShowWeek:true
}
              

实例事件

实例事件的使用方式有两种

一种是在配置中写入具体操作,运行时调用事件。使用方法如下表

一种是通过实例对象调用,传入特定事件名称。每个事件都可以多次调用。使用方法与详细解释见Grid实例事件调用详解

事件名 事件参数 描述
onCheck rowIndex, rowData, rowElement 在用户勾选一行的时候触发,参数包括:
rowIndex:点击的行的索引值,该索引值从0开始。
rowData:对应于点击行的记录。
rowElement:对应于点击行的元素。
onUncheck rowIndex, rowData, rowElement 在用户取消勾选一行的时候触发,参数包括:
rowIndex:点击的行的索引值,该索引值从0开始。
rowData:对应于点击行的记录。
rowElement:对应于点击行的元素。
onCheckAll rowData, rowElement 在用户勾选所有行的时候触发。
rowData:对应于勾选行的记录。
rowElement:对应于勾选行的元素。
onUncheckAll rowData, rowElement 在用户取消勾选所有行的时候触发。
rowData:对应于取消勾选行的记录。
rowElement:对应于取消勾选行的元素。
onSortColumn sort, order 在用户排序一列的时候触发,参数包括:
sort:排序列字段名称。
order:排序列的顺序(ASC或DESC)"
onSelect rowIndex, rowData, rowElement 在用户选择一行的时候触发,参数包括:
rowIndex:选择的行的索引值,索引从0开始。
rowData:对应于所选行的记录。
rowElement:对应于点击行的元素。
onLoadSuccess this 在Grid加载完毕后触发的事件:
this:当前的实例对象。

Grid实例事件调用详解

使用这种方式进行实例事件的调用可以多次调用同一个事件,并且事件之间互不影响。同一个事件可以被调用多次,并执行多种不同的操作,满足复杂业务需求。

通过实例对象调用的实例事件写法是t1.xDatagrid.on("onCheck",fn);

t1是实例对象,xDatagrid是固定语法,"onCheck"是实例事件的事件名称,fn是具体的方法对象。通过调用的实例事件也能返回相应参数,事件名称和事件参数见上表。

如果需要删除实例事件则使用t1.xDatagrid.off("onSelect",fn)t1.xDatagrid.off("onSelect")这两种方式来进行事件的删除。

如果在使用off方法时,只传入实例事件名称,而不传入具体方法对象则删除所有的实例方法

实例方法

方法名 方法参数 描述
reload arg(ajax对象或者data), callback 刷新方法
showColumn field 显示列
hideColumn field 隐藏列
toggleColumnVisible field 切换列显示
lockColumn field 锁定列
unlockColumn field un锁定列
toggleColumnLockable field 切换列锁定
flip pageNum, rowsCount, callback 分页模式下跳转
getData N/A 返回加载完毕后的数据。
如果数据有新增和修改,一同返回
getRows N/A 返回当前页的所有行对象。
getChecked N/A 返回在复选框被选中的所有行对象
getSelected N/A 返回被选中的行对象,如果没有选中的行则返回null。
getRowByIndex index 通过索引号返回对应的行数据
clearSelections N/A 清除所选择的行。
clearChecked N/A 清除所有勾选的行。
selectRow index 选择一行,行索引从0开始。
selectRecord iname, ivalue 通过标识值参数选择一行。如果传入的标识值不是唯一值,则返回第一个匹配的记录
checkAll N/A 勾选当前页中的所有行。
uncheckAll N/A 取消勾选当前页中的所有行
checkRow index 勾选一行,行索引从0开始。
uncheckRow index 取消勾选一行,行索引从0开始。
getRowDataListByState state 返回对应类型的数据
参数state为传入数据类型参数,有"create"新增,"update"修改,"delete"删除
getRowListByState state 返回对应类型的对象
参数state为传入数据类型参数,有"create"新增,"update"修改,"delete"删除

实例方法-编辑表格时使用

方法名 方法参数 描述
addRow rowData 新增一行
参数rowData为行数据
如果rowData有值,则将该值新增到表格末尾处
如果rowData无值,进插入一空行,则传入{}即可
insertRow rowData,index 插入一行
参数rowData为行数据。参数index为插入到那行的行号
参数rowData介绍同addRow方法
deleteRow rowData 删除一行
参数rowData为行数据。传入需要删除的行数据即可删除该行
moveRow rowData 移动一行
参数rowData为行数据。参数index为移动到那行的行号
updateRow rowData 更新一行
参数rowData为行数据。传入新的行数据即可更新

全局实例事件

全局实例方法:在assets/app路径下的x-datagrid-listen.js是一个全局监听DataGrid的实例事件。用户在其中可以自定义业务逻辑,定义好的逻辑会在DataGrid加载成功后全局调用

方法名 方法参数 描述
onLoadSuccess grid 在DataGrid加载成功调用
参数grid为实例对象

数据表格中row对象的说明

row: 此对象内含有描述当前行的一些信息,如select状态和check状态等等 如要获取数据,请调用 row.getData()方法

数据格式

{"total":999,"rows":[...]}

试一试




树控件在web页面中一个将分层数据、扁平化数据或者两者的混合数据以树形结构进行显示。它提供用户展开、折叠、单选多选等功能。它也将作为其他树形结构控件的基类,如:菜单、树形下拉等。

require只需引入库"x/x-treeview"

简单示例

        
  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 xTreeFactory = require("x/x-treeview");

方法名 方法参数 描述
load selector,option 获取一个新的实例并加载
init selector 获取一个新的实例
get selector 获取一个已有的x-treeview实例

实例属性

属性名 属性值类型 描述 默认值
id String 数据id项 id
pid String 数据pid项 pid
text String 数据text项 text
icon boolean 是否显示图标 FALSE
checkbox boolean 是否可多选 FALSE
select boolean 是否可选择 TRUE
cascade boolean 是否可以级联选择 TRUE
data array 数据源参数:静态数据 null
openAll boolean 设置当树形控件加载时是否打开所有节点 false
generaNodelIconClass string 全局设置树形图控件的缺省一般图标 fa fa-fw fa-file
parentNodeIconClass string 全局设置树形图控件的缺省容器节点图标 fa fa-fw fa-folder
openParentNodeIconClass string 全局设置树形图控件的缺省容器节点打开状态下的图标 fa fa-fw fa-folder-open
unclosedNodeIndicatorClass string 全局设置每个节点前面的指示器图标,在非关闭状态下的 fa fa-fw fa-angle-down
closedNodeIndicatorClass string 全局设置每个节点前面的指示器图标,在关闭状态下的 fa fa-fw fa-angle-right
ajax object
                数据源参数:ajax
                ajax:{
                url: "#",
                parm: {},
                success: function() {},
                error: function() {},
                before: function() {
                return true;//true请求,false阻断请求
              }
            }
          
null

实例事件

事件名 事件参数 描述
onLoad treeObject 当控件加载完成时
onClick event 点击节点时
onSelected node(详见node详解) 当节点被选中
onChecked node(详见node详解) 当节点被勾选

node详解

element - 节点对应的li的原生dom对象
data - 节点数据
parent - 父节点的node对象
children - 子节点的node对象集合;
checked - 三种勾选状态 UNCHECKED: 0,CHECKED: 1,INDETERMINATE: 2
selected - boolean 表示是否选中

实例方法

方法名 方法参数 描述
load option 加载
reload arg(ajax对象或者data), callback 刷新方法
getSelectedNode 获得选中的节点对象
getCheckedNodeList 获得勾中的节点对象数组
getNodeList callback 获取全部的对象数组
filter keyword,callback 过滤树节点

试一试




扩展自x-data-source,重写默认值对象,继承了x-data-source的所有特性。

该控件可以让用户按照需求制作相应的表格或者类似表格的页面。该控件通过ajax服务器返回数据的数据从而让用户简单快捷地自定义分页功能和搜索功能

require只需引入库"x/x-datagrid-custom"

简单示例

    
 

 
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){
    //如果用户有自定义的方法,可以在此处回调编写相应方法       
    }
    ...
      
  
    

参数方法

工厂方法

目前支持对象的方式构建实例,不支持标签定义的方式定义

获取工厂实例: var datagridCustomFactory = require("x/x-datagrid-custom")

方法名 方法属性 方法描述
load selector(jQuery选择器),option 获取一个新的实例并加载
init selector(jQuery选择器),option 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例

实例属性

继承了x-data-source的属性,新增或重新定义的属性如下:

实例属性分为两大部分,搜索配置部分分页配置部分。

属性名 属性值类型 描述 默认值
empty Boolean 绘制时表格时是直接追加还是先删除再追加
true:先删除,再追加
false:直接追加
true
dataname String 通过ajax请求获取数据的时候,返回的数据集合name。
可以不配置,默认为"row"。
该配置项主要用于返回数据格式不标准的时候使用。搜索,和分页无法在返回数据格式不标准的情况下使用
true
search Object 搜索配置部分,
详情见搜索配置表
            
null
pageable Object 分页配置部分
详情见分页配置表
            
null

search实例属性

搜索配置部分的属性

属性名 属性值类型 描述 默认值
searchInputId String

绑定的搜索输入框的id字符串

用户可以自行将搜索输入框的id绑定在该处

undefined
searchId String

绑定的搜索按钮的id字符串

用户可以自行将搜索按钮的id绑定在该处

如果用户希望自由调用搜索方法,请看“实例属性的实例事件”中的“drawFn”详解

undefined

pageable实例属性

分页配置部分的属性

属性名 属性值类型 描述 默认值
pageNum int

当前页数

1
rowsCount int

每页行数,在本地数据下无效

5
preId String

绑定的上一页触发按钮的id字符串

用户可以自行将上一页触发按钮的id绑定在该处

undefined
nextId String

绑定的下一页触发按钮的id字符串

用户可以自行将下一页触发按钮的id绑定在该处

undefined
jumpInput String

绑定的跳页的页数输入框的id字符串

用户可以自行将跳页的页数输入框的id绑定在该处

undefined
jumpBtn String

绑定的跳页触发按钮的id字符串

用户可以自行将跳页触发按钮的id绑定在该处

如果用户希望自由调用跳页方法,请看“实例属性的实例事件”中的“drawFn”详解

undefined
rowsCountInput String

绑定的每页行数输入框的id字符串

用户可以自行将每页行数输入框的id绑定在该处

undefined
rowsCountBtn String

绑定的每页行数触发按钮的id字符串

用户可以自行将每页行数触发按钮的id绑定在该处

undefined

实例属性的实例事件

事件名 事件参数 描述
drawHtml rowData,pageNum,rowsCount,total

绘制html部分的回调,需要返回一个html字符串给控件,用户可以在此处绘制需要的html字符串。

回调返回参数:rowData:数据部分、pageNum:当前页数、rowsCount:每页行数、total:数据总数

当rowData为ajax数据时,rowData为服务器返回数据,pageNum,rowsCount,total为服务器返回参数

当rowData为本地数据时,rowData为全部数据,pageNum,rowsCount,total为空

写法如下:

drawHtml:function(rowData,pageNum,rowsCount,total){
  ...
}
            
drawFn jqDomHtml,painter

html绘制完成后,用户自定义的方法回调,用来编写自定义方法

jqDomHtml是绘制完毕后的jquery文档对象

painter是返回的绘制器对象。该绘制器对象有两个公开的方法供用户使用,分别是跳页方法和搜索方法。方法会将用户的请求参数传入服务器并将对应值返回给用户

写法如下:

drawFn:function(jqDomHtml,painter){
  ...
}
            

绘制器方法如下:

drawFn:function(jqDomHtml,painter){
  painter.externalJump(pageNumber);//pageNumber是跳页的页数
  painter.externalSearch(keyword);//keyword是搜索的关键字
}
            

search实例属性的实例事件

事件名 事件参数 描述
onSearchClickBefore keyword

点击搜索按钮前回调

keyword为输入的向服务器发送的搜索请求关键字

onSearchClickAfter rowData

点击搜索按钮后回调

rowData为服务器返回的搜索数据

pageable实例属性的实例事件

事件名 事件参数 描述
onPrevClickBefore pageNum, rowsCount, total

点击上一页之前回调

pageNum:当前页数,rowsCount:每页条目数,total:数据总数

pageNum、rowsCount、total为的向服务器发送的分页请求

onPrevClickAfter rowData

点击上一页之后回调

rowData:数据部分

rowData为服务器返回的分页数据

onNextClickBefore pageNum, rowsCount, total

点击下一页之前回调

pageNum:当前页数,rowsCount:每页条目数,total:数据总数

pageNum、rowsCount、total为的向服务器发送的分页请求

onNextClickAfter rowData

点击下一页之后回调

rowData:数据部分

rowData为服务器返回的分页数据

onJumpClickBefore pageNum, rowsCount, total

跳页之前回调

pageNum:当前页数,rowsCount:每页条目数,total:数据总数

pageNum、rowsCount、total为的向服务器发送的分页请求

onJumpClickAfter rowData

跳页之后回调

rowData:数据部分

rowData为服务器返回的分页数据

onSetRowsClickBefore pageNum, rowsCount, total

设定每页显示多少条之前回调

pageNum:当前页数,rowsCount:每页条目数,total:数据总数

pageNum、rowsCount、total为的向服务器发送的分页请求

onSetRowsClickAfter rowData

设定每页显示多少条之后回调

rowData:数据部分

rowData为服务器返回的分页数据

实例方法

继承了x-panel的方法,新增或重新定义的方法如下:

方法名 方法属性 描述
show none 显示
hide none 隐藏
resize none 重新计算大小
redraw option 根据option重新渲染绘制组件,参数option 会与 内部option进行合并
destroy none 销毁控件

数据格式

{"total":999,"rows":[...]}

试一试




表单

x-form-validate提供了各种方法来序列化、校验表单字段。

require只需引入库"x/x-form-validate"

简单示例

          
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("成功!");
                ...
            }
        });
    }
});

... 

参数方法

工厂方法

获取工厂实例:var xFormValidateFactory = require("x-form-validate");

方法名 方法参数 描述
init option 获取一个新的表单处理实例

实例属性

属性名 属性值类型 描述 默认值
directionStr string 验证框弹出方向:top bottom left right right
eleType eleTypeObject 定义了表单验证元素的类型(详见eleTypeObject属性) 基础类型的定义(详见基础信息)
validatorType validatorTypeObject 定义了表单验证方法的类型(详见validatorTypeObject属性) 基础验证方法的定义(详见基础信息)

实例方法

方法名 方法参数 描述
validateForm formSelector,collback
校验表单
1.formSelector  jQuery选择器
2.collback(boolean) 回调

              
validateEle formEleSelector,collback
校验表单
1.formSelector  jQuery选择器
2.collback(boolean) 回调

              
serialize formSelector,obj,isSerializeEmpty
序列化表单为url参数
1.formSelector  jQuery选择器
2.obj 扩展数据(如同名会合并,值已逗号分隔)
3.是否序列化空项
              
serializeObject formSelector,obj,isSerializeEmpty
序列化表单为json 对象
1.formSelector  jQuery选择器
2.obj 扩展数据(如同名会合并,值已逗号分隔)
3.是否序列化空项
              

eleTypeObject属性

定义了表单验证类型。

插件默认支持三种验证类型的校验取值方法:

1.getValue($ele) 获取val值

2.getText($ele) 获取text

3.getSelectNum($ele) getSelectNum:null

可根据需要定义校验取值方法,例如:

        
  var option = {
      eleType:{
          "x-form-text":{
              getValue:function($ele){
                  return $ele.val();
              }
          },
      "x-form-textarea":{
          getValue:function($ele){
              return $ele.val();
          }
      },
      "x-form-select":{
          getValue:function($ele){
              return $ele.find("option:selected").val();
          },
          getText:function($ele){
              return $ele.find("option:selected").text();
          },
          getSelectNum:function($ele){
              return ($ele.find("option:selected"))?1:0;
          }
      },
    ..
    ..
    }
  }
  
  

validatorTypeObject属性

定义了表单验证方法。

可根据需要定义校验验证方法,例如:

        
 var option = {
    validatorType:{
        isNull:{
            eleTypeFn:"getValue",
            message:'该项内容不能为空',
            validator:function(value,para){
                return value.trim()!="";
            }
        },
    max:{
        eleTypeFn:"getValue",
        message:'该项内容长度不能大于{0}',
        validator:function(value,para){
            return value.length<=parseInt(para[0]);
        }
    },
    min:{
        eleTypeFn:"getValue",
        message:'该项内容长度不能小于{0}',
        validator:function(value,para){
            return value.length>=parseInt(para[0]);
        }
    },
  scope:{
      eleTypeFn:"getValue",
      message:'该项内容长度不能小于{0},并且不能大于{1}',
      validator:function(value,para){
          if(value.length>=parseInt(para[0])&&value.length<=parseInt(para[1])){
              return true;
          }else{
              return false;
          }
      }
  },
  isDate:{
      eleTypeFn:"getValue",
      message:'对不起,您输入的日期格式不正确!YYYY-MM-DD',
      regular:/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/
  },
  isDateTime:{
      eleTypeFn:"getValue",
      message:'对不起,您输入的日期格式不正确!YYYY-MM-DD hh:mm:ss',
      regular:/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
  },
  selectNum:{
      eleTypeFn:"getSelectNum",
      message:'对不起,您必须选择{0}个选项',
      validator:function(value,para){
          return value==para[0];
      }
  }
  ...
  ...
}
}
  
  

解释:

一个表单验证方法创建时必须实现三个属性:

1.特征方法定义:eleTypeFn

一个validatorTypeObject(表单验证方法)创建时需要指定一个eleType(表单验证类型)的特征方法。默认是getValue。指的是改验证是针对表单元素的Value值进行验证的。


2.错误信息的描述:message

描述中支持{}通配 x-form-validate 属性中定义表单验证方法的参数。



3.验证方法:有两种二选一

⑴.regular

该方法可以指定一个正则表达式来验证eleTypeFn对应的取值;

⑵.validator(value,para)

value:表示表单元素的值(eleTypeFn对应的值);

para: Array类型,表示验证使用时传递的参数 如 :在form元素的 x-form-validate 属性中定义 scope[0,10],表示该元素的长度范围为0~10。中括号中的值作为数组传递到这里;

该方法可以通过value与para自定义校验方法;


这里需要注意一点validator方法的定义规则:

return true 通过验证,return false 未通过验证。

校验类型、方法速查表

标签中x-form-validate的书写规范

        
          
        
      

1.格式:校验方法名[参数信息一,参数信息二...]<自定义的提示信息>;

2.多个校验以 “;” 分割;

3.整个x-form-validate的定义中不能包含多余的 ; [] <> 符号;

3.x-form-validate-callback为单个元素验证的回调方法,返回一个成功标志

4.如果项目需要整体扩展校验方法请在x-form-validateExtend.js中扩展。

试一试




ComboBox是一个下拉列表的控件

require只需引入库"x/x-form-combobox"

简单示例

        
            
   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
          });

      });

      
  });

  ...

  
  
    
  

参数方法

工厂方法

获取工厂实例: var xComboboxFactory = require("x/x-form-combobox");

方法名 方法参数 描述
load selector 获取一个新的实例并加载
init selector 获取一个新的实例

实例属性

属性名 属性值类型 描述 默认值
defaultNull boolean 是否有默认的空值(第一位),默认为false FALSE
newInputName String 设置新的input输入框的name和id的名称,如果设定,则选中下拉列表框内的值时,数据的id传入用户自定义的input,数据的name传入新的input。同时隐藏用户自定义的input。 如果不设定,则不生成新的input,不隐藏用户自定义的input,数据的name传入用户自定义的input。 FALSE
readonly boolean 是否只读 TRUE
showStyle String 设置菜单弹出时的动画效果,默认为none无效果,slide-滑动,fade-淡入 "none"
isCheck boolean 设置下拉菜单是否为复选菜单,默认都为单选。默认值为false FALSE
treeOption Object 设置树的设置项,继承自x-treeview

实例事件

事件名 事件参数 描述
onClickInputBefore item onClickInputBefore:function(dom){
    //暴漏的点击事件--点击输入框后,展现下拉列表之前 }
onClickInputAfter item onClickInputAfter:function(dom){
    //暴漏的点击事件--点击输入框后,展现下拉列表之后
}
onClickCombobox item onClickCombobox:function(dom){
    //暴漏的点击事件--点击下拉列表的菜单
} 返回的dom对象是Tree对象,继承自Tree。相关操作请查看Tree的API
onDrawFinish item onDrawFinish:function(){
    //当绘制结束时
}
onShow dom 在菜单显示之后触发。 onShow:function(dom){ //在菜单显示之后触发。 }
onHide dom 在菜单隐藏之后触发。 onHide:function(dom){ //在菜单隐藏之后触发。 }

实例方法

方法名 方法参数 描述
setValue id setValue方法是设置combobox的值,传入需要初始化的id字符串即可
格式:"0003"
clearSelect clearSelect方法是清空选择的combobox的值
getData getData方法返回所有的节点对象
show 显示菜单方法
hide 隐藏菜单方法
destroy 销毁方法
redraw array 重绘方法
该方法需要传入一个新的option参数
reload array 重载数据方法
该方法需要传入一个新数据

试一试




扩展自x-treeview,重写默认值对象,继承了x-treeview的所有特性。

ComboTree是一个下拉树列表的控件,包含搜索等功能

require只需引入库"x/x-form-combotree"

简单示例

        
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 xComboTreeFactory = require("x/x-form-combotree");

方法名 方法参数 描述
load selector 获取一个新的实例并加载
init selector 获取一个新的实例

实例属性

继承了x-treeview的属性,新增或重新定义的属性如下:

属性名 属性值类型 描述 默认值
defaultNull boolean 是否有默认的空值(第一位),默认为false FALSE
newInputName String 设置新的input输入框的name和id的名称,如果设定,则选中下拉列表框内的值时,数据的id传入用户自定义的input,数据的name传入新的input。同时隐藏用户自定义的input。 如果不设定,则不生成新的input,不隐藏用户自定义的input,数据的name传入用户自定义的input。 FALSE
readonly boolean 是否只读 TRUE
showStyle String 设置菜单弹出时的动画效果,默认为none无效果,slide-滑动,fade-淡入 "none"
treeOption Object 设置树的设置项,继承自treeview
search boolean 是否有搜索框,默认没有 FALSE

实例事件

继承了x-treeview的事件,新增或重新定义的事件如下:

事件名 事件参数 描述
onClickInputBefore item onClickInputBefore:function(dom){
    //暴漏的点击事件--点击输入框后,展现下拉列表之前 }
onClickInputAfter item onClickInputAfter:function(dom){
    //暴漏的点击事件--点击输入框后,展现下拉列表之后
}
onClickCombotree item onClickCombotree:function(dom){
    //暴漏的点击事件--点击下拉列表的菜单
} 返回的dom对象是Tree对象,继承自Tree。相关操作请查看Tree的API
onDrawFinish item onDrawFinish:function(){
    //当绘制结束时
}
onShow dom 在菜单显示之后触发。 onShow:function(dom){ //在菜单显示之后触发。 }
onHide dom 在菜单隐藏之后触发。 onHide:function(dom){ //在菜单隐藏之后触发。 }

实例方法

继承了x-treeview的方法,新增或重新定义的方法如下:

方法名 方法参数 描述
setValue id setValue方法是设置combotree的值,传入需要初始化的节点id的字符串即可。初始化多个值请用逗号分隔
格式:"0003"或者"0012,0004"
clearSelect clearSelect方法是清空选择的combotree的值
getData getData方法返回所有的节点对象
show 显示菜单方法
hide 隐藏菜单方法
destroy 销毁方法
redraw array 重绘方法
该方法需要传入一个新的option参数
reload array 重载数据方法
该方法需要传入一个新数据
getTreeview 获取树(Tree)对象实例

试一试




扩展自x-link-combotree,重写默认值对象,继承了x-link-combotree的所有特性。

x-link-combotree本身仅仅是对x-form-combotree之间的关系进行维护,所以本身并不进行combotree的配置工作,仅仅对combotree之间的关联关系进行配置。同时combotree的布局和排版可以自定义排版和配置。用户只需要将所有需要进行配置关联关系的combotree放在同一个选择器下即可

require只需引入库"x/x-link-combotree","x/x-form-combotree"

简单示例

      
      

          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);
                  }
                }]
            ); 
        ...
        大区: 
         国家 
        ...
      
    

参数方法

工厂方法

目前支持对象的方式构建实例,不支持标签定义的方式定义

获取工厂实例: var linkagedropFactory = require("x/x-link-combotree");

方法名 方法属性 方法描述
load selector(jQuery选择器),option 获取一个新的实例并加载
init selector(jQuery选择器),option 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例

实例属性

x-link-combotree本身仅仅是对x-form-combotree之间的关系进行维护,所有的实例属性都是为了维护x-form-combotree之间的关联关系

x-link-combotree现在支持线性关系和网状关系

属性名 属性值类型 描述 默认值 对应标签属性
father Objcet x-form-combotree的实例对象。
该实例对象为两个x-form-combotree中的父节点。
child Objcet x-form-combotree的实例对象。
该实例对象为两个x-form-combotree中的子节点。
fatherIdName String x-form-combotree实例对象中父节点的关联id,相当于主键。
用于关联x-form-combotree实例对象中子节点的关联id。
childIdName String x-form-combotree实例对象中子节点的关联id,相当于外键。
用于关联x-form-combotree实例对象中父节点的关联id。

实例事件

继承了x-form-combotree的事件,新增或重新定义的事件如下:

事件名 事件参数 描述
linkCombotreecallback thisData 当点击下拉框中选项时调用
thisData.checkData 当前点击的选项如果是单选则返回的值 thisData.selectData 当前点击的选项如果是复选则返回的值 thisData.dom 当前点击的实例对象

实例方法

继承了x-form-combotree的方法,新增或重新定义的方法如下:

方法名 方法属性 描述
show none 显示
hide none 隐藏
redraw option 根据option重新渲染绘制组件,参数option 会与 内部option进行合并
destroy none 销毁控件

试一试




扩展自x-menu,重写默认值对象,继承了x-menu的所有特性。

SearchBox是一个下拉菜单搜索框控件

require只需引入库"x/x-searchbox"

简单示例

        
               
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
          });
    });
});

  ...

    
  
 
      
    

参数方法

工厂方法

目前支持对象的方式构建实例,不支持标签定义的方式定义

获取工厂实例:var xSearchBoxFactory = require("x/x-searchbox");

方法名 方法参数 描述
load selector 获取一个新的实例并加载
init selector 获取一个新的实例

实例属性

搜索框继承了x-menu的属性,菜单新增或重新定义的属性如下:

属性名 属性值类型 描述 默认值
prompt string 设置搜索框的默认提示语句 ""
menuName string 设置搜索类型菜单的默认提示文字 "请选择"
isCheck boolean 设置搜索类型菜单是否可以复选 FALSE
searchTypeMenuId string 搜索类型框ID "x-searchbox"
isMenuBtn boolean 是否有左侧菜单按钮 TRUE

实例事件

搜索框继承了x-menu的事件,菜单新增或重新定义的事件如下:

事件名 事件参数 描述
onDrawFinish none onDrawFinish:function(){
    //当绘制结束时
}
onClick nodeData,dom 在菜单项被点击的时候触发。 onClick:function(nodeData,dom){
    //点击事件
}

实例方法

搜索框继承了x-menu的方法,菜单新增或重新定义的方法如下:

方法名 方法参数 描述
show 显示菜单方法
hide 隐藏菜单方法
destroy 销毁方法
redraw array 重绘方法
该方法需要传入一个新的option参数

试一试




引用第三方高亮编辑器控件:codemirror

使用上虽然可以按照codemirror的api使用,但是为了考虑风格的统一,XControl提供了封装过后的方法以供使用。

require只需引入库"lib/codemirror/codemirror"

简单示例

            
  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); }); ...

参数方法

工厂方法

获取工厂实例:var libCodemirrorFactory = require("lib/codemirror/codemirror");

方法名 方法参数 描述
createSql $ele,readOnly

创建一个sql高亮编辑框:

selector,option

option:{

  readOnly:false,//是否只读

  height:"200px"//高度

}

createXml $ele,readOnly

创建一个xml高亮编辑框:

selector,option

option:{

  readOnly:false,//是否只读

  height:"200px"//高度

}

createHtml selector,option

创建一个html,JavaScript,css高亮编辑框:

selector:目标元素

option:{

  readOnly:false,//是否只读

  height:"200px"//高度

}

实例方法

方法名 方法参数 描述 默认值
getValue 获取编辑器的值
setValue String 更新编辑器的值
refresh 刷新编辑器

试一试




引用第三方日期控件:My97

require只需引入库"lib/my97datepicker/my97datepicker",然后正常按照My97的api使用

在线API:http://www.my97.net/dp/demo/index.htm

简单示例

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

  ...

  




试一试




引用第三方上传控件:huploadify

使用上虽然可以按照huploadify的api使用,但是为了考虑风格的统一,XControl提供了封装过后的方法以供使用。

require只需引入库"lib/huploadify/huploadify"

简单示例

        
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);
});

...

参数方法

工厂方法

获取工厂实例:var libHuploadifyFactory = require("lib/huploadify/huploadify");

方法名 方法参数 描述
createHuploadify $ele,
fileTypes,
count,
add_callback,
delete_callback

创建一个上传控件:

$ele:目标元素

fileTypes:文件类型如:*.txt

count:上传多个文件的个数限制

add_callback:添加文件到队列的回调

delete_callback:删除文件到队列的回调

试一试




依赖第三方上传控件:webuploader

提供了单文件上传、多文件上传等功能

require只需引入库"x/x-webuploader-common"

简单示例

        
  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');
          }
        },
    });
  });
...

参数方法

工厂方法

获取工厂实例:var factory = require("x/x-webuploader-common");

方法名 方法参数 描述
load selector(jQuery选择器) 获取一个新的实例并加载
init selector(jQuery选择器) 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例

实例属性

属性名 属性值类型 描述 默认值
url string 组件上传文件的路径 ""
downloadUrl string 组件下载文件的路径 ""
inputName string 组件会根据此属性生成input ""
readOnly boolean 组件是否只读 false
operationDirection string 操作区的位置:"top","bottom" "bottom"
multiple boolean 是否开起同时选择多个文件能力 true
fileNumLimit int 验证文件总数量, 超出则不允许加入队列 null
fileSingleSizeLimit int 验证单个文件大小是否超出限制, 超出则不允许加入队列 5 * 1024 * 1024
accept arroy 指定接受哪些类型的文件
accept:[{
    title:'Images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/*'
},{
    title:'Texts',
    extensions: 'txt',
    mimeTypes: 'text/*'
}]
                        

实例事件

事件名 事件参数 描述
onDrawFinish jQuery对象,jQuery对象,object
当绘制(渲染)完成时调用
onDrawFinish:function($boxElement,$filesDiv,that){
  //$boxElement:外容器的jQuery对象
  //$filesDiv:上传队列的jQuery对象
  //that:当前组件的返回对象
}
                        
onRemove object,function
当删除文件时调用
onRemove:function(data,collback){
  //data:
    //data.id:当前文件的id
    //data.name:当前文件的name
    //data.size:当前文件的大小
  //collback(boolean);是否阻断当前删除
    //默认为collback(false);
},
                        
fn_error string,string
当出现错误时调用
fn_error:function(errorMsg,code){
  //默认:alert(errorMsg);
}
                        

实例方法

方法名 方法参数 描述
load
当需要加载切第一次加载时调用
getData
返回当前有效上传对应的对象集合:
对象参数:为id、name、size
getDataIds
返回当前有效上传对应的对象集合的id:
以“,”分割
addDefaultFileItem string,string,string
为组件动态的增加一个的上传文件
参数1:文件id
参数2:文件name
参数3: 文件size
此方法与onDrawFinish配合多用于初始化表单中上传组件的值
hide
隐藏组件
show
显示组件
destroy
销毁组件

试一试

示例

上传示例



依赖第三方上传控件:webuploader

提供了图片上传、预览、放大、旋转、切割等功能

require只需引入库"x/x-webuploader-picture"

简单示例

        
  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;//按钮位置微调
}
...

参数方法

工厂方法

获取工厂实例:var factory = require("x/x-webuploader-picture");

方法名 方法参数 描述
load selector(jQuery选择器) 获取一个新的实例并加载
init selector(jQuery选择器) 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例

实例属性

属性名 属性值类型 描述 默认值
url string 组件上传文件的路径 ""
downloadUrl string 组件下载文件的路径 ""
saveImageEditDataUrl string 图片编辑后的上传路径 ""
inputName string 组件会根据此属性生成input ""
readOnly boolean 组件是否只读 false
operationDirection string 操作区的位置:"top","bottom" "bottom"
multiple boolean 是否开起同时选择多个文件能力 true
fileNumLimit int 验证文件总数量, 超出则不允许加入队列 null
fileSingleSizeLimit int 验证单个文件大小是否超出限制, 超出则不允许加入队列 5 * 1024 * 1024
accept arroy 指定接受哪些类型的文件
accept:[{
    title:'Images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/*'
}]
                        

实例事件

事件名 事件参数 描述
onDrawFinish jQuery对象,jQuery对象,object
当绘制(渲染)完成时调用
onDrawFinish:function($boxElement,$filesDiv,that){
  //$boxElement:外容器的jQuery对象
  //$filesDiv:上传队列的jQuery对象
  //that:当前组件的返回对象
}
                        
onRemove object,function
当删除文件时调用
onRemove:function(data,collback){
  //data:
    //data.id:当前文件的id
    //data.name:当前文件的name
    //data.size:当前文件的大小
  //collback(boolean);是否阻断当前删除
    //默认为collback(false);
},
                        
fn_error string,string
当出现错误时调用
fn_error:function(errorMsg,code){
  //默认:alert(errorMsg);
}
                        

实例方法

方法名 方法参数 描述
load
当需要加载切第一次加载时调用
getData
返回当前有效上传对应的对象集合:
对象参数:为id、name、size
getDataIds
返回当前有效上传对应的对象集合的id:
以“,”分割
addDefaultFileItem string,string,string
为组件动态的增加一个的上传文件
参数1:文件id
参数2:文件name
参数3: 文件size
此方法与onDrawFinish配合多用于初始化表单中上传组件的值
hide
隐藏组件
show
显示组件
destroy
销毁组件

试一试

示例

上传示例



引用第三方富文本控件:kindeditor

使用上虽然可以按照kindeditor的api使用,但是为了考虑风格的统一,XControl提供了封装过后的方法以供使用。

require只需引入库"lib/kindeditor/kindeditor"

简单示例

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

  ...

参数方法

工厂方法

获取工厂实例:var libKindeditorFactory = require("lib/kindeditor/kindeditor");

方法名 方法参数 描述
createkindeditor selector,option

创建一个富文本编辑框:

selector:目标元素

option:{

  readOnly:false,//是否只读

  height:"200px"//高度

}

三方实例方法(如实例为:editor)

editor.readonly();//设置成只读状态

editor.readonly(false);//取消只读状态

editor.html();//取得HTML

editor.isEmpty();//判断是否为空

editor.text();//取得文本(包含img,embed)

editor.selectedHtml();//取得选中HTML

editor.html('<h3>Hello KindEditor</h3>');//设置HTML

editor.text('<h3>Hello KindEditor</h3>');//设置文本

editor.insertHtml('<strong>插入HTML</strong>');//插入HTML

editor.appendHtml('<strong>添加HTML</strong>');//添加HTML

editor.html('');//清空内容

试一试




不需要引入任何控件

美化的单选,复选,开关

按照正确结构复制即可

简单示例

          
        ... 
        
        
        
        
         
            ...  
        
        
            
        
        
        ... 

          
      

结构详解

普通单选框结构如下


    

radio由input和label组成

input的id必须和label的for对应

组合单选框结构如下

 
    

组合radio由input和label组成

input的id必须和label的for对应

组合radio的input中的class为x-special-radio x-com

组合radio的label中的class为x-special-label

普通复选框结构如下


     

checkbox由input和label组成

input的id必须和label的for对应

组合复选框结构如下

 
    

组合checkbox由input和label组成

input的id必须和label的for对应

组合checkbox的input中的class为x-special-checkbox x-com

组合checkbox的label中的class为x-special-label

开关结构如下

  
class

input的class为toggle x-special-checkbox即可

试一试




数字输入框提供了多种数字(或金额)输入方式,可对小数位数配置。

require只需引入库"lib/number/x-number"

简单示例

          
            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:'¥'//货币设定
                
              });
            });
            ...
            

...

...

参数方法

工厂方法

获取工厂实例: var xNumberFactory = require("lib/number/x-number");

方法名 方法参数 描述
load selector 获取一个新的实例并加载

实例属性

属性名 属性值类型 描述 默认值
decimals int 小数位设定,2表示两位小数 0
stepping float 按钮增值设定,设定几位小数增值,则限定数字的小数位数为几位 1
currency String 货币设定
max int 初始最大值
min int 初始最小值

实例方法

方法名 方法参数 描述
show 显示菜单方法
hide 隐藏菜单方法
destroy 销毁方法
redraw array 重绘方法
该方法需要传入一个新的option参数

试一试




星级评分提供一个简单的评分使用方法

require只需引入库"lib/star/js/star"

简单示例

        
  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){
        }
      });
    }
  });
  ....

  

参数方法

实例属性

属性名 属性值类型 描述 默认值
inputId string 隐藏的输入框id,用来存放真实数据id "starDefaultInput"
data object

创建星级评分所需要的数据。

data的数据格式为“[{text:"一般",val:"1分",id:"1"}”

“text”是评分的相关描述,可以为空,可以任意描写

“val”是评分的文字,可以为空,可以任意描写

“id”是评分的主键,不能为空,存入隐藏的input中的值为“id”

null

实例事件

事件名 事件参数 描述
onDrawFinish none onDrawFinish:function(){
    //当绘制结束时
}

实例方法

方法名 方法参数 描述
createStar selector option 获取一个新的实例并创建
setValue inputValue

设置评分

“inputValue”传入的参数为“data”中的“id”值

clearValue 清空评分
lock 锁定评分
unlock 解锁评分
show 显示菜单方法
hide 隐藏菜单方法
destroy 销毁方法
redraw array 重绘方法
该方法需要传入一个新的option参数

试一试




require只需引入库"lib/slider/slider"

简单示例

        
  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");

  });
 
    ...
    
  

参数方法

工厂方法

获取工厂实例: var sliderFactory = require("lib/slider/slider");

方法名 方法参数 描述
createSlider selector option flag 获取一个新的实例并创建
setValue factoryObj value

设置范围值

“factoryObj”为实例对象,“value”为传入的范围值,格式为“val1,val2”或者“val1”。前者是范围型滑块的传入范围值,后者为单独滑块的传入值

show factoryObj 显示菜单方法,“factoryObj”为实例对象
hide factoryObj 隐藏菜单方法,“factoryObj”为实例对象
destroy factoryObj 销毁方法,“factoryObj”为实例对象

实例方法

方法名 方法参数 描述
slider string 锁定滑块,禁止滑动,传入参数值必须为“disable”
slider string 解锁滑块,可以滑动,传入参数值必须为“enable”

实例属性

属性名 属性值类型 描述 默认值
range boolean 设置是否是范围型滑块 false
values array range设为true时,可以指定初始值,设置范围滑块的左滑块,右滑块的初始值,可以不设置。
range设为false或不设置时,不需要设置values的值。
value int 单选型滑块的初始值
range设为false或不设置时,可以设置value的值。
max int 范围最大值 100
newInputName string 隐藏起来的输入框,用来存放滑块的值
scale boolean 刻度,true则有滑块刻度 false
rest string 刻度设置(参数值“label”)。刻度分解,默认“true”,不分解为“false”,设置为“label”则显示刻度文字部分 false
prefix string 刻度设置参数值为“label”时,可以显示刻度的文字。该参数的作用是修饰刻度文字左侧,从而附加上其他自定义文字 false
suffix string 刻度设置参数值为“label”时,可以显示刻度的文字。该参数的作用是修饰刻度文字右侧,从而附加上其他自定义文字 false
labels arrary 刻度设置参数值为“label”时,可以显示刻度的文字。该参数的作用是替换刻度的文字。传入的参数以数组形式体现。
设置该参数时,建议使用min和max参数从而配合使用。
min int 范围最小值
max int 范围最大值
step int 值分解比例
vertical boolean 设置是否是竖向的滑块 false

试一试




选择的省市县文字部分会在控件生成的三个隐藏的输入框中展现,展现格式为"0:北京""0:市辖区""0:东城区"

详情部分的文字在配置中的"inputName"输入框中

省市县三级必须都配置,如果不想展现其中一级或多级,将属性"isShow"置为false即可

require只需引入库"lib/provinces-cities-address/address-linkage"

简单示例

        
  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");
    }    
  });
    
····
  

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

 

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

参数方法

工厂方法

获取工厂实例: var linkageFactory = require("lib/provinces-cities-address/address-linkage);

方法名 方法参数 描述
createAddress selector option 获取一个新的实例并创建
setValues string,string,string,string

设置默认值

分别为省名称,市/区名称,县/区名称,详细描述。省,市,县的名称必须有关联关系。指定县的必须指定市,指定市必须指定省。指定省不需要指定市,指定市不需要指定县

disabled string

禁用

禁用方法传入参数有四种,分别是“province”,“city”,“county”,“all”。即禁用省级,禁用市级,禁用县级,全部禁用

enable string

启用

启用方法传入参数有四种,分别是“province”,“city”,“county”,“all”。即启用省级,启用市级,启用县级,全部启用

实例属性

属性名 属性值类型 描述 默认值
province arrary 省配置 {}
city arrary 市/区配置 {}
county arrary 县/区配置 {}
another arrary 其他详情输入框配置 {}
another.isShow boolean 是否展现,默认false true
another.inputName string 其他详情输入框的name

省市县配置详解

InputName string 省级/市级/县级的隐藏输入框,必填
isShow boolean 省级/市级/县级是否显示,默认true true
name string 初始化展现省级/市级/县级名称
disabled boolean 省级/市级/县级是否禁用,默认为false false

实例方法

方法名 方法参数 描述
show 显示菜单方法
hide 隐藏菜单方法
destroy 销毁方法

试一试




require只需引入库"lib/color/x-color"

简单示例

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


   
  

参数方法

实例属性

属性名 属性值类型 描述 默认值
ishex Boolean 是否以16进制表示颜色值 true

实例方法

方法名 方法参数 描述
show 显示菜单方法
hide 隐藏菜单方法
destroy 销毁方法
redraw array 重绘方法
该方法需要传入一个新的option参数
setValue String 初始化方法
该方法需要传入初始化的颜色值(可以是16进制值或者rgb值)

试一试




字体图标选择器自带检索功能,可以方便的图标字体的选择,字体图标库来自Font Awesome

require只需引入库"x/x-iconselect"

简单示例

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

  ...

  
      
    

参数方法

工厂方法

目前支持对象的方式构建实例

获取工厂实例: var iconSelectFactory = require("x/x-iconselect");

方法名 方法属性 方法描述
load selector(jQuery选择器),option 获取一个新的实例并加载
init selector(jQuery选择器),option 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例

实例属性

属性名 属性值类型 描述 默认值 对应标签属性
collapsible boolen 用户选择图标后是否折叠选择器 true x-collapsible
value string 默认字体图标class "fa fa-bed" value

实例事件

事件名 事件参数 描述
onSelected value 当用户选择图标后调用,value是用户选择的图标class
onSelectedError value, $ele 当用户手动输入的图标class未在库中匹配时调用,value是用户错误的输入值,$ele时输入框的jquery对象
onSearch value 当用户搜索图标时调用,value是用户输入的搜索值
onToggleOption value 当用户切换下拉框分类内容时调用,value是用户选择的option值

实例方法

方法名 方法属性 描述
getValue none 获取用户选择的图标样式,如果用户未选择则返回undefined
setValue string 初始化图标样式class,参数为要设置的图标样式class,例如:
obj.setValue("fa fa-bed")
getData
(不建议使用,请使用getValue代替)
none 获取用户选择的图标样式,如果用户未选择则返回undefined
show none 显示选择器
hide none 隐藏选择器
destroy none 销毁选择器

试一试




其他

在加载数据或页面过程中,可能存在时间延迟,引入x-loading可以在页面整体或者部分区域加上遮罩,优化用户体验。

require只需引入库"x/x-loading"

简单示例

              
  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",
      });  
  })

  ...

  

参数方法

工厂方法

获取工厂实例:var xLoadingFactory = require("x/x-loading");

方法名 方法参数 描述
load selector,option 获获取一个新的实例并加载
init selector 获取一个新的实例
get selector 获取一个已存在的实例

实例属性

属性名 属性值类型 描述 默认值
iconStyle string 设置遮罩图标样式,可选值为fa-spinner fa-circle-o-notch fa-refresh fa-cog fa-spinner
iconColor(string-hex) string-hex 设置遮罩图标颜色,建议使用16进制颜色格式 #ffffff
iconSize int 设置遮罩图标大小 20
bgColor string(hex) 设置遮罩颜色,建议使用16进制颜色格式 #000000
bgOpacity string 设置遮罩透明度 0.5
isText boolean 定义遮罩是否有文字提示 false
textContent string 设置遮罩文字提示内容
zIndex int 设置遮罩的z-index属性 9999

实例方法

方法名 方法参数 描述
open callback 打开指定的遮罩,callback为回调
close 在指定的盒子中关闭遮罩。
isOpen 判断遮罩是否打开
redraw option 重绘遮罩
show 隐藏遮罩
hide 显示遮罩
resize 重新计算遮罩位置
destroy 销毁遮罩对象和dom

实例事件

事件名 事件参数 描述
onOpen dom 遮罩加载时触发,dom为遮罩对象
onClose dom 遮罩关闭时触发,dom为遮罩对象
onShow dom 遮罩显示时触发,dom为遮罩对象
onHide dom 遮罩隐藏时触发,dom为遮罩对象

试一试




在网站设计中,经常会用到步骤指示,做某件事一共需要几个步骤,现在正处于哪个步骤,对用户而言是非常有帮助的,不仅能让用户思路清晰,也能带给用户一种无形的激励。鉴于目前并无经典易用的类似插件,X-Stepbar就此诞生。

require只需引入库"x/x-stepbar"

简单示例

      
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)
    }
  })
});

...


 

参数方法

工厂方法

获取工厂实例: var xStepbarFactory = require("x/x-stepbar");

方法名 方法属性 方法描述
load selector(jQuery选择器),option 获取一个新的实例并加载
init selector(jQuery选择器),option 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例

实例属性

实例名 属性值类型 描述 默认值
title string 获取一个已有的实例 "title"
content string 获取一个已有的实例 "content"
isShowTip boolean 是否显示气泡title true
isCilck boolean 步骤图例区域是否可以点击 true
tipPlacement string 气泡位置:top | bottom | left | right "top"
size string 外观大小:small | large "small"
color string 配色方案:green | blue "blue"
elementClass string 联动元素的Class,插件将根据步骤控制联动元素的显示与隐藏 null
tools object 绑定按钮jQuery对象,有可能按钮不是本页面的,所以请直接传递jQuery对象
prev上一页、next下一页、submit确定按钮
tools:{
  prev:null,
  next:null,
  submit:null
}
            
steps array
步骤数据,默认title为步骤标题、content为步骤描述
如:
steps:[{
        //步骤名称
        title: "发起",
        //步骤内容(鼠标移动到本步骤节点时,会提示该内容)
        content: "实名用户/公益组织发起项目"
}]
            
null

实例事件

事件名 事件参数 描述
onDrawCompleted none 当绘制(渲染)完成时调用
onCilck index,data,dom
当点击图例区域时触发,return false 则 阻断点击后的步骤改变

index:当前步骤index 从1开始计算
data:当前步骤对应的数据对象
dom:当前步骤对应的图例区域li的dom对象
            
onChangeBefore index,data,dom,
indexNext,dataNext,domNext
当步骤发生改变之前,return false 则 阻断之后的步骤改变

index:当前步骤index 从1开始计算
data:当前步骤对应的数据对象
dom:当前步骤对应的图例区域li的dom对象
indexNext:将要改变的步骤index 从1开始计算
dataNext:将要改变的
domNext:将要改变的
            
onChange index,data,dom,
indexLast,dataLast,domLast
当步骤发生改变后

index:当前步骤index 从1开始计算
data:当前步骤对应的数据对象
dom:当前步骤对应的图例区域li的dom对象
indexLast:改变前的步骤index 从1开始计算
dataLast:改变前的步骤对应的数据对象
domLast:改变前的步骤对应的图例区域li的dom对象
            

实例方法

方法名 方法属性 描述
show none 显示
hide none 隐藏
redraw option 根据option重新渲染绘制组件,参数option 会与 内部option进行合并
destroy none 销毁控件
nextStep none 步骤流转至下一步
prevStep none 步骤流转至上一步
setStep int 步骤跳转至指定步骤(从1开始极端)
getDom int 获取指定步骤对应的图例区域li的dom对象
getElement int 获取指定步骤对应的联动元素(属性elementClass)对应的dom对象

试一试




引用第三方气泡控件:poshytip

require引入库"lib/poshytip/poshytip"后将自动加载类名为x-poshytip-title的元素的title为气泡提示显示。(无论何时添加都会加载)

使用上虽然可以按照poshytip的api使用,但是为了考虑风格的统一,XControl提供了封装过后的方法以供使用。

在线API:http://vadikom.com/demos/poshytip/

require只需引入库"lib/poshytip/poshytip"

简单示例

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

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

  poshytipF.popoversBox($('#asd'),"等等吧",function(){
      var str = '
'; str += ''; str += ''; 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   

参数方法

工厂方法

获取工厂实例:var libPoshytipFactory = require("lib/poshytip/poshytip");

方法名 方法参数 描述
popoversBox $eles,
loadingMsg,
upDataCollBack,
upDataOverCollBack

为目标元素添加一个泡芙提示。(与气泡不同之处在于泡芙内可以包含其他元素):

$eles:目标元素

loadingMsg:加载等待时的提示语

upDataCollBack:替换泡芙内容的回调方法,方法必须返回替换的内容

upDataOverCollBack:upDataCollBack执行后的回调

validateBox $eles,
msg,
directionStr

校验消息盒子:

$eles:目标元素

msg:提示语

directionStr:弹出方向( top bottom left right),默认right

show $eles,
timeout

显示消息:

$eles:目标元素

timeout:延迟秒数,(可选)

hide $eles,
timeout

隐藏消息:

$eles:目标元素

timeout:延迟秒数,(可选)

destroy $eles

删除消息:

$eles:目标元素

试一试

示例

气泡示例



可以迅速的生成图片预览,可以进行编辑上传

require只需引入库"x/x-imager"

简单示例

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

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

  
        
      

参数方法

工厂方法

方法名 方法参数 描述
load selector(jQuery选择器) 获取一个新的实例并加载
init selector(jQuery选择器) 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例
noCache selector(jQuery选择器) 如果剪裁图片后页面存在缓存,使用该方法取消缓存

实例属性

属性名 属性值类型 描述 默认值
space window(js) 生成预览图的空间,建议使用top.window window
isCut boolean 是否可切割 false
isRotate boolean 是否可旋转 false
isSubmit boolean 是否可提交 false
ajax object
数据源参数:ajax
ajax:{
  url: "#",
  parm: {},
  success: function() {},
  error: function() {},
  before: function() {
  return true;//true请求,false阻断请求
  }
}
                  
null

实例事件

事件名 事件参数 描述
onDrawCompleted none 当绘制(渲染)完成时调用
onSubmit imgElement,dataURL,rdata,allData
当提交时

function(imgElement,dataURL,rdata,allData){
  //原图dom
  imgElement
  //编辑后的流信息
  dataURL
  //返回编辑后的图片长宽信息
  rdata
  //返回编辑后的所有信息(旋转角度,剪裁坐标等)
  allData
}
              

实例方法

方法名 方法参数 描述
show 显示控件
hide 隐藏控件
destroy 销毁控件
redraw option 根据option重新渲染绘制组件,参数option 会与 内部option进行合并

试一试




图表引入三方插件ECharts

ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

ECharts符合AMD规范可与X-Control无缝融合。提供API以便查阅!

简单示例

        
  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);
    });


  ...


  

API入口

试一试




Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

require只需引入库"lib/bootstrap/bootstrap.min"

简单示例

如果需要在x-control中引入Bootstrap.js文件,请参考如下代码:

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

API入口




引用sparkline组件

sparkline是一类信息体积小和数据密度高的图表。目前它被用作一些测量,相关的变化的信息呈现的方式,如平均温度,股市交投活跃。sparkline常常以一组多条的形式出现在柱状图,折线图当中。

require只需引入库"lib/sparkline/jquery.sparkline"

官网地址 http://omnipotent.net/jquery.sparkline/

简单示例

      
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'
    });
});
      
    

参数方法

实例属性

属性名 属性值类型 描述 默认值
type string 微型图表类型 line
width string 宽度 "hover"
height string 高度 "hover"
lineColor string 线条颜色 "hover"
fillColor string 图表填充色 "hover"

API入口

试一试




递延对象

什么是递延(deferred)对象?

简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。

自jQuery1.7+出现此对象,可以作为异步协作实现的一种解决方案。

ajax操作的链式写法

      
$.ajax("test.html")
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
.always(function(){ alert("完成啦!总是执行!"); });
      
  

done()相当于success方法,fail()相当于error方法,always()相当于complete方法。采用链式写法以后,代码的可读性大大提高。

ajax同步

    
var dtd1 = $.post(".../Sys_Rsource!listAll.action", {rsourceType:'0'},function(data){}, "json");
var dtd2 = $.post(".../Sys_Rsource!listAll.action", {rsourceType:'0'},function(data){}, "json");
$.when(dtd1,dtd2).done(function(data1,data2){
  //console.log("成功!");
}).fail(function(data1,data2){
  //console.log("失败!");
}).always(function(data1,data2){
  //console.log("总是!");
});
    
  

方法同步

  
var func1 = function(){
  var dtd = $.Deferred();//新建一个递延对象
  var tasks = function(){
    a = 1;
    dtd.resolve(1);//表示成功执行的回调,返回数据1
  };
  setTimeout(tasks,1000);
  return dtd.promise();//生成不可改变状态的对象指针
};
var func2 = function(){
  var dtd = $.Deferred();
  var tasks = function(){
    b = 2;
    dtd.reject(2);//表示失败执行的回调,返回数据2
  };
  setTimeout(tasks,2000);
  return dtd.promise();
};
$.when(func1(),func2()).then(function(data1,data2){
  //注意回调中的参数,有几个方法运行了resolve就有几个返回
  //console.log("成功!");
}).fail(function(){
  //console.log("失败!");
}).always(function(){
  //console.log("总是!");
});
  

回调对象

什么是回调(Callbacks)对象?

Callbacks是JQ的一个回调对象,可以用来添加回调,执行回调,删除回调等等。并提供一些参数如once,memory,unique等来进行特殊需求的控制。

四个标记:once, memory, unique, stopOnFalse
once:列中的每一个回调最多执行一遍,执行完成之后,回调函数列被清空。
memory:记住前一次fire()
的参数,新回调一旦被添加就立即使用上一次的参数执行一遍(之前添加的回调不执行)。
unique:同一个回调不能重复添加。
stopOnFalse:如果某个回调如果返回false,那么后面的回调都不会再执行。

  
var foo = function( value ) {
  console.log("foo:" + value);
  return false;
};
// Add another function to the list
var bar = function( value ){
  console.log( "bar:" + value );
};
var callbacks = $.Callbacks("once memory unique stopOnFalse");
callbacks.add(foo);//向队列中增加回调
callbacks.add( bar);//向队列中增加回调
callbacks.add( bar);//向队列中增加回调
callbacks.fire("hello"); //传参执行回调
console.log( callbacks.fired());//回调是否执行
  



右键菜单提供一个简单的创建右键菜单的方法,同时可以自定义菜单的事件

require只需引入库"lib/rightmenu/rightmenu"

简单示例

      
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 rightmenuFactory = require("lib/rightmenu/rightmenu");

右键菜单的工厂实例可以重复使用,意味着该工厂实例可以多次调用load方法创建多个右键菜单

方法名 方法属性 方法描述
load selector(jQuery选择器),option 获取一个新的实例并加载
selector所在的区域则是右键菜单产生的区域

实例属性

继承了x-panelz的属性,新增或重新定义的属性如下:

属性名 属性值类型 描述 默认值
header String 菜单标题 null
text String 菜单名称 null
href String 由于生成的右键菜单是有a标签组成,所以可以配置href属性从而打开新的超链接 null
target String 由于生成的右键菜单是有a标签组成,所以可以配置target属性指定打开的超链接的形式 null
action: function(e){}} Object 如果用户有其他自定义的需求,可以直接在该配置中编写相应js代码。详细用法见下表 null
divider Boolean 是否有分隔线 true
subMenu Arrary 子菜单配置数组集合,详情见下表 null

实例属性action配置方法详解

每一个菜单本身都是由a标签组成,a标签的点击事件的回调函数为action配置

用户在使用右键菜单的时候,点击菜单的事件如果执行的是不同方法,则可以在每个action配置中编写不同的js业务逻辑,如下:

     action:function(e){
        //在此编写相应的逻辑代码
      }}
            

如果用户每个菜单的点击事件的业务逻辑都相同,则可以将action配置的内容作为一个方法变量使用,设定方法变量的逻辑代码,从而达到统一调用同一方法的效果,如下:

    ...
    var fn = function(e){
       //在此编写全局的逻辑代码
    };
    ...
    //配置的时候,将方法变量传入action即可。
    action:fn
            

实例属性subMenu配置详情

属性名 属性值类型 描述 默认值
header String 菜单标题 null
text String 菜单名称 null
href String 由于生成的右键菜单是有a标签组成,所以可以配置href属性从而打开新的超链接 null
target String 由于生成的右键菜单是有a标签组成,所以可以配置target属性指定打开的超链接的形式 null
action: function(e){}} Object 如果用户有其他自定义的需求,可以直接在该配置中编写相应js代码。详细用法见下表 null
divider Boolean 是否有分隔线 true
subMenu Arrary 子菜单配置数组集合,下级菜单递归生成,配置相同 null

试一试




遮罩提示可以制作引导类的帮助提示效果

require只需引入库"x/x-mask-prompt"

简单示例

      
  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自带面板一

...

面板区域部分

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

参数方法

工厂方法

目前支持对象的方式构建实例,不支持标签定义的方式定义

获取工厂实例: var maskPromptFactory = require("x/x-mask-prompt");

方法名 方法属性 方法描述
load selector(jQuery选择器),option 获取一个新的实例并加载
init selector(jQuery选择器),option 获取一个新的实例
get selector(jQuery选择器) 获取一个已有的实例

实例属性

注:每一个遮罩提示的动画效果都是控件自动选择合适的动画。动画效果有三种。

属性名 属性值类型 描述 默认值
maskId String 全局遮罩区域id null
maskOpenType String 遮罩效果类型
"1"是载入时自动出现,"2"是触发按钮出现,"3"是混合模式,二者同时生效
"1"
maskOpenId String maskOpenType为2的时候主动触发的标签id
"1"是载入时自动出现,"2"是触发按钮出现,"3"是混合模式,二者同时生效
null
maskStep Array 遮罩提示区域的设置数组
详情见下表“maskStep配置表”
null

maskStep配置表

注:每一个遮罩提示区域都有三个回调事件actionClose,actionNextactionEnd。由于maskStep配置是顺序读取的,所以第一个maskStep配置没有actionEnd事件,最后一个maskStep配置没有actionClose事件

属性名 属性值类型 描述 默认值
stepId String 提示遮罩区域id null
stepPrompt String 提示信息的html字符串
可以直接写字符串,建议使用p标签和br标签配合,美化提示信息
null
position String 提示信息位置
可以使用"bottom"或"top"
"bottom"设置提示信息在需要提示的元素下方
"top"设置提示信息在需要提示的元素上方
null
actionClose function 提示遮罩close按钮的事件回调
 actionClose: function(e, that){},
            
null
actionPrev function 提示遮罩Previous按钮的事件回调
 actionPrev: function(e, that){},
            
null
actionNext function 提示遮罩Next按钮的事件回调
 actionNext: function(e, that){},
            
null
actionEnd function 提示遮罩End按钮的事件回调
 actionEnd: function(e, that){},
            
null

实例方法

方法名 方法属性 描述
destroy none 销毁控件
在maskOpenType配置为"2"或"3"时,即使调用了销毁方法,点击触发按钮时,依然可以使用遮罩提示。

试一试