Html+jquery mobile

來源:互聯網
上載者:User

標籤:

開啟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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.