CODEWITHSUNDEEP
csshtmljquery-mobile
Findus
Findus

Reputation: 313

Implementing a custom JQM Element

I want to realize the second button, described in this post: Listview with more than one split button? (second answer)

Now, I implemented the code in an easy setup:

But excecution in Browser only shows me one button. The second button is missing :/ Could sb held me? I think I make an error by including the class definition. (I am new to JQM etc)

Kind regards 

<!DOCTYPE html>
<html>
  <head>
    <!-- Include meta tag to ensure proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Include jQuery Mobile stylesheets -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- Include the jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- Include the jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    <style type="text/css">
        .split-button-custom {
            float: right;
            margin-right: 10px;
            margin-top: -32px;
            border-bottom-left-radius: 1em 1em;
            border-bottom-right-radius: 1em 1em;
            border-top-left-radius: 1em 1em;
            border-top-right-radius: 1em 1em;   
        }
        .split-button-custom span.ui-btn-inner {
            border-bottom-left-radius: 1em 1em;
            border-bottom-right-radius: 1em 1em;
            border-top-left-radius: 1em 1em;
            border-top-right-radius: 1em 1em;
            padding-right: 0px;
        }
        .split-button-custom span.ui-icon {
            margin-top: 0px;
            right: 0px;
            top: 0px;
            position: relative;
        }
    </style>
  </head>
  <body>
    <div data-role="page" id="pageone">
      <div data-role="header">
        <h1>Welcome To My Homepage</h1>
      </div>
      <div data-role="main" class="ui-content">
        <p>Welcome!</p>
        <ul data-role="listview" data-filter="true" data-theme="b" style="margin-bottom: 50px;">
          <li>
            <a href="#" onclick="alert('the item!');">
              <h3>The item</h3>
            </a>
            <a href="#" onclick="alert('1st splitbutton!');" class="split-button-custom" data-role="button" data-icon="gear" data-iconpos="notext">1st link</a>
            <a href="#" onclick="alert('2nd splitbutton!');" class="split-button-custom" data-role="button" data-icon="arrow-r" data-iconpos="notext">2nd link</a>
            <a href="#" style="display: none;">Dummy</a>
          </li>
        </ul>
      </div>
    </div> 
  </body>
</html>

Upvotes: 0

Views: 40

Answers (1)

ezanker
ezanker

Reputation: 24738

The problem is that the answer you are using applies to jQM 1.3.x, but you are using 1.4.x. Here is a 1.4 solution for you:

<ul class="has-btns" data-role="listview" data-icon="false" data-filter="true" data-theme="b" style="margin-bottom: 50px;">
    <li> 
        <a href="#">
            <h3>Line Item 1</h3>
        </a>
        <div class="split-btns"> 
            <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all" ></a>
            <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-notext ui-corner-all" ></a>
        </div>
    </li>
</ul>

In the markup, turn off the default link icon (data-icon="false" on the <UL>).

.has-btns > li > a:first-child {
    margin-right: 72px !important;
}
.split-btns {
    position: absolute;
    right: 0;
    top: 0px;
    width: 72px;
    bottom: 0px;
    z-index: 100;
    border-top: 1px solid rgb(221, 221, 221);
    border-left: 1px solid rgb(204, 204, 204);
    background-color: rgb(246, 246, 246);
}
.ui-group-theme-b .split-btns {
    background-color: rgb(51,51,51);
    border-top: 1px solid rgb(31,31,31);
    border-left: 1px solid rgb(80,80,80);

}
.has-btns > li:last-child .split-btns {
    border-bottom: 1px solid rgb(221, 221, 221);
}
.ui-group-theme-b.has-btns > li:last-child .split-btns {
    border-bottom: 1px solid rgb(51, 51, 51);
}
.split-btns a {
    position: absolute;
    top: 50%;
    margin-top: -14px;    
}
.split-btns a:first-child {
    right: 36px;
}
.split-btns a:last-child {
    right: 6px;
}

In the CSS, I am giving the first link a right margin to allow room for the buttons, then I use absolute positioning to place the div and the 2 buttons. The rest is border and background fixes to match the existing elements. The CSS also covers the default A and B themes that deliver with jQM 1.4.x.

DEMO

Upvotes: 1

Related Questions