[英]jQuery Mobile remove top rounded corners
I have a DIV which holds an <ul>
and a <li>
to get a nice header.我有一个 DIV,它包含一个
<ul>
和一个<li>
以获得一个不错的标题。 Below is a collapsibleset
.下面是一个
collapsibleset
。 Problem is that it has ui-corner-all
class.问题是它有
ui-corner-all
类。 If I remove the class I will no longer have rounded corners on my collapsibleset.如果我删除该类,我的可折叠集上将不再有圆角。 Trying to add
ui-corner-bottom
instead but nothing happens.尝试添加
ui-corner-bottom
但没有任何反应。
$("#mydiv ul").append(
"<div data-role='collapsibleset' data-theme='a' data-content-theme='a' style='margin: 0'>"
+"<div data-role='collapsible'>"
+"<h3>Section 1</h3>"
+"<p>I'm the collapsible content for section 1</p>"
+"</div>"
+"<div data-role='collapsible'>"
+"<h3>Section 2</h3>"
+"<p>I'm the collapsible content for section 2</p>"
+"</div>"
+"<div data-role='collapsible' class='ui-last-child'>"
+"<h3>Section 3</h3>"
+"<p>I'm the collapsible content for section 3</p>"
+"</div>"
+"</div>"
).trigger("create");
// not working -> //$("#mydiv div").removeClass("ui-corner-all").addClass("ui-corner-bottom").trigger("create");
To remove border-radius
from collapsibleset 's top only.仅从collapsibleset的顶部移除
border-radius
。
.ui-collapsible-set > .ui-collapsible.ui-corner-all {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
Just add data-corners="false"
to collapseibleset div.只需将
data-corners="false"
到折叠集div。 Also, use .enhanceWithin()
instead of .trigger("create")
as it is deprecated in jQM 1.4.此外,使用
.enhanceWithin()
而不是.trigger("create")
因为它在 jQM 1.4 中已被弃用。
$("#mydiv ul").append("<div data-role='collapsibleset' data-theme='a' data-content-theme='a' style='margin: 0' data-corners='false'>"
+"<div data-role='collapsible'>"
+"<h3>Section 1</h3>"
+"<p>I'm the collapsible content for section 1</p>"
+"</div>"
+"<div data-role='collapsible'>"
+"<h3>Section 2</h3>"
+"<p>I'm the collapsible content for section 2</p>"
+"</div>"
+"<div data-role='collapsible' class='ui-last-child'>"
+"<h3>Section 3</h3>"
+"<p>I'm the collapsible content for section 3</p>"
+"</div>"
+"</div>").enhanceWithin();
Remove the class and add round corners by css:删除类并通过css添加圆角:
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
You can use this tool for code generation: http://border-radius.com/您可以使用此工具生成代码: http : //border-radius.com/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.