tesia
- 浏览: 32899 次
- 性别:
- 来自: 广州
-
最新评论
<!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 2052Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1344JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 924服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1039服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 630<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 677<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 424<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 765<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 659<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 930<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1308<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 734Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 508<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 837<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 617函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 472<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 511<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 712<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 388Ext.layout.container.Absolute对应 ... -
Ext.layout.container 标准布局类
2013-06-28 15:48 758<!DOCTYPE html PUBLIC " ...
相关推荐
7. **响应式布局**：为了适应不同屏幕尺寸和设备方向，开发者需要考虑使用相对布局、约束布局等响应式布局技术，确保卡片在不同设备上的显示效果一致。 8. **图片加载库**：对于包含图片的卡片，可以利用第三方库如...
在Android开发中，卡片式布局（CardView）已经成为设计用户界面的一种流行趋势，它能够以清晰、美观的方式展示信息。本教程将引导你如何利用ListView和自定义适配器实现卡片式UI效果。 首先，我们需要了解`CardView...
在Windows Forms（Winform）开发中，卡片式布局是一种常见的设计模式，它允许用户在多个独立的区域（就像卡片一样）之间切换，每个区域都显示不同的内容。这种布局方式常见于需要展示多个独立但相关的信息模块的应用...
最后，关于提供的文件"CardDemo"，这很可能是包含了一个完整的卡片式布局示例项目，包括了XML布局文件、Activity代码以及可能的数据模型类。你可以通过研究这个示例，更深入地理解卡片式布局的实现细节。 总的来说...
2. **卡片布局（Card Layout）**： 卡片布局是一种常见且灵活的界面设计模式，常用于展示信息或内容列表。在小程序中，可以使用 `<view>` 标签配合 CSS 样式实现卡片效果，例如设置边框、圆角、阴影等。同时，`...
在HTML5中，可以使用标签配合CSS3来创建卡片式布局，通过设置display属性为flex或grid来实现流式布局。同时，可以使用CSS的盒模型属性（如margin、padding、border）和定位属性（如position、top、left）来调整卡片...
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 使用...
7. **响应式布局**：考虑到移动设备的屏幕尺寸各异，卡片式划页设计通常需要支持响应式布局，以确保在不同屏幕大小的设备上都能良好展示。这可能涉及使用百分比布局（PercentRelativeLayout或PercentFrameLayout）或...
轮滑式卡片的实现通常涉及到CSS的布局技巧，如Flexbox或Grid，以及动画效果。我们可以设置卡片的宽度、高度、边距等属性，确保它们在页面上整齐排列。为了实现轮滑功能，我们可能还需要使用CSS的`transition`和`...
本项目，"CSS3侧边栏卡片式菜单导航"，正是利用了CSS3的新特性来实现一个动态且具有自适应性的侧边栏菜单。 首先，让我们了解一下侧边栏菜单的基本概念。侧边栏通常位于网页的左侧或右侧，提供一种紧凑的方式来展示...
为了适应不同屏幕尺寸和设备类型，卡片设计应考虑响应式布局。可以使用`android:layout_width`和`android:layout_height`的百分比值，或者使用`PercentRelativeLayout`或`PercentFrameLayout`来动态调整卡片大小。 ...
本实例将深入探讨如何在NetBeans中使用`CardLayout`来创建卡片式窗口。 `CardLayout`是Java Swing库中的一个布局管理器，主要负责管理容器中组件的排列方式。它的核心功能是切换不同组件的可见性，使得在有限的空间...
在网页设计中，卡片设计（Card Design）是一种广泛采用的布局方式，尤其在响应式设计中，它能够有效地展示信息并保持页面的清晰与整洁。本资源提供的“多种卡片设计css3模板下载”是一个集合了多种样式的卡片设计...
本主题聚焦于使用jQuery Mobile创建一个卡片式的时钟显示，这是一种将时间信息以直观、简洁的卡片形式展示的方式，特别适合于移动端应用。 首先，jQuery Mobile的核心是其基于HTML5的组件库，这些组件可以快速构建...
在这个卡片设计中，CSS3的关键作用在于创建动态效果、响应式布局和自定义样式。例如，通过使用`transition`和`animation`属性，可以实现卡片在鼠标悬停时的平滑过渡和变换；通过`flexbox`或`grid`布局，可以轻松调整...
Bootstrap是世界上最流行的HTML, CSS, 和JS框架，用于开发响应式布局和移动设备优先的WEB项目。这个"Bootstrap卡片图文列表布局样式代码"是利用Bootstrap的组件和样式来创建一个美观且功能丰富的列表展示，特别适合...
在iOS开发中，Swift语言被广泛用于构建各种用户界面，其中卡片式滚动查看图片是一种常见的交互设计，尤其在电商应用中，如淘宝详情页的"我的足迹"功能。这个"ios-swift卡片式滚动查看图片.zip"压缩包可能包含了一个...
我们可以使用`<div>`元素来创建卡片，并用类名区分正面和反面，如`.card-front`和`.card-back`。 接下来，CSS（Cascading Style Sheets）用于美化HTML元素的外观和布局。CSS3引入了许多新特性，如变换（transform）...
**jQuery卡片式图片轮换代码详解** 在网页设计中，图片轮播是一种常见的展示方式，可以有效地节省空间，同时增加视觉吸引力。jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现这种效果。本教程将深入讲解...
为了实现卡片式布局和动画效果，我们需要编写CSS样式。例如，可以设置卡片的宽度、高度、过渡效果等： ```css #focusGallery { width: 100%; height: 400px; overflow: hidden; } .card { position: absolute;...