Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > jQuery Mobile navigation bar code_jquery

jQuery Mobile navigation bar code_jquery

WBOY
Release： 2016-05-16 17:18:04
Original
1018 people have browsed it

A navigation bar is a set of links arranged horizontally, usually contained within a header or footer.

By default, links in the navigation bar will automatically become buttons (data-role="button" is not required).

Use the data-role="navbar" attribute to define the navigation bar:

Copy the code The code is as follows:

By default, a button is as wide as its content. Use an unordered list to divide the width of the buttons evenly: 1 button takes 100% of the width, 2 buttons take 50% of the width each, 3 buttons take 33,3% of the width each, and so on. However, if you specify more than 5 buttons in the navigation bar, it will be split into multiple rows (see "More Examples").

Activate Button
When a link in the navigation bar is clicked, it will gain the appearance of being selected (pressed).

If you want to get this look when you don’t have to worry about the link, use class="ui-btn-active":

  • Home

    • For multiple pages, you may want the selected appearance of each button to represent the page the current user is on. To do this, add "ui-state-persist" and "ui-btn-active" to the linked class:

  • Home

    • Related labels：
    jquery mobile Navigation Bar
    source：php.cn
    Previous article：Using Substring to delete the last character of a string in JavaScript_javascript tips Next article：How to get the td value of the non-last column and set the title to that value_javascript skills
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
    From 2024-04-06 14:54:03
    0
    2
    421
    How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
    From 2024-04-05 09:26:49
    0
    1
    1418
    Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
    From 2024-04-04 18:40:04
    0
    1
    3528
    I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...
    From 2024-04-04 17:27:27
    0
    1
    417
    Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...
    From 2024-04-04 12:53:48
    0
    1
    303
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template