JQuery와 - 지금 내가 폰갭을 (사용하여 내 최초의 모바일 앱 (계산기/계산기의 일종)를 개발하고 있어요 <p>JQuery와 + HTML 너희들</p>에 의해 저장 많은 일 후에 여기에 메뉴 항목을

첫 번째 게시물을 선택한 후 필요한 추가 클릭). 저는 주로 .NET 개발자입니다. 몇 년의 경험이 있습니다.JQuery와 - 지금 내가 폰갭을 (사용하여 내 최초의 모바일 앱 (계산기/계산기의 일종)를 개발하고 있어요 <p>JQuery와 + HTML 너희들</p>에 의해 저장 많은 일 후에 여기에 메뉴 항목을

내가하고 싶은 것은 항목을 클릭 한 후에 메뉴를 숨기고, 결국 .toggle() 및 .slideToggle()이 제대로 작동하지 않는 것을 관리하는 것입니다.

그러나 메뉴에서 선택을하면 올바르게 실행됩니다 (브라우저 및 전화 갭에서). 실행 후 포커스가 다른 곳에 설정된 것처럼 페이지의 아무 곳이나 클릭해야합니다. 나는 & ui-state = dialog와 관련이 있을지도 모른다고 생각했지만 pageChange에서 changeHash를 false로 설정하고 URL에서 제거했지만 동작은 동일하게 유지되었습니다.

나는 당신이 간단한 예제를 필요로 믿는 모든 지원이 크게 감사합니다 등 :

<a href="#hamburgerPopup" id="burgerLogo" data-rel="popup" data-transition="slide" aria-haspopup="true" aria-owns="popupMenu" aria-expanded="false"> 
        <img src="hamburger.png" style="width:50%;" /> 
       </a> 
       <div data-role="popup" id="hamburgerPopup" data-theme="a" > 
        <ul data-role="listview" data-inset="true"> 
         <li data-icon="false"><a href="#" id="calc" onclick="GoToCalc()">Calc Weight</a></li> 
         <li data-icon="false"><a href="#" id="faq" onclick="GoToFAQ()">FAQ's</a></li> 
        </ul> 
       </div>

및 JQuery와

$('#burgerLogo').on('click', function() { 
     $('#hamburgerPopup ul').css("display", "block"); 
    }); 

    function GoToCalc() { 
     $("#about").hide(); 
     $("#divCalculator").show(); 
    } 

    function GoToFAQ() { 
     $("#about").show(); 
     $("#divCalculator").hide(); 
    } 
$(function() { 
     $("#hamburgerPopup li").click(function() { 
      $('#hamburgerPopup ul').css("display", "none"); 
      //$("#logo").click(); - I tried this to simulate a click, does nothing 
      //$('#hamburgerPopup').trigger("click"); 
      //$("#hamburgerPopup").hide(); 
     }) 
    });

출처

2017-04-04 aquadementia

is this or iroid? iOS는 마우스를 가져 가면서 실제로 클릭하지 않고 펑키 한 작업을 수행하는 것으로 알려져 있습니다. 이것이 안드로이드에 있다면, 문제는 아마 안드로이드가 매력처럼 작동하는 것처럼 다루지 않을 것입니다. –

이것은 악명 높은 iOS 버그 일 수 있습니다. 문제의 클릭 가능한 요소에 "cursor : pointer"를 추가하십시오. –

죄송합니다. 더 명확해야합니다.이 동작은 jquery 모바일을 사용하는 브라우저 (크롬)에서 발생합니다. 기본적으로 내 웹 사이트 기능을 앱으로 재구성하고 있습니다. Google 애널리틱스는 내 잠재 고객의 약 80 %를 Android 사용자 (일반적으로 남아프리카)로 간주합니다. 나는 아직 IOS에서 테스트하지 않았다. – aquadementia

을 과거 스레드를 검색 측면에서 최선을 다했습니다 햄버거 메뉴 페이지를 탐색하는, 그래서 여기입니다 :

$(function(){ 
 
    $("#hamburgerPopup").enhanceWithin().popup({ 
 
    theme: "a", 
 
    transition: "turn", 
 
    history: false, 
 
    positionTo: "origin", 
 
    beforeposition: function(event, ui) { 
 
     var currPageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id"); 
 
     $("#hamburgerPopup li").removeClass("ui-state-disabled"); 
 
     $("#hamburgerPopup a[href='#"+currPageId+"']").parent().addClass("ui-state-disabled"); 
 
    } 
 
    }); 
 
    $("[data-role='header'], [data-role='footer']").toolbar({ 
 
    theme: "a", 
 
    position: "fixed", 
 
    tapToggle: false 
 
    }); 
 
}); 
 

 
$(document).on("pagecontainerchange", function() { 
 
    $("[data-role='header'] h2").text($(".ui-page-active").jqmData("title")); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 
<body> 
 
    <div data-role="header"> 
 
    <a href="#hamburgerPopup" data-rel="popup" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bars ui-btn-icon-notext" aria-haspopup="true" aria-owns="popupMenu" aria-expanded="false">View</a> 
 
    <h2>Header</h2> 
 
    </div> 
 
    <div data-role="page" data-title="Calculator" id="page-calculator"> 
 
    <div data-role="content"> 
 
     Calculate Weight 
 
    </div> 
 
    </div> 
 
    <div data-role="page" data-title="FAQ" id="page-faq"> 
 
    <div data-role="content"> 
 
     Read FAQ 
 
    </div> 
 
    </div> 
 
    <div data-role="footer"> 
 
    <h2>Footer</h2> 
 
    </div> 
 
    <div data-role="popup" id="hamburgerPopup" data-theme="a"> 
 
     <ul data-role="listview" data-inset="true"> 
 
      <li data-icon="false"><a href="#page-calculator">Calc Weight</a></li> 
 
      <li data-icon="false"><a href="#page-faq">FAQ's</a></li> 
 
     </ul> 
 
    </div> 
 
</body> 
 
</html>

,210

설명 :

머리글, 바닥 글 및 햄버거 메뉴는 모든 페이지의 외부에있는, 그래서 우리는 코드에서, 손으로 위젯을 초기화해야합니다. 데이터 태그를 사용하는 대신 위젯을 초기화 할 때 사용할 수있는 많은 옵션을 사용하고 있으므로 더 이상 필요하지 않게 마크 업에서 일부 데이터 태그를 제거했습니다.

페이지 탐색 & 팝업 닫기 : jQuery Mobile에서 앵커 태그를 통해 이미 처리되었습니다. 팝업을 숨기거나 한 페이지에서 다른 페이지로 전환하는 데 자바 스크립트 코드를 쓸 필요가 없습니다.

몇 가지 간단한 추가 좋은-할 수있다 기능 :

페이지의 메뉴 항목을 비활성화 우리가 이미 :이 팝업 beforeposition에서 이루어집니다 햄버거를 구축 목록보기에 적절한 JQM 클래스를 추가하거나 제거하여 메뉴.

페이지 제목 : 헤더가 모든 페이지에 공통적이므로 제목을 수동으로 설정해야합니다. 여기 사용자 정의 태그를 사용하고 있습니다 : data-title : 페이지 전환시 표시 할 텍스트 정보를 저장합니다.

희망이 도움이됩니다.

출처

2017-04-07 15:30:44 deblocker

JQuery와 - 지금 내가 폰갭을 (사용하여 내 최초의 모바일 앱 (계산기/계산기의 일종)를 개발하고 있어요 <p>JQuery와 + HTML 너희들</p>에 의해 저장 많은 일 후에 여기에 메뉴 항목을

답변

관련 문제