移动web前端开发研究（jquery mobile 框架）

最新推荐文章于 2024-03-09 15:35:10 发布

阿聪世家

最新推荐文章于 2024-03-09 15:35:10 发布

阅读量2.1k

点赞数

分类专栏： html5/css3 文章标签：移动开发 jQuery Mobile web前端开发

本文链接：https://blog.csdn.net/congcong875/article/details/9039031

版权

html5/css3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解，那现在就开始往下阅读吧……

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

2.QueryMobile 典型的页面布局
根据data-role属性做组件渲染，page包含head、navbar、content ，page
为显示设备可视区域的一屏，多个page可以放在一个页面或一个独立的HTML页面。
今天简单的做了一个页面，需要的可以参考参考：

代码（需自己下载JQUERYMOBILE 相关文件哦）：

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.css" />
<script src="http://jt.875.cn/js/jquery.js"></script>
<script src="jquery.mobile-1.1.1.js"></script>
</head> 
<body>

<!-- Home -->
<div data-role="page" id="page1">

     <div data-role="header" data-position="fixed" data-theme="c">
		 <a href="index.html" data-icon="delete">返回</a>
		 <h1>头部</h1>
		 <a href="index.html" data-icon="check" data-theme="b">收藏</a>
	</div>
    
        <form action="">
            <div data-role="fieldcontain">搜索：
                <input name="" id="searchinput1" placeholder="" value="" type="search">
            </div>
        </form>
		
        <div data-role="navbar" data-iconpos="right">
            <ul>
                <li >
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="" >
                       首页
                    </a>
                </li>
				 <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                       内页1
                    </a>
                </li>
				 <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                       内页2
                    </a>
                </li>
				<li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                       内页3
                    </a>
                </li>
            </ul>
        </div>
		
		<div data-role="content" id="other_content">  
        <p>t内容页t内容页t内容页t内容页t内容页t内容页t内容页t内容页
        <a href="#home">Home page</a>  
		</p>
		
		<p>t内容页t内容页t内容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页t内容页t内容页t内容页t内容页
        <a href="#home">Home page</a>  
		</p>
    </div>  
		
		

        <ul data-role="listview" data-divider-theme="b" data-inset="true">
            <li data-role="list-divider" role="heading">
                新闻列表
            </li>
            <li data-theme="c">
			   <a href="#" > 龙润茶好茶</a>	 
			    </li>
			
			<li data-theme="c">
                <a href="#" data-transition="slide">
                  生态家
                </a>
            </li>
			<li data-theme="c">
                <a href="#" data-transition="slide">
                    你好 列表1
                </a>
            </li>
			<li data-theme="c">
                <a href="#" data-transition="slide">
                    你好 列表1
                </a>
            </li>
			<li data-theme="c">
                <a href="#" data-transition="slide">
                    你好 列表1
                </a>
            </li>
        </ul>
  
  
	
	<form action="echo.cfm" method="post">  
             <h2>登录框：</h2>
        <div data-role="fieldcontain">  
            <label for="name">Name:</label>  
            <input type="text" name="name" id="name" value=""  />  
        </div>      
  
        <div data-role="fieldcontain">  
            <label for="email">Email:</label>  
            <input type="text" name="email" id="email" value=""  />  
        </div>      
  
        <div data-role="fieldcontain">  
            <input type="submit" name="submit" value="登录"  />  
        </div>      
          
        </form>  
		
	
		<div data-role="footer"  data-position="fixed" data-theme="b">
			<h4>My Footer</h4>  
		</div>
   
</div>

</body>
</html>