jQuery Mobile开发web App

最新推荐文章于 2021-06-24 11:49:39 发布

zhangyDD

最新推荐文章于 2021-06-24 11:49:39 发布

阅读量847

点赞数 1

文章标签： jquery

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍jQuery Mobile框架，一种用于构建适用于智能手机和平板电脑的移动Web应用的前端开发工具。文章通过实例演示如何利用该框架快速搭建具备基本功能的应用界面，并实现简单的交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 jquery mobile的简介

1、用于创建移动web应用的前端开发框架，可以用于智能手机与平板电脑。
2、使用H5&CSS最小的脚本夹来布局网页
3、构建于Jquery以及jqueryUI类库之上，如果您了解J,你就很容易上手jquery mobile
4、使用了极少的js、h5、css3和脚本代码来完成页面的布局渲染

2、下载引入jquery mobile

1、http://jquerymobile.com/
2、csdn加载:http://cdn.code.baidu.com/

3、实战

首先采用cdn线上引入

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

然后实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>WebApp</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
</head>
<body>
<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>手机归属地查询</h1>
    </div>
    <div role="main" class="ui-content">
        <!--表单输入-->
        <div class="ui-field-contain">
            <label>手机号</label>
            <input type="text" name="" id="tel" placeholder="请输入合法的手机号..."/>
        </div>

        <input type="button" value="查询" id="search-submit"/>
        <ul data-role="listview" data-inset="true" id="list">
            <!--<li><a href="#">列表1</a></li>-->
            <!--<li><a href="#">列表2</a></li>-->
            <!--<li><a href="#">列表3</a></li>-->
            <!--<li><a href="#">列表4</a></li>-->
            <!--<li><a href="#">列表5</a></li>-->
        </ul>

        <!--<h1>我是中间部分</h1>-->

        <!--&lt;!&ndash;锚点引入&ndash;&gt;-->
        <!--<a href="#index1">index1页面</a>-->

    </div>
    <div data-role="footer" data-position="fixed">
        <div  data-role="navbar" data-iconpos="top">
            <ul>
                <li><a href="#" data-icon="phone" class="ui-btn-active">手机</a></li>
                <li><a href="#" data-icon="cloud">天气</a></li>
                <li><a href="#" data-icon="grid">其他</a></li>
            </ul>

            <!--<h1>我是尾部</h1>-->
        </div>
    </div>
</div>


<!--<div data-role="page" id="index1">-->
<!--<div data-role="header" data-position="fixed">-->
<!--<h1>我是头部</h1>-->
<!--</div>-->
<!--<div role="main">-->
<!--<h1>我是中间部分1</h1>-->
<!--</div>-->
<!--<div data-role="footer" data-position="fixed">-->
<!--<h1>我是尾部</h1>-->
<!--</div>-->
<!--</div>-->

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<script>

    var url="http://cors.itxti.net/?ws.webxml.com.cn/WebServices/MobileCodeWS.asmx/getMobileCodeIndo?userId=";

    //    得到我们的信息
    var getTelInfo=function () {
        //得到用户输入的号码
        var tel = $('#tel').val();
        var list = $('#list');
        //校验号码是否正确
        var pattern = /^1[3|4|5|8][0-9]\d{4,8}$/;
        if (tel) {
        if (pattern.test(tel)) {
            var searchBtn=$(this);
            searchBtn.button('disable');

            $.mobile.loading('show',{text:'查询中...',textVisable:true});
            $.get(url, {'mobileCode': tel}, function (data) {
//               console.log(data);
                list.html("<li><span style='color: red'>" + $(data).find('string').text() + "</span></li>");
                $.moble.loading('hide');//隐藏加载框
                searchBtn.button('enable');//显示button
            })
        } else {
            list.html("<span style='color: red'>您输入的号码不合法</span>");
        }
        }else{
            list.html("<span style='color: red'>请输入要查询的号码</span>");
        }
    };


    var bindEvent=function () {

        $('#search-submit').on('click',getTelInfo);
    };

    //    页面加载事件
    $(document).on('pagecreate','#index',function () {
        bindEvent();
    });

</script>


</body>
</html>