移动设备上的Jquery Swype功能

时间:2015-10-27 06:31:01

标签: javascript jquery html jquery-mobile

我有一个Jquery函数,可以在我的页面上启用哇滑块。我在Jquery移动设备上有一个swype函数,可以在左键或右键swype上打开和关闭菜单。问题是我的滑块因为打开或关闭菜单而无法正常移动而受到影响。我希望滑块在打开菜单之前自由移动。请帮我分别处理滑块。

HTML DIV:

div id="wowslider-container1">

    <div class="ws_images">
        <ul>
            <!--RepeatStart-->
            <li>
                <img  src="<!--ImagePath-->" alt="<!--ImageAlt-->" title="<!--ImageTitle-->" id="wows1_<!--Index-->" /></li>
            <!--RepeatEnd-->
        </ul>
    </div>

<script>

        jQuery(window).on("swipeleft", function (event) {
            $(".DinM-navbar-toggle").click();


        });
        jQuery(window).on("swiperight", function (event) {
            $(".DinM-navbar-toggle").click();
        });
</script>
 <script>
    jQuery("#wowslider-container1").wowSlider({ effect: "", prev: "", next: "", duration: 20 * 100, delay: 20 * 100, width: 1200, height: 400, autoPlay: false, autoPlayVideo: false, playPause: false, stopOnHover: false, loop: false, bullets: 1, caption: false, captionEffect: "none", controls: false, responsive: 2, fullScreen: false, gestures: GESTUREVALUE, onBeforeStep: 0, images: 0 });
    setTimeout(function () { $(".ws_bullets").css("left", ($(".ws_controls").width() - $(".ws_bullets").width()) / 2); }, 500);
</script>

1 个答案:

答案 0 :(得分:0)

嗨,你可以做这个简单的事情来定义你的功能在特定的窗口条件

像:

var width = $(window).width() //taking window width

if(width > 767){
//window width greater than 767
//your function here
        jQuery(window).on("swipeleft", function (event) {
            $(".DinM-navbar-toggle").click();


        });
        jQuery(window).on("swiperight", function (event) {
            $(".DinM-navbar-toggle").click();
        });

    }

它会做什么会在这种情况下触发您的功能,当您进入移动设备并刷新时(仅在桌面上刷新,在移动设备中刷新它将自己),您的功能将受到干扰..

你也可以在移动设备中使用带触摸支持的bxslider或unslider