Jquery Mobile可折叠列表,数据增强=“true”

时间:2014-01-17 23:27:37

标签: jquery css jquery-mobile jquery-mobile-collapsible

我需要一个可折叠的元素,在我的页面中有一个分割按钮。所以我找到了“频繁”(Add link within collapsible content header (split- link) - css missinghttp://jsfiddle.net/XqAvB/2/)的解决方案,这非常好。 现在我已经改进了一点,所以代码也可以显示弹出窗口。 在我的版本中,我使用了可折叠元素内的listview来显示附加信息。

整个构造在data-role =“content”组内,所以它有一个小白色边框。 在这里我的问题开始了:Tittle有一个边框,但listview没有一个。 我需要使用哪些代码,以便内容组中的所有部分都获得白色边界或者其他字样的数据插入是真的? 我认为问题出在类(CSS)参数中,我想我必须添加附加单词,代码元素。但是哪个?

这是我个案的一个小小的JSFiddle,应该更好地解释一下: http://jsfiddle.net/Cat_Turbo/BMN44/

HTML

<div data-role="page" id="page1">
<div data-role="content">
<div data-role="collapsible" data-theme='b' data-content-theme='d' data-collapsed='true' class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed doublemeaning" data-enhanced="true" data-inset="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="myheading ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus" href="#">Title</a>
<a class="click_action ui-btn ui-btn-icon-notext ui-icon-delete ui-corner-all " data-enhanced="true"  data-rel="back">New Page HTML</a>
</h3>
<ul data-role="listview" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<li>test 1</li>
<li>test 2</li>
</ul>
</div>
<div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" style="max-width:100%; padding:1px;">
<h3>Purchase Album?</h3>
<p>Your download will begin immediately on your mobile device when you purchase.</p> <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Buy: $10.99</a>
<a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Cancel</a>
</div>
</div>
</div>

JQuery的

$(".click_action").bind("click", function (e) {
console.log('clicked');
  e.stopPropagation();
  e.preventDefault();
  e.stopImmediatePropagation();
  console.log('Should now go to: '+$(this).attr('href'));
  $.mobile.changePage($(this).attr('href'));
});

CSS

.ui-collapsible-inset .ui-collapsible-heading .ui-btn.click_action {
position: absolute;
top: 0;
right: 1px;
height: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-width: 0px;
margin-top: -1px;
margin-bottom: -1px;
}

1 个答案:

答案 0 :(得分:3)

您正在使用增强型 HTML标记。您想要实现的正确HTML结构如下。

<div data-role="collapsible" data-theme='b' data-content-theme='a' data-collapsed='true'>
  <h3>Title
<a class="click_action ui-btn ui-btn-b ui-btn-icon-notext ui-icon-delete">Custom button</a>
  </h3>
  <ul data-role="listview">
    <li>test 1</li>
    <li>test 2</li>
  </ul>
</div>
  • 我在按钮中添加了ui-btn-b类,以获得可折叠的相同主题。

  • 内部 弹出广告 div应该是页面div的直接子节点,或者外部页面div作为外部弹出窗口。< / p>

  • 在JS代码return false;中,最后的行为与preventDefault()stopImmediatePropagation()相结合。

  

Demo