宝哥软件园

jquery用户界面日期选择器时间控制冲突解决

编辑:宝哥软件园 来源:互联网 时间:2021-09-06

由于公司项目发展迅速,很多事情没有整理好,所以潜在的问题很多。最近遇到了一个比较坑的问题。datepicker有两个插件库,datepicker插件很有名。一个是jQuery-UI,一个是bootstrap。这两个api网址是

然而不幸的是,这两个库都在项目中使用。然后发生了以下情况:http://jqueryui.com/datepicker/和http://引导数据库。readthedocs.io/en/latest/index.html.

平时不知道用哪个组件。

主要的问题是,如果你们两个成分相同,我就没有问题了。这两个组件在各种细节上完全不同。

这次的问题是我的日期选择器框被盖住了,如下图所示(上面的年份开关丢失了):

找了一下,发现渲染组件的时候自动加了z-index: 10,然后被上面固定的顶栏盖住了。然而,这种情况是没有必要的。每台电脑上的情况都不一样。在我看来,是谁的组件先加载导致的。(逻辑上,打包的项目按照index.html文件中引用的顺序排列,这应该是相同的调用顺序,但是在某些计算机上顺序会颠倒。有没有大神可以解答?)

因此,为了确定加载了哪一个,我编写了以下代码进行实验:

//初始化日期控制var $ buy=$(' input # ABC ');var BuyDatePicker=$ BuyDate . DatePicker({ language : ' zh-CN ',format: 'yyyymm ',minViewMode: 'months ',autoclose: true,onSelect: function(){ console . log(' a ');},onClose:函数(){ console . log(' b ');}});$buyDate.on('show ',function(){ $(. datepicker . datepicker-drop down . drop down-menu ')。css('z-index ',1000);});大部分都是常见的,其中onSelect和onClose是jQuery-UI,show事件绑定在bootstrap上。

但是跑了一趟之后,我很惊讶,他们没有一个被处决,而且都没用。然后冷静下来仔细想一想。应该是这样的。

1.bootstrap的组件首先执行,然后再次呈现。

2.然后让jQuery-UI再次渲染,但是它没有覆盖前面的组件。

3.演出事件的绑定再次执行。但是这次是jQuery-UI重新渲染,无法读取监控事件,随意失败。

我估计在别人的电脑上,情况正好相反,他们先执行jQuery-UI的组件就可以了。

我没有发现其他人在网上写冲突。如果有人遇到,提供一个坑。以后避免踩坑。

以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

更多资讯
游戏推荐
更多+