Để bắt đầu sử dụng Jquery Mobile framework, bạn cần download các file .js và css tại: http://jquerymobile.com/download/ hoặc sử dụng các file được đưa lên trên mạng:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>Đầu tiên, bạn tạo 1 dự án ASP.NET MVC empty.
Copy và paste các file *.js vào thư mục Scripts và *.css vào thư mục Contents.Tạo file _LayoutMobile.html:
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My MVC Application</h1>
</div>
<div data-role="content">@RenderBody()</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Ở mỗi thẻ div, bạn đặt thuộc tính data-role="page". Điều này đảm bảo Jquery Mobile nhận biết và thêm các file css tương ứng.Tạo file HomeController, bạn tạo 2 ActionResult là Index và About.
Và tạo tương ứng 2 trang View:
Index.cshtml
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
<ul data-role="listview">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<h2>@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href=http://asp.net/mvc
title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
tương tự với trang About.cshtml
@{
ViewBag.Title = "About";
Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
<h2>About</h2>
Put content here.
Demo:
Nhận xét
Đăng nhận xét