Question

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

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

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

Answer 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里面。

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

1 个答案: