Javascript JQM向可折叠标题添加按钮_Javascript_Jquery_Html_Css_Jquery Mobile

Javascript JQM向可折叠标题添加按钮

javascript jquery html css jquery-mobile

Javascript JQM向可折叠标题添加按钮,javascript,jquery,html,css,jquery-mobile,Javascript,Jquery,Html,Css,Jquery Mobile,以下JSFIDLE提供了基本的源代码：样品标题1 项目1 标题2 项目2 (一) 我想做的是在每个标题的左边加上“+”号，我想在最右边还有一个带“X”号的按钮（默认的JQM删除图标）。但我无法添加“X”符号。“X”符号将进一步用于从列表中删除该项目 (二) 在“标题1”下面有一个标签，标签上的类为ui-btn-ui-icon-delete 即使如此，删除图标也不会出现在此中谢谢只需将类“ui btn图标左”添加到元素中，您就可以开始了 <a href="#

以下JSFIDLE提供了基本的源代码：


样品


标题1
项目1


标题2
项目2

(一)

我想做的是在每个标题的左边加上“+”号，我想在最右边还有一个带“X”号的按钮（默认的JQM删除图标）。但我无法添加“X”符号。“X”符号将进一步用于从列表中删除该项目

(二) 在“标题1”下面有一个

标签，标签上的类为

ui-btn-ui-icon-delete

即使如此，删除图标也不会出现在此

中

谢谢

只需将类“ui btn图标左”添加到元素中，您就可以开始了

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

这是一把工作小提琴：

关于问题的第二部分，您需要按如下方式输入

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

除了将删除按钮绝对定位在标题右侧的css之外，还可以实现部分所需的功能，因为它仅在展开可折叠文件时才起作用

要使其在塌陷时工作，需要一点js

一个可能的解决办法如下：

html

-添加了带有

class

值

container

的

div

元素，以模拟listview的白色容器。请注意，列表的第一个和最后一个元素分别具有类值

container first

和

container last

-添加了<<代码> <代码>，与CSS一起使用，使其绝对位于可折叠头的最右边。

<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>

-如果在

pagecreate

上运行以下代码，则折叠文件时，删除按钮也将可见

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

正是我要找的！谢谢D

<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>

.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;
}

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