文档章节

基於Jquery Mobile的用戶登錄 注冊的 Demo 小樣

小败开源博客
 小败开源博客
发布于 2014/01/07 17:33
字数 363
阅读 9767
收藏 30

 Login.HTML 界面


 head 中 調用的額CSS樣式和JS文件,我其中注釋掉的IOS風格的UI 如下圖所示!讓你選擇!

    <link rel="stylesheet" href="./css/jquery.mobile-1.3.0.css"/> 
    <script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.3.0.js"></script>
	<script type="text/javascript" src="rte/cordova.js"></script>
	<script type="text/javascript" src="rte/rte.js"></script>
    <script type="text/javascript" src="js/main.js"></script>   
 <!--	<link rel="stylesheet" href="./css/styles.css" />     IOS 風格  -->

HTML頁面源碼:

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

    <div data-role="header">	<!-- header 頁眉 -->
    	<a href="#" data-role="button" data-icon="home">首页</a>
    	<h1>用户登录</h1>
    	<a href="#" data-role="button" class="ui-btn-right" data-icon="search">搜索</a>
  	</div>	<!-- 頁眉 End  -->

    <br />
    <div data-role="fieldcontain">
    
        <label for="textinput1">
               用戶名:
         </label>
         <input id="textinput1"  placeholder="" value="" type="text" />
 	<br />
 		<label for="textinput2">
               密 碼:
         </label>
         <input id="textinput2"  placeholder="" value="" type="Password" />
 		 
        </div>
         <br />
    <div data-role="fieldcontain"> 
		<div data-role="controlgroup" data-type="vertical">
    		<a href="index.html"   data-role="button">登 录</a>
    		<a href="regisit.html"  data-corners="false" data-role="button">注 册</a>
    	
 	 </div>
   </div>
 <!--page end -->

Register.HTML 用戶注冊頁面也雷同!

想加入Jquery Model 頁面的頁脚,如下圖的效果。

頁脚  <DIV>層

 <div data-role="footer" data-id="fool" data-position="fixed" > 
            <div data-role="navbar">
                <ul>
                    <li><a href="section1.html">播放列表</a></li>
                    <li><a href="index.html" class="ui-btn-active">音乐试听</a></li>
                    <li><a href="section2.html">艺术家</a></li>
                </ul>
            </div> <!--/navbar -->
        </div><!-- /footer -->



Demo 下載地址:

http://pan.baidu.com/s/1dDtaifn


關於IOS風格 我這有一個從JQuery Model 官網拿來的API文檔和Demo

http://pan.baidu.com/s/1mg9GOvY




© 著作权归作者所有

小败开源博客
粉丝 0
博文 1
码字总数 363
作品 0
深圳
数据库管理员
私信 提问
加载中

评论(8)

子弹兄
子弹兄
小败开源博客
小败开源博客

引用来自“子弹兄”的评论

它必须得用好手机

這是實話!技術還有待完善!
子弹兄
子弹兄
实例不错!
子弹兄
子弹兄
它必须得用好手机
去开原
去开原
jquerymobile确实非常卡,性能好的机器跑起来还好一些
adenwei
adenwei
M1上跑过官方的demo,实在是卡顿的不能行
小败开源博客
小败开源博客
沒有啊!就看你怎麽優化!
adenwei
adenwei
jQuery mobile这玩意非常慢实在不好用
找有時間兼職的懂iOS的朋友做助手,做一個項目

好,有一個項目,需要你有iOS開發的基礎(沒有項目經驗也沒有關係),有時間既可以了,有自己的開發工具,測試工具,用我這裡提供apple id的profile開發,app(要求5.0以上,兼容5.0)决定使...

自由之信
2013/10/08
650
6
怎么样才能解决百度不收录的问题 让你省时生效

收錄還分有效和無效?沒錯,有效收錄可以讓網站壹直處於良性發展的狀態,無效收錄不但對關鍵詞排名沒有好處,還會稀釋網站的質量。那麽無效收錄是什麽意思?我們平時做SEO的時候應該如何杜絕...

nushi
2018/06/26
0
0
vsFTPd 檔案伺服器

本章的行前準備工作 架設 FTP 是個很難的任務,因為 FTP 服務同時啟用兩個連線通道,分別是命令通道與資料流通道, 這兩條通道的連線建立方式不太一樣,結果就造成了防火牆設定方面的困擾。 ...

红薯
2009/01/31
529
1
9 个很有用的 jQuery Mobile 教程(英文)

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery ...

红薯
2011/04/27
2.9K
0
jQuery全面解剖系列(一)Deferred风格的Ajax

最近准備寫一個系列的文章來談jQuery的種種技巧和原理。 今天講Deferred風格的Ajax,本篇分爲兩部分,第一部分介紹Deferred風格的Ajax的基本使用,第二部分深入一點介紹原理。 基本使用 Defe...

i33
2012/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

recv send 的 MSG_DONTWAIT 、 MSG_WAITALL 参数

基本概念: 阻塞IO:: socket 的阻塞模式意味着必须要做完IO 操作(包括错误)才会返回。 非阻塞IO:: 非阻塞模式下无论操作是否完成都会立刻返回,需要通过其他方式来判断具体操作是否成功。 ...

shzwork
24分钟前
2
0
怎么给开源项目提PR?

1. Fork 你想要提交 PR 的项目 2. 下载到本地 相关步骤如下: 在你需要的文件夹下面,右键使用 git bash 命令,打开 git 命令框 执行如下指令可将项目代码下载到当前目录 1代码仓库地址为示例...

xiaomin0322
28分钟前
2
0
浅复制与深复制概念

1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象。换言之,浅复制仅仅复制所考虑的对象,而不复制...

GodIsCj
28分钟前
1
0
如何在工作中快速成长?致工程师的10个简单技巧

阿里妹导读:阿里有句非常经典的土话,“今天的最好表现,是明天的最低要求。”如何挖掘潜能、发现更好的自己?今天,阿里巴巴高级无线开发专家江建明将认知升级的方法总结出来,帮助你获得快...

阿里云官方博客
50分钟前
2
0
如何 SSH 到 Linux 服务器里的特定目录及执行命令?

这种操作对于新手来讲特别常见,良许之前也是这样。在本文,老司机将带你来进行更高效的操作,只需一步即可达到你想要的效果。 而且,不仅仅是实现快速进入到 Linux 服务器特定的目录,还可以...

架构师springboot
55分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部