Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


    • Create BookmarkCreate Bookmark
    • Create Note or TagCreate Note or Tag
    • DownloadDownload
    • PrintPrint
    Share this Page URL
    Help

    Interactive Rows > Split Button Lists

    Split Button Lists

    Sometimes it’s useful if we can have two possible interactive actions active on the same row. The most common scenario is to have a detail action and also an edit action.

    For example, if we list contact names on a table, we can offer two possible actions: view details and edit. For that purpose, jQuery Mobile uses what it is called a split row. If a list item, li, has two hyperlinks (a element), it will be automatically treated as an split row.

    A split row allow us to have two active zones per row, one for the typical action and one defined by a separate icon at the right

    Figure 4-9. A split row allow us to have two active zones per row, one for the typical action and one defined by a separate icon at the right

    As we can see in Figure 4-9, the row is split in two parts: left and right. The first link in the DOM will be used as the first action, active in the left side of the row. The second link will be used as the alternate action, activated on the right side of the row.

    The second link action doesn’t need any text inside the link. In fact, the first link action doesn’t either. We can leave the a link without contents, and it will be applied to the whole row.

    Note

    Following iOS user interface guidelines, the first action should be used for details and the second action should be used for edit. However, that is not an obligation.

    By default, jQuery Mobile will use a bordered arrow icon for the right button (the second action) a little different than the one for standard interactive rows.

    If we want to define a different theme for the right split icon, we can do it using data-split-theme over the ul tag.

    Let’s take a look at a sample, shown in Figure 4-10:

    <!DOCTYPE html>
 <html>

 <head>
   <!-- Typical jQuery Mobile header goes here -->
 </head>

 <body>

  <div data-role="page" id="main">

    <div data-role="header">
      <h1>Your Friends</h1>
    </div>

    <div data-role="content">
       <ul data-role="listview">
           <li><a href="details/bill">Bill Gates</a>
               <a href="edit/bill"></a>

           <li><a href="details/steve">Steve Jobs</a>
               <a href="edit/steve"></a>

           <li><a href="details/mark">Mark Zuckerberg</a>
               <a href="edit/mark"></a>

           <li><a href="details/larry">Larry Page</a>
               <a href="edit/larry"></a>
       </ul>
    </div>

   </div>


  </body>
 </html>
    Every zone has its own selected state, as we can see here

    Figure 4-10. Every zone has its own selected state, as we can see here

    We can change the icon for the second action using the modifier data-split-icon—applied to the list itself (ul or ol element) and not to the list item (li element).

    The list view uses the same icon set as for buttons (as we are going to see in the next chapters), but with the addition of a rounded border for a visual difference from normal buttons.

    The possible icons we can use up to jQuery Mobile 1.0 are shown in Table 3-1.

    Note

    We can provide our own icon set using only one image and applying CSS Sprites, like the ones included in the framework.

    Managing row importance

    If we want some or all rows to be more important than typical ones, we can insert the row’s title inside any hx tag, such as h2 or h3. When we do that, that row will grow in height.

    If we want a row to be less important (maybe for a not-so-frequent action), we should enclose the row’s title in a p tag to reduce the row’s height.

    In later chapters we will see how to customize list views and rows in a more precise way.