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移动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的mobile init函数中?

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屋！