data-remote的作用主要是用来传递URL:
1.用<button>按钮作为模态框触发器
<button id = 'test' data-remote=‘retire/add/dead’> 中data-remote传递的值可在js中用如下方法取出
var url = $('#test').data('remote'); 此时变量url的值就是 'retire/add/dead'
完整流程代码示例:
要显示模态框的页面(index.jsp):
<button id="test" data-toggle="modal" data-remote="retire/add/dead"> 添加 </button>
<div class="modal" id="deadAdd" style="display: none"> </div>
数据来源页(addModel.jsp):
<div class="modal-dialog"> <div class="modal-content" > <div class="modal-header"> <button data-dismiss="modal" class="close">×</button> <h3 class="modal-title">模态框标题</h3> </div> <div class="modal-body"> <h3>body</h3> </div> <div class="modal-footer"> <button class="btn btn-sm" data-dismiss="modal">关闭</button> <button class="btn btn-sm btn-success">提交</button> </div> </div> </div>
js代码:
<script> $('#test').click(function (event) { //如果是a链接,阻止其跳转到url页面 event.preventDefault(); //获取url的值 var url = $('#test').data('remote')||$('#test').attr('href'); //将id为deadAdd的页面元素作为模态框激活 $('#deadAdd').modal(); //从url加载数据到模态框 $('#deadAdd').load(url); }) </script>
后台代码(此处一springMVC框架为例,类路径为@RequestMapping('retire')):
@RequestMapping(value = "add/dead") public ModelAndView addDead(){ ModelAndView mv = new ModelAndView("addModel"); return mv; }
流程梳理:当用户点击index页面的添加按钮时会触发js代码里的点击事件,点击事件触发的方法里
先通过jquery的preventDefault()方法阻止a链接进行页面跳转(如果模态框触发器是a链接的话)
接着通过jquery的data()方法(获取data-remote 的值)attr()方法(获取a链接的href的值)获取到
<a>或<button>的href或data-remote传递的url
然后用bootStrap的modal()方法激活index页面某个<div>作为模态框
最后用jquery的load(url)方法加载数据到index页面中模态框的.modal-content中
这样index页面的模态框就会显示出来。
2.用<a>标签作为模态框触发器
用<a>标签作为模态框触发器时可用href属性来替代data-remote来传递url,如果想着要做需要注意两点:
①取值时用jquery的attr('href')方法
②激活时先调用jquery的preventDefault()方法来取消<a>标签的默认行为(即:组织<a>标签跳转到url)
完整流程代码示例:
要显示模态框的页面(index.jsp):
<a id="test" data-toggle="modal" data-remote="retire/add/dead"> 添加 </a>
也可写为
<a id="test"data-toggle="modal" href="retire/add/dead" > 添加 </a>
<div class="modal" id="deadAdd" style="display: none">
</div>
数据来源页(addModel.jsp):
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button data-dismiss="modal" class="close">×</button>
<h3 class="modal-title">模态框标题</h3>
</div>
<div class="modal-body">
<h3>body</h3>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-danger" data-dismiss="modal">关闭</button>
<button class="btn btn-sm btn-success">提交</button>
</div>
</div>
</div>
js代码:
<script>
$('#test').click(function (event) {
//如果是a链接,阻止其跳转到url页面
event.preventDefault();
//获取url的值
var url = $('#test').data('remote')||$('#test').attr('href');
//将id为deadAdd的页面元素作为模态框激活
$('#deadAdd').modal();
//从url加载数据到模态框
$('#deadAdd').load(url);
})
</script>
后台代码(此处一springMVC框架为例,类路径为@RequestMapping('retire')):
@RequestMapping(value = "add/dead")
public ModelAndView addDead(){
ModelAndView mv = new ModelAndView("addModel");
return mv;
}