1、jQueryMobile基本使用之按钮篇

Sian · 发表于 2016-2-15 11:38:21

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

1、jQuery Mobile是一套封装好的JS库，还包含了基本CSS样式；
2、他的基本作用在于方便我们使用很少的代码就能写出漂亮的界面及完成基本的事件响应；
3、在使用jQuery Mobile之前至少需要了解Html、CSS、JavaScript，否则很难理解！
4、加载这套库的方式很简单，三行代码即可，为什么可以这么简单，请参照第3点。
5、先看效果图再上代码
1.pic.jpg

6、代码示例

[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">
        <!-- 
                三种编写按钮的表现方式<button>标签、<input>标签、<a>标签
                1、data-inline="true"意为将display属性设置为inline，默认情况为block；
                2、data-corners="false"取消圆角样式，默认情况按钮为圆角；
        -->
        <button data-inline="true" data-corners="false" data-shadow="false">button按钮</button>
        <input data-inline="true" type="button" data-shadow="false" value="input按钮"/>
        <a data-inline="true" data-role="button" href="#page2">jQuery按钮</a>
    </div>
    <!-- data-role="footer"表示的是页脚底部信息，jQuery会自动加载相关样式 -->
    <div data-role="footer"><h4>页脚注释</h4></div>
</div>
</body>
</html>

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

[jQueryMobile] 1、jQueryMobile基本使用之按钮篇