快捷導(dǎo)航

Bootstrap被封裝的彈層

更新時(shí)間：2016年07月20日 10:03:53 作者：張占嶺

這篇文章主要介紹了Bootstrap被封裝的彈層的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

對(duì)于Bootstrap的彈層，插件有很多，今天主要用的是它自帶的功能，通過(guò)bootstrap提供的模式窗口來(lái)實(shí)現(xiàn)的，而小編主要對(duì)使用方法進(jìn)行了封裝，開(kāi)發(fā)人員可以自己動(dòng)態(tài)傳入彈層的ＨＴＭＬ內(nèi)容，可以控制按鈕的顯示與隱藏，用戶通過(guò)ＭＶＣ擴(kuò)展方法對(duì)彈層進(jìn)行生成，然后使用A標(biāo)簽進(jìn)行調(diào)用．

具體使用很簡(jiǎn)單

@Html.GenerateDialog("測(cè)試",true, 
@<div>
<form action="/home/index">hello world!</form>
</div>)
<a data-toggle='modal' data-target='#LindModal'>測(cè)試彈層</a>

上面代碼分為兩塊，第一塊ＭＶＣ擴(kuò)展方法，主要用于在頁(yè)面上輸出彈層的代碼段，第二段是Ａ標(biāo)簽的調(diào)用，主要用于綁定上面的彈層控件．

下面主要看一下彈層的擴(kuò)展方法，它使用了Func<string, HelperResult>這個(gè)委托，用來(lái)接收前臺(tái)的HTML代碼段，這對(duì)于開(kāi)發(fā)人員是個(gè)福音，你不用關(guān)心如何去拼接ＨＴＭＬ代碼了，而是直接把前臺(tái)給我們的代碼復(fù)制過(guò)來(lái)即可．

彈層方法

#region Bootstrap彈層
/// <summary>
/// bootstrap風(fēng)格的彈層
/// </summary>
/// <param name="htmlHelper"></param>
/// <param name="isBtn"></param>
/// <param name="result"></param>
/// <returns></returns>
public static MvcHtmlString GenerateDialog(this HtmlHelper htmlHelper, bool isBtn, Func<string, HelperResult> result)
{
return GenerateDialog(htmlHelper, "詳細(xì)", isBtn, result);
}
/// <summary>
/// bootstrap風(fēng)格的彈層
/// </summary>
/// <param name="htmlHelper"></param>
/// <param name="title"></param>
/// <param name="isBtn"></param>
/// <param name="result"></param>
/// <returns></returns>
public static MvcHtmlString GenerateDialog(this HtmlHelper htmlHelper, string title, bool isBtn, Func<string, HelperResult> result)
{
string templete = @"<div class='modal fade' id='LindModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close'
data-dismiss='modal' aria-hidden='true'>
&times;
</button>
<h4 class='modal-title' id='myModalLabel'>"+title+
@"</h4>
</div>
<div class='modal-body' id='dialogContent'>
" + result.Invoke(null) + "</div>";
if (isBtn)
{
templete +=
@"<div class='modal-footer'>
<button type='button' class='btn btn-warning'
data-dismiss='modal'>
關(guān)閉
</button>
<button type='button' class='btn btn-primary' id='subBtn'>
提交
</button>
</div>";
}
templete +=
@"</div>
</div>
</div>
<script>
$('#subBtn').click(function(){$('#dialogContent form').submit();});
</script>";
return MvcHtmlString.Create(templete);
}
#endregion

而運(yùn)行的效果是我們可以想到的