实例介绍
【实例简介】这个不是我写的，老美写的开源项目，值得一看
【实例截图】
【核心代码】
附母版页的代码 ：
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head" runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<asp:ContentPlaceHolder Id="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<!-- META Tag Macro -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<!--Styles-->
<link rel="stylesheet" type="text/css" href="/css/custom.css" media="screen"/>
<!--Scrips-->
<script type="text/javascript" src="/scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* Dots Slider 1 */
$(function(){
$('#imageSlider')
.after('<div id="imageSliderNav">')
.cycle({
fx: 'fade',
speed: 1550,
timeout: 8000,
pager: '#imageSliderNav'
});
});
});
</script>
</head>
<body class="t">
<div id="logo" style="display:none">
<h1><a href="/"><umbraco:item runat="server" field="siteName" recursive="true"></umbraco:item></a></h1>
</div>
<div id="page">
<div id="header">
<a href="/"><img src="/images/logo.gif" width="259" height="65" /></a>
<div id="sitedescription">
<h1>Runway</h1>
<h1>Off to a great start</h1>
</div>
<div id="mainmenu">
<umbraco:Macro Alias="umbTopNavigation" runat="server"></umbraco:Macro>
</div>
<div class="mainmenucorner"> </div>
</div>
<asp:contentplaceholder id="cp_top" runat="server">
</asp:contentplaceholder>
<div id="content">
<div id="leftcontent">
<form id="RunwayMasterForm" runat="server">
<asp:contentplaceholder id="cp_content" runat="server"></asp:contentplaceholder>
</form>
</div>
<div id="rightcontent">
<div class="hotspot">
<h4>Edit the right column</h4>
<img src="/images/icons/dezinerfolio/info.png" width="52" height="52"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo lectus, iaculis a laoreet in, lobortis in ligula. Proin in diam elit. Nulla facilisi. </p>
<a href="#">Find more packages</a>
</div>
<div class="hotspot">
<h4>Create your own Macros and unleash the power of XSLT </h4>
<img src="/images/icons/dezinerfolio/info.png" width="52" height="52"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo lectus, iaculis a laoreet in, lobortis in ligula. Proin in diam elit. Nulla facilisi. </p>
<a href="#">Using XSLT</a>
</div>
</div>
</div>
<div id="footer">
<div id="footermenu">
<h4>Navigation</h4>
<umbraco:Macro Alias="umbTopNavigation" runat="server"></umbraco:Macro>
</div>
<div id="footershare">
<h4>Share/Social</h4>
<ul>
<li><a href="/company-news.aspx"><img src="images/icons/social_twitter.png" width="28" height="22" />Twitter</a></li>
<li><a href="/company-blog.aspx"><img src="images/icons/social_facebook.png" width="28" height="22" />Facebook</a></li>
<li><a href="/about.aspx"><img src="images/icons/social_linkedin.png" width="28" height="22" />Linkedin</a></li>
<li><a href="/contact-us.aspx"><img src="images/icons/social_su.png" width="28" height="22" />Stumpled upon</a></li>
</ul>
</div>
<div id="footercontact">
<h4>Contact information</h4>
Company Name<br />
918 East Test Rd.
Test, WA 99206, USA<br />
<br />Telephone: 0 123 456 789
<br />Email: <a href="mailto:email@example.com">email@example.com</a>
</div>
<div id="footerabout">
<h4>About us</h4>
You can edit these texts directly in the templates<br /><br />
Umbraco provides a full-featured web content management system that is easy to use, simple to customize, and robust enough to run the largest sites
</div>
<div id="footer-end">
Powered by <a href="http://umbraco.org" title="Umbraco - The open source ASP.NET CMS">Umbraco</a> | Skin created by <a href="http://www.mediaworkers.dk" title="Umbraco Solution Provider">Mediaworkers</a>
</div>
</div>
<!-- end div#wrapper -->
</body>
</html>
</asp:content>
再附上数据库安装部分的：
<%@ Control Language="c#" AutoEventWireup="True" CodeBehind="database.ascx.cs" Inherits="Umbraco.Web.UI.Install.Steps.Database"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Import Namespace="Umbraco.Core.Configuration" %>
<asp:PlaceHolder ID="settings" runat="server" Visible="true">
<!-- database box -->
<div class="tab main-tabinfo">
<div class="container">
<h1>Database configuration</h1>
<p>
<strong>To complete this step you will either need a blank database or, if you do not have a blank database available, choose the SQL CE 4 embedded
database (This is the recommended approach for first time users or if you are unsure).</strong>
</p>
<p>
If you are not using the SQL CE 4 embedded database you will need the connection details for your database, such as the
"connection string". You may need to contact your system administrator or web host for this information.
</p>
</div>
<!-- database -->
<div class="database-hold">
<form action="#">
<fieldset>
<div class="step">
<div class="container">
<p>
<strong>1. Select which database option best fits you:</strong>
</p>
<ul>
<li>
<input type="radio" id="databaseOptionBlank" name="database" value="blank" />
<label for="databaseOptionBlank">I already have a blank SQL Server, SQL Azure or MySQL database</label>
</li>
<li>
<input type="radio" id="databaseOptionEmbedded" name="database" value="embedded" />
<label for="databaseOptionEmbedded">I want to use SQL CE 4, a free, quick-and-simple embedded database</label>
</li>
<li>
<input type="radio" id="databaseOptionAdvanced" name="database" value="advanced" />
<label for="databaseOptionAdvanced">I'm an advanced user, let me put in the connection string</label>
</li>
<li>
<input type="radio" id="databaseOptionHelp" name="database" value="help" />
<label for="databaseOptionHelp">I need help</label>
</li>
</ul>
</div>
</div>
<!-- database options -->
<div id="database-options">
<!-- blank option -->
<div id="database-blank" class="database-option">
<div class="step">
<div class="container">
<p>
<strong>2. Now choose your database type below.</strong>
</p>
<div class="select">
<asp:DropDownList runat="server" ID="DatabaseType" CssClass="sel">
<asp:ListItem Value="" Text="Please choose" Selected="True" />
<asp:ListItem Value="SqlServer" Text="Microsoft SQL Server" />
<asp:ListItem Value="SqlAzure" Text="SQL Azure" />
<asp:ListItem Value="MySql" Text="MySQL" />
</asp:DropDownList>
</div>
</div>
</div>
<div class="step" id="database-blank-inputs">
<div class="container">
<p class="instructionText">
<strong>3. Connection details:</strong> Please fill out the connection information for your database.
</p>
<div class="instruction-hold">
<asp:PlaceHolder ID="ph_dbError" runat="server" Visible="false">
<div class="row error">
<p class="text">
<strong>
<asp:Literal ID="lt_dbError" runat="server" /></strong>
</p>
</div>
<script type="text/javascript">
jQuery(document).ready(function () { showDatabaseSettings(); });
</script>
</asp:PlaceHolder>
<div class="row sql" runat="server" id="DatabaseServerItem">
<asp:Label runat="server" AssociatedControlID="DatabaseServer" ID="DatabaseServerLabel">Server:</asp:Label>
<span>
<asp:TextBox runat="server" CssClass="text" ID="DatabaseServer" /></span>
</div>
<div class="row sql" runat="server" id="DatabaseNameItem">
<asp:Label runat="server" AssociatedControlID="DatabaseName" ID="DatabaseNameLabel">Database name:</asp:Label>
<span>
<asp:TextBox runat="server" CssClass="text" ID="DatabaseName" /></span>
</div>
<div class="row sql" runat="server" id="DatabaseUsernameItem">
<asp:Label runat="server" AssociatedControlID="DatabaseUsername" ID="DatabaseUsernameLabel">Username:</asp:Label>
<span>
<asp:TextBox runat="server" CssClass="text" ID="DatabaseUsername" /></span>
</div>
<div class="row sql" runat="server" id="DatabasePasswordItem">
<asp:Label runat="server" AssociatedControlID="DatabasePassword" ID="DatabasePasswordLabel">Password:</asp:Label>
<span>
<asp:TextBox runat="server" ID="DatabasePassword" CssClass="text" TextMode="Password" /></span>
</div>
</div>
</div>
<!-- btn box -->
</div>
</div>
<!-- embedded option -->
<div id="database-embedded" class="database-option">
<div class="step">
<div class="container">
<p class="instructionText">
<strong>2. Simple file-based database:</strong>
</p>
<div class="instruction-hold">
<div class="row embeddedError" runat="server" id="embeddedFilesMissing" style="display: none;">
<p>
<strong>Missing files:</strong> SQL CE 4 requires that you manually add the SQL
CE 4 runtime to your Umbraco installation.<br />
You can either use the following <a href="http://our.umbraco.org/wiki/install-and-setup/using-sql-ce-4-with-umbraco-46"
target="_blank">instructions</a> on how to add SQL CE 4 or select another database type from the dropdown above.
</p>
</div>
<div class="row embedded" style="display: none;">
<p>
<strong>Nothing to configure:</strong>SQL CE 4 does not require any configuration,
simply click the "install" button to continue.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- advanced option -->
<div id="database-advanced" class="database-option">
<div class="step">
<div class="container">
<p>
<strong>2. Connection details:</strong> Please fill out the connection information for your database.</strong>
</p>
<div class="instruction-hold">
<div class="row custom" runat="server" id="DatabaseConnectionString">
<asp:Label runat="server" AssociatedControlID="ConnectionString" ID="ConnectionStringLabel">Connection string:</asp:Label>
<span class="textarea">
<asp:TextBox runat="server" TextMode="MultiLine" CssClass="text textarea" ID="ConnectionString" /></span>
</div>
<div class="row custom check-hold">
<p>
Example: <tt>datalayer=MySQL;server=192.168.2.8;user id=user;password=***;database=umbraco</tt>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- help option -->
<div id="database-help" class="database-option">
<div class="step">
<div class="container">
<p>
<strong>2. Getting a database setup for umbraco.</strong><br />
For first time users, we recommend you select "quick-and-simple embedded database".
This will install an easy to use database, that does
not require any additional software to use.<br />
Alternatively, you can install Microsoft SQL Server, which will require a bit more
work to get up and running.<br />
We have provided a step-by-step guide in the video instructions below.
</p>
<span class="btn-link"><a href="http://umbraco.org/getting-started" target="_blank">Open video instructions</a></span>
</div>
</div>
</div>
<footer class="btn-box installbtn">
<div class="t"> </div>
<asp:LinkButton runat="server" class="single-tab submit btn-install" OnClick="SaveDbConfig"><span>install</span> </asp:LinkButton>
</footer>
</div>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
var hasEmbeddedDlls = <%= HasEmbeddedDatabaseFiles.ToString().ToLower() %>;
var currentVersion = '<%=UmbracoVersion.Current.ToString(3)%> <%=UmbracoVersion.CurrentComment%> ';
var configured = <%= IsConfigured.ToString().ToLower() %>;
jQuery(document).ready(function(){
<asp:literal runat="server" id="jsVars" />
$("input[name='database']").change(function()
{
switch($(this).val())
{
case "blank":
$(".database-option").hide();
$("#database-blank").show();
$(".installbtn").show();
break;
case "embedded":
$(".database-option").hide();
$("#database-embedded").show();
if (!hasEmbeddedDlls) {
$('.embeddedError').show();
$(".installbtn").hide();
}
else {
$('.embedded').show();
$(".installbtn").show();
}
break;
case "advanced":
$(".database-option").hide();
$("#database-advanced").show();
$(".installbtn").show();
break;
case "help":
$(".database-option").hide();
$("#database-help").show();
$(".installbtn").hide();
break;
}
});
<asp:Literal id="dbinit" runat="server"></asp:Literal>
});
</script>
</asp:PlaceHolder>
<asp:PlaceHolder ID="installing" runat="server" Visible="false">
<!-- installing umbraco -->
<div class="tab install-tab" id="datebase-tab">
<div class="container">
<asp:PlaceHolder ID="installProgress" runat="server" Visible="True">
<div class="progress-status-container">
<h1>Installing Umbraco</h1>
<p>
The Umbraco database is being configured. This process populates your chosen database with a blank Umbraco instance.
</p>
</div>
<div class="result-status-container" style="display: none;">
<h1>Database installed</h1>
<div class="success">
<p>
Umbraco
<%=UmbracoVersion.Current.ToString(3)%> <%=UmbracoVersion.CurrentComment%>
has now been copied to your database. Press <b>Continue</b> to proceed.
</p>
</div>
</div>
</asp:PlaceHolder>
<asp:PlaceHolder ID="upgradeProgress" runat="server" Visible="False">
<div class="progress-status-container">
<h1>Upgrading Umbraco</h1>
<p>
The Umbraco database is being configured. This process upgrades your Umbraco database.
</p>
</div>
<div class="result-status-container" style="display: none;">
<h1>Database upgraded</h1>
<div class="success">
<p>
Your database has been upgraded to version:
<%=UmbracoVersion.Current.ToString(3)%>.<br />
Press <b>Continue</b> to proceed.
</p>
</div>
</div>
</asp:PlaceHolder>
<div class="loader">
<div class="hold">
<div class="progress-bar">
</div>
<span class="progress-bar-value">0%</span>
</div>
<strong></strong>
</div>
</div>
<!-- btn box -->
<footer class="btn-box" style="display: none;">
<div class="t"> </div>
<asp:LinkButton class="btn-step btn btn-continue" runat="server" OnClick="GotoNextStep"><span>Continue</span></asp:LinkButton>
<asp:LinkButton class="btn-step btn btn-back" Style="display: none;" runat="server" OnClick="GotoSettings"><span>Back</span></asp:LinkButton>
</footer>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
updateProgressBar("5");
updateStatusMessage("Connecting to database..");
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: '{}',
dataType: 'json',
url: 'InstallerRestService.aspx/InstallOrUpgrade',
success: function(data) {
var json = JSON.parse(data.d);
updateProgressBar(json.Percentage);
updateStatusMessage(json.Message);
if (json.Success) {
$(".btn-box").show();
$('.ui-progressbar-value').css("background-image", "url(../umbraco_client/installer/images/pbar.gif)");
$(".result-status-container").show();
$(".progress-status-container").hide();
} else {
$(".btn-continue").hide();
$(".btn-back").show();
$(".btn-box").show();
}
}
});
});
</script>
</asp:PlaceHolder>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论