引导页后渐隐显示首页
本章将汇总一些解决项目实施需求的组件案例，对灵活开发和应用 WebFuture 产品组件功能提供启示实例。本文讲述引导页后渐隐显示首页。
初始需求
客户提出需要在网站首页加入引导信息的效果，能提取节点文章信息内容，实现点击跳过、渐入到首页效果等效果。
演示效果
使用方法
先写了一个“弹出引导页”的组件，绑定节点加载内容信息：
@inject StringExtensionsHelper StringExtensionsHelper
@inject SiteService SiteService
@inject SiteContentManageConfigService SiteContentManageConfigService
@inject ArticleService ArticleService
@inject ArticleExtend ArticleExtend
@Power.VisualizationPartialView(new
{
Description = "弹出引导页"
})
@{
var currentSite = SiteService.CurrentSite();
var url = Context.Request.GetUri().ToString();
var contentManageConfig = SiteContentManageConfigService.GetCurrentSiteConfig();
var enableUserContribute = contentManageConfig?.EnableUserContribute ?? false;
}
<!-- Bonus S -->
<div id="bonus">
<div class="hd">
<h1 title="@this.Context.GetCurrentSite().SiteTitle" id="logo"><a href="@Power.Url.SiteUrl(currentSite.Subdomain)"><img src="@StringExtensionsHelper.ToUrl(this.Context.GetCurrentSite().LogoUrl)" /></a></h1>
</div>
<span id="domiao"></span>
<div class="bd">
<div class="siteWidth">
@{
var articles = ArticleService.GetAll().Where(x => x.NodeId == 205 && x.Status == Status.Approve).OrderByDescending(x => x.PublishTime).Take(1).ToList();
if ((articles != null) && articles.Any())
{
foreach (var article in articles)
{
<div class="con">
@ArticleExtend.Content(article)
</div>
}
}
}
</div>
</div>
</div>
在布局页模板中，加入该组件以及相应的js代码：
@Power.Partial("弹出引导页")
<script type="text/javascript">
var bonusheight = $('#bonus').height();
var jjlyn = false;
function move(ss) {
var elem = document.getElementById("domiao");
var miao = 60;
$('#domiao').html("点击跳过 " + miao);
var id = setInterval(frame, 1000);
function frame() {
if (miao <= 0) {
clearInterval(id);
_hidePage();
} else {
miao--;
$('#domiao').html("点击跳过 " + miao);
}
}
$('#domiao').click(function () { miao = 0 });
}
var _showPage = function () {
$(".wrap").hide();
$('#bonus').animate({
'height': bonusheight
}, 600);
$("#jjlBtn").removeClass("on");
jjlyn = true;
move();
}
var _hidePage = function () {
$(".wrap").show();
$('#bonus').animate({
'height': 0
}, 600);
$("#jjlBtn").addClass("on");
jjlyn = false;
}
if (jQuery("#bonus .bd .con").size() === 0) {
$('#jjlBtn').hide();
jjlyn = true;
}else{
$('#bonus').show();
_showPage();
}
$('#jjlBtn').click(function () {
if( jjlyn ){
_hidePage();
}else{
_showPage();
}
});
</script>
最后写入相应的样式即可。