2、jQueryMobile按钮的基本样式

Sian · 发表于 2016-2-15 11:56:00

本帖最后由 Sian 于 2016-2-15 17:43 编辑

2.pic.jpg

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
         
<head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
         
<body>
<!-- data-role="page"代表的是一个页面，当前页面只会显示该div内的内容 -->
<div data-role="page">
        <!-- data-role="header"表示的是表头信息，jQuery会自动加载相关样式 -->
        <div data-role="header"><h1>页头信息</h1></div>
        <!-- data-role="content"表示的是内容信息，jQuery会自动加载相关样式 -->
        <div data-role="content">
                 
        <p>
                <!-- data-icon="arrow-u"为jQuery内置的图标名称 -->
                <a href="#" data-inline="true" data-role="button" data-icon="arrow-u">上</a>
                <a href="#" data-inline="true" data-role="button" data-icon="arrow-d">下</a>
                <a href="#" data-inline="true" data-role="button" data-icon="arrow-l">左</a>
                <a href="#" data-inline="true" data-role="button" data-icon="arrow-r">右</a>
        </p>
         
        <p>
                <!-- data-iconpos为jQuery内置的图标位置 -->
                <a href="#" data-inline="true" data-role="button" data-icon="arrow-u" data-iconpos="top">上</a>
                <a href="#" data-inline="true" data-role="button" data-icon="arrow-d" data-iconpos="bottom">下</a>
                <a href="#" data-inline="true" data-role="button" data-icon="arrow-l" data-iconpos="left">左</a>
                <a href="#" data-inline="true" data-role="button" data-icon="arrow-r" data-iconpos="right">右</a>
        </p>
         
        <p>
                <!-- data-iconpos值为notext时即隐藏按钮文字 -->
                <a href="#" data-inline="true" data-role="button" data-icon="home" data-iconpos="notext">主页</a>
                <a href="#" data-inline="true" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
                <a href="#" data-inline="true" data-role="button" data-icon="info" data-iconpos="notext">消息</a>
        </p>
 
        </div>
        <!-- data-role="footer"表示的是页脚底部信息，jQuery会自动加载相关样式 -->
        <div data-role="footer"><h4>页脚注释</h4></div>
</div>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQueryMobile] 2、jQueryMobile按钮的基本样式