Thursday, May 16, 2013

Jquery Mobile - Customizing the search box

    Customizing the Jquery Mobile default styles is often required to match the design visuals provided by your designer and approved by your client. Such is the case with the Jquery Mobile search box as well. The designers often use customized icons for the default search box icons. In the example that follows, we will take a look at how this done and we will use custom icons for the search box in place of the default icons.

    As seen in the example above, in the CSS, we need to use the !important keyword to override the default styles of the Jquery Mobile class.

    Customizing the search box or any other element in Jquery mobile is pretty simple. Hope you have followed the post and followed how to customize the Jquery Mobile default styles for  the HTML5 search input box. Drop a comment in case you need to know more or need help with your Jquery Mobile application. I would be happy to help!

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!

Jquery Mobile Form - Search input

    Input field of type search is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the search input type with capsule-corners and adds a 'x' icon to the right end, which clears the text in the search box.

    The seacrch input elements are available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized input element. Let's take a look at the code sample below to understand the working in a better way.

     In the code above, you will see 4 different implementations of the input search element. The first one is a regular input of type search with the label and the searchbox one below the other. The second implementation is exactly similar to the first implementation with the only difference of the added data attribute "data-mini="true"" which reduces the size (basically height) of the saerchbox.

    The third implementation gets the label and the saerchbox on the same line. This implementation is done using a div with data attribute data-role="fieldcontain" around the label and input tags. This div has to be within a form tag. Maintaining the HTML structure is very important when using JQuery Mobile framework.

    In the fourth implementation, we have used the HTML5 placeholder property and done away with the label completely. However, for the sake of accessibility, we have included the label tag with class="ui-hidden-accessible" so that the label is not displayed but is present in the HTML structure. This implementation is popularly used on mobile sites as this reduces the amount of scroll.

    To disable the input field just add the keyword "disabled" to the input tag and your input type would be disabled.

    For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label itself. While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.

    In the next post that follows, we will take a look at how we can customize the search box styling. This would include using custom icons for the the 'magnifying glass' and 'x' icon in the search box and reducing/removing the rounded corners property on the search box.

     Hope this post has been informative to you and helps you use the search input type effectively in your next Jquery Mobile based application. Drop a comment to let me know what you feel about this post as well as the earlier series on Jquery Mobile listview. Share the post if is has helped you, so that maximum developers benefit from this one. Stay tuned for the post on customizing the search box using Jquery Mobile.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!