tesia
- 浏览: 32227 次
- 性别:
- 来自: 广州
-
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>卡片式布局</title>
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var testpanel=Ext.create('Ext.panel.Panel',{
layout:'card', //卡片式布局
activeItem:0, //设置默认显示的第一个子面板
title:'Ext.layout.CardLayout',
frame:true,
renderTo:Ext.getBody(),
bodyPadding:5,
width:250,
height:150,
defaults:{
bodyStyle:'background-color:#FFFFFF'
},
//面板items配置项默认的xtype类型为panel 该默认值可以通过defaultType配置项进行更改
items:[{
title:'嵌套面板一',
html:'说明一',
id:'p1'
},{
title:'嵌套面板二',
html:'说明二',
id:'p2'
},
{
title:'嵌套面板三',
html:'说明三',
id:'p3'
}],
buttons:[{
text:'上一页',
handler:changePage
},{
text:'下一页',
handler:changePage
}]
});
//切换子面板
function changePage(btn){
var index=Number(testpanel.layout.activeItem.id.substring(1));
if(btn.text=='上一页'){
index-=1;
if(index<1){
index=1;
}
}else{
index+=1;
if(index>3){
index=3;
}
}
testpanel.layout.setActiveItem('p'+index);
}
});
</script>
//该布局包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常用来制作向导和标签页。该布局的重点方法是setActiveItem 。因为一次只能显示一个子面板，所以切换页面的唯一途径就是setActiveItem方法，它接受一个子面板id或索引作为参数。
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>卡片式布局</title>
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var testpanel=Ext.create('Ext.panel.Panel',{
layout:'card', //卡片式布局
activeItem:0, //设置默认显示的第一个子面板
title:'Ext.layout.CardLayout',
frame:true,
renderTo:Ext.getBody(),
bodyPadding:5,
width:250,
height:150,
defaults:{
bodyStyle:'background-color:#FFFFFF'
},
//面板items配置项默认的xtype类型为panel 该默认值可以通过defaultType配置项进行更改
items:[{
title:'嵌套面板一',
html:'说明一',
id:'p1'
},{
title:'嵌套面板二',
html:'说明二',
id:'p2'
},
{
title:'嵌套面板三',
html:'说明三',
id:'p3'
}],
buttons:[{
text:'上一页',
handler:changePage
},{
text:'下一页',
handler:changePage
}]
});
//切换子面板
function changePage(btn){
var index=Number(testpanel.layout.activeItem.id.substring(1));
if(btn.text=='上一页'){
index-=1;
if(index<1){
index=1;
}
}else{
index+=1;
if(index>3){
index=3;
}
}
testpanel.layout.setActiveItem('p'+index);
}
});
</script>
//该布局包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常用来制作向导和标签页。该布局的重点方法是setActiveItem 。因为一次只能显示一个子面板，所以切换页面的唯一途径就是setActiveItem方法，它接受一个子面板id或索引作为参数。
</head>
<body>
</body>
</html>
- 大小: 10.3 KB
0
顶
顶
2
踩
踩
分享到：
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2018Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1322JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 884服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1023服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 610<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 653<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 405<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 753<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 637<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 911<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1279<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 715Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 491<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 815<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 603函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 446<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 495<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 691<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 373Ext.layout.container.Absolute对应 ... -
Ext.layout.container 标准布局类
2013-06-28 15:48 736<!DOCTYPE html PUBLIC " ...
相关推荐
实现卡片式列表布局。点击列表上某一行，该行跳到最前面显示具体内容。具体效果请看Gif效果图。可以在卡片中添加文字、链接、图片等等内容，这种效果多见于新闻App。
5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute绝对位置布局 5.2.7 CheckboxGroup复选框组布局 5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0Border边框布局 5.2.1 1Box盒布局 5.3 使用...
jQuery css3制作响应式的商品列表布局，卡片式商品列表点击添加购物车和收藏功能特效。
布局 triggers_update Javascript模板 款式 简单的样式选择 灯光实体颜色变量 先进的样式选择 用extra_styles注入CSS 自定义字段 配置模板 一般的 按ID合并状态 变数 安装 手动安装 hacs安装和跟踪 例子 状态配置 ...
再后来产生了做一个瀑布流布局的微博卡片式展示页面的想法，就是本项目。 项目代码简单粗糙，效果可见 。 更多复杂的页面定制和搜索查询功能还请自行实现。 ##用法 ###申请新浪微博的 Key 与 Secret 在 创建应用，...
分享一个安卓开发中经常碰到的，实现列表菜单卡片式布局！
可配置交互式布局 该库提供了一组组件，用于根据《 Amdocs开放网络样式指南》创建布局。 该库中公开的React组件是： 布局 卡片 安装 npm install configurableable-interactive-layout --save 在您的应用程序中 从...
ANDROID CARD FORM无需编写大量代码的更好的Android信用卡/借记卡交互表单CardForm可以用作具有任何信用卡表单和任何付款API的简单信用卡验证表单（无需更改ANDROID CARD FORM更好的Android信用卡/无需编写大量代码...
Frontend Mentor - 3 列预览卡片组件 欢迎！ :waving_hand: 感谢您查看此前端编码挑战。 挑战通过构建现实项目帮助您提高编码技能。 要完成此挑战，您需要对 HTML、CSS 和 JavaScript 有基本的了解。 挑战 您面临...
Frontend Mentor - 3 列预览卡片组件 欢迎！ :waving_hand: 感谢您查看此前端编码挑战。 挑战通过构建现实项目帮助您提高编码技能。 要完成此挑战，您需要对 HTML、CSS 和 JavaScript 有基本的了解。 挑战 您面临...
您的用户应该能够： 根据设备的屏幕尺寸查看最佳布局查看交互式元素的悬停状态想要在挑战中获得一些支持？ 并在#help频道中提问。在哪里可以找到一切您的任务是将项目构建到/design文件夹中的/design 。 您将找到该...
您的用户应该能够： 根据设备的屏幕尺寸查看最佳布局查看交互式元素的悬停状态想要在挑战中获得一些支持？ 并在#help频道中提问。在哪里可以找到一切您的任务是将项目构建到/design文件夹中的/design 。 您将找到该...
9.4.14 卡片布局：ext.layout.container.abstractcard与ext.layout.container.card / 456 9.5 标签面板 / 458 9.5.1 标签面板的构成及其运行流程：ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签...
12.6.2 Card View 275 12.7 Activity过渡动画 276 12.8 Material Design 动画效果 283 12.8.1 Ripple效果 283 12.8.2 Circular Reveal 285 12.8.3 View state changes Animation 288 12.9 Toolbar 293 12.10 ...