bootstrap style for jQuery UI Dialog
页面引用:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/jquery-ui-bootstrap-v0.5pre/css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.min.js"></script>
</head>
<body>
<div id="dialog">asdfasdf</div>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
width: 500,
height: 400,
autoOpen: true,
resizable: false,
buttons: [
{
id: "okaybutton",
text: "okay"
},
{
id: "nookaybutton",
text: "nookay"
},
{
id: 'checkboxplaceholder',
text: "勾选框",
}
],
open: function () {
$("#okaybutton").removeClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only")
.addClass("btn btn-primary"); $("#nookaybutton").removeClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only")
.addClass("btn btn-default"); //replace send email button with a checkbox
$("#checkboxplaceholder").replaceWith("<label class='sendEmailText' for='sendEmailCheckBox'>发送邮件提醒</label><input type='checkbox' class='sendEmailCheckBox' id='sendEmailCheckBox' checked />");
}
});
});
</script> <style type="text/css">
.saveAndCreateNext {
background-color: black !important;
} .sendEmailCheckBox {
position: absolute;
left: 20px;
margin-top: 17px !important;
} .sendEmailText {
position: absolute;
margin-top: 15px;
left: 40px;
color: #333333;
}
</style>
</body>
</html>
按照头中的路径引用到对应文件(jquery-ui-bootstrap-v0.5pre\css\custom-theme路径下会有images图片,勿忘)
效果如下:

提交时用checkbox的id拿对应的值(var isSendEmail = $("#sendEmailCheckBox").prop("checked"););
bootstrap style for jQuery UI Dialog的更多相关文章
- [转]jQuery UI Dialog Modal Popup Yes No Confirm example in ASP.Net
本文转自:http://www.aspsnippets.com/Articles/jQuery-UI-Dialog-Modal-Popup-Yes-No-Confirm-example-in-ASPN ...
- jQuery UI dialog 的使用
今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框. 1 <input type= ...
- Jquery - UI - Dialog(转)
jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- API分析——Jquery UI Dialog
1.阅读API文档的一般方法? 通常地, API由三部分构成:属性.方法.事件. 属性表示参数配置,作为一个组件的微调,或者功能的开启与关闭: 方法表示组件能够发生的动作,或者组件的状态监测: 事件表 ...
- jQuery UI dialog 參数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...
- jQuery UI dialog 参数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比如弹出两个层A和B B层如果显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,因为B层是在A层上弹出的 ...
- JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
- jQuery UI dialog
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...
随机推荐
- 一种扩大View点击范围的方法
Rect rect = new Rect();mBt0.getHitRect(rect); rect.bottom += 400; TouchDelegate touchDelegate = new ...
- 用PHP+MySQL来做分页的演示
用php做分页弄懂逻辑关系其实不难,不过我在听课的时候估计是被老师讲的那些变量里的英文单词给听懵了,因为有几个变量的名字都很像,只是换了两三个英文字母而已,有的就少几个这样的,听到一半已经不知道老师讲 ...
- C++的隐式类型转换与转换操作符
C++标准允许隐式类型转换,即对特定的类,在特定条件下,某些参数或变量将隐形转换成类对象(创建临时对象).如果这种转换代价很大(调用类的构造函数),隐式转换将影响性能.隐式转换的发生条件:函数调用中, ...
- PHP空数组转化为json对象的问题
例子: $a = []; echo json_encode($a); echo json_encode($a, JSON_FORCE_OBJECT); 输出结果: [] {}
- JVM1.6 GC详解
前言 JVM GC是JVM的内存回收算法,调整JVM GC(Garbage Collection),可以极大的减少由于GC工作,而导致的程序运行中断方面的问题,进而适当的提高Java程序的工作效率. ...
- SDWebImage总结
SDWebImage 支持异步的图片下载+缓存,提供了 UIImageView+WebCache的 category,方便使用. 优点:首先NSURLCache是缓存原始数据(raw data)到磁盘 ...
- [Maven]Maven详解
转自:http://www.cnblogs.com/hongwz/p/5456578.html 一.前言 以前做过的项目中,没有真正的使用过Maven,只知道其名声很大,其作用是用来管理jar ...
- OAF_开发系列11_实现OAF通过DataBoundValues动态显示表列的左右对齐
20150712 Created By BaoXinjian
- [Android]android studio预览视图时报错
报错信息: 详细报错信息: java.lang.NoSuchMethodError: com.android.ide.common.rendering.api.LayoutlibCallback.ge ...
- Django中提示TemplateDoesNotExist?
用的是1.9版本.需要在settings.py文件中设置TEMPLATES下的DIRS如下: TEMPLATES = [ { 'BACKEND': 'django.template.backends. ...