打开VS 2013，选择【文件】-【新建】-【项目】

选择框架为.NET Framework4-【ASP.NET MVC4 Web应用程序】，点击【确定】

选择【基本】，点击【确定】

创建的MVC的项目显示如上图所示。

引入jquery mobile组件

首先下载jQuery Mobile http://jquerymobile.com/download/

下载上述框中的包，然后进行解压如下所示

将上图中红色框中的文件引入到项目中，显示如下：

引入之后就能进行jquery mobile的开发了，可以右键controller-【新建】

命名-【添加】

然后在ActionResult Index右键-【添加视图】

【添加】，在生成的视图中添加如下代码：

上图中的红框部分是对jquery mobile的引用，非常关键，引入的顺序也十分关键。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>WMS - Login</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="~/Css/jquery.mobile-1.4.5.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.8.2.js"></script>

    <script src="~/Scripts/jquery.mobile-1.4.5.js"></script>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-theme="c">

            <h1>

                WMS

            </h1>

        </div>

        <!-- /header -->

        <div role="main" class="ui-content">

            <h3>

                Sign In

            </h3>

            <label for="userid">

                User Id

            </label>

            <input type="text" id="userid" name="userid">

            <label for="password">

                Password

            </label>

            <input type="password" name="password" id="password">

            <input type="button" id="login" value="Submit" role="button" />

        </div>

        <!-- /content -->

    </div>

</body>

</html>

然后运行程序，就能在浏览器中看到jquey mobile的效果了

后续的程序的开发就和MVC网站的开发是相通的了。

Html+jquery mobile的更多相关文章

  1. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  2. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  3. jquery mobile 问问多多

    jquery mobile  问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了

  4. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  5. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...

  6. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

  7. JQuery Mobile 页面参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  8. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  9. Jquery Mobile开发以及Js对象动态绑定

    动态创建对象并绑定属性: var instantiate = function (Type, args) { var Constructor = function () { }; Constructo ...

  10. jquery mobile系列问题汇总整理（传播知识，利己利人）

    我在用jquery mobile做项目时,遇到jm在下拉框等组件里不能正常动态更新内容,查找了相关资料,在这里抛砖引玉,先提供一个解决下拉框内容写入更新的解决方法: jm解决下拉框内容写入的方法可以这 ...

随机推荐

  1. 【转】iOS UITableView的方法解析

    原文网址:http://www.cnblogs.com/wfwenchao/articles/3718742.html - (void)viewDidLoad { [super viewDidLoad ...

  2. 利用Modbus协议读取电能表的数据

    1.电脑要有485转232的转换器2.你要看懂DLT_645—1997规约的通讯协议,现在大多电能表厂都会遵行这个通讯协议,DLT_645—1997规约不是最新的通讯协议.就看电表的使用什么通讯协议. ...

  3. “FormCRUD.csProj.FormMain.Name”隐藏了继承的成员“System.Windows.Forms.Control.Name”。如果是有意隐藏，请使用关键字 new。

    一旦运行就显示:“FormCRUD.csProj.FormMain.Name”隐藏了继承的成员“System.Windows.Forms.Control.Name”.如果是有意隐藏,请使用关键字 ne ...

  4. Oracle OCI-22053:溢出错误解决方法

    原文 Oracle OCI-22053:溢出错误解决方法 Oracle 数值数据类型最多可存储 38 个字节的精度.当将 Oracle 数值转换为公共语言运行库数据类型时,小数点后边的位数可能过多,这 ...

  5. UVALive 5029

    用字典树来查询,关键是怎么处理输入的8个数字代表的字符,把每个数分别除以0.95和1.05得到8的区间,按左区间从小到大排序,那么和第一个区间有交集的必然代表二进制0,与它没交集的之后都是1,因为题目 ...

  6. ASP.NET导出数据到Excel 实例介绍

    ASP.NET导出数据到Excel  该方法只是把asp.net页面保存成html页面只是把后缀改为xlc不过excel可以读取,接下连我看看还有别的方式能导出数据,并利用模版生成. 下面是代码 新建 ...

  7. MDI端口和MDIX端口是什么？ 又有什么作用？

    是网线的标准A类接法和B类接法.也就是人们通常所说的交叉网线和直联网线.直联网线就是 白黄 黄 白绿 蓝 白兰 绿 白棕 棕 另一端同样如此.交叉网线就是 另一端的1和3,2和6对调.这样就成了交叉网 ...

  8. Hadoop MapReduce程序中解决第三方jar包问题方案

    hadoop怎样提交多个第三方jar包? 方案1:把所有的第三方jar和自己的class打成一个大的jar包,这种方案显然笨拙,而且更新升级比较繁琐. 方案2: 在你的project里面建立一个lib ...

  9. 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程：简介及目录》（附上完整工程文件）

    介绍:讲述如何使用Genesis-3D来制作一个横版格斗游戏,涉及如何制作连招系统,如何使用包围盒实现碰撞检测,软键盘的制作,场景切换,技能读表,简单怪物AI等等,并为您提供这个框架的全套资源,源码以 ...

  10. 编译arm64错误记录

    响应2月底appstore 64位APP的上线要求,开始编译IOS arm64版本引擎库.编译arm64遇到一些问题,在此记录. 1. 数据类型的错误 __int64 相关,提示error: expe ...