asp.net控件库FineUI使用入门图解
生活随笔
收集整理的這篇文章主要介紹了
asp.net控件库FineUI使用入门图解
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
FineUI是一個(gè)基于 jQuery / ExtJS 的 ASP.NET 控件庫(kù)，其宣傳語(yǔ)是：
創(chuàng)建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的網(wǎng)站應(yīng)用程序
官網(wǎng)首頁(yè)和空項(xiàng)目模板地址：
http://www.fineui.com/
http://fineui.com/bbs/forum.php?mod=viewthread&tid=2123
下載其空項(xiàng)目模板，運(yùn)行，效果如下；
下面看下其代碼；
<%@ 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（開源版）空項(xiàng)目</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;}/* 主題相關(guān)樣式 - 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（開源版）空項(xiàng)目</a></div><div class="pro"><a href="http://fineui.com/demo_pro/" target="_blank" style="color: #fff;">專業(yè)版示例</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="默認(rèn)分類" Expanded="true"><f:TreeNode Text="開始頁(yè)面" NavigateUrl="~/hello.aspx"></f:TreeNode><f:TreeNode Text="登錄頁(yè)面" 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="首頁(yè)" 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 控件庫(kù)<br /><h2>FineUI的使命</h2>創(chuàng)建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的網(wǎng)站應(yīng)用程序<br /><h2>支持的瀏覽器</h2>Chrome、Firefox、Safari、IE 8.0+<br /><h2>授權(quán)協(xié)議</h2>Apache License v2.0（ExtJS 庫(kù)在 <a target="_blank" href="http://www.sencha.com/license">GPL v3</a> 協(xié)議下發(fā)布）<br /><h2>相關(guān)鏈接</h2>首頁(yè)：<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/">企業(yè)用戶推薦使用FineUI（專業(yè)版） - 更快、更強(qiáng)、更實(shí)惠！</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 %>';// 頁(yè)面控件初始化完畢后，會(huì)調(diào)用用戶自定義的onReady函數(shù)F.ready(function () {// 初始化主框架中的樹(或者Accordion+Tree)和選項(xiàng)卡互動(dòng)，以及地址欄的更新// treeMenu： 主框架中的樹控件實(shí)例，或者內(nèi)嵌樹控件的手風(fēng)琴控件實(shí)例// mainTabStrip： 選項(xiàng)卡實(shí)例// createToolbar： 創(chuàng)建選項(xiàng)卡前的回調(diào)函數(shù)（接受tabConfig參數(shù)）// updateLocationHash: 切換Tab時(shí)，是否更新地址欄Hash值// refreshWhenExist： 添加選項(xiàng)卡時(shí)，如果選項(xiàng)卡已經(jīng)存在，是否刷新內(nèi)部IFrame// refreshWhenTabChange: 切換選項(xiàng)卡時(shí)，是否刷新內(nèi)部IFrameF.util.initTreeTabStrip(F(menuClientID), F(tabStripClientID), null, true, false, false);});</script> </body> </html>可以看到<f:xxxxxx這些就是fineui的控件；看前面的圖；要添加FineUI的引用；
彈出對(duì)話框：
using FineUI;
......
Alert.Show("你好 FineUI！", MessageBoxIcon.Warning);
<f:Tree 定義樹視圖；
<Nodes>定義節(jié)點(diǎn)；
<f:TreeNode 定義具體節(jié)點(diǎn)；
總結(jié)
以上是生活随笔為你收集整理的asp.net控件库FineUI使用入门图解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： DevExpress控件安装和初次使用图
- 下一篇： 冰刃初步使用图解(Win7 64位)