Creating a custom tab bar using jQuery Mobile

I transferred a tab bar from one of my projects to jsfiddle, but the CSS was too complex to understand. So, I extracted useful code from the CSS and created my own version in this new fiddle. However, it looks exactly like the example. Now, I need to implement the same tab bar in my jQuery mobile project.

For that, I utilized data-role ="navbar"

In my final demo, I aim to replace the button with a similar tab bar at the top.

<div data-role="navbar">
  <ul>
    <li><a href="#" class="tabBtn" data-tabid="0">One</a></li>
    <li><a href="#" class="tabBtn" data-tabid="1">Two</a></li>
    <li><a href="#" class="tabBtn" data-tabid="2">Three</a></li>
  </ul>
</div>

How can I replicate the tab bar as seen in the previous fiddles?

http://jsfiddle.net/ezanker/o9foej5L/1/

javascriptjquerycssjquery-mobile

Answer №1

Simply include this CSS snippet

.ui-btn-active{
 border-bottom: 3px solid #c30 !important;
}

http://jsfiddle.net/o9foej5L/3/

To achieve this effect, utilize JavaScript

   $(".tabBtn").on("click", function(){
         $(".tabBtn").removeClass("activeWI");
        $(this).addClass("activeWI");
    });

Make adjustments to your HTML structure like so

<header>
    <div class="topbarWI">
        <div class="midbox">
            <div class="main-menu">
                <a runat="server" href="#" id="logoutRg" class="tabBtn fl activeWI">Tab1</a>
                <a runat="server" href="#" id="faqbtnRg" class="tabBtn fright">Tab3</a>
                <a runat="server" href="#" id="newregistrationRg" class="tabBtn mid-link">Tab2</a>
            </div>
        </div>
    </div>
</header>

JS Fildle: http://jsfiddle.net/h7Lasuoh/1/

Answer №2

Start with a demonstration, followed by an explanation:

Check out the latest version of the code in this FIDDLE

To enhance the navbar, I included a new class:

<div data-role="navbar" class="myNavBar">

The following CSS code takes care of the customization:

.myNavBar  {
    border-bottom: 1px solid #fb7923;
}
.myNavBar a {
    border-width: 0px !important;  
}
.myNavBar a.ui-btn-active {
    background-color: rgb(246, 246, 246) !important;   
    border-color: rgb(221, 221, 221) !important;
    border-bottom: 3px solid #fb7923 !important;
    color: #fb7923 !important;
    padding-bottom: 6.75px;
    text-shadow: none !important;
    box-shadow: none  !important;
}
.myNavBar a:hover {
    border-color: rgb(221, 221, 221) !important;
    border-bottom: 3px solid #fb7923 !important;
    padding-bottom: 6.75px;
}

The first block adds an orange bottom border to the entire navbar. The second section eliminates all button borders. For the ui-btn-active state, the font turns orange, a thicker base border is applied, and padding is adjusted to maintain consistency with other buttons. Additionally, adjustments were made to the hover effect.

You can fine-tune these parameters as needed to achieve your desired look.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilize gulp-connect to store the root as an array

The gulp-connect documentation mentions that options.root can accept either an array or string. My situation involves having a build directory that I want to use as the root, along with a separate sources directory where all my source maps are located. Is ...

javascriptnode.jsgulp

Enhance user experience with Jqgrid hyperlinked user format

I am currently utilizing jqgrid with JSON data that is structured as follows: {"my_id" : 12345, "doc_number" : 9786} My objective is to implement an hlink formatter that displays the doc_number, while passing the my_id as a parameter to my JavaScript func ...

javascriptjqueryjqgrid

Obtaining information from a intricate string input

{JSON.stringify(walletData.transactions, null, 2)} My goal is to extract backend data and display it as a table. The response has been converted into an array as shown below. [ { "date": "Nov 07, 2023", "description" ...

javascriptnext.js

problem arising from the box shadow and transparent areas of an image

I'm facing an issue while attempting to apply a box-shadow effect on my image. The problem arises due to certain transparent parts of the image causing unexpected results with the box-shadow. To better understand the situation, refer to the code snipp ...

htmlcss

What is the best way to style an element with two classes in SCSS?

I've always understood that when targeting a div with two classes in SCSS, you should structure it like this: HTML: <div class="item active">...</div> SCSS: .item { &.active { /* add your code here */ } } But what about whe ...

csssass

Guide on how to retrieve a clicked element

When I click on the <ul> inside this div, I want to retrieve the id="nm". <div id="suggestionTags"> <ul> <li class="nm">Commonwealth</li> <span class="cty"> x GB</span> <li class="hse">C ...

jquerycss

Is there a way to set a cookie in order to remember an open tab? The tabs in question are generated using Coldfusion and Javascript

Trying to figure this out, but currently stuck. I have tabbed sections generated in Coldfusion. The selected section is marked by a class named "tab_selected (+ the UUID created in coldfusion)", while unselected tabs have class names with "tab_unselected ( ...

javascriptcookiescoldfusiontabs

What could be preventing the background image from displaying properly?

I had the idea to create a game where players have to flip cards to reveal what's on the back, but I'm struggling to get the background image to display properly. As a newcomer to Vue, I'm not sure if I made a mistake somewhere. My intuition ...

javascripthtmlcssvue.js

Display a specific tab section upon clicking using jQuery or JavaScript

Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items ...

javascriptjquerycsshtml

Please move the scroll down and then back up after an Ajax request because the scroll position has been reached

When I click a button, I am loading results using ajax. Every time I click, the page scrolls to a specific position with the following code: success: function(data) { $("#test").html(data).fadeIn("slow&quo ...

jqueryajaxscrolluser-experience

Can you explain the functionality of Hibernate Query.executeUpdate?

The record was successfully deleted with the following code : Query query = session.createQuery("delete from Emp where id=100"); query.executeUpdate(); I wonder what would happen if I omit query.executeUpdate()? ...

javajquerydatabasehibernateorm

Get rid of just this one specific element using jQuery

I have implemented a feature where tasks are dynamically added to a list when the input is entered and its length is less than or equal to 30 characters, followed by clicking a button. Each task comes with a trash icon for removal, sourced from an externa ...

javascriptjquerycss

Tips for creating basic Jasmine and Karma tests for an Angular application to add an object to an array of objects

I have developed a basic Angular project for managing employee data and I'm looking to test the addProduct function. Can someone guide me on how to write a test case for this scenario? I am not using a service, just a simple push operation. Any assist ...

javascriptangulartypescriptjasminekarma-jasmine

Retrieving the OuterWidth of a Division Element with Jsoup

Currently, I'm working on a project that requires obtaining the outer width of a div element from the server side. I am utilizing jsoup for this task. I am seeking guidance on how to retrieve the outerwidth of a div in jsoup, similar to the functiona ...

javajqueryhtmlcssjsoup

What is the best way to implement a double IF condition in JavaScript and Vue?

This particular scenario involves the execution of the runtime function twice - initially, the function operates as expected, and subsequently it swaps template1 with data from template2. We seek assistance in resolving this issue. <template> < ...

javascriptvue.js

Executing JQuery and Ajax calls within a loop

Can I dynamically change the variable in ("xxxxx").html(data) inside a for loop? I've been struggling to figure this out. My goal is to populate an HTML table with JSONP data from multiple ajax calls within a loop, where the URL changes each time. Wh ...

javascriptjqueryajax

Updating the junction table in a many-to-many relationship with Sequelize

I am facing a challenge in updating a junction table with multiple ids. My goal is to update the junction table by removing rows with missing ids and creating new ones. Here is my current setup: ActorFilm.belongsTo(models.Actor, { foreignKey: 'acto ...

javascriptnode.jsexpresssequelize.jssequelize-cli

Enhance the current menu item in WordPress by assigning a class to the anchor tag

function updateActiveClassOnMenu($item_output, $item, $depth, $args) { $menu_locations = get_nav_menu_locations(); if ($item->menu_order == 1){ $item_output = preg_replace('/<a /', '<a class="active" ', $item_o ...

phpjqueryhtmlcsswordpress

Inside nested ng-transclude, the AngularJS directive isolates the scope

I've been scouring the internet for a solution to my problem, but I still haven't found it. In my application, I have a directive that enables users to sort and search through various lists of items. These items can vary in type and usage, leadi ...

javascriptangularjsangularjs-scopeangularjs-ng-transclude

Horizontal line chart in Chart.js or a customized version of the horizontal bar chart

I'm currently using chart.js to create a timeline showcasing events in relation to the current date. While the horizontal bar chart is useful, I would prefer displaying only the tips of the bars as points essentially transforming it into a horizontal ...

javascriptchart.js