使用jQM添加和设置侧面按钮

时间:2013-09-03 08:20:00

标签: javascript html css jquery-mobile

所以我要做的就是在屏幕左侧添加一个按钮,它应该是圆形的(不一定),半可见且外观漂亮。使用此按钮,用户可以打开侧面菜单面板。

这是按钮的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%;”或任何尺寸调整使按钮看起来方形和丑陋。

那么你能给我一些造型美观且足够大的按钮吗?

1 个答案:

答案 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里面。