jqm移动网站开发-web app

本文分享了一次使用JQM与Sencha Touch进行HTML5和CSS3响应式设计的经验。通过将苹果官网的素材应用于移动设备,展示了在iOS和Android手机上实现跨平台兼容性的过程。文章总结了学习过程中的关键点,包括jQuery应用、HTML5/CSS3基础知识、JQM自定义属性功能以及布局结构的重要性。

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

上周试了下EXT的sencha touch 功能相当强大,试用下感觉也相当不错。不过因为公司一直都是用jQuery做为javascript开发框架,为了减少大家的学习成本只好又去看了下JQM,之前也看过一些说明,这次认真看了下发现功能同样强大。于是就动手做了个示例,示例素材及内容都是来源为APPLE官网,学习目的苹果应该不会有任何意见吧偷笑。在IOS和androidh手机上测试效果相当OK。基于HTML5+CSS3的响应式设计在不尺寸的移动设备表现都很好,美工特别开心不用再为每个尺寸都写个样式了。上先上几张效果图这些图都是从androidh系统4.0英寸的手机上截屏的。

首页

菜单

内容页

国为是初学再加上这次的目的是体验一下开发模式,这里不对实现细节做说明,在最后贴出首页代码。总结下尝试性开发的感受:

一、因为在jQuery的应用基础在基础功能上只需要看看官网的API就可以满足开发要求;

二、需要对HTML5、CSS3有一定的了解;

三、需要了解下JQM对于“data-自定义属性”的功能定义及实现效果;

四、一定要熟悉布局结构;

因为JQM支持所有页面在同一文件中,这里只贴出首页代码:

<div data-role="page" id="home">
    <div data-role="panel" id="menu" data-position="left" data-display="reveal" data-theme="a">
    <ul id="menubox">	
    <li class="fisrt"><img src="Public/Images/Icon/bkg_title5.png" width="35"></li>
    <li data-icon="false" data-theme="a"><a class="li3" href="#product" data-transition="pop">在线购买</a></li>
    <li data-icon="false" data-theme="a"><a class="li2" href="#map" data-transition="slideup">零售网点</a></li>
    <li data-icon="false" data-theme="a"><a class="li4" href="tel:400-666-8800">致电Apple</a></li>
    <li data-icon="false" data-theme="a"><a class="li6" href="#service" data-transition="slidedown">在线客服</a></li>
    <li data-icon="false" data-theme="a"><a class="li5" href="#ewm" data-transition="slide">品牌推广</a></li>
    </ul>
	</div>
	
    <div data-theme="a" data-role="header" data-position="fixed" class="me-header">
        <div class="ui-grid-b">
            <div class="ui-block-a" align="left">
                <a data-role="button" href="#menu" data-inline="true" data-mini="true" class="ui-icon-header icon-menu"></a>
            </div>
            <div class="ui-block-b">
            	<span class="me-header-logo"><img src="Public/Images/logo.png"></span>
            	<span class="me-header-text">Apple中国</span>
            </div>
            <div class="ui-block-c" align="right">
			<a data-role="button" href="#home" data-inline="true" data-mini="true" class="ui-icon-header icon-home"></a>
            </div>
        </div>
    </div>
    <div data-role="content">
		<div id="PhotoSwipeTarget"></div>
<div id="Indicators"><span></span><span></span><span></span></div>
<ul data-role="listview" data-inset="true">
	<li><a href="#product">
        <img src="Public/Images/img1.png">
        <h2>iPhone 5</h2>
        <p>要制造出如此轻薄的设备,同时不以牺牲功能或</p></a>
    </li>
    <li><a href="#">
        <img src="Public/Images/img2.png">
        <h2>iPad</h2>
        <p>iPad 能推动业务不断向前,使平凡的日常工作变得不平凡</p></a>
    </li>
    <li><a href="#">
        <img src="Public/Images/img3.png">
        <h2>Mac</h2>
        <p>了解教师、教授以及不同年龄的学生如何在课堂上以及更。</p></a>
    </li>
    <li><a href="#">
        <img src="Public/Images/img4.png">
        <h2>iPod</h2>
        <p>这款小巧玲珑、适宜佩戴的音乐播放器现有按键和 VoiceOver 功能,可告诉你正在</p></a>
    </li>
</ul>

    </div>
	<div data-role="footer" class="ui-foot" data-position="fixed">
		<p>Copyright © 2013 Apple Inc. 保留所有权利。<br></>京ICP备10214630</p>
	</div>
</div>

初学阶段稍后会深入学习到时再补上技术性强点的文档。



一、综合实战—使用极轴追踪方式绘制信号灯 实战目标:利用对象捕捉追踪和极轴追踪功能创建信号灯图形 技术要点:结合两种追踪方式实现精确绘图,适用于工程制图中需要精确定位的场景 1. 切换至AutoCAD 操作步骤: 启动AutoCAD 2016软件 打开随书光盘中的素材文件 确认工作空间为"草图与注释"模式 2. 绘图设置 1)草图设置对话框 打开方式:通过"工具→绘图设置"菜单命令 功能定位:该对话框包含捕捉、追踪等核心绘图辅助功能设置 2)对象捕捉设置 关键配置: 启用对象捕捉(F3快捷键) 启用对象捕捉追踪(F11快捷键) 勾选端点、中心、圆心、象限点等常用捕捉模式 追踪原理:命令执行时悬停光标可显示追踪矢量,再次悬停可停止追踪 3)极轴追踪设置 参数设置: 启用极轴追踪功能 设置角度增量为45度 确认后退出对话框 3. 绘制信号灯 1)绘制圆形 执行命令:"绘图→圆→圆心、半径"命令 绘制过程: 使用对象捕捉追踪定位矩形中心作为圆心 输入半径值30并按Enter确认 通过象限点捕捉确保圆形位置准确 2)绘制直线 操作要点: 选择"绘图→直线"命令 捕捉矩形上边中点作为起点 捕捉圆的上象限点作为终点 按Enter结束当前直线命令 重复技巧: 按Enter可重复最近使用的直线命令 通过圆心捕捉和极轴追踪绘制放射状直线 最终形成完整的信号灯指示图案 3)完成绘制 验证要点: 检查所有直线是否准确连接圆心和象限点 确认极轴追踪的45度增量是否体现 保存绘图文件(快捷键Ctrl+S)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值