Добавление и стилизация боковой кнопки с помощью 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 здесь Добавление стиля = "ширина:10%; высота:10%;" или любая регулировка размера заставляет кнопку выглядеть квадратной и некрасивой.

Так можете ли вы дать мне советы по стилю красивой и достаточно большой кнопки?

Answer 1

Прежде всего, пожалуйста, отредактируйте свой вопрос и поместите туда ссылку на вашу скрипку.

Что касается решения: круг сделан с 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- иконку внутри него.