jQuery Mobile ui在移動設備中不起作用
[英]jquery mobile ui is not working in mobile
問題描述
我想創建我的第一個phonegap移動應用程序，但是jQuery Mobile遇到了問題。 我已經包含了必要的文件，但是頁面轉換在移動設備上無法正常工作。使用（phonegap）生成apk后，它在桌面上可以正常使用，但在移動設備上則無法使用。
<script id="popup-arrow-script"> $.mobile.document.on( "click", "#open-popupArrow", function( evt ) { $( "#popupArrow" ).popup( "open", { x: evt.pageX, y: evt.pageY } ); evt.preventDefault(); }); </script>
<style id="tooltip-btn"> .ui-btn.my-tooltip-btn, .ui-btn.my-tooltip-btn:hover, .ui-btn.my-tooltip-btn:active { background: none; border: 0; } <style id="popup-arrow-css"> .clickable-area { display: block; width: 100%; height: 300px; background-color: #ffefef; } .clickable-area:focus { outline: 0; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Popup - jQuery Mobile Demos</title> <!--<link rel="shortcut icon" href="../favicon.ico">--> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> <link rel="stylesheet" href="demos/css/themes/default/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="demos/_assets/css/jqm-demos.css"> <script src="demos/js/jquery.js"></script> <script src="demos/_assets/js/index.js"></script> <script src="demos/js/jquery.mobile-1.4.5.min.js"></script> </head> <div data-role = "page" id = "pageone"> <div data-role = "header" style="background-color: #3f51b5;color: white;"> <h1>Health care</h1> </div> <div data-role = "main" class = "ui-content"> <a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop" style="margin-left: 60%;background-color: #3f51b5;color: white;">Settings</a> <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all" style="width: 120%;"> <form> <div style="padding:10px 20px;"> <h3>Add/Update</h3> <label for="un" class="ui-hidden-accessible">Username:</label> <input type="text" name="user" id="un" value="" placeholder="Name" data-theme="a"> <label for="pw" class="ui-hidden-accessible">Password:</label> <input type="text" name="pass" id="pw" value="" placeholder=" Phone-Number" data-theme="a"> <label for="textarea-1">Details</label> <textarea name="textarea-1" id="textarea-1"></textarea> <label for="pw" class="ui-hidden-accessible">Select type</label> <select name="select-native-1" id="select-native-1"> <option value="1" data-theme="a">Choose type</option> <option value="1">Doctor</option> <option value="2">Neighbour</option> <option value="3">Relative</option> <option value="4">Ambulance</option> </select> <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check" style="background-color: #3f51b5;color: white;">Add</button> </div> </form> </div> <div style=" margin-left: 41%;"> <a href = "#" class = "ui-btn ui-btn-inline" style="width: 20%"><span ><img src="images/calladoctor.png" alt="" style="width: 30%"/></span> </a><br> <a href = "#" class = "ui-btn ui-btn-inline" style="width: 20%"><span ><img src="images/callambulance.jpg" alt="" style="width: 50%"/></span> </a><br> <a href = "#" class = "ui-btn ui-btn-inline" style="width: 20%"><span ><img src="images/callneighbour.jpg" alt="" style="width: 40%"/></span> </a> </div> </div>
1 個解決方案
解決方案1
0 已采納 2018-03-06 13:53:03
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
jQuery-ui-map無法與jQuery Mobile一起使用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.