3

Jquery Mobile を使用して Web サイトを作成しています。私のタイトルは、上の画像のようにメニューの中央に配置されています。

緑色の境界線で中央に配置されたページのタイトル

緑の境界線の私の CSS は次のとおりです。

.ui-title 
{
    border: 2px solid lime;
}

そしてHTML：

<div data-role="header" data-position="fixed" class="menu">
    <a href="#" data-icon="home" data-theme="a">Home</a>
    <h1>Title</h1>
</div>

私が望むのは、タイトルが全幅 (ウィンドウの現在の幅に対して) にまたがるが、次の画像のピンクの線のように中央に配置されることです。

ページのタイトルを中央に配置し、緑色の境界線とターゲットの幅を示すピンクの線で示します

Jquery Mobile レイアウト (さまざまなターゲット デバイスのデバイス幅など) を壊さずにこれを達成する方法はありますか?

解決：

margin-right: 1% !important;
margin-left: 1% !important;

私の場合はうまくいくようです（ウィンドウが十分に小さい場合、タイトルがボタンの後ろに表示されますが）。

アップデート：

周囲の div や、マージンなどの CSS スタイルの変更による回避策はありませんでしたが、一部のデバイスでヘッダーが広すぎるという問題が解決されました。すべてのデバイスに適切に収まるように、タイトルが非常に小さいのはそのためだと思います。これを何時間もテストする時間がなかったので、最終的にあきらめてデフォルトのレイアウトに戻し、タイトルが十分に狭いことを確認しました.

4

3 に答える 3

3

この CSS を使用して、左右のパーセンテージを設定します (10% を他の数値に変更します)。

.ui-title {
    margin: 0.6em 10% 0.8em !important;
}

異なる側で異なる値が必要な場合は、次の css を使用します。

.ui-title {
    margin: 0.6em 10% 0.8em 5% !important;
}

また、言及された css は .ui-title クラスを使用してすべての要素を変更するため、可能であればすべてのヘッダーに ID を与えます。

例を次に示します: http://jsfiddle.net/Gajotres/QP9qm/2/

于 2013-01-31T10:11:35.300 に答える
0

div や css なしで回避策を期待するのはなぜですか? そして、それの何が問題なのですか？

オプション 1: JqueryMobile.com で行っていることをコピーする

とにかく、これは彼らが実際の jQuery Mobile サイト (1.4.2) で行う方法です。2013 年 1 月の jQuery モバイルの状態についてコメントすることはできません。

<div data-role="header" class="jqm-header">
    <h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
    <p><span class="jqm-version"></span> Demos</p>
    <a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
    <a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
</div>

.ui-title (h2 が自動拡張されるもの) のデフォルトのスタイルシートは次のとおりです。margin: 0 30%ここで問題を引き起こしていることがわかります。

ui-header .ui-title, .ui-footer .ui-title 
{
   font-size: 1em;
   min-height: 1.1em;
   text-align: center;
   display: block;
   margin: 0 30%;
   padding: .7em 0;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   outline: 0!important;
}

オーバーライド スタイルシートで

.jqm-demos .jqm-header h2 
{
   padding: .4em 0 .1em;
   margin: 0 3em;
}

このオーバーライドを追加するだけで、ロゴを中央に配置できました。

（これを使用してこれを行う別の方法があるかもしれませんdata-enhance='false'が、それは私ではありませんでした

オプション 2: 自動拡張を無効にする

自動拡張を無効にして、ui-titleクラスが最初に適用されて css が壊れるのを防ぐことができます。他のボタンが適切に構成されていないなど、他の副作用があります。この方法はお勧めしませんが、この機能について知っておくとよいでしょう。

最初に設定する必要があります

$.mobile.ignoreContentEnabled = true;

注: mobileinitjQueryMobile をロードする前に設定する必要があるこれを行う必要があります。このように、またはやりたいように。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
    $(document).on('mobileinit', function () {
        alert("ignoreContentEnabled initial value = " +$.mobile.ignoreContentEnabled);
        $.mobile.ignoreContentEnabled = true;
    });
</script>

<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>

次に、ヘッダーを次のように更新します

<div data-role="header" id="defenderHeader" data-enhance="false">

その中の何も自動強化されません。残念ながら、<h2>私が最初にやりたかったことである に置くと、これは機能しません。このオプションをさらに検討することもできますが、オプション 1 が最適で最も簡単だと思います。

参照: http://api.jquerymobile.com/global-config/

于 2014-04-10T01:48:42.697 に答える
0

ヘッダーまたは ui-title を次のように設定します。

 .post .ui-header .ui-title {
  margin:0;
  width:100%;

  }

そのように動作するはずです。

于 2013-01-31T10:22:44.480 に答える