JQuery Mobile 学习笔记

 

 

主题

修改主题 data-theme

image

源代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <meta name="viewport" content="width=device-width,initial-scale=1" /> 

    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-theme="b">

            <h1>page header</h1>

        </div>

        

        <div data-role="content">

            <p>hello jquery mobile</p>

        </div>

        

        <div data-role="footer">

            <h4>page footer</h4>

        </div>

    </div>

</body>

</html>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <meta name="viewport" content="width=device-width,initial-scale=1" /> 

    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-theme="b">

            <h1>page header</h1>

        </div>

        

        <div data-role="content">

            <p>hello jquery mobile</p>

        </div>

        

        <div data-role="footer">

            <h4>page footer</h4>

        </div>

    </div>

</body>

</html>

 

你可能感兴趣的:(JQuery Mobile)