jquerymobile design like IOS toolbar

StackOverflow https://stackoverflow.com/questions/19022947

문제

I know this is stupid question but i found no answer I want to design this. Color is not important enter image description here and enter image description here

I have done so far

here is the code

  <!-- Filter Toolbar -->
            <div data-role="header">
                <div data-role="navbar" data-iconpos="left">
                    <ul>
                        <li><a type="button" id="filterdate" >Date</a></li>
                        <li><a type="button" id="filtermember" class="ui-btn-active">Member</a></li>
                        <li><a type="button" id="filtersubject">Subject</a></li>

                    </ul>
                </div>

            </div>
            <!-- /Filter Toolbar -->
        <div data-role="footer">
                <div data-role="navbar" data-mini="true" data-iconpos="left">
                    <ul>
                        <li> <a href="#"  data-icon="edit">Edit</a></li>

                        <li><a href="#"   data-icon="refresh" data-iconpos="notext">Refresh</a></li>
                        <li>
                            <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true"></a>

                            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true"></a>
                        </li>

                    </ul>
                </div><!-- /navbar -->
            </div><!-- /footer -->
도움이 되었습니까?

해결책

You will have to mess around with the header button group width but other then that it looks like the pic you posted. Minus the color...

<div data-role="header">
    <div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button" class="headerButton">Member</a>
        <a href="#" data-role="button" class="headerButton">Subject</a>
        <label for="select-choice-0" class="select">Date</label>
        <select name="select-choice-0" id="select-choice-0" class="headerButton">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>


<div data-role="footer">
    <div data-role="navbar" data-mini="true" data-iconpos="left">
        <a href="#"  data-icon="edit">Edit</a>
        <div data-role="controlgroup" data-type="horizontal" style="float: right;">
            <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left" data-theme="a">&nbsp;</a>
            <a data-role="label">1</a>
            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" data-inline="true">&nbsp;</a>
        </div>
    </div><!-- /navbar -->
</div><!-- /footer -->
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top