jquery Moblie入门—hello world的示例代码学习

1、需要运行JQuery Mobile 移动应用页面，需要下载JQuery Mobile 3个相关插件文件（有多版本），jquery.mobile-1.2.0.min.css、jquery-1.8.3.min.js、jquery.mobile-1.2.0.min.js，JQuery Mobile官网地址：http://jquerymobile.com
2、将插件文件加载到页面中，注意它们的加载顺序，语句如：


代码如下:

<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script>
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

3、Hello World的示例代码如下：


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name="viewport" content="width=device-width,initial-scale=1"/> //设置页面的宽度与移动设备的屏幕宽度相同
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script>
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div id="page1" data-role="page">
<div data-role="header"><h1>JQuery Moblie</h1></div>
<div data-role="content" class="content"><p>Hello World!</p></div>
<div data-role="footer"><h1>工作室版权所有</h1></div>
</div>
</BODY>
</HTML>

4、由于JQuery Mobile 已经全面支持HTML5结构，因此，<body>主体元素代码也可以修改为：


代码如下:

<BODY>
<section id="page1" data-role="page">
<header data-role="header"><h1>JQuery Moblie</h1></header>
<div data-role="content" class="content"><p>Hello World!</p></div>
<footer data-role="footer"><h1>工作室版权所有</h1></footer>
</section>
</BODY>

5、为了更好地在PC端浏览JQuery Mobile 页面在移动终端的执行效果，可以下载Opera移动模拟器，下载地址：http://cn.opera.com/，预览效果图：

赞 (0)

相关推荐

  • Android学习笔记（一）环境安装及第一个hello world

    Android学习笔记（一）环境安装及第一个hello world

    开发环境 安装JDK和JRE 下载安装文件并安装: jdk-8u11-windows-i586.exe jre-8u11-windows-i586.exe 使用google提供的adt-bundle,直接解压到本地即可使用,使用版本如下: adt-bundle-windows-x86-20131030.zip 第一个android工程 打开eclipse如下图所示: 新建工程 新建一个工程,取名为FirstApp,使用默认设置 . File->New->Android Application

  • hello world程序集锦

    hello world作为所有编程语言的起始阶段,占据着无法改变的地位,所有中/英/法/德/美--版本的编程教材中,hello world总是作为第一个TEST记录于书本之中,所有的编程第一步就在于此了!经典之中的经典! hello world! "Hello, world"程序是指在计算机屏幕上输出Hello, world这行字符串的计算机程序,"hello, world"的中文意思是"世界,你好".这个例程在Brian Kernighan和D

  • 从零学Python之hello world

    简单的'Hello World!' Python命令行 假设你已经安装好了Python, 那么在Linux命令行输入: 复制代码 代码如下: $python 将直接进入python.然后在命令行提示符>>>后面输入: 复制代码 代码如下: >>>print('Hello World!') 可以看到,随后在屏幕上输出: 复制代码 代码如下: Hello World! print是一个常用函数,其功能就是输出括号中得字符串. (在Python 2.x中,print还可以是一

  • Python 第一步 hello world

    首先下载最新版本的python.www.python.org,目前版本为3.1. 接下来是安装,在windows下python的安装与其他应用程序一样,不多复述. 在windows下,即可以使用命令行的方式,也可以使用IDLE来开发python.首先介绍命令行的方式:设置PATH,将python的安装路径添加至PATH环境变量中即可.在命令行中输入python,会显示相应的版本号,并进入至python工作环境中去.另外一种方式是IDLE,这个是python默认安装的开发环境. 接下来,就来试验一

  • 用autoit编写第一个脚本(Hello World)

    用autoit编写第一个脚本(Hello World)

    (注意:如果您已经安装了 SciTe 编辑器,它将会代替系统自带的记事本来编辑脚本.) 首先打开你要创建脚本的文件夹,点击鼠标右键然后在菜单中选择 新建 / AutoIt v3 Script . 把脚本文件命名为helloworld.au3.注意扩展名应为.au3--这说明该文件是 AutoIt v3 脚本. 我们已经创建了脚本文件了,现在要做的就是对此脚本进行编辑使其具有我们需要的功能.在helloworld.au3这个脚本文件上点击鼠标右键然后在菜单中选择Edit Script. 接着将会使

  • ExtJs 学习笔记 Hello World!第1/2页

    ExtJs 学习笔记 Hello World!第1/2页

    在了解基础后,可能会用Ext+ajax开发一个简单的小项目,会一点一滴的讲解项目开发过程,希望能给大家带来收获!因为我本人也在学习这个框架,所以对文章有什么建议请提出,这样可能会让我学到更多. 看到这幅图,你可能认为是某个软件,或者是Flash.Flex.silverlight等等,但这是javascript+Css实现的. 在看这样式与效果,如果加在自己的项目里,用户视觉与操作的体验应该会很爽吧. 还有更多的特效就不一一截图了.      下面开始说一下这个组件,ExtJs是一个不错的Ajax

  • 全民学编程之 Hello World

    问题的提出 相传古时候有个退休的程序员,在家闲来无事,决定修习书法之道.第一日,备好笔墨纸砚,便挥毫写下一行大字:"Hello World". 学过编程语言的人都笑了,在程序员心目中,hello world是一切的开始,程序语言教科书的第一个演示程序.WordPress的第一篇示例文章(我的hello world).环境搭建成功后的第一个测试-- 可是,为什么呢?为什么都用"Hello World"来做程序语言的入门程序,以及其他这一切的开始呢? Hello Wor

  • java 学习笔记(入门篇)_java程序helloWorld

    java 学习笔记(入门篇)_java程序helloWorld

    安装配置完Java的jdk,下面就开始写第一个java程序--hello World.用来在控制台输出"Hello World".首先,我们用最原始的方法,即用文本编辑器来写代码.在任意一个盘符下,以D盘根目录为例,在这个目录下建立一个txt文本,命名为HelloWorld,然后把后缀改为java,即HelloWorld.java. 然后打开编辑代码,如下: 复制代码 代码如下: public class HelloWorld { public static void main(Str

  • pycharm 使用心得（三）Hello world！

    pycharm 使用心得（三）Hello world！

    1,新建一个项目 File --> New Project... 2,新建一个文件右键单击刚建好的helloWord项目,选择New --> Python File 3,输入文件名输入文件名,没什么好说的 4,进入编写界面PyCharm的默认编辑界面很怪,会自动生成一行 __author__ = "作者" 的头.而比较常用的文件头,如:#coding=utf-8 等,反倒没有自动生成. 输入code: print "Hello word!" 5,设置控制

  • jquery Moblie入门—hello world的示例代码学习

    jquery Moblie入门—hello world的示例代码学习

    1.需要运行JQuery Mobile 移动应用页面,需要下载JQuery Mobile 3个相关插件文件(有多版本),jquery.mobile-1.2.0.min.css.jquery-1.8.3.min.js.jquery.mobile-1.2.0.min.js,JQuery Mobile官网地址:http://jquerymobile.com 2.将插件文件加载到页面中,注意它们的加载顺序,语句如: 复制代码 代码如下: <link href="Css/jquery.mobile-

  • jquery Mobile入门—外部链接切换示例代码

    jquery Mobile入门—外部链接切换示例代码

    1.内部链接是通过在<a>标签内将href属性值设为#+id的形式,外链则是在<a>中增加rel属性,并将属性值设为external,如:<a href="about.html" rel="external">3i Studio</a> 2.外部链接切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD H

  • layui中使用jquery控制radio选中事件的示例代码

    勾选 form.on('radio(yesHave)', function (data) { $("input[name='hasPrepaidVoucher'][title='有']").attr('checked',true); form.render(); }); 取消勾选 form.on('radio(noIssuer)', function (data) { debugger; $("input[name='voucherIssuer']").remove

  • C语言编程入门必背的示例代码整理大全

    C语言编程入门必背的示例代码整理大全

    目录 一.C语言必背代码前言 二.一部分C语言必背代码 一.C语言必背代码前言 对于c语言来说,要记得东西其实不多,基本就是几个常用语句加一些关键字而已.你所看到的那些几千甚至上万行的代码,都是用这些语句和关键词来重复编写的.只是他们逻辑功能不一样,那如何快速的上手C语言代码,建议多看多写,下面是小编整理的C语言必背代码. 二.一部分C语言必背代码 1.输出9*9成法口诀,共9行9列,i控制行,j控制列. #include "stdio.h" main() {int i,j,resul

  • jquery Mobile入门—多页面切换示例学习

    jquery Mobile入门—多页面切换示例学习

    1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta

  • jquery animate图片模向滑动示例代码

    jquery animate图片模向滑动示例代码

    这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity"). 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值.如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认

  • jquery+json实现数据列表分页示例代码

    该实例中,新闻数据列表未使用表格显示.下面将所有源码附上,其中用到jquery插件. 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:

  • Jquery操作js数组及对象示例代码

    贴一段jQuery对js对象及数组的操作:增删改查的代码. 复制代码 代码如下: var WorkList = new Array();//数组对象 //下面是自己定义的实体 function WorkEx(depart, title, begintime, endtime) {     this.SId = 0;     this.Id = -(WorkList.length+1);     this.DepartmentName = depart;     this.Title = titl

  • jquery右下角弹出提示框示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JQuery实现文字无缝滚动效果示例代码(Marquee插件)

    推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src=&quo

随机推荐