我需要在标题工具栏中放置一个以上的小尺寸按钮,但它们看起来应该更小,并且我无法在控件组内设置这个仅限图标的按钮,就像单个图标一样按钮,相反 - 正如预期的那样,就像在JQM演示中一样。
我应该使用哪些JQM类来执行此任务?我在这需要一个自定义的wrapperClass吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="header" data-position="fixed">
<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-left">
<button class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-tag ui-btn-icon-notext">Button</button>
<button class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-user ui-btn-icon-notext">Button</button>
</div>
<h3>Page One</h3>
<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-right">
<button class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-tag ui-btn-icon-notext">Button</button>
<button class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-user ui-btn-icon-notext">Button</button>
</div>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:1)
将按钮更改为链接按钮(锚标记),它可以正常工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
div.ui-mini .ui-btn {
width: 26px;
}
</style>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="header" data-position="fixed">
<div class="ui-mini ui-btn-left">
<a href="#" class="ui-btn ui-corner-all ui-icon-tag ui-btn-icon-notext">Icon only</a>
<a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext">Icon only</a>
</div>
<h3>Page One</h3>
<div class="ui-mini ui-btn-right">
<a href="#" class="ui-btn ui-corner-all ui-icon-tag ui-btn-icon-notext">Icon only</a>
<a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext">Icon only</a>
</div>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>