jq-基本知识

【1】Jquery Mobile 插件：

1.PhotoSwipe 图片滑动预览插件
2.Camera 图片幻灯片插件
3.Mobiscroll 常用的插件 日期选择插件
4.AutoComplete 搜索插件
5.DateBox 日期对话框插件
6.SimpleDialog 简单对话框插件
7.ActionSheet 快捷标签插件 类似android toast
8.iscroll.js 下拉更新插件


【2】Jquery Mobile 默认主题和自定义主题
 
1.默认主题data-theme 设置为：a,b,c,d,e
2.修改默认主题 既修改css样式里的
3.自定义主题 ：也是在jqueryMobile的基础上修改css样式
 




【3】Jquery Mobile 固定布局,流式布局，响应式布局,网格布局
 固定布局：固定大小
 流式布局：固定百分比
 响应式布局：使用 @meida 和 link实现

 网格布局：类似于流式布局

<style>
 @media all and (min-width:800px){
  #list{
   width:300px;
   float:left;
   margin-right:10px;
  }
  #grid{
    width:450px;
	float:left;
  }
 }

 @media all and (max-width:799px){
   
   #list{
    width:100%;
   }

   #grid{
     width:100%;
   }

 }
</style>

【4】jquery Mobile 面板 panel


1.data-display="reveal" 默认值
2.data-display="overlay"
3.data-display="push"
4.left-panel 和 right-panel 

<div data-role="page" id="page">
	  <div data-role="header">
	    <a href="#"  data-inline="true" data-icon="arrow-1">返回</a>
	    <h1>原明卓</h1>
	    <a href="javascript:void(0)" data-icon="gear">设置</a>
	  </div>
	  <div data-role="content"> 
	    我是jqueryMobile
          <a  href="#left-panel" data-role="button" data-inline="true">点我left</a>
		   <a  href="#right-panel" data-role="button" data-inline="true">点我right</a>
	  </div>

	  <div data-role="footer">
	    <h4>底部</h4>
	  </div>


   <div data-role="panel" id="left-panel" data-position="left">
      <h3>我是panel</h3>
	  <ul data-role="listview">
	    <li><a href="#">我是panel</a></li>
	    <li><a href="#">我是panel</a></li>
	    <li><a href="#">我是panel</a></li>
	    <li><a href="#">我是panel</a></li>
	    <li><a href="#">我是panel</a></li>
	  </ul>
   </div>

   <div data-role="panel" id="right-panel" data-position="right">
      <h3>我是panel</h3>
	  <ul data-role="listview">
	    <li><a href="#">我是panel</a></li>
	    <li><a href="#">我是panel</a></li>
	    <li><a href="#">我是panel</a></li>
	    <li><a href="#">我是panel</a></li>
	    <li><a href="#">我是panel</a></li>
	  </ul>
   </div>

</div>

【5】效果图如下：