1

質問jqGridに基づくスタイル-ページングボタンを大きくするにはどうすればよいですか？ jqgridのトップレベルツールバーボタンを大きくするために使用されます。

.ui-jqgrid .ui-jqgrid-toppager {  height:35px !important; }
.ui-jqgrid .ui-pg-button  { height:30px !important; width:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-icon { position:relative; margin: 0px 10px;}

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
    margin: 0 10px !important;
}

/* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox
{
    margin: 0px;
    padding: 0px;
    float: left;
    height: 18px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > input
{
    padding: 1px;
}

.ui-jqgrid .ui-pg-table .my-nav-checkbox > label
{
    margin: 0px;
    border-width: 0px;
}

.ui-jqgrid .ui-pg-table .my-nav-checkbox:hover > label
{
    margin: 0px;
    border-width: 1px;
}

/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text
{
    margin: 0px;
    padding: 1px 2px 1px 16px;
}
.ui-button-icon-only
{
    width: 16px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-icon-primary
{
    margin: -8px 0px 0px -8px;
}

jqgridツールバーには、次のように定義されたOleg回答に基づくカスタムのチェック可能なボタンも含まれています。

 var autoedit = false;
 $("#grid_toppager_left table.navtable tbody tr").append(
        '<td class="ui-pg-button ui-corner-all">' +
            '<div class="ui-pg-div my-nav-checkbox">' +
            '<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
            '<label title="Press to toggle"' +
            ' for="AutoEdit">Press to toggle</label></div></td>'
    );
    $("#AutoEdit").button({
        text: false,
        icons: {primary: "ui-icon-star"}
    }).click(function () {                      
      autoedit = !autoedit;

    });

ツールバーのこのカスタムボタン（星のアイコン）が間違った位置に表示されます：右すぎて次のボタンと一緒に：

間違った位置から開始

また、幅が標準のボタンよりも小さく、上部の配置が大きすぎます。

buttonpos

標準ボタンのようなカスタムボタンを作成するにはどうすればよいですか？

4

1 に答える 1

2

標準よりも大きいツールバー アイコンを使用する必要がある場合は、標準の jQuery UI アイコンの代わりに、ナビゲーター ツールバーでFont Awesome アイコンを使用することをお勧めします。回答に記載しました。

たとえば、古いデモで次の CSS だけを設定した場合

.ui-jqgrid .ui-jqgrid-toppager { height:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }

上部のツールバーで 20px のアイコンを使用できます。デモは次の結果を示します

ここに画像の説明を入力

Font Awesomeのすべてのアイコンはベクター フォントと同じように実装されているため、どのフォント サイズ (アイコン サイズ) でも完璧な結果が得られます。他のすべてのカスタム ソリューション (チェック可能なボタンなど) を Font Awesome に投稿する必要がありますが、いくつかの投資の後、非常に良い最終結果を得ることができます。

于 2013-03-20T18:20:38.390 に答える