jQuery Mobile Toolbar transition用法及代碼示例

jQuery 移動 是一個使用 jQuery 構建的 JavaScript 庫，基於用戶接口係統，旨在製作可在所有智能手機、平板電腦和桌麵設備上訪問的響應式網站和應用程序。這jQuery 工具欄是一個可用於增強頁眉和頁腳的小部件。這些小部件用於將工具欄添加到頁麵的頂部和/或底部。

在本文中，我們將使用 jQuery Mobile 工具欄轉換選項。它用於設置工具欄隱藏/顯示時我們想要的過渡類型。此轉換選項由固定工具欄擴展提供便利，並且僅適用於固定工具欄。默認值為“slide”，字符串類型。

語法：通過指定轉換選項初始化工具欄：

$( "Selector" ).toolbar({
  transition: "none"
});

初始化後設置並返回轉換選項：

獲取過渡選項：

var transition = $( "Selector" ).toolbar( "option", "transition" );

設置過渡選項：

$( "Selector" ).toolbar( "option", "transition", "fade" );

接受的值：

none: 工具欄將出現和消失，沒有任何過渡。
slide: 切換時工具欄將滑入/滑出。
fade: 切換時工具欄將淡入/淡出。

CDN 鏈接：使用以下 jQuery Mobile 的 CDN 鏈接。

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>

示例 1：我們將過渡選項設置為“slide”。

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>
    <script>
        $(document).ready(function () {
            // Setting to "slide" by default
            $("#GFG").toolbar({
                transition: "slide"
            });
        })
    </script>
</head>
<body>
    <div data-role="page">
        <center>
            <h2 style="color: green">GeeksforGeeks</h2>
            <h3>jQuery Mobile Toolbar transition option</h3>
            <div id="GFG" data-role="header" data-position="fixed">
                <h1>Toolbar</h1>
            </div>
            <h2>What is GeekforGeeks?</h2>
            <p style="padding: 0px 20px;">
                GeeksforGeeks is a computer science portal
                for geeks by geeks. Here you can find articles
                on various computer science topics like
                Data Structures, Algorithms and many more....
                GeekforGeeks was founded by Sandeep Jain in 2009.
                GeeksforGeeks also provide courses, you can
                find the courses at
                <a href="https://www.geeksforgeeks.org/courses">
                    https://www.geeksforgeeks.org/courses
                </a>
                For cracking interviews of top product based companies,
                you need to have good and deep understanding of topics
                like DSA, System design etc. GeeksforGeeks provide you
                quality content so that you can prepare for the interviews.
                GeeksforGeeks also have a practice portal where you can
                practice problems and brush on your skills. You can visit
                the practice portal at
                <a href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org
                </a>
            </p>
        </center>
    </div>
</body>
</html>

輸出：從輸出中，觀察設置為滑動的工具欄的過渡，單擊時它會以向上的滑動效果消失。

示例 2：我們將過渡選項設置為“none”。

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#GFG").toolbar({
                transition: "none"
            });
        })
    </script>
</head>
<body>
    <div data-role="page">
        <center>
            <h2 style="color: green">GeeksforGeeks</h2>
            <h3>jQuery Mobile Toolbar transition option</h3>
            <div id="GFG" data-role="header" data-position="fixed">
                <h1>Toolbar</h1>
            </div>
            <h2>What is GeekforGeeks?</h2>
            <p style="padding: 0px 20px;">
                GeeksforGeeks is a computer science portal
                for geeks by geeks. Here you can find articles
                on various computer science topics like
                Data Structures, Algorithms and many more....
                GeekforGeeks was founded by Sandeep Jain in 2009.
                GeeksforGeeks also provide courses, you can
                find the courses at
                <a href="https://www.geeksforgeeks.org/courses">
                    https://www.geeksforgeeks.org/courses
                </a>
                For cracking interviews of top product based companies,
                you need to have good and deep understanding of topics
                like DSA, System design etc. GeeksforGeeks provide you
                quality content so that you can prepare for the interviews.
                GeeksforGeeks also have a practice portal where you can
                practice problems and brush on your skills. You can visit
                the practice portal at
                <a href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org
                </a>
            </p>
        </center>
    </div>
</body>
</html>

輸出：從輸出中，觀察設置為“無”的工具欄的過渡，它突然消失，沒有任何過渡。

參考： https://api.jquerymobile.com/toolbar/#option-transition

相關用法

注：本文由純淨天空篩選整理自vpsop大神的英文原創作品 jQuery Mobile Toolbar transition Option。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。