简体   繁体   中英

jquery mobile data-theme not working

I have a simple log in page and I'm trying to apply theme "b" to it, but it doesn't work. The page looks dark and not the way theme b should look like. Any idea?

Thanks.



My header

    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.0.min.css">        
    <!--<link href="css/ios_inspired/styles.css" rel="stylesheet" />-->
    <!--<link rel="stylesheet" href="css/jqm-demos.css">-->
    <script src="js/jquery.mobile-1.4.0/jquery.js"></script>        
    <script src="js/jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js"></script>

</head>
<body>


    <div data-role="page" id="Page_Login"  data-quicklinks="true" data-theme="b" >

        <div data-role="header" >
            <h1>My header</h1>                
        </div>

        <div role="main" class="ui-content jqm-content jqm-fullwidth" data-theme="b" >

            <h1 style=" text-align:center;">Connect</h1>                  

            <form dir="rtl">

                <!--<div data-role="fieldcontain" >-->
                 <label for="txtEmail">email:</label>
                 <input type="email" name="txtEmail" id="txtEmail" value="" />
                <!--</div> -->      

                <!--<div data-role="fieldcontain" >-->
                 <label for="txtPassword">password:</label>
                 <input type="password" name="txtPassword" id="txtPassword" value="" />
                <!--</div> --> 

                <a  href="" data-transition="flip" class="ui-btn ui-corner-all" onclick="MemberLogIn()">connect</a>                         
            </form>

        </div><!-- /content -->

    </div><!-- /page -->            

</body>

Update

The classic theme should be upgraded to work properly with jQuery Mobile 1.4.x

Upgrade guide


Unlike old versions of jQuery Mobile, the latest version 1.4 has only two themes/swatches a and b . The latter is dark/black theme.

  1. You can either create your own themes using ThemeRoller .

  2. Use classic style sheet offered by jQuery Mobile, along with default style sheet.

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.0/theme-classic/theme-classic.css" /> 

Demo

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM