首页 > 网站建设 >

使用jQueryMobile制作移动网页的方法

发布时间:2019-01-19 作者:深圳网站建设

  在DreamweaverCS6中使用jQueryMobile制作移动设备网页Dreamweaver与jQueryMobile相集成,可用于快速设计适合大多数移动设备的Web应用程序,同时可使其自身适应设备的各种尺寸。深圳网站建设公司归纳了使用jQueryMobile创建Web应用程序有两种方法:一种是使用jQueryMobile起始页;另一种是从新的HTML5页开始创建。
1.使用jQueryMobile起始页制作移动设备网页jQueryMobile起始页包括HTML、CSS、JavaScript和图像文件,可帮助用户快速开发移动设备网页。具体步骤如下。
①在DreamweaverCS6中为移动应用准备一个站点或目录。可以单独为移动应用新建一个站点,也可以在现有站点中为移动应用建立一个新的专用目录。这里在3.2.7小节的示例站点根目录下创建一个名为“mobile”的目录。
②从菜单栏中选择“文件→新建”命令打开相应的界面,如图3-40所示,依次选中“示例中的页→Mobile起始页→jQueryMobile(本地)”,另外文档类型应选择“HTML5”。
  使用jQueryMobile制作移动设备网页必然用到jQueryMobile文件,也就是一组专用的CSS、JavaScript和图像文件,又称jQueryMobile库。安装Dreamweaver时,会将jQueryMobile文件的副本复制到当前计算机上。如果计划在站点上直接包括jQueryMobile文件,则选择“jQueryMobile(本地)”,这样网页会链接到本地jQueryMobile文件。如果计划使用Internet上的jQueryMobile文件,则选择“jQueryMobile(CDN)”,这样网页会链接CDN的URL所指向的jQueryMobile文件。CDN(ContentDeliveryNetwork,内容传送网络)是一种计算机网络,其数据副本分别放置在网络中的多个不同节点上。
③单击“创建”按钮,在所显示的网页中,单击工具栏上的“实时视图”按钮,启用“持续跟踪链接”功能(单击工具栏上的实时视图选项按钮,选中“持续跟踪链接”,如图3-41所示),然后再单击工具栏上的“拆分”按钮,在右侧的实时视图中使用导航组件测试应用程序的运行情况,如图3-42所示。
④单击工具栏上的多屏幕按钮,使用相应菜单中的选项预览设计在各种尺寸设备上的显示效果,如图3-43所示。例如,预览240×320功能手机的实时视图,如图3-44所示。
⑤禁用实时视图(再次单击工具栏上的“实时视图”按钮,这是一个开关按钮),然后单击“设计”按钮切换回到设计视图。
⑥在“插入”面板(选择菜单“窗口”→“插入”)中,默认选中“常用”,这里选择“jQueryMobile”,如图3-45所示。此时将显示可添加到Web应用程序的jQueryMobile组件,如图3-46所示。
⑦在设计视图中,将光标放在要插入组件的位置,然后在“插入”面板中单击该组件。例中选择列表视图,在出现的对话框中,选择相应选项自定义组件,如图3-47所示。单击“确定”按钮,设置的内容出现在设计页面相应的位置,如图3-48所示。
⑧保存该HTML文件(这里保存到站点的mobile文件夹中),由于选择的是本地jQueryMobile文件,将弹出图3-49所示的对话框,单击“复制”按钮,将jQueryMobile文件(包括图像文件)复制到HTML文件所在站点的文件夹中。站点视图中将显示添加的jQueryMobile文件和新创建的移动设备网页,如图3-50所示。
⑨除了在实时视图中预览页面外,还可直接按“F12”键在浏览器中进行实际测试,例中预览结果如图3-51所示。
好了,网站建设公司本文关于“使用jQueryMobile制作移动网页的方法”就分享到这里,希望能给您的手机端网站设计工作有所帮助,谢谢关注,博纳网络编辑整理。
文章标题:使用jQueryMobile制作移动网页的方法
本文地址:https://www.198bona.com/news/2143.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯