jquery mobile按钮

来源:互联网 发布:mac运行32位软件 编辑:程序博客网 时间:2024/05/16 14:59

jQuery mobile按钮分很多种类,但是很实用,也很省事省力。

我自己学习了jQuery mobile之后自己动手写了一点。

技术拙劣,只为成长。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</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.8.3.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">页头</div>
    <div data-role="content">内容
    
        <div data-role="controlgroup"><!--jq mobile组合按钮垂直分布(默认),horizontal水平, vertical垂直分布-->
            <a href="" data-role="button">123</a>
            <a href="" data-role="button">123</a>
            <a href="" data-role="button">123</a><!--默认情况时的样子-->
        </div>
        <div data-role="controlgroup" data-type="horizontal">
            <a href="" data-role="button">123</a>
            <a href="" data-role="button">123</a>
            <a href="" data-role="button">123</a><!--水平情况时的样子-->
        </div>
         
        <div data-role="controlgroup" data-type="vertical">
            <a href="" data-role="button">123</a>
            <a href="" data-role="button">123</a>
            <a href="" data-role="button">123</a><!--水平情况时的样子-->
        </div>
        <button>按钮(一般用来提交表单)</button>
        <input type="button"  value="按钮(一般用来提交表单)"/>
        
        <a href="" data-shadow="true" data-role="button">true(有阴影)|false(没有阴影)</a>
        <a href="" data-role="button" data-shadow="false" >true(有阴影)|false(没有阴影)</a>
        <a href="#" data-role="button" data-shadow="false">123</a>
    </div>
    <div data-role="footer">页尾</div>
    </div>
</body>
</html>

0 0
原创粉丝点击