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 を使用して角を丸めます。リブが 10px の正方形があるとします。円にするには、各コーナーに 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を使用したことがないので、それを拡大するための組み込みオプションがあるかどうかはわかりません.

于 2013-09-03T11:42:06.877 に答える