Responsive jQuery Mobile header buttons

Question

I've got the following problem with my header section in my jquery mobile application:

enter image description here

Here is the code:

<div data-role="footer" class="ui-bar">
            <a href="#searchpage" data-role="button" data-icon="search" style="border-right:1px solid #0E6251;">Search</a>
            <a href="#sellbookpage" data-role="button" id="ContactSellButton" data-icon="dollar" style="border-right:1px solid #0E6251;">Sell</a>
            <a href="#" data-role="button" data-icon="email">Contact Us</a>

            <div id='ContactUsProfileButtons' class='ui-btn-right' style="display: flex;">  
                <a data-icon='home' href="#profilepage"  data-role='button' style="border-right:1px solid #0E6251;">Profile</a>
                <a data-icon='forward' onclick='LogOut()' data-role='button'>Log Out</a>
            </div>

Ideally I would like the buttons to condense into a drop down menu as seen with twitter bootstrap. But I can't seem to get this right. Does jquery mobile a) not cater for this? b) if not how can I fix the problem?

Note for the code I followed this link. I'm aware I'm using a footer class here but I simply did this to have the buttons be formatted next to each other and have the freedom of moving them around with out having to worry about tags.

        </div>

Community · Accepted Answer · 2017-05-23 12:05:52Z

I had a look at twitter bootstrap and If you are after a page pull down that reveals the menu i done a demo for JQM here Javascript Menu like JQuery Mobile

I created another demo for a side menu than fades in and upon click. Simple and nice, like the one in a Gmail app.

The button to open and close is on left of the header, as i cant place it on it on the right, were it should be as fiddle places an overlay saying result there and its hard to get the click going.

Demo I'm using Font Awesome Icons as there is more variety for menus

http://jsfiddle.net/qd0cfvd6/

HTML

<div data-role="header">
<a data-iconpos="notext" id="panelleft" data-role="button"><i class="button fa fa-ellipsis-v"></i></a>
    <h1>Page Title</h1>
</div>

<div id="menu">
    <ul data-role="listview">
        <li><i class="icon fa fa-search"></i><span class="text">Search</span></li>
        <li><i class="icon fa fa-envelope"></i><span class="text">Contact</span></li>
            <li><i class="icon fa fa-book"></i><span class="text">Profile</span></li>
            <li><i class="icon fa fa-level-up"></i><span class="text">Logout</span></li>
    </ul>
</div>

CSS

#menu{
    width:100px !important;
    height: auto; 
    padding:10px;
    background-color:#fff; 
    position:fixed;
    top:47px;
    right:0px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;
    width:100px;
    display:none;
}

.ui-btn-left, .ui-btn-right {
border: 0 !important;
background-color: transparent !important;
box-shadow: none !important;
}

.fa {
 font-size:18px;
}

.icon {
 margin-left:-14px; 
 font-size:12px  
}
.text { margin-left:20px !important;
font-size:12px }
}

Jquery

 $(document).on("click",".button", function(){
 $('#menu').fadeToggle("fast");  
});

Result

enter image description here

Update 29 Dec 2014

I came across this turtorial http://www.syncano.com/getting-started-reactjs-tutorial/ that uses React Js and Velocity that achieves an exact pop-in menu in a native Android App and did a quick demo just using Jquery and the Velocity animation Plugging http://julian.com/research/velocity/. Credit to the person that did the Original Demo and for the Velocity Code.

Demo Some Css need fixing for proper use, but it looks ok

http://jsfiddle.net/zhxc830f/

enter image description here

Collectives™ on Stack Overflow

Responsive jQuery Mobile header buttons

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related