jQuery UI slider conflicting with jQuery Mobile slider

问题

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

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.

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.

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.

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

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?

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.

Any ideas?

回答1:

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;

the code example will be:

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

回答2:

Here is a workaround, not exactly a fix. I used the JQM download builder with all options checked except the slider because I am using the jQ-ui slider. Problem solved, except I can't use the JQM slider now. Not that I need to.

来源：https://stackoverflow.com/questions/10146868/jquery-ui-slider-conflicting-with-jquery-mobile-slider

标签

jquery-ui

jquery-mobile

sliders