5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记
最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下。希望读者不要在遇到和我一样的问题。
1 datepicker。不知道怎么自己下载的bootcss里面没找到datepicker,于是就选了Jquery UI的datepicker。使用的时候要注意两个问题。
如果页面上多个input ,并且id都是input1,那么在页面载入完成的时候调用$('#input1').datepicker(option),得到的结果是只有第一个成功格式化成datepicker;如果换一种选择器,比如$('input').datepicker(option),那么,每个都能触发datepicker的选择效果,但是,后面的元素选中日期之后只会体现在第一个上面。
2 bootstrap里面的modal。用一个button来触发modal的时候,有两个属性一定不要忘记,① data-toggle='modal' ② data-target='#myModal';顺便说一下,button的type 属性默认是submit,所以,记得赋值成button。然后是如果不想让modal在点到灰色区域的时候就关闭的话记得设置modal的 data-backdrop = 'static'。还有就是如果modal里面有datepicker,那么,默认情况下无法在点击input的时候显示出datepicker的日期选择框的。解决方案在stackoverflow有。链接戳这里。
关键js代码如下:
// Since confModal is essentially a nested modal it's enforceFocus method
// must be no-op'd or the following error results
// "Uncaught RangeError: Maximum call stack size exceeded"
// But then when the nested modal is hidden we reset modal.enforceFocus
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; $.fn.modal.Constructor.prototype.enforceFocus = function() {}; $confModal.on('hidden', function() {
$.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
}); $confModal.modal({ backdrop : false });
关于那段注释,大致意思就是说modal显示的时候必须让modal的enforceFocus方法制空(所谓的no-op否则的话会有个异常。)。然后隐藏的时候再还原。然后我自己用的时候估计是版本不同的缘故,要稍微修改一下。$confModal就是自己用的modal。
关键代码如下:
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
var $configModal = $(".temple");
$configModal.on('hide.bs.modal', function () {
$.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
});
改变了一下modal的事件名字,查了文档,上面给出的事件名字叫'hide.bs.modal'。如果你用的是bootcss,上面的名字还是hide,两个js文件不一样。还有就是bootstrap触发modal的时候不需要写$confModal.modal({ backdrop : false });应该在button那一步就完成事件绑定了。
虽然知道了上面的两点,但是做页面的时候还是出现了modal里面的datepicker"无法正常显示",还有就是显示了之后"无法选中日期的问题"。后来终于明白,其实是这个modal所在的页面有一个PartialView和model自身的modal-content的PartialView是同一个,导致了Id的重复。外面的PartialView正常情况下又是不显示的,所以一下子就不晓得问题出现的原因了,纠结了不少时间。 好在现在解决了。至于解决方案,就是在当modal显示出来的把modal里面元素的id都加上一个特定的前缀。关于加前缀这件事情,因为没注意$.find()方法其实查的是后代元素,也就是说$('<li>a</li>').find('li')其实find不到任何东西,坑了自己一下。。。
5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记的更多相关文章
- 浅析jquery ui的datepicker组件
今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个 ...
- jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...
- Jquery UI的datepicker插件使用方法
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...
- Jquery UI的datepicker插件使用
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...
- jQuery UI的datepicker日期控件如何让他显示中文
首先是引入UI的JS文件和模板文件,如下: <link rel=”stylesheet” href=”./ui/themes/le-frog/jquery.ui.all.css”> < ...
- jQuery UI的datepicker()与变更格式
继续MVC应用程序的练习,刚刚练习了jQuery的UI中的datepicker()的方法,它是为了让用户能在文本框中快捷输入日期. 代码简洁与简单. 打开以前练习的一个视图Views\Home\Ind ...
- Jquery ui datepicker 设置日期范围,如只能隔3天
最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...
- MVC自定义编辑视图,DateTime类型属性显示jQuery ui的datapicker
实现的效果为:在编辑视图中,对DateTime类型的属性,显示jQuery UI的datepicker.效果如下: Student.cs public class Student { ...
- jquery UI datepicker汉化
由于近期工作需要,jquery ui的datepicker需要汉化,特此把代码贴在这$(function() { $.datepicker.regional["zh-CN"] = ...
随机推荐
- python实现异步调用函数
import time from concurrent.futures import ThreadPoolExecutor def RunBenchmark(url): print('GET %s' ...
- 1034 Head of a Gang 图的遍历,map使用
命名冲突,导致编译失败.这大概就是之前看到的最好不要using namespace std:的原因
- 第50章:Java操作MongoDB-MongoDB和Spring
① Spring通过Spring Data MongoDB模块来集成和支持MongoDB ②Maven加入lib包 <dependency> <groupId>org.spri ...
- 微信二次开发点击菜单openId的获取
首先普及一个知识:一个关注的用户对于一个微信公众号是唯一的,也就是说一个用户针对与一个微信公众号是唯一的,对于不同的公众号,同一个微信号具有不同的openId; 在微信开发中,我们添加了一个二级菜单并 ...
- Python request 和response 初使用
request的get方法r=request.get(url)构造一个向服务器请求资源的Request对象, 返回一个包含服务器资源的Response对象. Request对象由Request库自动生 ...
- IOS 模拟器多开集成测试和那些坑
#### 前言公司一直没有IOS自动化,搞得很尴尬,个人感觉搞自动测试的,不搞IOS自动化,就像金X,少了重要一点啊.也向领导申请过不止一次,总只都各种原因没有分配机器,不了了之.某天线上IOS出bu ...
- Mapreduce操作HBase
这个操作和普通的Mapreduce还不太一样,比如普通的Mapreduce输入可以是txt文件等,Mapreduce可以直接读取Hive中的表的数据(能够看见是以类似txt文件形式),但Mapredu ...
- ETC的发展演变
ETC是不停车电子收费系统,ETC专用车道是给那些装了ETC车载器的车辆使用的,采用电子收费方式. ETC( Electronic Toll Collection ) 不停车收费系统是目前世界上最 ...
- 在码云(gitee)上展开程序类课程教学
码云主要提供了源代码管理(Git/SVN)功能,最近又推出了高校版让普通老师也能利用起来以供教学使用. 学生与老师不仅能利用其管理代码,更重要的是我们的程序教学能通过对git的使用来引入业界流行的软件 ...
- ZKWeb网页框架2.2正式发布
2.2.0更新的内容有 重构依赖注入容器 使用无锁算法 (可能导致不兼容) 使用 ContainerFactoryData 创建实例 (可能导致不兼容) 删除静态的 ContainerFactoryC ...