jQuery UI 滑块与 jQuery Mobile 滑块冲突 [英] jQuery UI slider conflicting with jQuery Mobile slider

问题描述

我正在构建一个 jQuery 移动网站，但还需要使用 jQuery UI 小部件——尤其是滑块.

I am building a jQuery mobile site but also need to use jQuery UI widgets- in particular slider.

问题是这些功能冲突.我真的希望 jQm 用mobile-"前缀编写他们的 ui 内容，但我认为现在可能为时已晚.

Problem is that these functions conflict. I really wish that jQm had written their ui stuff with a 'mobile-' prefix but I should think its probably too late for that now.

这是我遇到的问题.如果我在 jquery mobile jquery ui 滑块工作后加载 jquery ui - 很好，但是我的自定义页面转换不起作用，毫无疑问 jQm 中的其他内容被覆盖，我还不知道.

This is the problem I am having. If I load jquery ui after jquery mobile jquery ui sliders work- great BUT then my custom page transitions dont work and no doubt loads of other stuff in jQm is overwritten that I don't know about yet.

如果我以 jQuery 移动自定义转换工作的另一种方式来做，但是 jquery ui 滑块不使用，因为它们使用 jQm 滑块代替.

If I do it the other way round jQuery mobile custom transitions work, but then jquery ui sliders dont since they use jQm sliders instead.

我不能使用 jQm 滑块，因为我需要 jQuery UI 滑块的垂直选项和其他功能.

I can't use jQm sliders as I need the vertical option and other features of jQuery UI sliders.

我正在寻找的是某种解决方案，它不涉及我破解 jQuery UI 或 jQuery Mobile，因为如果可能的话，我不想在每次更新 jQm/jUI 时都进行这些更改.那么有没有一种方法可以加载jquery ui，以便我调用以'ui-'或jQuery mobile为前缀的函数，以便其冲突函数以'mobile'为前缀-也许在我的jqm自定义js中的移动初始化函数中?

What I am looking for is some kind of solution that does not involve me hacking either jQuery UI or jQuery Mobile because I don't want to have to do these changes with every update of jQm/jUI if possible. So is there a way that I can load jquery ui so that I call its functions prefixed with ' ui-' or jQuery mobile so that its conflicting functions are prefixed with 'mobile'- maybe in the mobile init function in my jqm custom js?

我在这里找到了一些东西 https://github.com/aFarkas/jMediaelement/issues/17并尝试了代码，但无法使其在我的函数中工作.

I have found something here https://github.com/aFarkas/jMediaelement/issues/17 and have tried the code but cant make it work in my function.

有什么想法吗?

推荐答案

这对我有用.如果其他人有同样的问题.我必须在 jquery ui 之后和 jquery mobile 之前添加下一行

this worked for me. if some other has the same problem. I had to add the next line after jquery ui and before jquery mobile

$.fn.uislider = $.fn.slider;

代码示例将是:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>  
    // rename to avoid conflict with jquery mobile
    $.fn.uislider = $.fn.slider;
  </script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
<script>
  $(function() {
    $( "#slider" ).uislider();
  });
  </script>

这篇关于jQuery UI 滑块与 jQuery Mobile 滑块冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！