JQuery滑块和iui(iphone)之间的冲突(conflict between JQuery slider and iui (iphone))

编程入门 行业动态 更新时间:2024-10-28 18:30:23
JQuery滑块和iui(iphone)之间的冲突(conflict between JQuery slider and iui (iphone))

我试图在iphone网络应用程序上获得一个滑块,我正在使用iui来处理ui。 滑块似乎与iui.js发生某种冲突,当您拖动滑块时,它会尝试打开另一页。 但是,只需单击栏的某个部分,它就可以正常工作。 我认为这是导致它的幻灯片事件,但是在这两种情况下都触发了这个事件,所以我有点卡住了。 任何帮助将不胜感激。

简单的测试用例(点击以获取滑块):

<head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <script type="application/x-javascript" src="http://www.joehewitt.com/iui/iui/iui.js"></script> <link href="http://www.joehewitt.com/iui/iui/iui.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script language="javascript"> $(document).ready(function(){ $("#slider").slider() }); </script> </head> <body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> </div> <ul title="slider test" selected="true"> <li class="group">Page 1</li> <li> <a class="mainnav" href="#page2">page 2</a> </li> </ul> <div id="page2" title="foo.inc"> <div id="slide_container"> <div id="slider"></div> </div> </div> </body>

Im trying to get a slider on an iphone web app, I'm using iui to handle the ui. The slider appears to be causing some kind of conflict with iui.js, when you drag the slider it tries to open another page. However it works fine when you just click on some part of the bar. I thought it was the slide event causing it but this event is triggered in both cases, so I'm a bit stuck. Any help would be greatly appreciated.

Simple test case (click through to get the slider):

<head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <script type="application/x-javascript" src="http://www.joehewitt.com/iui/iui/iui.js"></script> <link href="http://www.joehewitt.com/iui/iui/iui.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script language="javascript"> $(document).ready(function(){ $("#slider").slider() }); </script> </head> <body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> </div> <ul title="slider test" selected="true"> <li class="group">Page 1</li> <li> <a class="mainnav" href="#page2">page 2</a> </li> </ul> <div id="page2" title="foo.inc"> <div id="slide_container"> <div id="slider"></div> </div> </div> </body>

最满意答案

我不熟悉iui,但当你写道:

但是在这两种情况下都会触发此事件

我想你错过了一些东西(这可能很好地解释了你的问题)。 如果您查看滑块的代码,您会看到鼠标拖动确实有一组不同的事件被触发; 看看“ _mouseCapture ”和“ _mouseDrag ”。 _mouseDrag会触发“ _slide ”,但它也会首先触发“ _normValueFromMouse ”。 至于“ _mouseCapture ”,它并没有直接挂在滑块代码中(显然它是通过一些通用的jQuery UI代码完成的),所以我不能肯定地说它涉及到了,但基于名称它似乎很可能是。

无论如何, _mouseDrag, _normValueFromMouse或者可能是_mouseCapture (或者他们调用的某个函数)似乎无意中调用了一些iui函数。 我的猜测是iui连接一个与slider / jQuery UI函数同名的函数,并在jQuery UI挂起它的东西之后这样做,结果幻灯片调用了iui函数。

想象一下,如果在jQuery UI中定义了“goSomewhere”函数,然后由_mouseDrag 。 通常它会工作正常,但如果有人(iui)定义了自己的“goSomewhere”函数,那么函数将被_mouseDrag 。

或者,问题可能是滑块代码调用的东西不会导致正常导航到另一个页面,但是在iPhone中; 但是,我怀疑情况并非如此。

希望有所帮助。

I'm not familiar with iui, but when you wrote:

but this event is triggered in both cases

I think you missed something (which may well explain your problem). If you look at the slider's code, you'll see that mouse drags do have a different set of events that are triggered; look at "_mouseCapture" and "_mouseDrag". _mouseDrag does trigger "_slide", but it also triggers "_normValueFromMouse" first. As for "_mouseCapture", it's not hooked up directly in the slider code (so evidently it's done via some general jQuery UI code), so I can't say for sure it's involved, but based on the name it seems likely that it is.

In any event, either _mouseDrag, _normValueFromMouse, or possibly _mouseCapture (or some function they call) seems to be calling some iui function inadvertently. My guess would be that iui hooks up a function with the same name as a slider/jQuery UI function, and does so after jQuery UI hooks up it's stuff, and as a result the slide calls the iui function.

Imagine if a "goSomewhere" function was defined in jQuery UI, and then called by _mouseDrag. Normally it would work fine, but if someone (iui) defined its own "goSomewhere" function that function would be called instead by _mouseDrag.

Alternatively, the problem might be that the slider code is calling something that doesn't result in navigating to another page normally, but does in iPhone land; however, I suspect that this isn't the case.

Hope that helps.

更多推荐

本文发布于:2023-08-04 08:44:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1413016.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:滑块   冲突   iui   JQuery   slider

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!