jQuery mobile基础

1.基本使用

1.1 pages

头部引入三个部分的内容：

<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

引入mate标签进行适配：

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

div标签将页面分为三个部分：

<div data-role="page">
    <div data-role="header">...</div>
    <div role="main" class="ui-content">...</div>
    <div data-role="footer">...</div>
</div>

2.基本事件

pageint：页面元素加载完成出发这个事件

tap：触摸事件

taphold：长按事件

swipe：滑动//监听文档document

swipeleft：向左滑动

swiperight：向右滑动

scrollstart：开始滑动

scrollstop：停止滑动

orienttionchange：方向改变后触发

 <script src="jquery.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script>
        $(document).on("pageinit",function(){
          //  alert("hello");
            $("p").on("tap",function(){//各种事件
                $(this).hide();
            })
        });
    </script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>这是头部</h1>
    </div>
    <div data-role="content">
        <p> 点击我进行隐藏  </p>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>这是底部</h1>
    </div>
</div>

 

posted @ 2016-02-22 14:42  璇烨  阅读(155)  评论(0)  编辑  收藏  举报