jquerymobile demo实例

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head> 
<body> 


<div data-role="page" id="page">


        <div data-role="header">
            <h4>移动OA办公管理系统 </h4>
            <a href="#leftpanel" data-icon="star" class="ui-btn-left" data-mini="true">菜单</a>
            <a href="#rightpanel" data-icon="gear" class="ui-btn-right" data-mini="true">设置</a>
            <div data-role="navbar">
                <ul>
                    <li><a href="#" class="ui-btn-active">个人资料</a></li>
                    <li><a href="#" class="ui-btn-active">办公管理</a></li>
                    <li><a href="#" class="ui-btn-active">文件管理</a></li>
                    <li><a href="#" class="ui-btn-active">公文管理</a></li>
                </ul>
            </div>
            <!-- /navbar -->


        </div>


        <div data-role="content">
<p>首页内容。</p>
            </ul>


        </div>
        <div data-role="panel" id="leftpanel" data-theme="a">
            <a href="#" data-theme="a" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-rel="close">返回</a>
            <ul data-role="listview" data-inset="true" data-theme="a">
                <li>首页
                </li>
                <li>代办公文
                </li>
                <li>手写测试
                </li>
                <li>审批公文
                </li>
                <li>
                    <select name="slider-flip-m" id="slider-flip-m" data-role="slider" data-mini="true" data-theme="a">
                        <option value="off">关</option>
                        <option value="on" selected="">开</option>
                    </select><h2>离线获取资料</h2>
                </li>
            </ul>








            <!-- panel content goes here -->
        </div>
        <div data-role="panel" id="rightpanel" data-theme="b" data-position="right">
            <ul data-role="listview" data-inset="true" data-theme="a">
                <li>用户管理</li>
                <li>角色管理</li>
                <li>系统日志</li>
                <li>密码修改</li>
                <li>机构管理</li>
            </ul>
            <a href="#" data-theme="a" data-role="button" data-icon="check" data-mini="true" data-inline="true" data-rel="close">保存</a>
            <!-- panel content goes here -->
        </div>
        <!-- /panel -->
        <div data-role="footer" data-position="fixed">
            <h1>Copyright 2013 </h1>
        </div>
    </div>




</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery mobile的所有版本库api文档简单示例demo下载jqm学习大全下载后评论反积分! jQuery MobilejQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。 今天,jQuery 驱动着 Internet 上的大量网站,在浏览器中提供动态用户体验,促使传统桌面应用程序越来越少。现在,主流移动平台上的浏览器功能都赶上了桌面浏览器,因此 jQuery 团队引入了 jQuery Mobile(或 JQM)。JQM 的使命是向所有主流移动浏览器提供一种统一体验,使整个 Internet 上的内容更加丰富 — 不管使用哪种查看设备。 JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能,跨最流行的智能手机和平板电脑设备工作。与 jQuery 一样,JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上,当 JQM 致力于统一和优化这个代码基时,jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了多么大的发展。 与 jQuery 核心库一样,您的开发计算机上不需要安装任何东西;只需将各种 *.js 和 *.css 文件直接包含到您的 web 页面中即可。这样,JQM 的功能就好像被放到了您的指尖,供您随时使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值