0

所以我要做的是在屏幕左侧添加一个按钮，它应该是圆形的（不一定），半可见且好看。使用此按钮，用户将被允许打开侧面菜单面板。

这是按钮的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%;"按钮调整大小时，它会失去圆形并且变得非常难看。

编辑： 小提琴链接在这里添加 style="width:10%; height:10%;" 或任何尺寸调整都会导致按钮看起来方形且难看。

那么你能给我一些关于设计一个好看又足够大的按钮的建议吗？

4

1 回答 1

1

首先，请编辑您的问题并将指向您的小提琴的链接放在那里。

至于解决方案：圆圈是用border-radius. 这使用 css 圆角。假设我有一个带 10 像素肋骨的正方形。为了使它成为一个圆圈，我需要在每个角上设置一个 5px 的边框半径。如果我现在将肋骨的大小更改为 20px，它将不再是一个圆形，而是一个圆角的正方形。这就是你正在做的事情。

要解决此问题，您还必须border-radius相应地更改。这是一个例子：

$("#settingsButton").css({
    left:"-30px",
    top:$(window).height() / 2 - 30 + "px",
    position:"fixed",
    'border-radius':'30px',
    height:'60px',
    width:'60px'
});

这是小提琴。

现在，我从来没有使用过 jQuery Mobile，所以我不确定是否有内置的放大选项，因为使用这个方法你会看到不会放大里面的i图标。

于 2013-09-03T11:42:06.877 回答