jquery:使用jquery mobile创建个人博客手机版

 

点击观看演示 这两天开始学习jquery mobile，这个框架还是挺好上手的，之前使用jquery mobile开发移动rss应用，在网上找到一个不错的中文手册，感兴趣的可以看看，不过还是推荐官方的文档，比较全面，点击观看。看一遍基本就可以开发应用了，之后这个模板还会慢慢改进，也考虑在浓度网上开发个移动版，毕竟对浓度的架构比较熟悉。贴下home页面的代码，其他页面类似

	<div data-role="page" id="home">
		<div data-role="header" data-position="fixed">
			<h1>html5-css3</h1>
		</div>
		<div data-role="navbar">
			<ul>
				<li><a href="#home" class="ui-btn-active">home</a></li>
				<li><a href="#html5">html5</a></li>
				<li><a href="#css3">css3</a></li>
				<li><a href="#jquery">jquery</a></li>
				<li><a href="#svg">svg</a></li>
			</ul>
		</div>
		
		<div data-role="content">
			<div data-role="collapsible" data-collapsed="true">
				<h3>关于我</h3>
				<p>专注于前端开发技术，熟悉html，css，JavaScript，jquery，php，mysql，ajax。关注html5，css3，svg，webgl。</p>
				<a data-role="button" data-inline="true" href="mailto:wenbin5243@gmail.com">给我写信</a>
				<a data-role="button" data-inline="true" href="">给我电话</a>
			</div>
			<ul data-role="listview" data-inset="true">
				<li><h3>home标题</h3><p>home内容</p></li>
				<li><h3>home标题</h3><p>home内容</p></li>
				<li><h3>home标题</h3><p>home内容</p></li>
				<li><h3>home标题</h3><p>home内容</p></li>
				<li><h3>home标题</h3><p>home内容</p></li>
				<li><h3>home标题</h3><p>home内容</p></li>
				<li><h3>home标题</h3><p>home内容</p></li>
				<li><h3>home标题</h3><p>home内容</p></li>
				<li><h3>home标题</h3><p>home内容</p></li>
				<li><h3>home标题</h3><p>home内容</p></li>
			</ul>
			<div data-role="controlgroup" data-type="horizontal">
			<a href="#home" data-role="button">1</a>
			<a href="#html5" data-role="button">2</a>
			<a href="#css3" data-role="button">3</a>
			<a href="#jquery" data-role="button">4</a>
			<a href="#svg" data-role="button">></a>
			</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<h3>powered by wenbinzhou</h3>
		</div>
	</div>