Jquery UI学习 订阅所有【Jquery UI学习】的日志

总结发布jQuery EasyUI 中文API—Layout(Layout、Accordion)

作者:rainweb 日期:2010-04-26

字体大小: 小 中 大

已经一个星期没有更新了，继续吧。

Layout【布局】

使用说明

使用到的头文件：easyui.css、jquery-1.4.2.min.js、jquery.easyui.min.js

创建一个新的Layout

HTML代码
  1. <div id="cc" style="width:600px;height:400px;">  
  2.     <div region="north" title="North Title" split="true" style="height:100px;"></div>  
  3.     <div region="south" title="South Title" split="true" style="height:100px;"></div>  
  4.     <div region="east" icon="icon-reload" title="East" split="true" style="width:100px;"></div>  
  5.     <div region="west" split="true" title="West" style="width:100px;"></div>  
  6.     <div region="center" title="center title" style="padding:5px;background:#eee;"></div>  
  7. </div>  

 

Jquery代码
  1. $('#cc').layout();  

 

依赖

  • panel
  • resizable

Layout Panel 说明

布局面板的属性定义在<div>里面

名称 类型 描述 默认值
title string 标题 null
region string 定义布局面板的位置：north, south, east, west, center.  
border boolean 设置为真，显示面板边框. true
split boolean 设置为真，可改变面板大小 false
icon string 标签面板标题上图标css null
href string 加载远程数据地址 null

 

查看演示   官方文档

 

Accordion

这个效果用来做菜单比较多，手风琴效果

使用说明

使用到的头文件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js

HTML代码
  1. <div id="cc" style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;">  
  2.         <div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;">  
  3.             <div title="Title1" icon="icon-ok" style="overflow:auto;padding:10px;">  
  4.                 <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
  5.                 <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>  
  6.             </div>  
  7.             <div title="Title2" icon="icon-reload" selected="true" style="padding:10px;">  
  8.                 content2   
  9.             </div>  
  10.             <div title="Title3">  
  11.                 content3   
  12.             </div>  
  13.         </div>  
  14.     </div>  

 

Jquery代码
  1. $('#aa').accordion();  

 

依赖

  • panel

说明

Container  说明

名称 类型 描述 默认值
width number container宽度 auto
height number container高度 auto
fit boolean 设置为真，Container 大小自适应它父容器的大小 false
border boolean 显示边框 true

Panel 说明

直接在标签中设置属性

名字 类型 描述 默认值
selected boolean 设置为真，展开panel. false

 

查看演示   官方文档




[本日志由 rainweb 于 2010-04-28 11:53 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.