天津职业技术师范大学2015届本科生毕业设计
+ '&userPass=' + \
$.getJSON($webU, {}, function (response) {
$.each(response.Table, function (index, item) { $value1 += item.Column1;
$(\测试用，查看返回值。 })
if ($value1 > 0) {
$.mobile.changePage(\ } else {
alert(\用户名或密码错误!\ } }) }
$lst_login(); }
在button事件中，还调用了localStorage方法。目的是保存用户登录时的用户 localStorage.u_id = $name.val();
ID，在后面进行四六级报名或者请假时会用到。以下是核心代码： 说明：
$.getJSON:通过HTTP GET请求的方式载入JSON数据。
$.mobile.changePage：jQuery Mobile实现页面跳转的方法。
localStorage：HTML5提供的在客户端存储数据的方法之一，该方法存储的数据没有时间限制。
系统登录页在Opera Mobile Emulator 12.1下的运行效果，如图5-2所示。 5.2.3主界面
用户登录成功后，系统会自动跳转到主页（Index.htm）。主页使用网格布局。在HTML5中提供了四种网格布局，这里使用的是ui-grid-a。在列容器里，设置两列，分别对应ui-block-a和ui-block-b。
以下是该页面的部分代码，其余部分类似：
20
天津职业技术师范大学2015届本科生毕业设计
图5-2 系统登录页效果图
e=\新闻公告
以上代码中，“javascript:void(0)”的使用使该链接处于无效状态，同时给该链接绑定函数function () {location.href = \。目的是跳转至要访问的页面。这种做法的好处是解决了直接连接到指定页面带来的页面javascript无效的问题。
下面是主页在Opera Mobile Emulator 12.1下的运行效果，如图5-3所示。 5.2.4新闻公告
开发本系统的初衷便是分享最实时的消息，因此，“新闻公告”模块是本系统的核心模块。该模块主要包含两部分内容。其一：“紧急通知”；其二：“信息公告”。本
21
天津职业技术师范大学2015届本科生毕业设计
图5-3 系统主页效果图
系统，更改了原有PC版综合服务系统的显示顺序，把“紧急通知”模块放在了前面，“信息公告”模块放在了后面。
为了使“紧急通知”和“信息公告”两部分进行区分，在头部容器中添加了导航栏。在jQuery Mobile中，只需要将“div”标签的“data-role”属性设置为“navbar”即可产生一个导航栏容器。在容器中的“”元素中添加两个子元素“”。并设置第一个元素为选中状态。
在“紧急通知”页面中添加了一个列表视图，用于显示所有新闻标题信息。其内容将由jQuery通过查询数据库生成。“信息公告”页一样。在与紧急通知页有关的jQuery代码中，将页面“id”绑定至页面创建事件，在页面创建函数中，首先定义并初始化变量。其次，编写函数$tpl_News_List()遍历API返回的紧急通知数据，并将格式化后的内容追加到数组中。最后，编写变量函数$lst_News_List()，在函数中使用$.getJSON方法向指定的URL获取数据。在$.getJSON的回调函数中，定义数组“li_array”和接受返回内容的“response”，将这两个变量作为实参传递给遍历函
22
天津职业技术师范大学2015届本科生毕业设计
数$tpl_News_List()。对返回的数组使用join()方法处理，执行刷新页面后，处理后的内容将显示在“”列表中。
以下是页面jQuery代码：
$('#news_index').live(\ var $li = \ var $webUrl = \
var $listview = $(this).find('ul[data-role=\ var $tpl_News_List = function ($p_array, $p_items) { $.each($p_items.Table, function (index, item) { $li = '
href=\'\text-align:center;\
font-size:x-small;padding-right:20px;text-align:right;\发布人：' + item.news_source + '发布日期：' + item.news_adddate + '
'; $p_array.push($li); }) }var $lst_News_List = function () {
$webUrl = 'NewsApi.ashx?act=news_list'; $.getJSON($webUrl, {}, function (response) { var li_array = [];
$tpl_News_List(li_array, response); $listview.html(li_array.join('')); $listview.listview('refresh');
$listview.delegate('li a', 'click', function (e) { tute.install.setParam('p_id', $(this).data('id')) }) }) }
$lst_News_List(); })
上述代码中，在处理遍历API所返回的数据时设置了data-id=’item.news_id’。
23
天津职业技术师范大学2015届本科生毕业设计
（news_id为新闻消息的id号）data-*是HTML5中的新属性，用于存储页面或应用程序的私有自定义数据。
最后，使用“delegate”方法设置新闻列表的单击事件。在单击事件函数中调用自定义的setParam方法将新闻消息的id号保存在“localStorage”对象中。这样在新闻消息的详情页中便可通过“localStorage”对象获取对应新闻消息的id号。
以下是页面的执行效果图，如图5-4、5-5所示：
图5-4新闻公告—紧急通知页效果图
图5-5新闻公告—信息公告页效果图
新闻详情页展示一条消息的全部信息。首先使用自定义的getParam()方法或者直接调用“localStorage”对象，获取到对应消息的id号，把id号组合到要查询的URL中。同样调用$.getJSON方法获取数据，对获取到的数据进行遍历，遍历的结果显示在页面中。
以下是详细信息页的代码：
$('#detail').live(\var $strId = \
24