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 ...

随机推荐

Xcode使用xib拖线时出现： could not insert new outlet connection
解决方法: 1.在新建类的时候没有选择将这个类加入到对应的"Target"中. 2.重新将文件加入项目操作步骤就是选中出问题的.m和.h文件,点删除键,然后选"Remo ...
（原）torch使用caffe时，提示CUDNN_STATUS_EXECUTION_FAILED
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6230227.html 提前说明:此文不能真正解决该问题,具体原因我也不知道... 以前使用某台电脑A上 ...
python 查看插件命令 pip freeze 以及django3.4链接mysql
https://github.com/PyMySQL/PyMySQL/issues/244 pip freeze命令可以显示python插件版本 MySQLdb只支持Python2.*,还不支持3.* ...
web标准(复习)--7 横向导航菜单
今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单 ...
A*八数码
帮同学写的八数码,启发式搜索创建两个表open,close,分别用的stl中的优先队列priority_queue和map,好久没写过代码了,bug调了半天 #include <iostrea ...
list排序成员函数对string对象与char*对象排序的差别
对list容器中的对象排序,不能使用sort()算法,只能采用其自身的排序函数sort().因为,算法sort()只支持随机存取的容器的排序,如vector等. 对基本数据对象list排序:成员函数s ...
logstash tag使用说明
zjtest7-frontend:/usr/local/logstash-2.3.4/config# cat stdin04.conf input { stdin { } } filter { # d ...
bzoj 1193
http://www.lydsy.com/JudgeOnline/problem.php?id=1193 大范围贪心,小范围宽搜. 膜拜大神 http://blog.csdn.net/u0129155 ...
介绍几个移动web app开发框架
jQuery Mobile jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面.jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格.j ...
什么是空间复杂度（What is actually Space Complexity ?）
属于空间复杂度(Space Complexity)在很多情况下被错认为是附属空间(Auxiliary Space),下面是附属空间和空间复杂度的定义. 附属空间(Auxiliary Space)是算法 ...

FineUI布局应用(二)

FineUI布局应用(二)的更多相关文章

随机推荐

热门专题