jQuery Mobile Toolbar position用法及代码示例

jQuery Mobile 是一种基于 Web 的技术，用于创建可在各种屏幕尺寸的设备(例如手机、平板电脑和台式机)上响应并可访问的网站和应用程序。

在本文中，我们将使用 jQuery Mobile 工具栏位置选项。当位置选项设置为“fixed”工具栏使用 CSS 属性浮点数在内容上方“位置：固定”。

用法:

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

$( ".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>

例子：在此示例中，我们将位置选项设置为“固定的”这样工具栏就会浮点数在内容上。

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 () {
            $("#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://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 id="divID" data-role="header">
            <h1>Toolbar</h1>
        </div>
    </div>
</body>
</html>

输出：

工具栏浮点数在其他内容之上

参考： https://api.jquerymobile.com/toolbar/#option-position

相关用法

注：本文由纯净天空筛选整理自vpsop大神的英文原创作品 jQuery Mobile Toolbar position Option。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。