JQuery Mobile 是一款非常流行的 HTML 頁(yè)面 UI 框架。它具有眾多的優(yōu)秀效果，我們現(xiàn)在就來(lái)看看其中一些效果。

$(function() {
// 表單驗(yàn)證效果
$('form').on('submit', function(event) {
if ($('input[type="text"]').val() === '') {
event.preventDefault();
alert('請(qǐng)?zhí)顚懲暾谋韱危?);
}
});
// 消息提示框效果
$( "#message" ).on( "click", function() {
$( "#popupDialog" ).popup( "open" );
});
// 列表展示效果
$( '#listview' ).on( 'click', 'li', function () {
var text = $( this ).text();
alert( '你選擇的是：' + text );
});
// 折疊效果
$( '#accordion' ).accordion();
// 多選框效果
$( '#selectmenu' ).selectmenu();
// 滑動(dòng)菜單效果
$( '#panel' ).panel();
// 切換效果
$( '#tabs' ).tabs();
});

上述代碼演示的是 JQuery Mobile 的表單驗(yàn)證效果、消息提示框效果、列表展示效果、折疊效果、多選框效果、滑動(dòng)菜單效果、切換效果。這些效果簡(jiǎn)單易用，適合移動(dòng)設(shè)備的用戶體驗(yàn)。

JQuery Mobile 還有眾多其它的效果，我們只需要在項(xiàng)目中引入 JQuery Mobile 的相關(guān)庫(kù)和樣式文件，就可以很方便地使用這些效果。