天津职业技术师范大学2015届本科生毕业设计
var $webUrl = \
var $title = $(this).find('[data-role=\var $title_2 = $(\var $info = $(\var $content = $(\var $lst_Detail_List = function () { $strId = tute.install.getParam('p_id');
$webUrl = '/NewsApi.ashx?act=detail&newsid=' + $strId; $.getJSON($webUrl, {}, function (response) { $.each(response.Table, function (index, item) { $title_2.html(item.news_title);
var strHTML = item.news_adddate + \来源：\item.news_source;
$info.html(strHTML);
$content.html(\;\
}); }) }
$lst_Detail_List(); })
“新闻公告”—“紧急通知”详情页和“信息公告”详情页的效果图如图5-6、5-7所示： 5.2.5课表查询
课表查询页提供根据班级名查询班级课表的功能。该页面有一个简单的下拉列表，使用者选择对应项，即可看到自己所选班级的本学期课表。
页面中“周一至周五”的显示采用网格布局中的第四类。同样的，要显示的内容部分也是用到了一个“ui-grid-d”。在该页面的javascript代码中将下拉列表绑定至“change”函数。如果用户选定了某一项时，“change”函数中将保存下该值，由该值组成要访问的URL。然后调用$.getJSON方法获取数据。对于获取到的数据调用$.each方法进行遍历，遍历出的内容加入相应的CSS元素保存到数组中。保存到数组中的元素经过join方法处理后执行刷新页面，课表内容就显示到页面中了。
以下是该页面的javascript代码：
25
天津职业技术师范大学2015届本科生毕业设计
图5-6“紧急通知”详情页效果图
图5-7“信息公告”详情页效果图
$(function () { var strCourse = \ var objCourse = $(\
objCourse.bind(\
strCourse = objCourse.val();
var $li = \ var $webUrl = \ var $cview = $(\
var $tpl_Course = function ($p_array, $p_items) { $.each($p_items.Table, function (index, item) {
$li = '
26
天津职业技术师范大学2015届本科生毕业设计
} }
var $lst_Course = function () {
$webUrl = 'NewsApi.ashx?act=Course&cid=' + strCourse; $.getJSON($webUrl, {}, function (response) { var li_array = [];
$tpl_Course(li_array, response); $cview.html(li_array.join('')); $cview.listview('refresh'); }) }
$lst_Course(); }) })
课表查询页的效果图如图5-8所示：
图5-8 课表查询页效果图
27
天津职业技术师范大学2015届本科生毕业设计
5.2.6四六级报名
“四六级报名”页提供四六级报名功能。
在该页面中有两个单选按钮，其对应的值分别为4和6。当用户点击CET-4或者CET-6时，单选按钮绑定的change事件将在页面中显示对应的报名信息，并激活提交按钮。（在用户没有选择单选按钮时，提交按钮是不可用状态。）当用户点击提交按钮时调用变量函数$lst_cet()，并将用户的报名信息和id号传给API文件执行更新操作。
以下是该页面javascript代码： $(function () {
var $user_id = localStorage[\
$('#Button1').button('disable'); $rCET = \
$(\ $(\您选择的是大学英语 \+ this.value + \级报名，确认报名请点击提交按钮！\
$rCET = this.value;
$('#Button1').button('enable'); });
$(\按钮点击事件 var $lst_cet = function () { var $webU = \
$webU = '/NewsApi.ashx?act=CET&userName=' + \'&cetGrade=' + \
$.getJSON($webU, {}, function (response, result) { alert(\报名成功，请及时缴费并在报名表中签字确认！\ }) }
$lst_cet(); }) })
“四六级报名”页在Opera Mobile Emulator 12.1下的运行效果，如图5-9所示。
28
天津职业技术师范大学2015届本科生毕业设计
图5-9四六级报名页效果图
5.2.7云笔记
该页面提供简单的记事功能。在该页面用户点击“查看我的笔记”按钮就可以查看自己之前保存的笔记内容。用户对笔记内容进行修改后点击“保存”按钮就可以实现保存修改后的内容。
在该页面中有两个“input”元素和一个“textarea”元素。“textarea”用于显示要输入和要显示的内容。在实现该页面的javascript代码中，首先获取用户的登录id。然后，根据用户点击不同按钮执行不同的操作。在把用户输入的内容存入数据库时，对用户输入时产生的“回车符”进行替换，替换成文本。相反，在执行“查看我的笔记”操作时，则对“替换过的回车符”进行再次替换，以还原原有内容。执行保存和获取内容的方法与前面几个页面的代码逻辑相同，都是调用$.getJSON方法访问API接口文件。对接口文件返回的数据则使用$.each方法进行遍历。
以下是该部分javascript代码： var $user_id = localStorage[\//获取单选按钮选择时的值
29