转载

Bootstrap~大叔封装的弹层

回到目录

对于Bootstrap的弹层，插件有很多，今天主要用的是它自带的功能，通过bootstrap提供的模式窗口来实现的，而大叔主要对使用方法进行了封装，开发人员可以自己动态传入弹层的ＨＴＭＬ内容，可以控制按钮的显示与隐藏，用户通过ＭＶＣ扩展方法对弹层进行生成，然后使用A标签进行调用．

具体使用很简单

 @Html.GenerateDialog("测试",true,  @<div>     <form action="/home/index">hello world!</form> </div>) <a data-toggle='modal' data-target='#LindModal'>测试弹层</a>

上面代码分为两块，第一块ＭＶＣ扩展方法，主要用于在页面上输出弹层的代码段，第二段是Ａ标签的调用，主要用于绑定上面的弹层控件．

下面主要看一下弹层的扩展方法，它使用了Func<string, HelperResult>这个委托，用来接收前台的HTML代码段，这对于开发人员是个福音，你不用关心如何去拼接ＨＴＭＬ代码了，而是直接把前台给我们的代码复制过来即可．

弹层方法

     #region Bootstrap弹层         /// <summary>         /// bootstrap风格的弹层         /// </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, "详细", isBtn, result);         }         /// <summary>         /// bootstrap风格的弹层         /// </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'>                                                ×                                            </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'>                          关闭                      </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

而运行的效果是我们可以想到的

Bootstrap~大叔封装的弹层

感谢咱们的阅读！

回到目录

原文 http://www.cnblogs.com/lori/p/5684708.html

正文到此结束

所属分类：编程技术

本文标签： UI Action 目录 Region http tar src 开发 ip 插件 db HTML 代码 tab Bootstrap ORM 测试
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二