现在，让我们来创建其他的页面。

我们将会把注意力集中在设置页面上。

这里我们将会放置一些表单元素。

在这篇文档中，你可以找到可用的表单元素的完整列表（请点击查阅）。

　　根据指南，你应该把所有元素都放到一个特定的div中：

　　让我们按照这条建议来行事。

现在，我们把下面这些元素放在表单上。

　　input域：

Myname:

　　文本域：

Aboutmyself:

　　滑块，设置它的最大值，最小值和当前值：

Valuethissite:

　　选项：

Valuethissite:

Like　　　　

Dislike

　　选择器：

Tired

Happy

Sick

Sunny

　　现在，我们来创建一个搜索页面。

它主要由两个元素构成：

input域和searchresult列表。

Search　　　　

现在，我们需要使用JavaScript，把input域绑定到keyup函数上，来填充searchresult列表。

$（"#search"）.keyup（function（）{　　　　

varres=shuffle（monthes）;　　　　

varlist='';　　　　

$.each（res,function（index,value）{　　　　　　　　

list+='

'+value+'

';　　　

　}）;　　　　

$（"#searchresult"）.html（list）;

}）;

　　关于这段代码，有几点需要说明一下。

在第一行中，我们对现有的数组进行了“shuffle”。

Shuffle函数如下所示：

varshuffle=function（o）{//v1.0　　　　　

for（varj,x,i=o.length;i;j=parseInt（Math.random（）*i）,x=o[--i],o=o[j],o[j]=x）;　　　　　　　　　

returno;　　　　　

};　

　　然后，我们创建了一个列表。

我们应该用这种方式来创建它，因为列表项是动态地添加到这个列表中的，为了挂载样式和参数，一个框架不会再处理它们了。

　　然后，我们使用anywhere函数，创建一个支持Twitter的页面。

首先，我们应该连接那些库：

为了得到相应的Key，你必须在这个页面中注册一下（请点击查阅）。

然后，我们创建这个页面的代码：

Simpletwitterexample

    现在是最主要的东西了——JavaScript代码，当我们打开这个页面的时候，这些代码将会执行。

要追踪这个事件，可以使用一个专门的事件——pageshow。

关于其他的事件，具体可以参考（请点击查阅）。

$（'#twitter_page'）.live（'pageshow',function（event,ui）{　　　　

twttr.anywhere（function（T）{　　　　　　　　

T.User.find（'andrebrov'）.timeline（）.first（20）.each（function（status）{

$（'div#twi_list'）.append（'

'+status.user.name+':

'+status.text+'

}）;　　　　

}）;

}）;

    关于anywhere函数的使用方法，具体可以参考（请点击查阅）。

当我们打开我们刚刚创建好的这个页面的时候，我们会发现，有一段时间，它一直是空白的，这是因为tweets正在载入。

为了让用户知道这是怎么回事，我们将会添加一个spinner。

代码如下所示：

$（'#twitter_page'）.live（'pageshow',function（event,ui）{　　　　

twttr.anywhere（function（T）{　　　　　　　　

$.mobile.pageLoading（）;　　　　　　　　

varj=0;　　　　　　　　

T.User.find（'andrebrov'）.timeline（）.first（20）.each（function（status）{　　　　　　　　　　　　

$（'div#twi_list'）.append（'

'+status.user.name+':

'+status.text+'

if（j==1）{　　　　　　　　　　　　　　　　

$.mobile.pageLoading（true）;　　　　　　　　　　

　　}　　　　　　　

　}）;　　　

　}）;}）;

    在这篇文档中，你可以找到关于spinner，及其实用程序的详细信息（请点击查阅）。

    现在，我们来创建地图页面。

首先，选择合适的脚本

Mapexample

　　“map_canvas”元素将会包含这个地图。

让我们来定义它的样式：

#map_canvas{　　　　　

width:

100%;　　　　　

height:

100%;　　　　　　

position:

relative;　　　　　

top:

0px;　

}　

    现在，我们添加一段JavaScript代码，这段代码可以确定当前的位置，把这个位置显示在地图的中央，然后给这个位置添加一个标记。

此外，在这个标记上，我们还可以某个把某个事件绑定在它的点击操作上。

$（'#map_page'）.live（'pageshow',function（event,ui）{　　　　

navigator.geolocation.getCurrentPosition（function（location）{　　　　　　　　

varpoint=newgoogle.maps.LatLng（location.coords.latitude,location.coords.longitude）;　　　　　　　　varmyOptions={　　　　　　　　　　　　

zoom:

13,　　　

center:

point,　　　　　　　　　　　　

mapTypeId:

google.maps.MapTypeId.ROADMAP　　　　　　　　

};　　　　　　　　

varmap=newgoogle.maps.Map（document.getElementById（"map_canvas"）,myOptions）;　　　　　　　　varmarker=newgoogle.maps.Marker（{position:

point,map:

map}）;　　　　　　　　google.maps.event.addListener（marker,'click',function（）{　　　　　　　　　　　　

alert（"Currentcoodinatesare:

latitude"+location.coords.latitude+",longitude"+location.coords.longitude）;　　　　　　　　

}）;　　　

　}）;

}）;

　　最后，对于我来说，这个页面中最有趣的元素是：

　　完整的list-divider：

　　打开一个邮件客户端的链接：

　　指向电话号码的链接：

    关于各种链接（搜索各种链接吧，文档我也没找，用到的时候再查把），具体可以参考这里！

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

jQuery Mobile 基础

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。