jQuery_easyUI基础组件

1. 拖动
 一般基础功能的实现由两种方式。
<1>通过标签形式
在div中增加一个class样式：
<div style="width:300px;height:200px;background:pink" class="easyui-draggable" data-options="handle:'#title'" ></div>

<2>用javascript实现

<script type="">
      //$("#mydd").draggable(); 错误的方式? why? 这段代码没有得到执行的机会
      $(function(){
            $("#mydd").draggable();
      });
 </script>

 <div style="" id="mydd"></div>

2. 分页
<1>通过标签形式
在div中增加一个class样式：
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;">
</div>

<2>用javascript实现

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

$('#pp').pagination({ 
    total:2000, 
    pageSize:10 
}); 

3. 进度条

 使用HTML标签或程序创建进度条组件。从标签创建更加简单，添加’easyui-progressbar’类ID到<div/>标签 。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;">
</div> 

4. 提示框

 通过标签创建提示框，给元素添加一个”easyui-tooltip”的类名，无需任何Javascript代码。

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

5. 菜单
 <1> 通过标签创建菜单，给<div/>标签添加一个名为’easyui-menu’的类ID。每个菜单项都通过<div/>标签创建。我们可以添加’iconCls’属性来给菜单项定义一个图标显示到菜单项的左侧。添加’menu-sep’类ID菜单项将会生成一个菜单分割线。

 <2> 在菜单被创建的时候它是隐藏和不可见的。调用’show’方法显示菜单。
 <3> 使用Javascript创建菜单项并监听’onClick’事件。

6. 按钮

<!--通过标签创建-->
 <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">easyui</a>  

7. 菜单按钮

依赖关系
   <a href="javascript:void(0)" id="mb" class="easyui-menubutton"     
        data-options="menu:'#mm',iconCls:'icon-edit',plain:true,duration:100">Edit</a>   
    <div id="mm" style="width:150px;">   
        <div data-options="iconCls:'icon-undo'">Undo</div>   
        <div data-options="iconCls:'icon-redo'">Redo</div>   
        <div class="menu-sep"></div>   
        <div>Cut</div>   
        <div>Copy</div>   
        <div>Paste</div>   
        <div class="menu-sep"></div>   
        <div data-options="iconCls:'icon-remove'">Delete</div>   
        <div>Select All</div>   
    </div> 

8. 总结
总结:<1>几乎每一种插件都有2种方式来实现.一种是通过纯html标签来实现 class=”easyui-**”，另一种是通过html标签+js代码来实现。 如果内容变化不大,不需要经常改变: html来实现，如果内容经常变化,js+html来实现。

总结:<2>今天学习的html标签多了data-options=”k1:v1,k2:v2” ,让easyUI来识别。通过识别data-options中的各种属性和属性值为当前组件增加各种属性。
 方法中传递的是一个对象. 对象中的属性是以键值对的形式存在,多个属性之间用逗号分割。

      class data-options
           $("#mydd").方法名({});
         方法名是有规律的:  
             $("#mydd").tree({k1:v1,k2:v2});
             $("#mydd").menu({}); 
             $("#mydd").draggable({});

总结:<3>

 如何加事件
       $("#mydd").draggable({
            事件名1:function(){},
            事件名2:function(){},
       });