The jQueryMobile Grid Layout PRO

Using the jQueryMobile we can split our screen into columns. We just need to choose in advance the number of columns we want and use the relevant CSS class. Using the ‘ui-grid-a’ CSS class we shall get two columns, using the ‘ui-grid-b’ CSS class we shall get three columns and so on.

In order to get rows we should add div elements assigned with the ui-block-_ elements. Doing so will indirectly split the columns in to rows. The following video clip explains it.

The code below is the one I was using when creating this video clip. You can find more code samples and video clips for using the jQueryMobile library in my free courses website at http://abelski.lifemichael.com.

<!DOCTYPE html>
<html>
<head>
    <title>My Cycling</title>
    <link rel="stylesheet"
          href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
    </script>
</head>
<body>
<div data-role="page" id="home" data-theme="e">
    <div data-role="header">
        <h1>Sample Demo</h1>
    </div>
    <div data-role="content" data-theme="e">

        <div class="ui-grid-a">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-b">A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-b">B</div>
            </div>
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-b">C</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-b">D</div>
            </div>
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-b">A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-b">B</div>
            </div>
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-b">C</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-b">D</div>
            </div>
        </div>

    </div>
    <div data-role="footer">
        <h4>www.lifemichael.com</h4>
    </div>
</div>
</body>
</html>

Share:

The Visitor Design Pattern

The Visitor Design Pattern

The visitor design pattern allows us to add operations to objects that already exist without modifying their classes and without extending them.

What are Anti Patterns?

Anti Patterns

Unlike design patterns, anti patterns just seem to be a solution. However, they are not a solution and they cause additional costs.

Virtual Threads in Java Professional Seminar

Virtual Threads in Java

The use of virtual threads can assist us with improving the performance of our code. Learn how to use virtual threads effectively.

The Beauty of Code

Coding is Art! Developing Code That Works is Simple. Develop Code with Style is a Challenge!

Update cookies preferences