kevinya

低調

2015-11-10

[JQM][003][MVC4+JQM]一堆上一頁（返回）按鈕的實做法(add a return or back button to header)

  • 936
  • 0
  • 2015-11-23

摘要:[JQM][003][MVC4+JQM]一堆上一頁（返回）按鈕的實做法(add a return or back button to header)

利用在這邊建立的範例，直接拿TestMultiPageTemplate.mobile.cshtml來修改：

[JQM][002][書:MVC4+JQM+行動網站開發]建立第一個多頁面的版面配置(Create your first multi page template)

1.首先介紹在標頭加入上一頁按鈕的方法：

在<div data-role="page">裡面加入屬性data-add-back-btn="true"即可，

而預設的上一頁按鈕的文字是"Back",可以利用屬性data-back-btn-text="我是上一頁按鈕的文字"自訂想要的文字內容，程式片段範例如下：

<div data-role="page" id="two" data-theme="a" data-add-back-btn="true" data-back-btn-text="我是上一頁按鈕">

執行結果如下：不過你如果在第二個page按下重新整理的話，上一頁的按鈕就不見了！ps.另外兩種上一頁按鈕不會不見

2.+3.然後一口氣介紹兩種上一頁按鈕，一種是直接在超連結的href屬性加上指定的page的id，一種是直接加上屬性data-rel="back"，如下：

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

執行結果如下：

以上三種的上一頁按鈕的程式完整範例如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Multi-page template</title>
    @*<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>*@
    @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
    <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-direction="reverse" 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>

本篇大概是這樣。

 

標籤雲