EasyUI学习

1.基础知识：

　　1）Parser解析器：

　　　　div指定了class后能有效果是因为开始时文档时加载DOM但是一些由js动态生成的指定了class的div没有被解析此时就需要手动解析了

　　　　js动态生成的指定了Class的div对象需要手动解析

　　　　　　$.parser.parse(); // 解析整个页面；$.parser.parse('#cc'); // 解析某个具体节点

　　2）Easyloader:加载器：类似与模块加载与requireJS类似

　　　　用这个方式来加载对应的easyui控件很方便，他能自动找到需要的控件

<button onclick="easyLoader()" type="button">点我</button>
        <div id="easyloaderId">我是一个easyLoader测试用例</div>
        <script>
            function easyLoader(){
                easyloader.load('dialog',function(){
                //通过这种方式就只需要
                /*使用JavaScript动态创建EasyUI的Dialog的步骤：
                 1、定义一个div，并给div指定一个id
                 2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
                 */
                 //使用自定义参数创建EasyUI的Dialog
                
                 $("#easyloaderId").dialog({
                     title: '使用JavaScript创建的Dialog',
                           400,
                      height: 200,
                     closed: false,
                    cache: false,
                    modal: true
                 });
                })
            }
        </script>

View Code

　　　　两种方式加载文件：easyloader.load('插件'，function(){//dosomethings});

　　　　　　　　　　　　　using("url相对位置或者绝对位置"，function(){//dosomethings})　　

　　3）easyui-draggable拖动

　　4）droppable可放置

　　5）easyui-resizable可调整尺寸

　　6）easyui-pagination分页

　　　　调用方法：$('#pp').pagination('refresh');

　　　　绑定事件：

$('#pp').pagination({
    onSelectPage:function(pageNumber, pageSize){
        $(this).pagination('loading');
        alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
        $(this).pagination('loaded');
    }
});

　　　　添加自定义按钮

$('#pp').pagination({
    total: 114,
    buttons: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },'-',{
        iconCls:'icon-save',
        handler:function(){alert('save')}
    }]
});

　　7)'easyui-searchbox搜索框

<h4>1.7Searchbox搜索框</h4>
        <script type="text/javascript">
            function qq(value,name){
            alert(value+":"+name)
            }
        </script>
        <input class="easyui-searchbox" style=" 300px;" 
            data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"/>
        <div id="mm" style="120px">
            <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
            <div data-options="name:'sports'">Sports News</div>
        </div>
        
        <input id="searchbox"></input>
        <div id="mm" style="120px">
             <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
              <div data-options="name:'sports'">Sports News</div>
        </div>
        <script>
            $('#searchbox').searchbox({
            searcher:function(value,name){
            alert(value + "," + name)
                },
                menu:'#mm',
                prompt:'Please Input Value'
});

View Code

　　8）ProgressBar进度条

　　9）easyui-tooltip提示框

　　　　<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

控件属性

　　想要熟练运用控件，每个属性都需要了解到

　　class="{pulginsName}"，其他控件属性可写在元素内也可写在data-options中

　　data-options：支持html5兼容属性，所有相关插件属性都可写在此内

easyui插件功能扩展

　　1）插件成员存放jQuery的位置

　　　　jQuery.fn.{plugin}.defaults：存放组件属性事件

　　　 jQuery.fn.{plugin}.methods: 存放组件方法

　　　　　　调用组件方法：$('selector').plugin('method',parameter);

　　2）例子

　　　　为插件dialog添加方法

　　　　思路：为插件添加一个成员（方法），就是给jQuery这个类扩展覆盖原来的静态成员（$.fn.{plugins}.methods）覆盖一个新的方法

　　　　　　$.extends($.fn.{plugins}.methods,newMethods function(){//dosomething})

//扩展方法
$.extend($.fn.dialog.methods, {    
    mymove: function(jq, newposition){    
        return jq.each(function(){    
            $(this).dialog('move', newposition);    
        });    
    }    
});
//调用方法
$('#dd').dialog('mymove', {    
    left: 200,    
    top: 100    
});

View Code

--------------------------------------------------------------------------------------------------

2.之后看到什么控件直接查看api即可http://www.jeasyui.net/