bootstrap remote用法是什么

bootstrap remote的用法:首先设置主页面,并放置好一个模态框;然后在主页面上放一个按钮来触发这个模态窗口的显示;接着给这个按钮绑定点击事件;最后通过“remote: '/sys/toAddUser'”从远程加载内容的地址即可。



本教程操作环境:Windows7系统、bootsrap3.3.7版,该方法适用于所有品牌电脑。

推荐:《bootstrap视频教程》《css视频教程》

Bootstrap的Modal这个模态窗组件还是很好用的,但在开发的过程中模态窗中的内容大部分都是从后端加载的。要实现模态窗的内容是从后端加载话,常用的实现方式有2种。它们是:

(1)Modal里面套一个Iframe,通过Iframe的src去加载远程的内容。这种方式的缺点是这个模态框的宽度和高度不好调,而且把宽度和高度设置成固定值,就破坏了bootstrap的响应式布局了。

(2)使用Modal的remote参数去加载远程的内容。这种方式有些小bug(后面会介绍解决方案),不过这种方式没有上一种方式需要手动设置的宽度和高度的麻烦。

个人比较喜欢第2种方式,这样就介绍下使用remote的方式。

注:本次使用的bootsrap的版本是 3.3.7

一、页面的准备

(1)主页面

主页面这里,先放置好一个模态框,不过模态框里面的内容是空白的。后续远程加载后的数据就会自动填充到class="modal-content"这个Div里面。准备好如下html代码:

1

2

3

4

5

6

7

8

9



        



          



              



                

              



            



          



        

放置好模态窗口后,我们可以在主页面上放一个按钮来触发这个模态窗口的显示,这个按钮的html代码如下:

1

新增用户

按钮和模态窗好后,我们需要给这个按钮绑定点击事件,点击后显示模态窗口并从远程加载数据。js代码如下:

1

2

3

4

5

6

7

8

$("#addBtn").click(function(){

        // 打开模态框

        $("#showModal").modal({

            backdrop: 'static',     // 点击空白不关闭

            keyboard: false,        // 按键盘esc也不会关闭

            remote: '/sys/toAddUser'    // 从远程加载内容的地址

        });

});

主页面的内容就是这些,注意:开始的那些引入bootstrap相关的代码我没贴,使用时需要自己引入好。

(2)待加载到模态框里面的页面准备

首先,我先说下,这个页面里面不需要引入和任何的js和css。因为这个页面加载到模态框里面后,就相当于主页面上的一部分了。有点像主页面把它给动态导入的感觉,它可以访问主页面的任何内容。这个页面可以看成是class="modal-content" 这个DIV内容,加载后就把这些html代码嵌入到里面去了。因此写这个页面时,我们可以去bootstrap官网copy一个模态框的代码,把里面的内容那块抽取出来做我们这个远程页面是最适合的了。 我准备的代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24
 



    ×

    添加用户

  



  



    

      



        账号

        

      



      



        用户名

        

      



      



        密码

        

      



    

  



  



    重置

    提交

  



二、后台的介绍

其实后台代码没什么介绍的,当点击主页面的按钮后,后台接收到这个请求,把准备好的页面返回过去就ok。用SpringMvc一下就实现。故不介绍。

三、最终效果

通过点击主页面的新增按钮,弹出了模态框,并把远程的页面加载到了远程模态框里面。



四、解决下小bug

(1)经过测试,发现这个模态窗的内容重后台加载一次后,再关闭这个模态窗再打开时不会再从后台加载。

(2)这个模态框里面的内容在加载后就留在了主页面上,主页面可以直接访问。这样容易出现问题,如:主页中有个dom元素的id和模态框里面的dom元素的id相同,这就容易出bug,我们希望模态窗关闭后直接把模态窗里面的内容都清除掉。

解决上面2个bug的方案见下面这段js代码,其实是监听了模态窗的关闭

1

2

3

4

5

6

// 每次隐藏时,清除数据,确保不会和主页dom元素冲突。确保点击时,重新加载。

$("#showModal").on("hidden.bs.modal", function() {

     // 这个#showModal是模态框的id

     $(this).removeData("bs.modal");

     $(this).find(".modal-content").children().remove();

});

五、说下注意事项

要注意的是远程加载的这个页面其实是一小段html代码,它不需要单独的引入js和css(如bootstrap的js和css)。这和使用Iframe方式是完全不同的,Iframe里面的内容可以看成是个单独的页面,所以使用Iframe时需要自己引入js和css。

1606983358693844.jpg

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值