1

PhoneGapアプリケーションにjquery.mobile-1.1.0を使用しています。ボタンcssで問題が発生しています。Jqueryには独自のボタンスタイルがありますが、それを使用したくないので、独自のボタンcssを使用します。また、タブ、jQuery-mobile cssを使用するフォーム検索などのいくつかのjQueryコンポーネントを使用しているため、アプリケーションに含める必要があります。

これが私のhtmlコードです：

    <div data-role="content">
    <div class="signup">
    <form action="#" id="loginForm">
    <fieldset>
    <ul>
    <li class="first">
    <label><span>Email*</span></label>
    <input name="loginemail" type="text" id="loginemail" class="input" placeholder="Enter Full Name"  />
    </li>

    <li>
    <label><span>Password*</span></label>
    <input name="loginpassword" id="loginpassword" type="text" class="input" placeholder="Pick A Password" />
    </li>

    <li>
    <input name="" type="submit" id="loginSubmit" class="button" value="Login"   />
    </li>
    </ul>

    </fieldset>
    </form>
    </div> <!-- signup- div -->
    </div><!-- - content -->
    </div> <!-- end login page -->

Firebugで要素の検査を実行しているときにソースを実行すると、jQueryはそのボタンに対して外側のレイヤーを作成し、最終的にボタンのcss全体を妨害します。

    <li><div aria-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all 
    ui-fullsize ui-btn-block ui-btn-up-c" data-mini="false" data-inline="false" 
    data-theme="c" data-iconpos="" data-icon="" data-wrapperels="span"   
    data-iconshadow="true" data-shadow="true" data-corners="true">
    <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Login</span>
    </span>
    <input aria-disabled="false" name="" id="loginSubmit" 
    class="button ui-btn-hidden" value="Login" type="submit"></div></li>

これがcss用にカスタマイズしたボタンクラスです

  .button{ width:100% !important; height:69px !important; 
    float:left !important;
    font-size:24px !important;
    font-family:"MyriadPro-BoldCond_0",Arial, Helvetica, sans-serif !important; 
    color:#FFFFFF !important; text-align:center; 
    background:#ca2c00 !important; border:none !important; 
    background:-moz-linear-gradient(#ca2c00, #7a1a00) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#ca2c00), to(#7a1a00)) !important; 
   -pie-background: linear-gradient(#ca2c00, #7a1a00) !important;
    background: -o-linear-gradient(#ca2c00, #7a1a00) !important; 
   -moz-border-radius:0 0 7px 7px !important;
  -webkit-border-radius:0 0 7px 7px !important; 
   border-radius:0 0 7px 7px !important; behavior: url(PIE.htc) !important;   
   position:relative !important;
   cursor:pointer !important;}

助けてください。jQueryがボタンの周りに外部シェルを作成するのを止めて、カスタマイズされたcssを選択できるようにするにはどうすればよいですか？ありがとう

4

2 に答える 2

1

jquery mobileでは、入力ベースのボタンとボタン要素が自動拡張され、データロールは必要ありません。したがって、この問題を解決するには2つのオプションがあります。

  1. jquery mobileテーマを編集するか、テーマローラーを使用してカスタマイズされたテーマを作成します。テーマローラーツールはここにあります。

  2. 2番目のオプションは、入力ボタンのdata-roleをnoneに設定することです。例<inputtype= "button" data-role = "none" id = "btnId" class="button">。

お役に立てば幸いです。

--MEJO

于 2012-07-30T07:49:11.060 に答える
0

.buttonクラスはjQueryMobileによって使用されます。別のクラス名を使用してみてください。

于 2012-07-30T07:29:57.233 に答える