jQuery UI滑块与jQuery Mobile滑块冲突

Question

我正在构建一个jQuery移动网站,但也需要使用jQuery UI小部件 - 特别是滑块.

问题是这些功能发生冲突.我真的希望jQm用他们的'移动'前缀编写他们的ui东西,但我认为现在可能已经太迟了.

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

如果我这样做,jQuery移动自定义转换的另一种方式工作,但然后jquery ui滑块,因为他们使用jQm滑块而不是.

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

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

我在这里找到了一些东西https://github.com/aFarkas/jMediaelement/issues/17 并尝试了代码,但无法使其在我的功能中运行.

有任何想法吗？

Answer 1

这对我有用.如果其他人有同样的问题.我必须在jquery ui之后和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>