金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > mobile做的一个记事本,学习总结

mobile做的一个记事本,学习总结

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-09-04 22:37

        今天没事干,就做了一个记事本。用jQuery-mobile html5做的,感觉界面做的还行吧,就是没有后台的操作,不过,后台的东西很快就会做完的,今天就把我今天几个小时的成果给大家看一看吧!我直接上代码了,大家看看就行了,前台的东西也不是很难!嘿嘿!

jquery mobile 的使用

下载地址:jquerymobile.com

  1. 新建webapp.html

  2. 引用文件
    <script src="./js/jquery-1.8.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./js/jquery.mobile-1.4.5.css">
    <script src="./js/jquery.mobile-1.4.5.js"></script>

  3. 加入头
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

  4. 单页面多应用
    <div data-role="page" id="pageone"></div>
    <div data-role="page" id="pagetwo"></div>

  5. 编写头部
    <div data-role="header">
    <h1>test</h1>
    </div>

  1. 编写底部
    <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
    <ul>
    <li><a href="#pageone" data-icon="home">home</a></li>
    <li><a href="#pageone" data-icon="bars">bars</a></li>
    <li><a href="#pageone" data-icon="grid">grid</a></li>
    </ul>
    </div>
    </div>
  1. 编写主体
    <div data-role="main" class="ui-content">
    <form method="post">
    <label for="iphone">手机</label>
    <input type="text" name="tel">
    <label for="iphone">密码</label>
    <input type="password" name="pwd">
    <a href="#" class="ui-btn ui-shadow">确定</a>
    <a href="#" class="ui-btn">登陆</a>
    </form>
    </div>

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>index.html</title><!--初始化显示,可视窗宽度与设备宽度一致;不允许缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.css">
<script src="js/jquery-1.11.1.js"></script><!--注意顺序:css-jq-jq mobile,jq必须是1.8版本以后-->
<script src="js/jquery.mobile-1.4.3.js"></script>
<script>
$(document).on("pageinit","#index",function(){
$("#ajaxBtn").on("click",function(){
$.mobile.loading("show");//点击请求之后,显示正在加载的图标
$.ajax({
type:"get",
url:"",

图片 1

 

作业:作业:三个页面 ,用jq mobile,商品首页,商品列表页,商品详情页,用户登录和注册,

success:function(data){
console.log(data);
$.mobile.loading("hide"); //成功之后将图标隐藏
}

官网网站:

[html]  

});
});
});

<!DOCTYPE html>  

</script>
</head>
<body> <!-- //data属性用于创建外观
在一个html中可以创建多个页面,通过id分隔每个页面,用href属性链接彼此。-->
<!--data-transition="";设置过渡效果,属性值:slide:右到左(默认);slideup:向上滑动;slidedown:向下滑动;none:没有效果 -->
<div data-role="page" id="index" data-transition="slide"> <!-- index代表首页,默认显示 -->
<div data-role="header" >
<h1>我是标题1</h1>
<div data-role="navbar">
<ul>
<li><a href="###" data-icon="camera">首页</a></li>
<li><a href="###" data-icon="carat-l">搜索</a></li>
<li><a href="###" data-icon="carat-r">查询</a></li>
</ul>
</div>
</div>
<div role="main" class="ui-content" >
<!--<p><a href="#index2">我是内容1</a></p>
<ul data-role="listview" data-inset="true">
<li><a href="###">
<h3>G次</h3>
<p>南宁-广州</p>
<p class="ui-li-aside">9:00开</p>
</a></li>
<li><a href="###">项目2</a></li>
<li><a href="###">项目3</a></li>
<li><a href="###">项目4</a></li>
</ul>
<form action="###">
<div class="ui-field-contain">
<label for="start">发车站</label>
<input type="text" name="start" id="start">
</div>
<div class="ui-field-contain">
<label for="end">终点站</label>
<input type="text" name="end" id="end">
</div>
<div class="ui-field-contain">
<label for="num">车次</label>
<input type="text" name="num" id="num">
</div>
</form>

<html>  

<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td>90</td>
<td>86</td>
<td>78</td>
</tr>
<tr>
<td>小明</td>
<td>99</td>
<td>80</td>
<td>60</td>
</tr>
</tbody>
</table>
</div>-->
<div data-role="footer">
<h1>我是页脚1</h1>
<div data-role="navbar">
<ul>
<li><a href="javascript:void(0)">查询</a></li>
<li><a href="javascript:void(0)">收藏</a></li>
<li><a href="javascript:void(0)">设置</a></li>
</ul>
</div>
</div>

1、精简版Demo:

  <head>  

<input type="button" value="点我加载" id="ajaxBtn">

查看Demo »

    <title>main.html</title>  

</div>

下载Demo »

      

<div data-role="page" id="index2">
<div data-role="header" > <!-- index代表首页,默认显示 -->
<h1>我是标题2</h1>
</div>
<div role="mail" class="ui-content" >
<p><a href="#index">我是内容2</a></p>
</div>
<div data-role="footer">
<h1>我是页脚2</h1>
</div>
</div>

 

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  

</body>
</html>
一、jquery mobile页面事件:
页面初始化事件:
pageboforecreate: 页面即将初始化的时候
pagecreate 页面已经创建,但是还没有加载元素之前
pageinit 页面完成了所有dom的加载之后

2、年月日时分整合版Demo:

    <meta http-equiv="description" content="this is my page">  

页面加载事件:
pageboforeload 页面加载请求之前
pageload 加载成功,并插入到dom中

预览图:

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  

页面过渡事件:page transition (假如从页面a过渡到页面b,那么执行顺序为2 4 3 1)
pageboforeshow:2在过渡动画开始之前
pageshow 4 :过渡动画完成之后
pageboforehide:1
pagehide:3

图片 2

      

区别:
pageinit:页面初始化时,只执行一次
pageshow:页面显示的时候每次都会执行

查看Demo »

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  

二、按钮:
创建按钮:
如果是a button input则添加class="ui-btn"
如果是其它元素,则添加data-role="button"
<a class="ui-btn ui-btn-inline ui-btn-a">点击</a>
<input type="submit" value="按钮"> input已经默认是按钮,并且已经默认有圆角和阴影,其它则没有。

下载Demo »

  

按钮样式:
ui-corner-all圆角
ui-shadow 阴影
ui-btn-inline 并排显示
ui-btn-a 换皮肤
ui-btn-b 换皮肤

 

   

三、导航栏(导航栏有一组水平排列的链接构成,通常位于页眉或者页脚)
1、使用data-role="navbar",导航栏中的链接会自动转换为按钮。
2、在页眉和页脚中使用data-position="fixed",导航栏就会固定在上部和下部,不随滚动滚动。
3、导航栏如果5个以内就会显示在同一排,查过5个,就会分成多。
4、给导航栏增加图标:data-icon="",默认在文字上方,具体样式可参考官方文档。

 

  <script type="text/javascript" src="jquery-1.6.4.min.js"></script><link rel="stylesheet" href="jquery.mobile-1.0.min.css" type="text/css"></link><script type="text/javascript" src="jquery.mobile-1.0.min.js"></script></head>  

<div data-role="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="###" data-icon="carat-l">首页</a></li>
<li><a href="###" data-icon="carat-r">搜索</a></li>
<li><a href="###" data-icon="camera">查询</a></li>
</ul>
</div>
</div>

以及的Demo:

    

四、列表
只需要在ul、ol中使用data-role="listview",就会自动变成有样式的列表,如果使用data-inset="true",四周就会自动增加外边距。
添加class="ui-li-aside",就会显示到右上角。
<div role="main" class="ui-content" >
<p><a href="#index2">我是内容1</a></p>
<ul data-role="listview" data-inset="true">
<li><a href="###"><p class="ui-li-aside">9:00开</p></a></li>
<li><a href="###">项目2</a></li>
<li><a href="###">项目3</a></li>
<li><a href="###">项目4</a></li>

1、精简出一个中文版本的Demo:

  <body>  

</ul>
</div>

包括日期和时间共同选择等效果。

    

五、表单
1、每个input都要有一个label,一个name和一个id。
2、为每一个input增加class="ui-field-contain",就可以让表单自适应。
<form action="###" methor="post" id="myForm">
<div class="ui-field-contain">
<label for="start">发车站</label>
<input type="text" name="start" id="start">
</div>
<div class="ui-field-contain">
<label for="end">终点站</label>
<input type="text" name="end" id="end">
</div>
<div class="ui-field-contain">
<label for="num">车次</label>
<input type="text" name="num" id="num">
</div>
</form>

查看Demo »

           <!--                    主页面                                                -->  

六、表格
回流表格: <table data-role="table" data-mode="reflow" class="ui-responsive" ></table>
再添加一个class="table-stroke",就会自动增加下划线。

 

       <section id="page1" data-role="page" >  

<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td>90</td>
<td>86</td>
<td>78</td>
</tr>
<tr>
<td>小明</td>
<td>99</td>
<td>80</td>
<td>60</td>
</tr>
</tbody>
</table>

2、修改官方Demo,并加入中文版本的可选项

              <div data-role="header">  

七、事件
jq-mobile中可以使用jq中任何标准的jq事件,此外还有一些专门为移动浏览定制的事件。
触摸事件:
touch(用户在触摸屏幕时发生)
tap(用户在短暂敲击某个元素时触发)
taphold(用户在敲击某个元素并保持一秒以上时触发,即长按)
swipe:在某个元素上水平滑动超过30px时触发

此demo暂无在线预览,请下载完整包:

                      <a href="#about" data-rel="dialog"  data-transition="pop" data-role="button">关于</a>    

滚动事件:上下滚动时 scrollstart(开始滚动页面时)scrollstop(停止滚动时)
方向事件:垂直或水平旋转
页面事件:页面被显示、隐藏、创建、加载或卸载时
pageinit(初始化完成)
pageload(加载完成)
pageshow(显示完成)

下载Demo »

                      <h1>记事本</h1>  

注意:在jq中使用$(document).ready(function(){});
在jq mobile中使用$(document).on("pageinit","#page",function(){});
表示页面已经初始化并完善样式设置后发生

 

                      <a href="#page2"  data-transition="slidedown" data-role="button" class="ui-btn-right">编辑</a>  

八、ajax
跨域问题:如果可以修改后台的话,返回格式为:jsonp;并添加参数:callback=xxx;服务器返回xxx(...);
如果没办法修改后台,可以使用其他的跨域中转如:
<input type="button" value="点我加载" id="ajaxBtn">
<script>
$(document).on("pageinit","#index",function(){//参数1:初始化完成后,参数2:某个页面的id;参数3:回调函数
$("#ajaxBtn").on("click",function(){
$.mobile.loading("show");//点击请求之后,显示正在加载的图标
$.ajax({
type:"get",
url:"",
success:function(data){
console.log(data);
$.mobile.loading("hide"); //成功之后将图标隐藏
}

 

              </div>  

});
});
});
</script>

昨天碰到使用日期 的应用,就开始百度 jquery mobile 日期插件

              <div data-role="content">  

一般是使用 datebox 和 mobilescroll

                      <ul data-role="listview">  

昨天开始研究datebox,一直到今天上午才研究好,而且只研究了 日期控件,  日期带时间一起的好像没有。

                                                                 <li data-role="list-divider">2013/2/1</li>  

没办法 就开始研究 mobiscroll

                                                                              <li><a href="index.html">题目四</a></li>  

 

                                                                              <li><a href="index.html">题目三</a></li>  

使用很方便,只需要引入2个文件 。

                                                                              <li><a href="index.html">题目二</a></li>  

下面是 data 和 datatime 2种 控件的使用方法。

                                                                <li data-role="list-divider">2012/1/31</li>  

 

                                                                             <li><a href="index.html">题目一</a></li>   

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
    <link href="../jquery.mobile-1.3.2/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
    <script src="../jquery.mobile-1.3.2/jquery.js" type="text/javascript"></script>
    <script src="../jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

                      </ul>  

    <link href="../plug-data-scroll/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
    <script src="../plug-data-scroll/mobiscroll.custom-2.6.2.min.js" type="text/javascript"></script>

  

    <title>预警信息</title>
    <style type="text/css">

              </div>  

    </style>

              <div data-role="footer" data-position="fixed">  

    <script>
        var opt_data = {
            preset: 'date', //日期
            theme: 'jqm', //皮肤样式
            display: 'modal', //显示方式
            mode: 'clickpick', //日期选择模式
            dateFormat: 'yy-mm-dd', // 日期格式
            setText: '确定', //确认按钮名称
            cancelText: '取消',//取消按钮名籍我
            dateOrder: 'yymmdd', //面板中日期排列格式
            // dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
            yearText: '年', monthText: '月',  dayText: '日',  //面板中年月日文字
            endYear:2020, //结束年份
            showNow:true,
            nowText:'今天',
            hourText:'小时',
            minuteText:'分'
        };
    /*    var opt_datatime = {
            preset: 'datetime', //日期
            theme: 'jqm', //皮肤样式
            display: 'modal', //显示方式
            mode: 'clickpick', //日期选择模式
            dateFormat: 'yy-mm-dd', // 日期格式
            setText: '确定', //确认按钮名称
            cancelText: '取消',//取消按钮名籍我
            dateOrder: 'yymmdd', //面板中日期排列格式
            yearText: '年', monthText: '月',  dayText: '日',  //面板中年月日文字
            endYear:2020 ,//结束年份
            nowText:'今天',
            hourText:'小时',
            minuteText:'分'
        };*/

                     <h1>IMUDGES</h1>  

        $(document).ready(function()
        {

              </div>  

            $("#mydate1").mobiscroll(opt_data);
            $("#mydate2").mobiscroll(opt_data);
           // $("#datatime1").mobiscroll(opt_datatime);
            $("#filter1").click(function()
            {
                alert($("#mydate2").val());
            });
        })
    </script>
</head>

       </section>  

<body>

         

<div data-role="page"   >

         

    <div data-role="header" data-position="fixed" data-theme="b">
       <a href="main.html" data-role="button" data-icon="back">返回</a>
        <h1>农田预警信息</h1>

         

    </div>
    <div data-role="content">

         

       <fieldset ><legend style="color: #006600">选择时间段</legend><hr>
       <input name="mydate" id="mydate1" type="text" data-role="datebox"   data-inline="true"  placeholder="开始时间" autofocus>
       <input name="mydate2" id="mydate2" type="text" data-role="datebox"   data-inline="true"  placeholder="结束时间" autofocus>
       </fieldset>

       <!--                      编辑界面                                   -->  

        <a href="#" data-role="button" id="filter1">查询</a>
      
        <ul  data-role="listview" data-inset="true"  data-count-theme="d">
            <li><a href="alter-detail-rain.html" data-transition="slidedown"  data-ajax='false' > 雨量预警 <span class="ui-li-count"  > 2 </span></a></li>

       <div id="page2" data-role="page">  

            <li><a href="mian.html" data-transition="slidedown"  data-ajax='false' > 河道水位预警 <span class="ui-li-count" > 2 </span></a> </li>

              <div data-role="header">  

            <li><a href="chuancai.html"    data-transition="flip" > 水库水位预警 <span class="ui-li-count" > 5 </span></a> </li>

                    <a data-role="button" href="#page1" data-transition="slideup">主页</a>  

            <li><a href="xiangcai.html" data-transition="slidedown"  data-ajax='false' > 全部预警 <span class="ui-li-count" >9</span></a> </li>
        </ul>

                    <h1>编辑</h1>  

 

                          

    </div>

                     <a data-role="button" >保存</a>  

    <div align="center" data-role="footer" data-position="fixed"  data-theme="c" >
        <div data-role="navbar"  data-iconpos="top">
            <ul>
                <li><a href="main.html" data-icon="home"   >首页</a></li>
                <li><a href="NongTianInfo.html" data-icon="info">农田环境</a></li>
                <li><a href="alter.html"    data-icon="search" >预警查询</a></li>
                <li><a href="#" data-icon="send-msg">信息上报</a></li>

               </div>  

            </ul>
        </div>
    </div>

                      

</div>

              <div data-role="content">    

</body>
</html>

                <label>文本题目:</label>      

                <input type="text" />  

                <label>输入内容:</label>  

                <textarea style="height: 200px;"></textarea>  

              </div>    

                

              <div data-role="footer" data-position="fixed">  

                    <h1>IMUDGES</h1>  

              </div>  

       </div>  

         

         

         

         

         

       <!--                       关于界面                                                   -->  

       <section id="about" data-role="page">  

          <header data-role="header"><h1>记事本</h1></header>  

                   <div data-role="content" class="content">  

                         <p>本软件由IMUDGES团队blackberry小组所做,所有版权blackberry所有!</p>  

                   </div>  

          <footer data-role="footer"><h1>IMUDGES</h1></footer>  

      </section>  

         

         

  </body>  

</html>  

 

下面是效果图:

 

图片 3

 

图片 4

 

图片 5

 

 

 

 

过几天把后台操作都加上,大家就可以放到自己的手机里可以用了!(这个一直到手机上的话,用phoneGap,这东西挺好用的呦,有时间把这一块东西在和大家分享一下下!呵呵)

 

...

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:mobile做的一个记事本,学习总结

关键词: