CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Anindit Karmakar
Anindit Karmakar

Reputation: 835

JQM Adding a button to collapsible header

The following JSFiddle gives the basic source code:

http://jsfiddle.net/vgDwj/6/

<body>
  <div data-role="page">

    <div data-role="header" data-position="fixed">
      <h3>Sample</h3>
    </div>

    <div data-role="content">
      <ul data-role="listview" data-inset="true">
        <li>
          <div data-role="collapsible">
           <h3>Title 1</h3>
           <a href="#" class="ui-btn ui-icon-delete"></a>
           <p>Item 1</p>
          </div>
        </li>

        <li>
          <div data-role="collapsible">
            <h3>Title 2</h3>
            <p>Item 2</p>
          </div>
        </li>
      </ul>
    </div>

  </div>
</body>

1)

What i want to do is along with the '+' sign to the left of each title, i want a button with 'X' sign (default JQM delete icon) on the extreme right also. But i am not able to add that 'X' sign. The 'X' sign will further be used to delete the item from the list.

2) Underneath the 'Title 1' I have a <a> tag with the class as ui-btn ui-icon-delete.

Even then the delete icon is not appearin in this <a>.

Thanks

Upvotes: 2

Views: 418

Answers (2)

melc
melc

Reputation: 11671

Regarding the second part of your question you need to enter it as follows,

<a href="#" class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-left"></a>

The first part of your question can be achieved partially with css and completely with js.

First i suggest you get rid of the listview, as it does not render correctly containing collapsibles (noticed weird spacing at the sides of collapsibles when expanded). You can easily mimic the containers of a listview with few div elements and css.

If a button is added right after the declaration of each collapsible,

<div data-role="collapsible" class="my-collapsible">
    <a href="#" class="my-delete ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
....

along with css that positions the delete button absolutely at the right of the header, then it is possible to achieve what you require partialy, since it only works when the collapsibles are expanded.

To make it work when the collapsibles are collapsed a little js is required.

A possible solution follows,

http://jsfiddle.net/7Xh9N/

html

-added div elements with class values container to mimic the white containers of listview. Note the first and last elements of your list have class value container first and container last respectively.

-added a <a href="#" class="my-delete ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a> to use along with css and make it absolutely positioned at the far right of the collapsible header.

<body>
  <div data-role="page">

    <div data-role="header" data-position="fixed">
      <h3>Sample</h3>
    </div>

    <div data-role="content">
<!--      <ul data-role="listview" data-inset="true">

<li>-->
        <div class="container-wrapper">
        <div class="container first">
          <div data-role="collapsible" class="my-collapsible">
              <a href="#" class="my-delete ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
           <h3>Title 1</h3>
                         <a href="#" class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-left"></a>

           <p>Item 1</p>
          </div>
        </div>
  <!--      </li>-->
 <div class="container">
          <div data-role="collapsible">
            <h3>Title 2</h3>
            <p>Item 2</p>
          </div>
        </div>
   <!--      <li> -->
        <div class="container last">
          <div data-role="collapsible">
            <h3>Title 2</h3>
            <p>Item 2</p>
          </div>
        </div>
<!--         </li>
              </ul> -->
    </div>
      </div>
  </div>
</body>

css

-added styles for container div elements -added styles for my-delete button, to be absolutely positioned to the far right of the header

.my-delete{
    position:absolute;
    top:0;
    right:2px;
    display:block !important;
    z-index:10000;
}
.container .ui-collapsible{
    position:relative;
}
.container-wrapper{
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    border-radius:5px;
}
.container{
    background-color:white;
    padding:4px;
    border:1px solid #ddd;
}

.container.first{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.container.last{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

js

-if the following code is run on pagecreate then the delete button will be also visible when the collapsibles are collapsed.

var $delButton = $('.my-delete').detach();
$('.my-collapsible').append($delButton);

http://jsfiddle.net/7Xh9N/1/

Upvotes: 1

CodeToad
CodeToad

Reputation: 4724

just add the class 'ui-btn-icon-left' to the element and you are good to go.

   <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left"></a>

here is a working fiddle: http://jsfiddle.net/vgDwj/12/

Upvotes: 0

Related Questions