盖住那个下拉框！EasyUI遮罩使用方法简介

 

EasyUI的遮罩是什么？

当EasyUI执行查询时，页面会出现一个遮罩，把页面遮住，在此期间不能操作。

当EasyUI打开一个新的窗口时，页面会出现一个遮罩，把父页面遮住，不能操作父页面，但新打开的页面可以操作。

就像下面这样：

如果这个时候查看页面的HTML元素，会发现有这么两个div标签：

class分别是EasyUI的datagrid-mask和datagrid-mask-msg，

datagrid-mask是遮住页面的遮罩

datagrid-mask-msg是中间显示的文字

 

遮罩的作用

今天重点说datagrid-mask，这个控件可以盖住页面的某些元素，使鼠标不能点击。

EasyUI一般都是用这个遮罩覆盖整个页面，但我们可以用他来覆盖我们想盖住的东西。

这个功能有点意思，因为有的时候我们不想让用户修改页面上的某些控件的内容，比如文本框、下拉框等，然而并不是所有的控件都有readonly属性：比如select下拉框，和EasyUI的combobox下拉框控件就不能设置readonly。

虽然可以用disable属性来实现不可点击的效果，但是这个属性有点不方便，比如提交表单的时候不会提交disable的控件值。

 

示例代码

比如我想遮住一个文本框：

在页面代码中有一个input

<td>时间：</td>

<td class="value">

         <input style="width: 150px" id="Time" name="Time">

</td>

正常情况下他是这样的：

然后我们定义两个JavaScript函数：

//通用覆盖控件，参数是元素id

function blockCommon(id){

         if(!document.getElementById("datagrid-mask-"+id)){

                   $("<div id=\"datagrid-mask-"+id+"\" class=\"datagrid-mask\"></div>").css({

                            display: "block",

                            width: $("#"+id).width(),

                            height: $("#"+id).height(),

                            top:$("#"+id).offset().top,

                            left:$("#"+id).offset().left

                   }).appendTo("body");

         }

        

}

//通用解除覆盖控件，参数是元素id

function showCommon(id){

         if(document.getElementById("datagrid-mask-"+id)){

                   $('#datagrid-mask-'+id).remove();

         }

}

 

当调用blockCommon ('Time')方法时，文本框就会被一个灰色的罩子罩住，鼠标不能点击，像下面这样：

而当调用showCommon ('Time')方法时，这个遮罩会被去掉。

 

注：

1. 代码中的document.getElementById("datagrid-mask-"+id)是判断这个遮罩是否已经存在，如果存在了就不会再添加。
2. 这里不能用jquery的$("#Time")，因为这个永远都是true。
3. 遮住下拉框、遮住一个表格等等也都是一样的。

 

缺点

1. 在控件上加遮罩的方式虽然让鼠标不能点击，但是不能防止键盘操作，用Tab键依然可以在页面的控件间切换并修改。
2. 添加了遮罩之后，如果又修改了控件的大小，遮罩不会跟随控件一起变大或变小，也就是说会露出来。

 

以上