中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

Bootstrap~大叔封裝的彈層(ceng)

回到目錄

對(dui)于Bootstrap的(de)(de)彈層，插件有很多，今(jin)天主(zhu)要(yao)用(yong)的(de)(de)是它自帶的(de)(de)功能，通過(guo)bootstrap提供的(de)(de)模(mo)式窗(chuang)口來實現的(de)(de)，而大叔主(zhu)要(yao)對(dui)使用(yong)方(fang)法進(jin)行(xing)了封裝(zhuang)，開發人員可(ke)以自己動態傳入彈層的(de)(de)ＨＴＭＬ內容，可(ke)以控制按鈕的(de)(de)顯示與隱藏，用(yong)戶通過(guo)ＭＶＣ擴展方(fang)法對(dui)彈層進(jin)行(xing)生成(cheng)，然后使用(yong)A標簽(qian)進(jin)行(xing)調用(yong)．

具體使用很簡單

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

上(shang)面(mian)代碼分為兩塊，第(di)一塊ＭＶＣ擴展(zhan)方法，主要(yao)用(yong)(yong)于在頁(ye)面(mian)上(shang)輸出彈(dan)層的代碼段(duan)，第(di)二(er)段(duan)是Ａ標(biao)簽(qian)的調用(yong)(yong)，主要(yao)用(yong)(yong)于綁定上(shang)面(mian)的彈(dan)層控件(jian)．

下(xia)面主要看一下(xia)彈層的(de)擴展方法(fa)，它(ta)使用(yong)了Func<string, HelperResult>這個委托，用(yong)來接收(shou)前臺的(de)HTML代(dai)碼(ma)段，這對于開發人員是(shi)個福(fu)音，你不用(yong)關心如何去拼接ＨＴＭＬ代(dai)碼(ma)了，而(er)是(shi)直(zhi)接把前臺給我們的(de)代(dai)碼(ma)復制過(guo)來即(ji)可(ke)．

彈層方法

    #region Bootstrap彈層
        /// <summary>
        /// bootstrap風格(ge)的彈(dan)層
        /// </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, "詳(xiang)細", isBtn, result);
        }
        /// <summary>
        /// bootstrap風格的(de)彈層
        /// </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'>
                         關(guan)閉
                     </button>
                     <button type='button' class='btn btn-primary' id='subBtn'>
                         提交
                     </button>
                  </div>";
            }
            templete +=
            @"</div>
                </div>
                  &lt;/div>
                    <script>
                        $('#subBtn').click(function(){$('#dialogContent form').submit();});
                     </script>";
            return MvcHtmlString.Create(templete);

        }
        #endregion

而運行的效果是我(wo)們可(ke)以想(xiang)到的

感謝咱們的閱讀！

回到目錄

posted @ 2016-07-19 14:32  張占嶺  閱讀(2184)  評論(1)    收藏  舉報