Панель jQuery Mobile - добавление смахивания только с правой стороны

Я создал веб-страницу для устройства toch, используя Bootsrap и jQuery mobile.

Страница содержит одну карусель в середине страницы, которая скользит влево / вправо в соответствии с проведением пользователем. Страница содержит панель Jquery Mobile, которая открывается, только если пользователь проведет пальцем вправо.

Моя проблема, если пользователь проведет пальцем вправо по карусели, панель откроется автоматически. Я хочу, когда пользователь проведет пальцем вправо по краю правой стороны (около 75 пикселей), тогда должна открываться только панель.

Код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Bxxloder and JQM</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="jqm/jquery.mobile-1.4.1.min.css">
        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="bxslider/jquery.bxslider.js"></script>
        <script src="jqm/jquery.mobile-1.4.1.min.js"></script>
    </head>
    <body>
    <!--#########################JQM#########################-->
    <div class="container-fluid" id="demo-page" data-url="demo-page">
        <div data-role="panel" id="left-panel" data-theme="b">
            <p>Left reveal panel.</p>
            <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right">Close</a>
        </div><!-- /panel -->
        <div data-role="panel" id="right-panel" data-display="overlay" data-position="right" data-theme="b">
            <p>Right push panel.</p>
            <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-right">Close</a>
        </div><!-- /panel -->
    <!--#########################//JQM#########################-->
    <!--#########################Bx slider#########################-->
    <section class="row col-lg-10" style="float: none; margin: 0 auto;">
    <ul class="bxslider">
      <li><img src="image/b.png" title="Funky roots" /></li>
      <li><img src="image/b.png" title="The long and winding road" /></li>
      <li><img src="image/b.png" title="Happy trees" /></li>
    </ul>
    </section>              
    <!--######################### End Swipe Carousel ##############################-->
    </div>
    <script>
$(document).ready(function()
{
    $('.bxslider').bxSlider(
    {
        mode: 'horizontal',
        captions: true,
        auto: true,
        touchEnabled: true,
        oneToOneTouch: true,
        /* controls: false,*/
        pager: false,
        speed: 200
    });
});
    </script>
    <script>
$(document).on("pagecreate", function()
{    
    $(document).on("swipe", function(e)
    {         
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        //if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" )
        if($(".ui-page-active").jqmData("panel") !== "open" && !$(e.target).hasClass("bxslider"))
        {            
            if(e.type === "swipe")
            {                
                $("#right-panel").panel("open");            
            }
            else if(e.type === "swipe")
            {                
                $("#left-panel").panel("open");            
            }        
        }    
    });
});
    </script>
    </body>
</html>
Источник

1 ответ

Решение

Во-первых if заявление добавить еще одно условие, что элемент, который получил swipe не обернут слайдером.

$(document).on("swipe", function (e) {
  if ($(".ui-page-active").jqmData("panel") !== "open" &&  $(e.target).closest(".bxslider").length === 0) {
    /* code */
  }
});

демонстрация

Источник
Другие вопросы по тегам