使用jQM添加和样式化侧面按钮

Adding and styling side button with jQM

本文关键字：侧面 按钮 样式 jQM 添加 使用      更新时间：2023-09-26

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

这是按钮的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链接添加style="width:10%；height:10%；"或任何大小调整都会导致按钮看起来又方正又难看。

那么，你能给我一些设计好看又足够大的纽扣的技巧吗？

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

关于解决方案：用border-radius制作圆圈。这将使用css进行圆角处理。假设我有一个10倍肋骨的正方形。要把它做成一个圆圈，我需要每个角落的边界半径为5倍。如果我现在把肋骨的大小改为20像素，它将不再是圆形，而是圆角的正方形。这就是你正在做的。

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

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

这是小提琴。

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

相关文章：