如何在标头中获取仅图标的控件组? [英] How to get an icon-only controlgroup inside the header?
本文介绍了如何在标头中获取仅图标的控件组?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在标题工具栏中需要一个以上的微型按钮，但它们看起来应该变小了，而且我无法像在单个控件中的单个按钮那样在控件组中设置仅该图标的按钮的样式，像预期的那样，可以正常工作-就像在JQM演示中一样.
I need more than one mini-sized button inside a header Toolbar, but they appears smaller as they should be, and i'm not able to style this icon-only buttons inside a controlgroup like a single icon-only button, which works - instead - as expected, like in the JQM Demos.
此任务应使用哪个JQM类?我需要自定义wrapperClass吗?
Which JQM classes should i use for this task? Do i need here a custom 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>
推荐答案
将按钮更改为链接按钮(锚标记)，然后按需使用.
Change your buttons to link buttons (anchor tag) and it works as you have it.
<!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>
这篇关于如何在标头中获取仅图标的控件组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
