asp.net控件库FineUI使用入门图解
生活随笔
收集整理的這篇文章主要介紹了
asp.net控件库FineUI使用入门图解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
FineUI是一個基于 jQuery / ExtJS 的 ASP.NET 控件庫，其宣傳語是：
創建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的網站應用程序
官網首頁和空項目模板地址：
http://www.fineui.com/
http://fineui.com/bbs/forum.php?mod=viewthread&tid=2123
下載其空項目模板，運行，效果如下；
下面看下其代碼；
<%@ 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 © 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: 切換選項卡時，是否刷新內部IFrameF.util.initTreeTabStrip(F(menuClientID), F(tabStripClientID), null, true, false, false);});</script> </body> </html>可以看到<f:xxxxxx這些就是fineui的控件；看前面的圖；要添加FineUI的引用；
彈出對話框：
using FineUI;
......
Alert.Show("你好 FineUI！", MessageBoxIcon.Warning);
<f:Tree 定義樹視圖；
<Nodes>定義節點；
<f:TreeNode 定義具體節點；
總結
以上是生活随笔為你收集整理的asp.net控件库FineUI使用入门图解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DevExpress控件安装和初次使用图
- 下一篇： 冰刃初步使用图解(Win7 64位)