首页 > 代码库 > EasyU之data-options

EasyU之data-options

今天在做项目的时候,遇到了一个很棘手的问题。就是我用EasyUI加入的一个手风琴式的导航栏的时候,总是出现导航栏的外边框不知为什么不能出现。

技术分享

但是,实际的样式是下面的这个样子:

技术分享

由于自己对EasyUI的理解不是很深刻,所以关于这个错误困扰了我很长时间,后来经过师哥和我的共同努力才发现了真正的问题所在——"data-options"。

对于“data-options”这个方法,刚开始一点都不懂,后来在网上查了查资料,终于有点了解了,所以在此总结以下,以免以后再次遇到而不会。

关于“data-options”有以下几点内容:

1. 使用 data-options 来初始化属性。

 

data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如:

<div class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
    dialog content.
</div>

属性,事件,都可以直接写在data-options里面,这样就方便多了。

 来自:http://easyui.btboys.com/the-use-of-easyui-data-options.html


2.  easyui 里面的组件属性,同样可以写在标签里面

<pre name="code" class="html"> <div class="easyui-accordion" style="width: 220px; height: 356px; margin-left: 150px;       margin-top: 0px; float: left">
        <div title="配置管理" data-options="iconCls:'icon-ok'" style="overflow: auto;        padding: 10px;">
            <ul class="easyui-tree">
                <li>
                    <span>流程配置</span>
                </li>

                <li>
                    <span>公约配置</span>
                </li>


                <li>
                    <span>学生信息分类配置</span>
                </li>

                <li>
                    <span>说明配置</span>
                </li>

            </ul>
        </div>


其实,我遇到的问题就是这个特性造成的。我在添加导航栏的时候,导航栏中有这个data-options的方法,但是在我的“搜索框”的代码中也有一个相同的方法,这样在程序运行的时候,造成了遍历冲突,以致于导航栏的该方法不能实现。

总结:data-option就是一个可以在标签等容器中显示图标的方法。如:

技术分享

注:以上为本人初次接触“data-options”所得,理解可能有偏差,希望前辈多多指教!


EasyU之data-options