jQuery Mobile 工具栏转换选项

jQuery 移动 是一个使用 jQuery 构建的 JavaScript 库，基于用户界面系统，旨在制作可在所有智能手机、平板电脑和桌面设备上访问的响应式网站和应用程序。 jQuery 工具栏是一个小部件，可用于增强页眉和页脚。这些小部件用于将工具栏添加到页面的顶部和/或底部。

在本文中，我们将使用 jQuery Mobile 工具栏转换选项。它用于在工具栏隐藏/显示时设置我们想要的过渡类型。固定工具栏扩展有助于此转换选项，并且仅适用于固定工具栏。默认值为“slide”，它是字符串类型。

. 语法：通过指定转换选项来初始化工具栏：

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

初始化后设置和返回转换选项：

• 获取过渡选项：

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

• 设置过渡选项：

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

接受的值：

• none：工具栏会出现和消失，没有任何过渡。
• slide：工具栏在切换时将滑入/滑出。
• 淡入淡出：工具栏在切换时将淡入/淡出。

CDN 链接：为 jQuery Mobile 使用以下 CDN 链接。

示例 1：我们将过渡选项设置为“幻灯片”。

HTML

 

    
    
    
    
    
    
    
    
 
    
        $(document).ready(function () {
 
            // Setting to "slide" by default
            $("#GFG").toolbar({
                transition: "slide"
            });
        })
    

 

    
        
            GeeksforGeeks
            jQuery Mobile Toolbar transition option
            
                Toolbar
            
            What is GeekforGeeks?
            
                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
                
                    https://practice.geeksforgeeks.org/courses
                
                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
                
                    https://practice.geeksforgeeks.org
                
            
 
        
    

 

输出：从输出中，观察设置为滑动的工具栏的过渡，并在单击时以向上的滑动效果消失。

示例 2：我们将转换选项设置为“无”。

HTML

 

    
    
    
    
    
    
    
    
 
    
        $(document).ready(function () {
            $("#GFG").toolbar({
                transition: "none"
            });
        })
    

 

    
        
            GeeksforGeeks
            jQuery Mobile Toolbar transition option
            
                Toolbar
            
            What is GeekforGeeks?
            
                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
                
                    https://practice.geeksforgeeks.org/courses
                
                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
                
                    https://practice.geeksforgeeks.org
                
            
 
        
    

 

输出：从输出中，观察设置为无的工具栏的过渡，它突然消失，没有任何过渡。

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