bs前端--弹出子窗体

cs开发中，会有大量的子窗体，有模态的也有非模态的，有普通的提示框、确认框，也有包含复杂的输入控件，非常灵活。那么bs开发中，如何实现同样的效果呢？

网上搜了一下，有大量的JQuery对话框的插件，比较后发现最灵活的插件是JQuery Confirm，网上下载后可以查看demo。用法比较简单，这里说一下对话框加载动态网页的实现方式。

引入的js和css：

    <link rel="stylesheet" href="demo/libs/bootstrap.min.css">
<link rel="stylesheet" href="demo/libs/bootstrap-theme.min.css">
<script src="demo/libs/jquery.min.js"></script>
<script src="demo/libs/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-confirm.css" />
<script type="text/javascript" src="js/jquery-confirm.js"></script>

引入的js和cs：bootstrap的css文件、jquery的js文件、bootstrap的js文件、jquery-confirm的css文件、jquery-confirm的js文件。

下面看看如何点击按钮调用对话框，及其设置。

<body><div class="container"><div class="col-md-4"><button class="btn btn-primary btn-block example-p-2">Load Dymanic page</button><div id="selectedValue"></div></div></div>
</body>

添加一个按钮，设置class属性，窗体加载成功后，通过example-p-2做为选择器，得到按钮，添加click事件。

<script type="text/javascript">
$(function () {$(".example-p-2").on('click', function () {$.confirm({columnClass: 'col-md-10 col-md-offset-2',content: 'url:table.html',title: 'Title',contentLoaded: function (data, status, xhr) {var self = this;setTimeout(function () {$("#btnTest").addClass("btn").addClass("btn-primary");}, 1000);//加载后1秒在执行，如果直接执行或时间太短，则设置不生效},confirm: function () { var value = $("#table tr td :checked").parent().parent().children().next().html();$("#selectedValue").html("你选中的内容是：" + value);},});});
});
</script>

按钮点击，调用$.confirm函数启动对话框，其中content参数中可以指定静态html内容，也可以指定一个url地址，这里为url:table.html；contentLoaded参数指定内容加载后执行的函数，在这个函数中可以编写函数调整对话框中界面的内容，需要注意的是，直接对对话框中界面的调整是不生效的，这里延时1秒钟在执行。为验证效果，简单的设置加载页面中的按钮的class属性。confirm参数指定用户点击确认按钮后执行的函数，这里可以获取动态加载页面中的任意内容。

本例子是在对话框中加载一个table，用户可选择其中一项，点击确认按钮后，获取选中行的数据内容。

下面在看看table.html界面内容及注意事项。

由于table.html是动态加载到其他界面的，因此不能再引入css和js，但会自动使用父界面加载的样式和js。因此设计的时候可以指定bootstrap的css样式，编写js的时候直接调用jquery、bootstrap的js函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body><button id="btnTest">测试按钮</button><table id="table" class="table table-bordered table-condensed table-striped table-hover"><tr> <th>选择            </th> <th>Name</th><th>City</th><th>Company</th></tr><tr class="danger"><td><input type="radio" name="selected" value="0" /></td><td>Adara</td><td>Arquata del Tronto</td><td>At Nisi Cum LLP</td></tr><tr><td><input type="radio" name="selected" value="1"/></td><td>Heather</td><td>Springfield</td><td>Lorem Ipsum Dolor Associates</td></tr><tr><td><input type="radio" name="selected" value="2"/></td><td>Jenna</td><td>Milton Keynes</td><td>Pharetra Nam Ac Institute</td></tr> </table>
<script type="text/javascript">$(function () {$("tr").slice(1).click(function () {$("tr").slice(1).removeClass("danger");$(this).addClass("danger");$("input[type='radio']").attr("checked", false).prop("checked", false);$("input[type='radio']", this).attr("checked", true).prop("checked", true);});});
</script>
</body>
</html>

这里需要注意的是：界面加载后的js，设置了table中tr点击事件，点击后清除所有tr的class属性danger，在给当前行设置danger属性；清除所有行中radio选中状态，给当前行中的radio设置为选中状态。如果要实现多选，把radio改为checkbox，修改一下即可实现。设置radio选中状态时attr和prop都可以，但有时会不生效，因此这里都进行了设置。

slice(1)去掉了table的表头，点击表头不能生效。

bs前端--弹出子窗体相关推荐

JavaScript 弹出子窗体并返回结果到父窗体
思路:用window.showModalDialog方法获取到弹出子窗体的引用,再在子页面用window.returnValue="***"来返回结果. 示例代码:(用jQuery ...
[Prism框架实用分享]如何在主程序中合理的弹出子窗体
大家好说起子窗体,大家都会想到ChildWindow,多熟悉的一个控件.不错,Sliverlight中已经提供了子窗体的具体实现,而在WPF中却没有这么好的事情(有的第三方控件商已经提供此控件).最 ...
js layui 弹出子窗体_Layui中JS实现弹出层的应用
点我 //弹出一个页面层 var oBtn = document.getElementById('tab_1'); oBtn.onclick = function (){ layer.open({ t ...
【Qt】弹出子窗口时禁用主窗口
子窗口名:userManagerDialog Qt::WindowFlags flags = Qt::Dialog;userManagerDialog->setWindowFlags(flags ...
js 弹出子页面与关闭子页面刷新父页面的问题
在使用js弹出子页面并在关闭子页面的时候刷新父页面的时候遇到不能刷新的问题,为这个事郁闷了好久,在网上找相关的资料基本上都是使用window.opener.location.href=window.o ...
Vue2.x-01点击按钮弹出子Vue组件，遍历JSON展示数据
文章目录概述实现过程 Step1: 父组件设置Button按钮 Step2: 这里使用了showHandlerFlag来控制子组件是否显示,所里需要在data中定义下这个变量 Step3: 引用声 ...
winform弹出唯一窗体的方法
Form1中btn1按钮点击show出Form2,当Form2处于开启状态时,再次点击btn1不会继续弹出窗体,而是将焦点定位至已开启的Form2上: 当Form2关闭后,再次点击btn1则会show ...
EAS BOS f7弹出指定窗体的操作方法
A.定义F7窗体从list继承, 新建的F7窗体需实现implements KDPromptSelector,实现了KDPromptSelector就可以在f7窗体类中添加方法getData B. / ...
QT弹出子窗口隐藏任务栏
Qt开发界面程序时,有时需要弹出子窗口,但弹出子窗口时任务栏会多出一个图标,这样就不符合美观了,例如: 弹了的子窗口也会在任务栏那里显示那么如果只显示在界面上,不显示在任务栏中了,我们需要设置Win ...
[PYQT5] 主窗口弹出子窗口
需求: 在PYQT5中,点击主窗口中的按钮,弹出子窗口. 测试代码: 例1: 在主窗口添加按钮,并把按钮信号关联槽,在槽函数中创建子窗口对象赋值到普通变量,并调用其 show 方法. from PyQ ...

bs前端--弹出子窗体

bs前端--弹出子窗体相关推荐

最新文章

热门文章