所以我要做的就是在屏幕左侧添加一个按钮,它应该是圆形的(不一定),半可见且外观漂亮。使用此按钮,用户可以打开侧面菜单面板。
这是按钮的html代码:
<a id="settingsButton" data-rel="panel" data-role="button" href="#optionsPanel" data-icon="info" data-iconpos="notext" class="ui-icon-alt ui-icon-nodisc ui-btn-right">Settings</a>
一个动态设置样式的js示例:
function setSettingsButton(){
$("#settingsButton").css({
left:"-15px",
top:$(window).height() / 2 - 30 + "px",
position:"fixed"
});
}
在文档就绪时调用该函数。
此代码对按钮的样式非常好,但它太小了。当我尝试使用style="width: 10%; height: 10%;"
调整大小时,按钮会丢失它的圆形并变得相当难看。
编辑: Fiddle link here添加样式=“宽度:10%;高度:10%;”或任何尺寸调整使按钮看起来方形和丑陋。
那么你能给我一些造型美观且足够大的按钮吗?
答案 0 :(得分:1)
首先,请编辑您的问题并将链接放在那里。
至于解决方案:圆圈是用border-radius
制作的。这使用css围绕角落。假设我有一个10px肋骨的正方形。为了使它成为一个圆,我需要在每个角上使用5px的边界半径。如果我现在将肋骨的大小改为20px,它将不再是一个圆圈,而是一个圆角的正方形。这就是你正在做的事情。
要解决此问题,您还必须相应地更改border-radius
。这是一个例子:
$("#settingsButton").css({
left:"-30px",
top:$(window).height() / 2 - 30 + "px",
position:"fixed",
'border-radius':'30px',
height:'60px',
width:'60px'
});
这是fiddle。
现在,我从未使用过jQuery Mobile,因此我不确定是否有内置选项可以放大它,因为您将看到使用此方法不会放大 i -icon里面。