龙空技术网

练手H5 使用jquery mobile

HiPan 170

前言:

此刻我们对“jquerymobile例程”大概比较着重,你们都想要剖析一些“jquerymobile例程”的相关知识。那么小编也在网上搜集了一些关于“jquerymobile例程””的相关资讯,希望你们能喜欢,咱们一起来学习一下吧!

使用了jquery mobile,引入百度地图

功能:增加热点、查找附近热点、登录、注册。。。

微信扫描体验H5程序

共三个页面,一个主页是地图页,另外就是注册和修改用户信息页。

主页面增加地点

一、head引用的内容

引用jquery、jquery mobile、百度map api,这里后面的参数ak需要到百度地图开放平台申请

<head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />	<link rel="stylesheet" href=";>	<script src=";></script>	<script src=";></script>	<script type="text/javascript" src=";></script>	<title>map</title></head>

二、左下角的查找控件

百度地图的增加控件代码块,点击控件调用$("#qryPopup").popup("open");弹出小窗口

//定义一个查找控件类function QueryCondControl(){        this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;        this.defaultOffset = new BMapGL.Size(10, 10);    }    QueryCondControl.prototype = new BMapGL.Control();QueryCondControl.prototype.initialize = function(map){	 var div = document.createElement("div");    	 var img=document.createElement("img");	 img.src = "qry.png";	 div.appendChild(img);  	 div.style.cursor = "pointer";    	 	 div.onclick = function(e){  		 //qryPopup		console.log(e);		 $("#qryPopup").popup("open");	 }    	 map.getContainer().appendChild(div);    	 return div;}var myQueryCondControl = new QueryCondControl();map.addControl(myQueryCondControl);

弹出的小窗口的代码块:

	<div data-role="popup" id="qryPopup" class="ui-content" style="min-width:250px;">        <div>			<p>查找</p>			<center><p id="qrymsg"></p></center>			<label for="qryname" class="ui-hidden-accessible">名称:</label>			<input type="text" name="qryname" id="qryname" placeholder="名称">			<label for="qrykind" class="ui-hidden-accessible">种类:</label>			<select name="qrykind" id="qrykind" data-native-menu="false">				<option value="A1">网红打卡点</option>				<option value="A2">风景区</option>				<option value="A3">公园</option>				<option value="A4">名胜古迹</option>				<option value="A5">寺庙</option>				<option value="A9">其他</option>			</select>			<input type="text" name="qrykindother" id="qrykindother" placeholder="其他种类">						<button id="btqrysubmit">查询</button>        </div>    </div>

标签: #jquerymobile例程