當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

jQuery Mobile Toolbar tapToggle用法及代碼示例


jQuery Mobile 是一個構建在 jQuery 之上的 JavaScript 庫。它用於創建可在各種屏幕尺寸的設備(例如手機、平板電腦和桌麵)上訪問的響應式網站。

在本文中，我們將使用 jQuery Mobile 工具欄點擊切換選項。這點擊切換選項定義是否可以通過點擊屏幕來切換固定工具欄的可見性。如果點擊切換被設置為錯誤的，無法通過點擊屏幕來切換工具欄的可見性。默認值為真的.

用法:

$(".selector").toolbar({
  tapToggle: false
});


獲取點擊切換選項：

var tapToggle = $(".selector").toolbar( "option", "tapToggle" );

設置點擊切換選項：

$(".selector").toolbar( "option", "tapToggle", false );

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：在下麵的示例中點擊切換選項設置為真的默認。

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <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 () {
            $("#divID").toolbar({
                tapToggle: true
            });
        })
    </script>
</head>
<body>
    <div data-role="page">
        <center>
            <h2 style="color:green">
                GeeksforGeeks
            </h2>
            <h3>jQuery Mobile Toolbar tapToggle option</h3>
             
            <div id="divID" 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<br />
                <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<br />
                <a href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org
                </a>
            </p>
        </center>
    </div>
</body>
</html>

輸出：

jQuery Mobile Toolbar tapToggle Option

示例 2：在下麵的示例中，點擊切換選項設置為錯誤的。您可以在下麵的輸出中看到，當我們單擊頁麵時，標題工具欄的可見性不受影響。

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <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 () {
            $("#divID").toolbar({
                tapToggle: false
            });
        })
    </script>
</head>
<body>
    <div data-role="page">
        <center>
            <h2 style="color:green">
                GeeksforGeeks
            </h2>
            <h3>jQuery Mobile Toolbar tapToggle option</h3>
             
            <div id="divID" 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<br />
                <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<br />
                <a href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org
                </a>
            </p>
        </center>
    </div>
</body>
</html>

輸出：

jQuery Mobile Toolbar tapToggle Option

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



相關用法


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