데이터베이스에서 장치 세부 정보를 동적으로 가져오고 해당 장치 목록을 목록에 추가하고 목록의 각 링크에 대한 페이지를 추가해야하는 요구 사항이 있습니다. JQM 1.4.2를 사용하고 있습니다.
여기 내 HTML입니다
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div data-role="panel" data-display="push" data-theme="a" id="nav-panel" data-position="left">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-main">Main panel page</a></li>
//i need to append list here
</ul>
</div>
<div data-role="page" id="panel-main" data-title="Panel main" data-position="fixed">
<div data-role="header">
<h1>main page</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext" id="bar_menu">Menu</a>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<p>main page</p>
</div>
</div>
</body>
</html>
이것은 내 index.js입니다
$(document).on("pageinit","#panel-main",function(){
$.ajax({url: 'fetch_devices.php',
type: 'get',
async: 'true',
callback: 'jsonCallback',
dataType: 'jsonp',
beforeSend: function() {
$.mobile.loading('show', {theme:"a", text:"Please wait...", textonly:true, textVisible: true}); // This will show ajax spinner
},
complete: function() {
$.mobile.loading('hide'); // This will hide ajax spinner
},
success: function (result) {
var menu_list='<ul data-role="listview"><li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li><li><a href="#panel-main">Main panel page</a></li>';
var newPage='';
$.each(result, function()
{
$.each(this, function(name, value) {
if(name=='title')
{
menu_list+='<li><a href="#device" id="dev_li">'+value+'</a></li>';
newPage+ = "<div data-role=page id='"+value+"'><div data-role=header><h1>" +value+" page </h1></div><div data-role=content> this is a "+value+" page</div></div";
}
});
});
menu_list+='</ul>';
$("#nav-panel").html(menu_list);
},
error: function (request,error) {
alert('Network error has occurred please try again!');
}
});
return false;
});
이것은 내 PHP 코드입니다
<?php
require_once 'dbconnect.php';
header('Access-Control-Allow-Origin: *');
$callback = isset($_GET['callback']) ? preg_replace('/[^a-z0-9$_]/si', '', $_GET['callback']) : false;
header('Content-Type: ' . ($callback ? 'application/javascript' : 'application/json') . ';charset=UTF-8');
$sql = "select id,device_id,device_type_id,titlefrom device;
$res = mysql_query($sql);
$rows = array();
$i=0;
while($row = mysql_fetch_assoc($res)) {
$rows['row'.$i++]=$row;
}
echo ($callback ? $callback . '(' : '') . json_encode($rows) . ($callback ? ')' : '');
?>
누구든지 "menu_list"및 "newPage"데이터를 JQM 페이지 온 테이너에 어떻게 추가 할 수 있으며 나열된 장치 링크를 클릭하면 해당 페이지를 열 수 있습니다. 코드에 많은 오류가있을 수 있습니다. 저는 JQM을 처음 사용하므로 실례합니다. 미리 감사드립니다
동적 목록보기를 만들 때 .listview();초기화 하려면 호출해야 합니다. 대신 기존 목록보기에 동적 목록 항목을 추가하는 경우 .listview("refresh");.
컨테이너에 동적 페이지를 추가하려면 BODY 태그에 페이지 마크 업을 추가하기 만하면됩니다.
$("body").append(newPage);
동적 링크가 새 페이지로 이동하도록하려면 각 링크의 HREF가 "#"+ pageid인지 확인하십시오. 따라서 id가 page1 인 페이지가있는 경우 href는 # page1이됩니다.
여기 데모입니다
데모에서는 링크와 페이지를 추가하고 링크를 작동시키는 방법을 보여주기 위해 ajax 호출 대신 페이지 이름 배열을 사용합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다