kevinya

低調

2015-11-11

[JQM]常用空白範本

  • 505
  • 0
  • 2015-11-23

摘要:[JQM]常用空白範本

單一page layout:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
        @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
        @*也可用官方的CDN,比nuget:jquery.mobile.mvc內建的新,嗚嗚*@
        @*<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>*@
        
        <script>
            $(document).ready(function () {
                $.mobile.ajaxEnabled = false; 
            });
        </script>
    </head> 
<body> 

    <div data-role="page" data-theme="c">
        @Html.Partial("_ViewSwitcher")

        <div data-role="header">
            <h1>@ViewBag.Title</h1>
        </div>

        <div data-role="content">
            @RenderSection("featured", false)
            @RenderBody()		
        </div>

    </div>

</body>
</html>

multi page layout:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Multi-page template</title>

    @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
    @*也可用官方的CDN,比nuget:jquery.mobile.mvc內建的新,嗚嗚*@
    @*<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>*@

    <script>
        $(document).ready(function () {
            $.mobile.ajaxEnabled = false;
        });
    </script>

</head>


<body>

    <!-- Start of first page: #one -->
    <div data-role="page" id="one">

        <div data-role="header">
            <h1>Multi-page</h1>
        </div><!-- /header -->

        <div data-role="content">
            <h2>我是查詢頁的大標題</h2>

            @RenderSection("Query", false)
            <h3>顯示其他頁面:</h3>
            <p><a href="#two" data-role="button">顯示明細頁面</a></p>
        </div><!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>頁尾(修改data-theme屬性可變色喔)</h4>
        </div><!-- /footer -->
    </div><!-- /page one -->
    <!-- Start of second page: #two -->
    <!--在這邊加入-->
    <div data-role="page" id="two" data-theme="a" data-add-back-btn="true" data-back-btn-text="我是上一頁按鈕">

        <div data-role="header">
            <h1>Two</h1>
        </div><!-- /header -->

        <div data-role="content" data-theme="a">
            <h2>我是明細頁的大標題</h2>
            @RenderSection("Detail", false)

            <p><a href="#one" data-role="button" data-theme="b">指定href＝pageID回到查詢頁</a></p>
            <p><a href="#one" data-rel="back" data-role="button" data-theme="b">設定屬性data-rel="back"以回到查詢頁</a></p>


        </div><!-- /content -->

        <div data-role="footer">
            <h4>我是頁尾</h4>
        </div><!-- /footer -->
    </div><!-- /page two -->


</body>
</html>

單一page的view:

@model IEnumerable<JQueryMobileMVC.Models.Employee>

@{
    ViewBag.Title = "TestOverride";
}

<h2>TestOverride</h2>


<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.NationalIDNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            連接到某某網址
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.NationalIDNumber)</td>
            <td>@Html.DisplayFor(modelItem => item.Title)</td>
            <td><a href="http://tw.yahoo.com">連接到yahoo</a></td>
        </tr>
  
    }
</table>

Multi-page的view:

@model IEnumerable<JQueryMobileMVC.Models.Employee>

@{
    ViewBag.Title = "TestMultiPageTemplate";
    Layout = "~/Views/Shared/_LayoutMultiPage.mobile.cshtml";
}

<h2>TestOverride</h2>
@section Query {
    <p>查詢條件：員工代碼</p>
    <p><input type="text" /></p>
    <ul data-role="listview" data-filter="true">
     
        @foreach (var item in Model)
        {
          
            <li>
                <a href="http://tw.yahoo.com">
                    <h3>@Html.DisplayFor(modelItem => item.Title)</h3>
                    <p><strong>此項目的重點可以放這邊</strong></p>
                    <p>項目的細節可以放這 ： @Html.DisplayFor(modelItem => item.NationalIDNumber)</p>
                    <p>連接到yahoo</p>

                </a>
            </li>
        }
    </ul>
}
@section Detail {
    明細頁的內容
}

 

標籤雲