javascript - 使用 jQM 添加和样式化侧边按钮

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添加 style="width:10%; height:10%;"或任何尺寸调整都会导致按钮看起来方形且难看。

那么，您能给我一些技巧，帮助我设计一个好看且足够大的按钮吗？

Answer 1

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

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

要解决这个问题，您还必须相应地更改 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-里面有图标。