phonegap=html5+js+css+jquery+Jquery Mobile.使用listview，ajax做了一个通讯录。

来源：互联网发布：手机音频编辑软件中文编辑：程序博客网时间：2024/05/01 04:18

phonegap=html5+js+css+jquery+Jquery Mobile.

使用listview，ajax做了一个通讯录。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> //imagesvar icon=new Array("'../images/wyPic1.jpg'","'../images/wyPic2.jpg'","'../images/wyPic3.jpg'",   "'../images/wyPic4.jpg'","'../images/wyPic5.jpg'","'../images/wyPic6.jpg'",   "'../images/wyPic1.jpg'","'../images/wyPic2.jpg'","'../images/wyPic3.jpg'",   "'../images/wyPic4.jpg'","'../images/wyPic5.jpg'","'../images/wyPic6.jpg'",   "'../images/wyPic1.jpg'","'../images/wyPic2.jpg'","'../images/wyPic3.jpg'",   "'../images/wyPic4.jpg'","'../images/wyPic5.jpg'","'../images/wyPic6.jpg'",   "'../images/wyPic1.jpg'","'../images/wyPic2.jpg'","'../images/wyPic3.jpg'",   "'../images/wyPic4.jpg'","'../images/wyPic5.jpg'","'../images/wyPic6.jpg'"); var name="mayue";var innerHtml = ""; $(document).ready(function() { $.ajax({url:'http://www.dengshujun.com:9906/moa/ashx/tongxunlu.ashx?callback=person',   dataType:"jsonp",jsonpCallback:"person", data: { username: name }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert(textStatus) },success:function(data){var dt =data.tongxunlu; //alert(dt);for(var i=0;i<dt.length; i++){innerHtml=innerHtml+"<li><a href='tel:"+dt[i].ShouJi+"'><img src="+icon[i]+"><p>"+dt[i].NameStr+"</p><p>"+dt[i].Sex+"</p><p>"+dt[i].ShouJi+"</p><p>"+dt[i].Email+"</p></a></li>";}//alert("innerHtml="+innerHtml);$("#tongxunlu").append(innerHtml);$("#tongxunlu").listview('refresh');} });  });  </script></head><body><div data-role="page" id="pageone">  <div data-role="header" data-position="fixed" data-theme="b">    <a href="mainpages.html" target="_blank" data-role="button" data-icon="home">首页</a>    <h1>我的通讯录</h1>    <a href="work.html#function_1" target="_blank" data-role="button" data-icon="back">返回</a>  </div>  <div data-role="content">  <ul data-role="listview" data-autodividers="true" data-inset="true" id="tongxunlu">      </ul>  </div>      <div data-role="footer" data-position="fixed" data-theme="b">    <h1>友文移动办公</h1>  </div></div> </body></html>

效果如下：

0 0