javaWeb easyui 火推

来源:互联网 发布:服务器同步软件 v2ex 编辑:程序博客网 时间:2024/05/17 01:12
1.使用easyui的步骤 
1.1 下载并导入easyui 源文件  
   导入的意思就是 把源代码拷贝到WebContent下 
1.2 在页面中导入 3 个js 文件  2 个css 文件 
1.3 在相应的元素上加 对应的 class  
   class="easyui-dialog"
2.面板 
  2.1 作用
    是其它元素或者组件的一个容器 
  2.2 基础面板 
      title    data-options  
      data-options 中有一个 tools 可以自己指定图标和事件处理 
  2.3 面板布局 
            基于  东西南北中的布局
3.可拖拽和 可调整大小
  class="draggable" 
  class="resizable"    maxWidth  maxHeight  minWidth
4.提示  
  class="easyui-tooltip"  
5.进度条 
   class="easyui-progressbar"   data-options="value:**"  
6.消息组件 
  普通消息 
 $.messager.show({}); 
7.选项卡
  class="easyui-tabs"
  子选项卡中 使用  data-options="closable:true"
  class="easyui-accordion" 
8.布局 
<div  title="呵呵easyui" class="easyui-layout" 
    style="width: 500px;height: 300px;"> 
     <div  data-options="region:'east'" title="东" style="width: 180px"></div>
     <div  data-options="region:'west'" title="西" style="width: 100px"></div>
     <div  data-options="region:'south'" title="南" style="height: 80px"></div>
     <div  data-options="region:'north'" title="北" style="height: 80px"></div>
  </div>
9.窗体 
class="easyui-window"
data-options="modal:true" 
modal  默认是 false  当是ture时必须操作完弹出的窗口 才能做后续操作
这叫模态化
10.右键菜单


11.分页组件 
 <div  class="easyui-pagination"  
    data-options="total:200,pageSize:4,pageList:[4,8,16,32],onSelectPage:pageData">
total  数据总量    
pageSize  一页显示多少条 
onSelectPage  切换页码时调用的函数  这个函数中可以直接 pageNumber 和 pageSize 
pageList   改变默认的一页显示多少条 


12.日历组件