帮助了 AmazingCounters.com 位小伙伴

jquery mobile入门资料

由于项目中用到了,就去看了一下视频,然后进一步的找找资源,最后自己再总结一遍!(就是动手操作一遍,不论你感觉多简单,只有动手之后,你才有可能有收获)

当然如果你喜欢看文档可以到官网仔细研究,不过喜欢快餐的lz推荐一个链接

 菜鸟教程http://www.runoob.com/jquerymobile/jquerymobile-ref-css.html

当然你想最直接的接触它,那就下载lz提供的demo 底部有链接地址!

 

下面我分享几张demo中的截图 这个看着比较直观一些!

               

 

               

 

为了显得比较专业:还是贴一点代码,也是来自底部分享的例子中的!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 -->
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

    <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css" />
    
    <script src="../js/jquery.js"></script>
    <script src="../js/jquery.mobile-1.0.1.min.js"></script>

    <script type="text/javascript">

            
    </script>
</head>
<body>
<div data-role="page" id="pageone">
    <div data-role="content">
        <h2>包含缩略图和文本的列表:</h2>
        <ul data-role="listview" data-inset="true">
            <li>
                <a href="#">
                    <img src="chrome.png">
                    <h2>Google Chrome</h2>
                    <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="firefox.png">
                    <h2>Mozilla Firefox</h2>
                    <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p>
                </a>
            </li>
        </ul>
    </div>

    <div data-role="content">
        <h2>我的邮箱</h2>
        <ul data-role="listview" data-inset="true">
            <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li>
            <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li>
            <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li>
        </ul>
    </div>

    <div data-role="header">
        <h1>可折叠列表</h1>
    </div>

    <div data-role="content">
        <div data-role="collapsible">
            <h4>A</h4>
            <ul data-role="listview">
                <li><a href="#">Adam</a></li>
                <li><a href="#">Angela</a></li>
            </ul>
        </div>

        <div data-role="collapsible">
            <h4>B</h4>
            <ul data-role="listview">
                <li><a href="#">Bill</a></li>
                <li><a href="#">Bob</a></li>
            </ul>
        </div>
</div>

</body>
</html>

 

 

Demo下载地址:http://download.csdn.net/detail/u012922417/9133103

 

posted on 2015-09-23 14:06  云的旋律  阅读(236)  评论(0编辑  收藏  举报

导航

前端攻城狮分享群