標籤:
開啟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