FineUI布局应用(二)
一、FineUI页面布局分为
1、Fit布局
<f:Panel ID="Panel1" Title="布局Fit（Layout=Fit）" runat="server" Layout="Fit" Height="300px" EnableFrame="true" EnableCollapse="true"
BodyPadding="5px" Width="850px" ShowBorder="True"
ShowHeader="True">
<Items>
<f:Form ID="Form2" runat="server" ShowBorder="True" BodyPadding="5px" ShowHeader="false" Title="表单">
<Rows>
<f:FormRow>
<Items>
<f:Label ID="Label1" Label="文本" Text="文本内容" runat="server">
</f:Label>
</Items>
</f:FormRow>
<f:FormRow>
<Items>
<f:TextBox ID="TextBox1" Label="输入框" runat="server">
</f:TextBox>
<f:Button ID="Button1" Text="按钮" runat="server">
</f:Button>
</Items>
</f:FormRow>
</Rows>
</f:Form>
</Items>
</f:Panel>
2、Anchor布局方式
1 <f:Panel ID="Panel2" runat="server" Height="300px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"
2 BodyPadding="5px" Layout="Anchor" ShowHeader="True" Title="布局Anchor（Height=300px Width=750px Layout=Anchor）">
3 <Items>
4 <f:Panel ID="Panel4" AnchorValue="60% 30%" runat="server"
5 BodyPadding="5px" ShowBorder="True" ShowHeader="false">
6 <Items>
7 <f:Label ID="Label3" ShowEmptyLabel="false" Text="AnchorValue=60% 30%" runat="server">
8 </f:Label>
9 </Items>
10 </f:Panel>
11 <f:Form ID="Form2" AnchorValue="100% 70%" runat="server"
12 BodyPadding="5px" ShowBorder="True" ShowHeader="false">
13 <Rows>
14 <f:FormRow>
15 <Items>
16 <f:Label ID="Label1" ShowEmptyLabel="false" Text="AnchorValue=100% 70%" runat="server">
17 </f:Label>
18 </Items>
19 </f:FormRow>
20 <f:FormRow>
21 <Items>
22 <f:TextBox ID="TextBox1" Label="输入框" runat="server">
23 </f:TextBox>
24 <f:Button ID="Button7" Text="按钮" runat="server">
25 </f:Button>
26 </Items>
27 </f:FormRow>
28 </Rows>
29 </f:Form>
30 </Items>
31 </f:Panel>
3、Column
<f:Panel ID="Panel2" runat="server" Height="250px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"
BodyPadding="5px" Layout="Column" ShowHeader="True" Title="布局Column（Height=250px Width=750px Layout=Column）">
<Items>
<f:Panel ID="Panel1" Width="200px" Height="150px"
runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label runat="server" Text="Width=200px Height=150px">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel4" ColumnWidth="60%" runat="server"
BodyPadding="5px" ShowBorder="true" ShowHeader="false" Layout="Fit">
<Items>
<f:Label ID="Label1" runat="server" Text="ColumnWidth=60%<br />长长的文本1<br />长长的文本2<br />长长的文本3<br />长长的文本4"
EncodeText="false">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel3" ColumnWidth="40%" runat="server"
BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label2" runat="server" Text="ColumnWidth=40%">
</f:Label>
</Items>
</f:Panel>
</Items>
</f:Panel>
4、Absolute
<f:Panel ID="Panel2" runat="server" Height="450px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"
Layout="Absolute" ShowHeader="True" Title="布局Absolute（Height=450px Width=750px Layout=Absolute）">
<Items>
<f:Panel ID="Panel1" Width="300px" Title="Panel1" Height="300px" AbsoluteX="100px"
BodyPadding="5px" AbsoluteY="50px" runat="server"
ShowBorder="True" ShowHeader="false">
<Items>
<f:Label ID="Label3" EncodeText="false" Text="Width=300px <br/>Height=300px <br/>AbsoluteX=100px <br/>AbsoluteY=50px"
runat="server">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel3" Title="Panel2" Width="150px" Height="150px" AbsoluteX="450px"
BodyPadding="5px" AbsoluteY="150px" runat="server"
ShowBorder="True" ShowHeader="false">
<Items>
<f:Label ID="Label1" EncodeText="false" Text="Width=150px <br/>Height=150px <br/>AbsoluteX=450px <br/>AbsoluteY=150px"
runat="server">
</f:Label>
</Items>
</f:Panel>
</Items>
</f:Panel>
5、Table
<f:Panel ID="Panel2" runat="server" Height="450px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"
Layout="Table" TableConfigColumns="3" ShowHeader="True" Title="布局Table（Height=450px Width=750px Layout=Table）">
<Items>
<f:Panel ID="Panel1" Title="Panel1" Width="300px" Height="210px"
TableRowspan="2" runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label1" runat="server" Text="Width=300px Height=210px TableRowspan=2">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel3" Title="Panel2" Width="430px" Height="100px"
TableColspan="2" runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label2" runat="server" Text="Width=430px Height=100px TableColspan=2">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel4" Title="Panel3" Width="200px" Height="100px"
runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label3" runat="server" Text="Width=200px Height=100px">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel5" Title="Panel4" Width="220px" Height="100px"
runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label4" runat="server" Text="Width=220px Height=100px">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel6" Title="Panel5" Width="300px" Height="100px"
runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label5" runat="server" Text="Width=300px Height=100px">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel7" Title="Panel6" Width="200px" Height="100px"
runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label6" runat="server" Text="Width=200px Height=100px">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel8" Title="Panel6" Width="220px" Height="100px"
runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label7" runat="server" Text="Width=220px Height=100px">
</f:Label>
</Items>
</f:Panel>
</Items>
</f:Panel>
6、HBox
<f:Panel ID="Panel2" runat="server" Height="250px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"
Layout="HBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"
BoxConfigChildMargin="0 5 0 0" ShowHeader="True"
Title="面板（Layout=HBox BoxConfigAlign=Stretch BoxConfigPosition=Start BoxConfigPadding=5 BoxConfigChildMargin=0 5 0 0）">
<Items>
<f:Panel ID="Panel1" Title="面板1" BoxFlex="1" runat="server"
BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label1" runat="server" Text="BoxFlex=1">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel3" Title="面板2" Width="150px"
runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label2" runat="server" Text="Width=150px">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel4" Title="面板3" BoxFlex="2" runat="server"
BodyPadding="5px" BoxMargin="0" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label3" runat="server" Text="BoxFlex=2 BoxMargin=0">
</f:Label>
</Items>
</f:Panel>
</Items>
</f:Panel>
7、VBox
<f:Panel ID="Panel2" runat="server" Height="450px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"
Layout="VBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"
BoxConfigChildMargin="0 0 5 0" ShowHeader="True" Title="面板（Layout=VBox BoxConfigAlign=Stretch BoxConfigPosition=Start BoxConfigPadding=5 BoxConfigChildMargin=0 0 5 0）">
<Items>
<f:Panel ID="Panel1" Title="面板1" BoxFlex="1" runat="server"
BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label1" runat="server" Text="BoxFlex=1">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel3" Title="面板2" Height="100px" runat="server"
BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label2" runat="server" Text="Height=100px">
</f:Label>
</Items>
</f:Panel>
<f:Panel ID="Panel4" Title="面板3" BoxFlex="2" BoxMargin="0"
runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">
<Items>
<f:Label ID="Label3" runat="server" Text="BoxFlex=2 BoxMargin=0">
</f:Label>
</Items>
</f:Panel>
</Items>
</f:Panel>
FineUI布局应用(二)的更多相关文章
- iOS开发～UI布局（二）storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
- jQuery-瀑布流-绝对定位布局（二）(延迟AJAX加载图片)
jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片) 瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一 ...
- iOS8开发～UI布局（二）storyboard中autolayout和size class的使用具体解释
一.概要:前一篇初步的描写叙述了size class的概念,那么实际中怎样使用呢,以下两个问题是我们一定会遇到的: 1.Xcode6中添加了size class,在storyboard中怎样使用? 2 ...
- WPF 之 布局（二）
一.Canvas Canvas是最基本的面板,只是一个存储控件的容器,它不会自动调整内部元素的排列及大小,它仅支持用显式坐标定位控件,它也允许指定相对任何角的坐标,而不仅仅是左上角.可以使用Left ...
- C++类继承内存布局（二）
转自:http://blog.csdn.net/jiangyi711/article/details/4890889# (二 )成员变量 前面介绍完了类布局,接下来考虑不同的继承方式下,访问成员变量的 ...
- 微信小程序前置课程：flex布局（二）
原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到 ...
- Html 经典布局（二）
经典布局案例(二): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- EXT.NET复杂布局（二）——报表
前面提到过工作台(<EXT.NET复杂布局(一)--工作台>)了,不知道各位看过之后有什么感想.这次就介绍介绍使用EXT.NET画几个报表. 看图写作从小学就开始了,如图: 图一 图二 图 ...
- FineUI 布局宽度自适应，后台回调js方法
FineUI页面布局,宽度自适应 @(F.Panel().CssClass().ShowBorder().BoxConfigChildMargin("0 5 0 0").ShowH ...
随机推荐
- statusBarOrientation设备状态
判断设备的状态 UIApplication* app = [UIApplication sharedApplication]; // 判断设备方向状态,做响应的操作 if(app.statusBa ...
- 深入理解REST与Servlet架构的区别
本身这个比较是个伪命题,因为 RESTful Service是一个软件架构“风格”, 而servlet是java 服务端的一种技术 之所以把它们拿出来比较,是由于它们代表了两个时代的技术风格与架构.下 ...
- C#多线程实践——线程同步
下面的表格列展了.NET对协调或同步线程动作的可用的工具: 简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程完成 ...
- 《Hadoop权威》学习笔记四：Hadoop的I/O
一.数据完整性 二.压缩 三.序列化 基本概念 序列化指的是将结构化对象转化为字节流以便于通过网络进行传输或写入持久化存储的过程 反序列化指的是将字节流转为一系列结构化对象的过程. 进程间通信 ...
- js深入理解"闭包"
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- Backbone的 listenTo 和 on
使用情景区别 listenTo用于监听自身意外的对象 on用于监听自身 listenTo和on中的回调函数里的this的区别 listener.listenTo(object, 'eventName' ...
- 在PHP中PDO解决中文乱码问题
$this->pdo = new PDO($dsn, $user, $password, array(PDO::ATTR_PERSISTENT => true)); $stmt = $th ...
- Python新手学习基础之函数-概念与定义
什么是函数? 函数是可以实现一些特定功能的方法或是程序,简单的理解下函数的概念,就是你编写了一些语句,为了方便使用,把这些语句组合在一起,给它起一个名字,即函数名.使用的时候只要调用这个名字,就可以实 ...
- QT中读取文本数据(txt)
下面的代码实现读取txt文档中的数据,并且是一行一行的读取. void MainWindow::on_pushButton_clicked() { QFile file("abcd.txt& ...
- 在C语言控制台程序中播放MP3音乐
游戏没有声音多单调. 这里做一个简单的范例,用 mciSendString 函数播放 MP3 格式的音乐,先看看代码吧: // 编译该范例前,请把 background.mp3 放在项目文件夹中 // ...