在現代世界里,人們越來越離不開智能手機。通過智能手機上的各種應用,人們的生活變得更加方便。比如,現在我們可以利用jQuery Mobile技術來進行手機訂餐。
jQuery Mobile是一個流行的移動Web應用程序框架,可以用于快速構建高質量的跨設備站點和應用程序。利用它,我們可以輕松地創建一個訂餐系統。
$(document).on('pageinit', '#pageOrder', function(){ $('#btnPay').click(function(){ var orderInfo = getOrderInfo(); if (checkOrderInfo(orderInfo)) { //調用支付接口 pay(orderInfo, onSuccess, onFail); } else { alert('請先輸入正確的訂單信息!'); } }); function getOrderInfo() { //獲取用戶輸入 var orderInfo = {}; orderInfo.name = $('#txtName').val(); orderInfo.phone = $('#txtPhone').val(); orderInfo.address = $('#txtAddress').val(); orderInfo.food = []; $('input[name="chkFood"]:checked').each(function(){ var item = {}; item.name = $(this).data('name'); item.price = $(this).data('price'); item.count = parseInt($(this).siblings('input[name="txtCount"]').val()); orderInfo.food.push(item); }); orderInfo.total = $('#txtTotal').val(); return orderInfo; } function checkOrderInfo(orderInfo) { //檢查輸入是否正確 if (orderInfo.name=="" || orderInfo.phone=="" || orderInfo.address=="" || orderInfo.food.length==0 || orderInfo.total=="") { return false; } else { return true; } } function onSuccess() { //支付成功后的操作 alert('支付成功!'); //跳轉到訂單查詢頁面 $.mobile.changePage('#pageQuery'); } function onFail(error) { //支付失敗后的操作 alert('支付失敗:'+error); } function pay(orderInfo, onSuccess, onFail) { //調用支付接口 //... } });
上面是一段jQuery Mobile的訂餐代碼,主要包括獲取用戶輸入、檢查輸入是否正確、執行支付操作等一系列流程。其中,我們利用jQuery Mobile技術來創建了一個訂單查詢頁面,可以讓用戶隨時查詢自己的訂單狀態。通過這個例子,我們可以看到,jQuery Mobile技術可以為我們的移動應用開發帶來很多便利。
上一篇熟悉用css設置圖片效果
下一篇照片輪番css