• 热门专题

EasyUI项目驱动学习

作者:  发布日期:2014-07-08 20:08:08
Tag标签:项目  
  • 下面以一个项目简单介绍easyui的使用,主要包括以下组件

    布局面板 - layout

    可伸缩面板 - accordion

    选项卡 - tabs

    控制面板 - panel

    窗口 - window

    对话框 - dialog

    消息窗口 - messager

    数据表格 - datagrid

    分页 - pagination

    树型菜单 - tree

    等等...

    可先下载项目源码 对各个组件有个大致了解 http://download.csdn.net/detail/itmyhome/7605957

    jQuer EasyUI布局-为网页创建边框布局(layout)

    边框布局(border layout)提供五个区域:east、west、north、south、center.以下是一些通常用法:

    north 区域可以用来显示网站的标语。

    south 区域可以用来显示版权以及一些说明。

    west 区域可以用来显示导航菜单。

    east 区域可以用来显示一些推广的项目。

    center 区域可以用来显示主要的内容。

    为了应用布局(layout),您应该确定一个布局(layout)容器,然后定义一些区域。

    布局(layout)必须至少需要一个center区域,以下是一个布局(layout)实例:

     

    <div id="tt" class="easyui-layout" style="width:100%;height:100%;">  
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
        <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>  
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>  
        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
    </div> 

     

    jQuery EasyUI布局-创建折叠面板(accordion)

    伸缩面板允许您提供多个面板和显示一次。每个小组有内置支持扩展和收缩。点击一个面板标题展开或折叠,面板的身体。

    面板内容可以通过ajax加载通过指定一个"href"属性。用户可以定义一个小组被选中。如果没有指定,那么第一个面板是默认了。

     

    <div id="tt" class="easyui-accordion" style="width: 300px; height: 200px;">
    	<div title="Title1" style="padding: 10px;">
    		content1
    	</div>
    	<div title="Title2" style="padding: 10px;">
    		content2
    	</div>
    	<div title="Title3" style="padding: 10px;">
    		content3
    	</div>
    </div>

     

    jQuery EasyUI布局-创建标签页(Tabs)

    这个选项卡显示面板的集合。它显示了只有一个选项卡面板在一个时间。

    每个选项卡面板的标题和一些迷你按钮的工具,包括关闭按钮和其他定制按钮。

     

    <div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;">
    	<div title="Tab1" style="padding: 20px; display: none;">
    		tab1
    	</div>
    	<div title="Tab2" data-options="closable:true"
    		style="overflow: auto; padding: 20px; display: none;">
    		tab2
    	</div>
    	<div title="Tab3" data-options="closable:true"
    		style="padding: 20px; display: none;">
    		tab3
    	</div>
    </div>

     

    jQuery EasyUI 布局-面版(Panel)

    面版用作其他内容的容器。这是基本组件构建其他组件(如布局、标签、折叠等。它还提供了内置的可折叠、

    可闭,maximizable和minimizable行为和其他定制的行为。面板可以很容易地嵌入到web页面的任何位置。

     

    <div id="p" class="easyui-panel" title="My Panel"
    	style="width: 500px; height: 150px; padding: 10px; background: #fafafa;"
    	data-options="iconCls:'icon-save',closable:true,   
    	collapsible:true,minimizable:true,maximizable:true">
    	<p>
    		panel content.
    	</p>
    	<p>
    		panel content.
    	</p>
    </div>

     

    jQuery EasyUI 窗口-创建简单窗口(Window)

    该窗口是一个浮动层形成的可拖动面板,可以用来作为一个应用程序窗口。默认情况下,

    一个窗口可以移动,调整大小和关闭。无论是作为静态HTML或通过AJAX动态加载其内容也可以被定义。

     

    <div id="win" class="easyui-window" title="My Window"
    	style="width: 600px; height: 400px"
    	data-options="iconCls:'icon-save',modal:true">
    	Window Content
    </div>

     

    jQuery EasyUI 窗口-创建对话框(Dialog)

    该对话框是一种特殊类型的窗口,它可以有一个工具栏上的顶部和底部的按钮栏。该对话框只有一个头默认情况下,显示在右上角的关

    闭工具。

     

    <div id="dd" class="easyui-dialog" title="My Dialog"
    	style="width: 400px; height: 200px;"
    	data-options="iconCls:'icon-save',resizable:true,modal:true">
    	Dialog Content.
    </div>

     

    jQuery EasyUI 消息窗口-创建消息框(Messager)

     

    $.messager.alert('Warning','The warning message');  
    $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){   
        if (r){   
    	alert('ok');   
        }   
    });  

    暂且先写到这里吧,其实上面也都是API里面的东西,

    这些东西写起来太枯燥,自己都觉得是在敷衍了。有兴趣的可以下载项目源码去详细了解http://download.csdn.net/detail/itmyhome/7605957

    还有datagrid、pagination、tree没有介绍,希望还有后续章节来介绍...


    出处:http://blog.csdn.net/itmyhome1990/article/details/37502601

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规