jQuery UI & Datepicker: Trigger by icon

This entry is part 12 of 14 in the series jQuery UI Datepicker

jQuery UI Datepicker – Icon trigger

Click the icon next to the input field to show the datepicker.

Set the datepicker to open on focus (default behavior), on icon click, or both.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Icon trigger</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#datepicker').datepicker({
                showOn: 'button',
                buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
                buttonImageOnly: true
            });
        });
    </script>
</head>
<body>

<p>Date: <input type='text' id='datepicker'></p>

</body>
</html>
Try The Code Datepicker Widgets API Doc

jQuery Mobile: Navigation bar icon positioning

This entry is part 54 of 73 in the series jQuery Mobile

Using our previous example where we put the navigation bar in the footer, we set the icon position of the bar to either the left or the right.

In the below example, we put it on the right hand side of the button.

Navigation Bar Icon Position
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'>
        <h1>Welcome To My Mobile App</h1>

    </div>

    <div data-role='content'>
        <p>You can put your content here...</p>
    </div>

    <div data-role='footer' data-position='fixed'>
        <div data-role='navbar' data-iconpos='right'>
            <ul>
                <li><a href='#' data-icon='grid'>Summary</a></li>
                <li><a href='#' data-icon='star' class='ui-btn-active'>Favs</a></li>
                <li><a href='#' data-icon='gear'>Setup</a></li>
            </ul>
        </div><!-- /navbar -->
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

To put the icons on the left, we just have to modify line 21 to data-iconpos=’left’.

Icon Position

jQuery Mobile: Icon positioning

This entry is part 47 of 73 in the series jQuery Mobile

By default, icons in input buttons are placed to the left of the button text.

We have placed our icons on the left and this default may be overridden using the data-iconpos attribute to set the icon position to ‘right’, ‘top’, or ‘bottom’.

In case of link buttons or button elements you have to add an icon position class (ui-btn-icon-[value]).

Icon Position
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Button Icon Positioning</h1></div>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-left'>Left</a>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right'>Right</a>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-u ui-btn-icon-top'>Top</a>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-d ui-btn-icon-bottom'>Bottom</a>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

In the highlighted line, we have positioned the icon on the left using ui-btn-icon-left.

 

 

jQuery Mobile: Inline only buttons using Icons

This entry is part 42 of 73 in the series jQuery Mobile

Here we work out some mini-size buttons using only the icons.

Buttons Using Icons
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <style>
        .center {
            text-align: center;
        }
    </style>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Grid A</h1></div>
    <br>
    <div class='ui-grid-d center'>
        <div class='ui-block-a'><a class='ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline'>Button</a></div>
        <div class='ui-block-b'><a class='ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline'>Button</a></div>
        <div class='ui-block-c'><a class='ui-shadow ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext ui-btn-inline'>Button</a></div>
        <div class='ui-block-d'><a class='ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-btn-inline'>Button</a></div>
        <div class='ui-block-e'><a class='ui-shadow ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext ui-btn-inline'>Button</a></div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>

</html>
Try The Code

Notice the icons have been centered using text-align:center.
Icon Buttons Output

jQuery Mobile: Icon Position Right Of Checkbox

This entry is part 17 of 73 in the series jQuery Mobile

To place the checkbox icon on the right hand side of the page, we use data-iconpos=’right’ attribute.

<fieldset data-role='controlgroup' data-iconpos='right'>
Checkbox Icon Position
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Icon Position Right Checkbox</h1></div> 
    <br>
    <p>Icon Position right</p>
    <form>
        <fieldset data-role='controlgroup' data-iconpos='right'>
            <input type='checkbox' name='checkbox_a' id='checkbox_a'>
            <label for='checkbox_a'>One</label>
            <input type='checkbox' name='checkbox_b' id='checkbox_b'>
            <label for='checkbox_b'>Two</label>
            <input type='checkbox' name='checkbox_c' id='checkbox_c'>
            <label for='checkbox_c'>Three</label>
        </fieldset>
    </form>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code