asp. net 컨트롤 라 이브 러 리 FineUI 입문 도 해 를 사용 합 니 다.

FineUI 는 jQuery / ExtJS 를 기반 으로 하 는 ASP. NET 컨트롤 러 입 니 다. 홍보 어 는 No JavaScript, No CSS, No UpdatePanel, No View State, No WebServices 를 만 드 는 사이트 응용 프로그램 입 니 다.
홈 페이지 첫 페이지 와 빈 항목 템 플 릿 주소:
http://www.fineui.com/
http://fineui.com/bbs/forum.php?mod=viewthread&tid=2123
빈 항목 템 플 릿 을 다운로드 하고 실행 합 니 다. 효 과 는 다음 과 같 습 니 다.
asp.net控件库FineUI使用入门图解_第1张图片
asp.net控件库FineUI使用入门图解_第2张图片
다음은 코드 보기;
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="EmptyProjectNet20._default" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>FineUI(   )   </title>
    <style>
        .header .title a,
        .header .pro a {
            font-weight: bold;
            font-size: 24px;
            text-decoration: none;
            line-height: 50px;
            margin-left: 10px;
        }

        .header .pro {
            position: absolute;
            top: 0;
            right: 10px;
        }

        .bottomtable {
            width: 100%;
            font-size: 12px;
        }


        /*        - neptune */
        .f-theme-neptune .header,
        .f-theme-neptune .bottomtable,
        .f-theme-neptune .x-splitter {
            background-color: #1475BB;
            color: #fff;
        }

            .f-theme-neptune .header a,
            .f-theme-neptune .bottomtable a {
                color: #fff;
            }

            .f-theme-neptune .header .x-panel-body {
                background-color: transparent;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <f:PageManager ID="PageManager1" AutoSizePanelID="RegionPanel1" runat="server"></f:PageManager>
        <f:RegionPanel ID="RegionPanel1" ShowBorder="false" runat="server">
            <Regions>
                <f:Region ID="Region1" ShowBorder="false" Height="50px" ShowHeader="false"
                    Position="Top" Layout="Fit" runat="server">
                    <Items>
                        <f:ContentPanel ShowBorder="false" ShowHeader="false" ID="ContentPanel1" CssClass="header"
                            runat="server">
                            <div class="title">
                                <a href="./default.aspx" style="color: #fff;">FineUI(   )   </a>
                            </div>
                            <div class="pro">
                                <a href="http://fineui.com/demo_pro/" target="_blank" style="color: #fff;">     </a>
                            </div>
                        </f:ContentPanel>
                    </Items>
                </f:Region>
                <f:Region ID="Region2" Split="true" Width="200px" ShowHeader="true" Title="  "
                    EnableCollapse="true" Layout="Fit" Position="Left" runat="server">
                    <Items>
                        <f:Tree runat="server" ShowBorder="false" ShowHeader="false" EnableArrows="true" EnableLines="true" ID="leftMenuTree">
                            <Nodes>
                                <f:TreeNode Text="    " Expanded="true">
                                    <f:TreeNode Text="    " NavigateUrl="~/hello.aspx"></f:TreeNode>
                                    <f:TreeNode Text="    " NavigateUrl="~/login.aspx"></f:TreeNode>
                                </f:TreeNode>
                            </Nodes>
                        </f:Tree>
                    </Items>
                </f:Region>
                <f:Region ID="mainRegion" ShowHeader="false" Layout="Fit" Position="Center"
                    runat="server">
                    <Items>
                        <f:TabStrip ID="mainTabStrip" EnableTabCloseMenu="true" ShowBorder="false" runat="server">
                            <Tabs>
                                <f:Tab ID="Tab1" Title="  " Layout="Fit" Icon="House" runat="server">
                                    <Items>
                                        <f:ContentPanel ID="ContentPanel2" ShowBorder="false" BodyPadding="10px" ShowHeader="false" AutoScroll="true"
                                            runat="server">
                                            <h2>FineUI(   )</h2>
                                               ExtJS     ASP.NET    
                                        
                                            <br />
                                            <h2>FineUI   </h2>
                                               No JavaScript,No CSS,No UpdatePanel,No ViewState,No WebServices        
                                        
                                            <br />
                                            <h2>      </h2>
                                            Chrome、Firefox、Safari、IE 8.0+
                                        
                                            <br />
                                            <h2>    </h2>
                                            Apache License v2.0(ExtJS    <a target="_blank" href="http://www.sencha.com/license">GPL v3</a>      )
                                            
                                            <br />
                                            <h2>    </h2>
                                              :<a target="_blank" href="http://fineui.com/">http://fineui.com/</a>
                                            <br />
                                              :<a target="_blank" href="http://fineui.com/bbs/">http://fineui.com/bbs/</a>
                                            <br />
                                              :<a target="_blank" href="http://fineui.com/demo/">http://fineui.com/demo/</a>
                                            <br />
                                              :<a target="_blank" href="http://fineui.com/doc/">http://fineui.com/doc/</a>
                                            <br />
                                            <br />
                                            <br />
                                            <br />

                                            <hr />
                                            <br />
                                            <a target="_blank" href="http://fineui.com/pro/">        FineUI(   ) -   、  、   !</a>
                                           
                                        </f:ContentPanel>
                                    </Items>
                                </f:Tab>
                            </Tabs>
                        </f:TabStrip>
                    </Items>
                </f:Region>
                <f:Region ID="bottomPanel" RegionPosition="Bottom" ShowBorder="false" ShowHeader="false" EnableCollapse="false" runat="server" Layout="Fit">
                    <Items>
                        <f:ContentPanel ID="ContentPanel3" runat="server" ShowBorder="false" ShowHeader="false">
                            <table class="bottomtable">
                                <tr>
                                    <td style="width: 300px;">   :<a target="_blank" href="http://fineui.com/version">v<asp:Literal runat="server" ID="litVersion"></asp:Literal></a>
                                           <a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=5a98eb42b742a1edaf22826648d5f61bc16ed08e0253976bc8d30f97508c09c7">QQ   </a></td>
                                    <td style="text-align: center;">Copyright &copy; 2008-2015             </td>
                                    <td style="width: 300px; text-align: right;"> </td>
                                </tr>
                            </table>
                        </f:ContentPanel>
                    </Items>
                </f:Region>
            </Regions>
        </f:RegionPanel>
    </form>
    <script>
        var menuClientID = '<%= leftMenuTree.ClientID %>';
        var tabStripClientID = '<%= mainTabStrip.ClientID %>';

        //           ,         onReady  
        F.ready(function () {

            //          (  Accordion+Tree)      ,        
            // treeMenu:           ,               
            // mainTabStrip:      
            // createToolbar:            (  tabConfig  )
            // updateLocationHash:   Tab ,       Hash 
            // refreshWhenExist:       ,         ,      IFrame
            // refreshWhenTabChange:       ,      IFrame
            F.util.initTreeTabStrip(F(menuClientID), F(tabStripClientID), null, true, false, false);

        });
    </script>
</body>
</html>
을 볼 수 있 습 니 다. < f: xxxxx 이것들 이 바로 fineui 의 컨트롤 입 니 다.
앞 그림 보기;FineUI 참조 추가 하기;
팝 업 대화 상자:
using FineUI;
......
Alert. How ("안녕하세요 FineUI!", MessageBoxIcon. Warning);
< f: Tree 정의 트 리 보기; <노드 > 노드 정의;

좋은 웹페이지 즐겨찾기