jQuery Mobile工具条位置选项

jQuery Mobile是一种基于网络的技术，用于创建网站和应用程序，这些网站和应用程序在手机、平板电脑和台式机等各种屏幕尺寸的设备上均可响应和访问。

在这篇文章中，我们将使用jQuery Mobile Toolbar position 选项。当位置选项被设置为”fixed”时，工具条就会使用CSS属性”position: fixed “浮动在内容之上。

语法:

用指定的位置选项初始化工具条：

$( ".selector" ).toolbar({
  position: "fixed"
});

获取或设置位置选项，初始化后：

// Getter
var position =  $( ".selector" ).toolbar( "option", "position" ); // Setter$ ( ".selector" ).toolbar( "option", "position", "fixed" );

CDN链接：首先，添加你的项目需要的jQuery Mobile脚本。

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

例子：在这个例子中，我们将把位置选项设置为”fixed”，这样工具条就会漂浮在内容之上。

<!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 () {$ ("#divID").toolbar({
                position: "fixed",
            });
        });
    </script>
</head>
 
<body>
    <div data-role="page">
        <center>
            <h2 style="color:green">
                GeeksforGeeks
            </h2>
            <h3>jQuery Mobile Toolbar position option</h3>
             
            <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://practice.geeksforgeeks.org/courses">
                    https://practice.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 id="divID" data-role="header">
            <h1>Toolbar</h1>
        </div>
    </div>
</body>
 
</html>

输出:

jQuery Mobile工具条位置选项