最近公司在用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 小记的更多相关文章

  1. 浅析jquery ui的datepicker组件

    今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个 ...

  2. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  3. Jquery UI的datepicker插件使用方法

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...

  4. Jquery UI的datepicker插件使用

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...

  5. jQuery UI的datepicker日期控件如何让他显示中文

    首先是引入UI的JS文件和模板文件,如下: <link rel=”stylesheet” href=”./ui/themes/le-frog/jquery.ui.all.css”> < ...

  6. jQuery UI的datepicker()与变更格式

    继续MVC应用程序的练习,刚刚练习了jQuery的UI中的datepicker()的方法,它是为了让用户能在文本框中快捷输入日期. 代码简洁与简单. 打开以前练习的一个视图Views\Home\Ind ...

  7. Jquery ui datepicker 设置日期范围,如只能隔3天

    最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的   datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...

  8. MVC自定义编辑视图,DateTime类型属性显示jQuery ui的datapicker

    实现的效果为:在编辑视图中,对DateTime类型的属性,显示jQuery UI的datepicker.效果如下: Student.cs public class Student    {       ...

  9. jquery UI datepicker汉化

    由于近期工作需要,jquery ui的datepicker需要汉化,特此把代码贴在这$(function() { $.datepicker.regional["zh-CN"] = ...

随机推荐

  1. 用chrome模拟微信浏览器访问页面

    有的网页通过限制 user agent  来达到禁止在微信浏览器以外的地方访问,我们通过chrome修改user agent即可破解. CHROME浏览器,进入开发者模式 切换到手机浏览模板 打开 N ...

  2. linux下使用iptables统计ip/端口流量

    1.添加ip/端口的流量统计 入网流量: iptables -A INPUT -d 出网流量: iptables -A OUTPUT -s 2.查看流量统计信息 iptables -L -v -n - ...

  3. php实现最简单的MVC框架实例教程

    本文以一个实例的形式讲述了PHP实现MVC框架的过程,比较浅显易懂.现分享给大家供大家参考之用.具体分析如下: 首先,在学习一个框架之前,基本上我们都需要知道什么是mvc,即model-view-co ...

  4. [转]MYSQL性能查看(命中率,慢查询)

    网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...

  5. HDU - 1241 Oil Deposits 经典dfs 格子

    最水的一道石油竟然改了一个小时,好菜好菜. x<=r  y<=c  x<=r  y<=c  x<=r  y<=c  x<=r y<=c #include ...

  6. VMware安装xp虚拟机

    VMware安装xp虚拟机 1.用到的软件: 2.安装VMware:  接受 选择自定义 要等上一小会. 输入密钥:百度一个就可以了. 安装成功: 禁用VMware网卡: 3.安装xp系统: 创建新的 ...

  7. Exp3 免杀原理与实践 ——20164325王晓蕊

    一.实践基本内容 1.实践目标 (1) 正确使用msf编码器(√),msfvenom生成如jar之类的其他文件(√),veil-evasion(√),加壳工具(√),使用shellcode编程(√) ...

  8. 微软SSAS 错误 Internal error: Invalid enumeration value. Please call customer support! 不是此元素的有效值。

    错误 118 Internal error: Invalid enumeration value. Please call customer support! 不是此元素的有效值. 错误 119 分析 ...

  9. 《Java性能调优》学习笔记(1)

    性能的参考指标 执行时间 -- 从代码开始运行到结束的时间 CPU时间 -- 函数或者线程占用CPU的时间 内存分配 -- 程序在运行时占用内存的情况 磁盘吞吐量 -- 描述IO的使用情况 网络吞吐量 ...

  10. Akka-Cluster(4)- DistributedData, 分布式数据类型

    在实际应用中,集群环境里共用一些数据是不可避免的.我的意思是有些数据可以在任何节点进行共享同步读写,困难的是如何解决更改冲突问题.本来可以通过分布式数据库来实现这样的功能,但使用和维护成本又过高,不值 ...