【干货】我的HTML5一些经验总结

mui-clearfix作用就是在一个大的div如果里面包含浮动元素,那么这个div设置了背景色。但是背景色没办法包含这个元素中的设置了float的元素。所以在这个大的div上面设置一个class=“mui-


mui-clearfix作用就是在一个大的div如果里面包含浮动元素,那么这个div设置了背景色。但是背景色没办法包含这个元素中的设置了float的元素。所以在这个大的div上面设置一个class=“mui-clearfix”



page.html显示的时候刷新一下

var vs = plus.webview.getWebviewById('page.html');

vs.reload();  // 重载

vs.show();





mui.trigger(btn,'tap');方法可以动态触发特定DOM元素上的事件。触发btn上面的tap事件



nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。

原生界面只能在App上的手机里显示效果,并且使用方便直接调用。不必在设计样式,因为他的样式会随着手机的不同而改变的没办法修改的。

plus.nativeUI.actionSheet( {title:"选择按钮框的标题",cancel:"取消",buttons:[{title:"1"},{title:"2"}]}, function(e){

console.log( "User pressed: "+e.index );

} );

 title: (String 类型 )选择按钮框的标题

cancel: (String 类型 )取消按钮上显示的文字内容不设置此属性,则不显示取消按钮。

buttons: (Array[ ActionButtonStyle ] 类型 )选择框上的按钮,ActionButtonStyle对象数组





、、、mui.previewimage.js图片预览


 document.getElementById("imgContainer").addEventListener("tap",pickPhotos);

    


        function pickPhotos(item){

        // 这是H5的弹出系统选择按钮框

            var btns = [{title:"拍照"},{title:"从相册选择"}];

            plus.nativeUI.actionSheet({cancel:"取消",buttons:btns}, function(e){

                   if(e.index==0){return;}//取消

                   else if(e.index==1){//拍照

                        getImage();

                        }

                      else{  //相册选取

                       galleryImgs();

                       }

               });

        }



 //拍照

            function getImage() {

                var cmr = plus.camera.getCamera();

                cmr.captureImage( function (p) {

                    plus.io.resolveLocalFileSystemURL( p, function ( entry ) {    

                        var localurl = entry.toLocalURL();

                        addImage(localurl);

                    });

                });

            }

 //相册选取

            function galleryImgs(){

                plus.gallery.pick( function(e){

                   for(var i in e.files){

                        addImage(e.files[i]);

                    }

                }, function ( e ) {

                },{filter:"image",multiple:true});

            }








比较两个文件,hbilder里面,在最左边的项目管理器里按住ctrl选中两个要比较的文件。击右比较对象-相互





侧滑菜单,在刷新以后依然保持原来的展开或者收缩样式。把这个展开还是收缩的状态保存到cookie里面就好啦

 

侧滑菜单里面的每个li   

$(".sidebar-menu li").click(function () {

        var page = $(this).attr('id');

        // 设置cookie把现在选择的那个列的id值存起来

        $.cookie('page', page, {path:"/"});

    });


点击那个展开收缩的按钮。

    $(".sidebar-toggle").click(function () {


        var status = $('body').attr('class');它具有两种状态skin-blue sidebar-mini sidebar-open展开。skin-blue sidebar-mini sidebar-open sidebar-collapse收缩。

        var status1 = 'skin-blue sidebar-mini sidebar-open ';

        var status2 = 'skin-blue sidebar-mini sidebar-open sidebar-collapse';

        if(status==status1){  如果状态是展开的就让他收缩,并且最后用cookie把此时的状态存起来

            status=status2;

        }else{

            status=status1;

        }

//把body中代表他是收缩还是展开的class类存起来

        $.cookie('status', status, {path:"/"});

     });




下面的内容是每个页面都得引用的。比如放在公共的需要引用的header或者footer里面

$(function(){

$(“#” + $.cookie(‘page’)).addClass(‘active’);//读取cookie获取选择的侧滑列,添加选中active样式


if($.cookie(‘status’)){

$(‘body’).attr(‘class’,$.cookie(‘status’));//读取cookie,获取树状展开或关闭状态。

}

});




如果查看一个接口的info的提示的编码以后的信息。在network面板上,看进度点击任意一个进度,会看到header。preview等面板在这里preview这里是解码后的。



如何画曲线呢,利用    border-bottom-right-radius:30px;把它的四个边分别设置不同的border-radius


mui中自动的加减。data-numbox-min最小值。 data-numbox-max='10000'最大值。data-numbox-step="50"每次点击加增加的数值。


//后来通过js添加到页面里的mui-numbox元素,点击加减就会无效。所以要用下面的代码让他有效

mui('.mui-numbox').numbox();

<div class="mui-numbox mui-pull-right" data-numbox-min='1' data-numbox-max='10000' data-numbox-step="50" style="height: 30px; display: inline-block;">

        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>

<input class="mui-input-numbox" type="number"  value="1" />

<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>

</div>



当上层元素遮住了你想要操作的元素,那么你再怎么添加点击事件也是没有反应的。必须把你想操作的元素放在最上层。才可以。


$("select").on("change",function(){

var thisval=$(":selected",this).html()//选中的那个option的html值。他可能和$(select).val()不一样。因为这个获取的是option的value值


var x=20;

parseInt(x).toFixed(2)---20.00保留两位小数的函数。toFixed(2),有时候需要parseInt一下,即使他已经是整数了




动态的在数量改变的时候总数也改变。这时你需要在这个数量改变的鼠标事件里,引用一个函数。在这个函数里面赋值,然后数量变化调用函数赋值。两者就是一起的啦。


如果有左右两个块的元素。一边两个。应该这么写

<div class="mui-pull-left">

     <p>姓名</p>

     <p>2016-21-32 12:00</p>

</div>

<div class="mui-pull-right">

     <p>积分</p>

     <p>+2000</p>

</div>


canvas的使用。

首先创建canvas对象或者获取canvas对象,然后创建var ctx=x.getContext("2d");然后利用ctx来获取里面的属性和方法


裁剪图片,必须有这个绝对定位。这样才能算他的上右下左的距离啊

img{position:absolute;clip:rect(0 128px 128px 0);}上,右,下,左。都是他们距离左边的距离,这个128是右,其中包括这个问题的宽度。下包括问题的高度,裁剪的这个区域显示其他的都隐藏。



获取或设置元素的宽度$(obj).width();

获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  $(document).scrollTop();

取页面的文档宽度 $(document).width();

浏览器显示区域(可视区域)的宽度 $(window).width();

手机的宽度 $(window).width();





删除cookie,通过传递null作为cookie的值即可:$.cookie('the_cookie', null);



<select>

  <option value="11">跳舞</option>

  <option value="12">唱儿歌</option>

  <option value="13">书法</option>

</select>


 $("select").change(function(){   //注意这里是change

    console.log($(this).val());  

    });

得到的就是value也就是11,12,13这些内容但是不是html里面的跳舞~$(this).html()-输出的就是这个select标签内的所有内容

想要那个内容就需要$(":selected").html();



live,on,bind的区分

live是对之后添加到页面中的元素依然有效。$(".aa").live("click",function(){})即使是在js里面添加body.appendchild(<button class="aa">点击我</button>)的也是能触发这个效果的。。

on  方法在被选元素及子元素上添加一个或多个事件处理程序。和live,bind不同的是他可以有三个,当然也可以和他们一样是两个,$(".parent").live("click",".son",function(){})


bind绑定事件,一次可以绑定多个事件。之间用空格隔开。$(".a").bind("mouseover click mouseout",function(){}); 也可以分开写每次一个函数

$(".a").bind({

mouseover:function(){},

click:function(){}

});



后添加的元素,只要添加到页面中,之后通过他的父节点(是这个页面中的不是后来添加到页面中的)找到这个子节点再触发事件就可以操作啦,,

$("#choosed tbody").on("click",".delete",function(){$(this).parents("tr").remove();})



如果给同一个元素添加了两个一样的事件。。通过.addeventListener("click",function(){alert(1)}),那么他会弹出两个1,两个都执行了。他会就算你是在两个if-else里面,也仍然会两个都执行,只是执行的顺序问题。。所以你应该在最外层写这个事件。如果是on,那么第二个事件会覆盖第一次的事件。



 var date1 = new Date();

 var time1 = Date.parse(date1);  //把获取到的当前的时间距离1970/1/1 午夜(GMT 时间)之间的毫秒数。时间戳是秒,和这个相差三个0,所以在这个后面减去三个0,获得的就是时间戳啦。改成这样的格式是为了方便加减多少分钟或者是小时(这个分钟和小时都要转为毫秒的单位),他的值不会出现62分或者25时的情况。会自动跳到另一个时刻的。然后time1=time1+20*60*1000;让这个时间增加20分钟之后。通过time2=new Date(time1);把获取的毫秒数转为标准的时间格式。time2.getHours()获取小时。time2.getMinutes()获取分钟


当前时间后的20分钟;

var date1=new Date();

var time1 = Date.parse(date1);把当前时间转为毫秒

        var date2 =new Date(time1 + 1000*60*20); 在这个毫秒的基础上加上20分钟的毫秒

        var hour=date2.getHours();  //20分钟后的小时

        var minites=date2.getMinutes();  //20分钟后的分钟


new Date().getTime()获取的是当前时间的13位数。单位是毫秒,除以1000,,就是时间戳的格式。

new Date()-0也是同上。


因此,获得当前时间的时间戳有三种形式

1,var date1=new Date();

 Date.parse(date1)

2,new Date().getTime()

3,new Date()-0

这三种时间最后都要除以1000







HBuilder mui动态添加图片轮播,但加载完后轮播无法滚动

mui("#slider").slider({interval: 3000});添加在ajax的最后就可以了


HBuilder mui 里js动态添加数字输入框后,增加 减少按钮无效

就是在使用js动态添加数字输入框后面加上下面这段代码。

mui('.mui-numbox').numbox();



希望tabbar 隐藏为他设置display:none;是没有效果的他只会变白但是还会占位。这里需要 .mui-content 的 padding-bottom 设置为 0px 就没有空白了

。需要显示的时候在把这个.mui-content设置回来padding-bottom:50px.




单页面,返回的是上一个打开页面,而不是他们整体跳出这个页面。需要代码

//初始化单页view

var viewApi = mui('#app').view({

   defaultPage: '#setting'

});

var view = viewApi.view;

   (function($) {

//处理view的后退与webview后退

     var oldBack = $.back;

     $.back = function() {

     if (viewApi.canBack()) { //如果view可以后退,则执行view的后退

viewApi.back();

} else { //执行webview后退

 oldBack();

}

};

})(mui);





HBuilder让页面放大缩小

< meta name="viewport " content="user-scalable=yes,width==device-width,minimum-scale=1.0" >

重点是这句 user-scalable=yes  代表可以让使用者操作


在js里面添加

var wv =null;

mui.plusReady(function()

{

var wv = plus.webview.currentWebview();

wv.setStyle({'scalable':'true'});

});













MUI 隐藏滚动条

plus.webview.currentWebview().setStyle({scrollIndicator:'none'});



避免表单重复提交(也可以字点击以后就给他添加不能在编辑的属性sub.attr("disabled","disabled");)

 //表单提交

    var checkSubmitFlg = false;

   function checkSubmit() {

if (!checkSubmitFlg) {


// 第一次提交

 checkSubmitFlg = true;

  return true;   //继续执行函数

} else {


//重复提交

 alert("Submit again!");

 return false;  //终止了函数的执行

}

}


解决iPhone中overflow:scroll;滑动速度慢或者卡的问题

-webkit-overflow-scrolling : touch;



html5shim可以让你的IE9或者更加低的浏览器支持html5。用法

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->


快捷键Ctrl+shift+F自动整理代码,ctrl+shift+r快速复制选中的行,粘贴到了下一行,合并选中的内容为一行ctrl+alt+j。

mmon 之后按enter。mui.on(事件绑定)

dad。document.addEventListener()

wad。window.addEventListener()

maj。mui.ajax

mop。mui.open(打开新页面)




video(视频)和audio(音频)很多浏览器不支持。你可以在头部引入一个js。

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>

然后再写<video src="http://www.zhangxinxu.com/study/media/cat.mp4" width="352" height="264" controls>您的浏览器不支持video标签</video>   里面的文字会在浏览器不支持的情况下显示。

 controls显示控件比如播放按钮   autoplay视频准备就绪就播放    preload在页面加载的时候就播放


还有一种写法就是,source这样是因为浏览器不同支持音频格式也不同,这样就可以在不同浏览器中通用啦,source会自动的检测标签指定的视频是否可以播放。

<audio  controls="controls">

<source src="cat.ogg" ></source>

<source src="cat.mp3" ></source>

您的浏览器不支持video标签

</audio>


视频video  支持的avi。MP4。mkv。ogv

音频audio  支持MP3。MP4。WAV.ogg



<iframe  frameborder="0" width="100%"  src="https://v.qq.com/iframe/player.html?vid=s0387r3qpve&tiny=0&auto=0" allowfullscreen> </iframe>


 var width=$(window).width();

$("iframe").height(width/16*9);



//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常

//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间



h5的重力感应事件

  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,比如手机的所处的角度,方位,朝向,

deviceMotion 封装运动传感器数据事件,可获取手机运动状态下的加速度等


<div class="mui-bar"><a href="ad.html">个人中心</a></div>  

底部的菜单栏。mui(".mui-bar").on("tap","a",function(){

       mui.openWindow($(this).attr("href"));

});




<a href="tel:18688888888">拨号</a>

<a href="sms:18688888888">发短信</a>




Uncaught SyntaxError: Unexpected token u报错的原因是强行的把一个undefined和为null的值转化为JSON.parse(x);


有时候三个span标签设置了diaplay:inline-block;但是还是会有间隙,可能原因是这个span便签换行了。不是全部写在一排的。把它们的空格去掉就好啦




有时候你只写<button onclick="c()">点击我吧</button>  没有写type的类型。比如 type="button"这样他不会执行function c的这个函数的。



<div class="mui-input-row mui-search" style="margin-top:8px;">

  <input type="search" class="mui-input-search mui-pull-left" placeholder="请输入搜索词"/>

</div>

写了这个却没有出现搜索的放大镜图标。你应该把mui的js引进去就会出现



prototype原型                                                                               A prototype=new B();A克隆了B里面的属性和方法。性质和继承一样。



函数加()是执行这个函数。不加就是这个函数本身                                                min-height时不能很好的被各个浏览器兼容min-height:200px; height:auto !important; height:200px; overflow:visible;                                                                                                                                                         match查找字符串,找到就返回,找不到就返回null 。var  str="hello word"; str.match("word");---输出的是word。                                   


显示星期,var week=new Date().getDay();---得出的是1,2,3,4,5,6,7但是不是那种星期一星期二。

所以你要把星期一,星期二。。。存在一个数组里,然后通过获取到的1.2.3来当他们的下标。得到下标对应的星期几

var imgArr = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];

 var week=new Date().getDay(); 

imgArr[week]---就是想要的 


var person={fname:"Bill",lname:"Gates",age:56}; 

for (var x in person){

              alert(x);  //fname 1name age

     alert(person[x]); //Bill Gates 56


打印当前页面。<input type="button" onclick="window.print()" value="点击打印当前页面"/> 


 //页面返回

 window.history.go(-1);   


Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效(鼠标靠近他的时候就是一个红色的禁止点击的小图标。而readonly是什么也没有),包括select, radio, checkbox, button等。   


<p>客服电话: <a href="tel:13418649176">400-895-1615</a></p>

letter-spacing: 5px;字间距      


mui.init({

pullRefresh: {

container: '#pullrefresh',

down: {

   callback: pulldownRefresh

},

up: {

   contentrefresh: '正在加载...',

   callback: pullupRefresh

   }

}

});


下拉刷新

   /**

  * 下拉刷新具体业务实现

  */

function pulldownRefresh() {

setTimeout(function() {

mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed

}, 1500);





如果在ajax里通过js引进来的页面元素,就不能调用一个插件。产生效果。。解决的方法就是把这个js插件写到一个函数function里面。然后在ajax的最后调用这个函数。但是还是要通过script引进来这个插件的。





实时更新数据把它写在一个setInterval里面

 setInterval(function(){

   if(user==null) return;

        mui.ajax({});

 },5000);




弹出一个图片

<div class="fade"></div>   这是一个遮罩层

<img src="images/storedialog.png" class="dialog">  这个图片最好是上下左右都有留白png的,否则就是特别大的填充了。图片大小341*650


.dialog {position: fixed; top:10px; width: 100%;left:0px;z-index: 999;} 位置固定在屏幕中间的,可以调整top控制它的位置

.fade{display:none; width:100%; height:100%; background:rgba(0, 0, 0, 0.73); position: fixed; left: 0px; top: 0; z-index: 99; }


sublime合并多行的快捷键ctrl+j。hbuilder的是ctrl+alt+j



如果你想在一个先引进的元素里面再添加元素。,1,你可以把开始那个元素添加到页面中一个静态的元素内,第二个也是一样加在不动的静态页面里。或者

2,如何在一个js中新添加的元素的里面插入新的元素。

                for(var i in data){

  if(data[i].car_img==null){data[i].car_img="img/man.png"}

var ht='<li class="mui-table-view-cell" > <a class="mui-navigate-right"> <div class="mui-pull-left" style="margin-right:15px;"><p class="s"> 司机:'+data[i].vipname+'</p> </div> </a> <p class="orderno">'+data[i].orderno+'</p></li>';


$("#item2-list").append(ht);  //先把这个ht添加到页面中

  

// 2审核通过 3审核不通过    

if(data[i].examine=="2"){

var img='<span class="checked"><img src="img/success.png" width="16px"/>已通过</span>';

   $($(".s"),$(ht)).append(img);  、、在ht里面查找class=s的。

}



注意注意:需要先把元素加到页面中才可以进行根据情况修改信息

var ht='<i class="c '+data[i].is_b+'">审核时间</i>';  //这里之所以在前面加c是I因为可能这个data[i].is_b是个数字1,下面修改类为1的时候这个也会修改的,如果再加上c那就可以唯一啦。

$("#c1 .a22").append(ht);

if(data[i].is_b=="0"){$(".c."+data[i].is_b).html("一保时间");}



//把标准时间转为一般的时间.

var format = function (time, format) {

var t = new Date(time);

var tf = function (i) { return (i < 10 ? '0' : '') + i };

return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {

switch (a) {

case 'yyyy':

 return tf(t.getFullYear());

 break;

case 'MM':

 return tf(t.getMonth() + 1);

 break;

case 'mm':

 return tf(t.getMinutes());

 break;

case 'dd':

 return tf(t.getDate());

 break;

case 'HH':

 return tf(t.getHours());

 break;

case 'ss':

 return tf(t.getSeconds());

 break;

}

});

}

//把标准时间转为一般的时间.

format(date, 'yyyy-MM-dd HH:mm:ss')



/*提示信息在左边的搜索框需要添加这个*/

.mui-search .mui-placeholder {text-align: left;}


date.js时间插件。若是每个点击的都可以单独获取这个时间,而不是所有的这个class名字都获取一样的。

$('.mui-btn.mui-btn-blue').each(function(){

      $(this).date();

     })

如果想要页面中所有的按钮点击变成一个样式,但是也不能通过click事件来添加,只能遍历来添加,但是他可能是变化的。所以只能使用setInterval的同时遍历一下。

setInterval(function(){

  $('.mui-btn.mui-btn-blue').each(function(){

      if($(this).html().split("")[0]!='年'){   //拆分字符串,看看第一个字是不是年。

      $(this).removeClass("mui-btn-blue");  //如果不是那个就为他们添加一个相同的样式。  

      $(this).addClass("mui-btn-nav");

      $(this).html($(this).html()+"已年审");  在这个后面再添加几个字

                }

    })

  },1);  //时间写1s这样更加的快




chang该事件仅适用于文本域input(text field),以及 textarea 和 select 元素。所以想要一个span标签改变时,修改某个状态。就需要写个函数。在值改变时调用函数。



在mui的头部class添加mui-bar-transparent,就可以时头部的标题框变得透明class="mui-bar mui-bar-transparent"


返回时刷新返回的页面,但是会跳一下

 mui.plusReady(function(){  

                var old_back = mui.back;  

                mui.back = function() {  

                    var wobj = plus.webview.getWebviewById("bus.html"); //返回的页面

                    wobj.reload(true);  

                    old_back()  

                }     

            });




按右键返回按钮触发的事件

 document.addEventListener("plusready", function() 

     plus.key.addEventListener('backbutton', function() {

//、、按右键以后触发的事件


mui.alert("你按了右键!");

//..右键提示“是否退出程序”

       plus.nativeUI.confirm("是否退出程序?", function(event) {

       if (event.index) {

       plus.runtime.quit();

       }

      }, null, ["取消", "确定"]);

//、、

}, false);

});




底部的nav

<!--底部-->

<nav class="mui-bar mui-bar-tab">

<a class="mui-tab-item" href="check.html">

<img  src="img/tab/tab11.png" class="img1"/ >

<span class="mui-tab-label">审核</span>

</a>

<a class="mui-tab-item" href="fee.html">

<img  src="img/tab/tab12.png" class="img1" style="height:25px;"/ >

<span class="mui-tab-label">费用</span>

</a>

<a class="mui-tab-item" href="bus.html">

<img  src="img/tab/tab13.png" class="img1"/ >

<span class="mui-tab-label">车辆</span>

</a>

<a class="mui-tab-item  mui-active" href="my.html">

<img  src="img/tab/tab24.png" class="img1"/ >

<span class="mui-tab-label">我的</span>

</a>

</nav>

.img1 {

    height: 23px;

    vertical-align: middle;

    text-align: center;

    margin-top: 4px;

}  

span.mui-tab-label {

    display: block;

    text-align: center;

    font-size: 13px;

}



mui('.mui-bar-tab').on('tap', 'a', function(e) {

//选项卡的切换效果   

var num=$(this).index(); //获取到那个点击的下标

//console.log($(this).children(".img1").attr("src"));

       $(this).children(".img1").attr("src","img/tab/tab2"+(num+1)+".png");

       for(var i=0;i<4;i++){

        if(i!=num){

        $($("nav").find("a")[i]).find("img").attr("src","img/tab/tab1"+(i+1)+".png");

        }

       }

});




滚动效果:

  mui('.mui-scroll-wrapper').scroll();


让边框离元素有一定的距离,border加padding就可以啦


轮播图片只要设置宽度,不用设置高度.mui-slider-item img{max-width:100%;}



默认的: white-space:normal ,当定义的宽度之后自动换行

word-break:break-word;英语字母自动换行

word-break:keep-all 只能在半角空格或连字符处换行

table-layout:fixed;width="200";强制table的宽度,多余内容隐藏 


white-space:nowrap; 强制不换行

white-space:pre-wrap保留空白符序列,但是正常地进行换行。


.mui-bar-tab{-webkit-box-shadow:none;}让底部的选项卡没有边框



$("div:contains(text)") :匹配包含给定文本的元素

$("div:has(selector)"):匹配含有选择器所匹配的元素的元素



当两个跳转的a元素。一个元素盖住另一个元素时,那个被I盖住的可能就失效了。那个大的就会执行,这个时候你需要把被盖住的那个元素的z-index:22把他放在上面。一旦被盖住他就可能失效的。


box-shadow 前面两个值为 纵向阴影 和 横向阴影.把这两个值都设置为 0 就是四边都有阴影


search提示内容左对齐。.mui-search .mui-placeholder{text-align: left;}


右键头<span class="mui-icon mui-navigate-right mui-pull-right"></span>


支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。


定位居中 元素绝对定位,并设置 left:50%

元素负左边距 margin-left 为宽度的一半   

margin:10px 5px 15px;只有三个值,上。左右。下


垂直居中。1,利用position设置相对于父元素top:50%;

2,文字(前提:单行,高度是固定)。设置line-height=外框整体的行高

3,视窗  vw 是相对于视窗的宽度  vh 是相对于视窗的高度 1vh就相当于视窗高度的1%;

 利用position设置margin:50vh auto 0;(只能适用于元素在 视窗 中垂直居中,如果是在局部的某个地方就无能为力了)       

                                                                               


~~(取反再取反)没有意义,实际上在JS中可以将浮点数变成整数。



 function(e)这个e是个对象event,e.type可以看出这个事件的名字,mouseover,click。。

e.keyCode键盘那个键盘上的按键左上右下对应的event.keycode是37。38。39。40 

e.clientX鼠标指针的水平坐标。 e.clientY鼠标指针的垂直坐标。



只需要点击这个按钮一次。

法1,利用one。$("#button").one("click",function(){}

法2,点击以后为他添加一个不可点击的属性。

$("#one").on("click",function(){$(this).attr("disabled","disabled");});  //这里或者写true

添加属性$('#areaSelect').attr("disabled",false);

删除属性$('#areaSelect').removeAttr("disabled");



Math.random()     是(0 ,1) 

Math.random()*3   是(0,3)

Math.random()*3+1 是(1,4)

Math.floor(Math.random()*3+1) 是[1,4] 可以等于1,4  Math.floor()是向下取整


mui-content

mui-content-padded


fun&&fun();如果fun这个回调函数不为0就执行这个回调函数。




如果输入时内容按钮就变颜色,没有内容就是灰色。利用keyup和计算里面填写内容的长度

<input type="text"  placeholder="222" id="a"/>

<button>提交</button>


$("#a").keyup(function(){

        if($(this).val().length>0){

        $("button").css("background-color","red");

        }

        else{

        $("button").css("background-color","#ccc");

        }

   });



vue文件夹。把dev.bat和build.bat粘贴过来。node_modules整个文件夹粘贴过来,因为文件太大了,所以就直接可以把文件夹的快捷方式放在这里。按住shift的同时在空白地方击右键-在此处打开命令窗口mklink /j node_modules "这个node_modules的路径"     static文件夹用来放外部的css,img,js。

index.html是公共的把所有引用的js的css都可以放在这里写。App.vue是首页,把所有的几块的内容放在这里拼合在一起。然后你就可以单独写各个子页面。


当你要运行操作时就打开dev.bat这个文件(或者在命令行输入npm run dev),自然会自己打开一个浏览器。。等到最后编辑的时候再运行一下那个build.bat 把

dist-js-build,common,vendor这几个文件就是必须的。common这个里面放各种接口


store文件夹里放着所需要的变量和方法

getter里面处理各种计算的属性,所以最后在vue的页面中放在computed里面。



./代表同级目录

../代表上级目录



如果修改了index.html或者是config.js的内容你需要从新编译npm run dev 否则可能报错。


打包以后把dist文件夹是主要的。即使你的static里面的各种静态文件也不用再粘贴出来啦,只需要把dist发给他们放在服务器上就可以啦。


修改域名:

src-config.js ====apiurl:"http://ybswx.wmh920.com/index.php/"

config-index.js===target:"http://ybswx.wmh920.com/index.php/"



在index页面中。

 <!--//如果是ie浏览器还需要加上下面的这段js-->

        <script>

    (!!window.ActiveXObject || "ActiveXObject" in window) && document.write('<script src="polyfill.min.js"></' + 'script>');

    </script>



index里面引入的css和js都是static里面的,如果你不想写static/css   你需要修改config-index.js里面的配置文件。

你可以参考以前的.注意。dev: {port: 8080,}    8080是域名

                  '/api': {                

                   target:"http://wx.wmh920.com/index.php/",  这里是公共的域名


修改了这里的内容以后你需要从新点开控制台,然后在运行。否则可能报错



不能在css里面写background:url()否则会报错的



@keyup.13="submit123($event,item)"

submit123: function(e,item){

              var content=e.srcElement.value

              this.$api("Zhongchou/reply" , { content,sid:item.sid }).then(data => {

                    item.reply.push(data)                   

                    this.showrid=null;

                    mui.toast('回复成功');

                });



placeholder里面含有变量在前面写冒号

:placeholder="'回复'+item.s_name+"



点击时在他的前面添加一个选中的图片。把这个图片加在他的伪类里div.active:after{content:"";position:absolute;top:-3px;left:-3px;background:url();width:30px;height:30px;background-size:cover;}这个div就要设置position:relative;

在js里面设置 $(".payway span").click(function(){

              $(this).addClass("active");

           });



一个按钮周围有阴影,    border: none;可以消除而不是box-shadow。还有button点的时候外边框,outline:none;



按钮,点击复选框,按钮变色且可点击。不勾选就不能点击、、注意没有没有addAttr这种啊。

$("input[type='checkbox']").click(function(){

if($(this).prop("checked"==ture){

            $(".button .btn").addClass("red").removeAttr("disabled");


           }

         else{

             $(".button .btn").removeClass("red").attr("disabled","disabled");

            }



})



在整个table上设置:table-layout:fixed;然后再td上设置.ellipse:{text-overflow:hidden;overflow:hidden;width:30%;white-space:nowrap;}


 //设置滚动.当页面调整大小的时候也是这样的比例

  $(window).resize(function(){

    //设置滚动

     $(".height1").css("height",$(window).height()*0.2-100);

});


$(".height1").css("height",$(window).height()*0.2-100);

 //设置滚动


鼠标聚焦了就改变按钮的颜色

 $("input").focus(function(){

    $("#queding").css("background-color","#003b0c")

})




从写mui.back让他回到单页面的上一个。而不是退出这个单页面。这样他必须有个header才可以使用。如果把header删除也不可能再用这个方式返回啦。

mui.back = function() {

  if (viewApi.canBack()) { //如果view可以后退,则执行view的后退

viewApi.back();

} else { //执行webview后退

oldBack();

}

};


maxlength="10"直接在html里面限制长度


 $.post("checkedbank",data,function(){

      });

//checkedbank这个是接口的地址。data是传到后台的数据data={id:2,name:3}



把样式加在<block name="content">里面才有作用的。


在整个页面最外层的div添加。style="min-width:768px;"就能保证小于768的时候出现滚动条



css里面的正则。[class*='a']选中class中含有a的ab、bad、ha。[class^='a']选中class中含以a开头的,比如adver

[class$='a']以a结束的ba。



.只能输入汉字:"^[\u4e00-\u9fa5]{0,}$"。



一个页面只有一个图片,图片上有文字内容什么的,你可以用img加载图片,并且通过position:absolute;z-index:-1;width:100%;height:100%;left:0px;top:0px;这样可能会导致,你的那个图片拉伸了。


所以最好的办法是把这个图片放在body的背景图片中,html,body{height:100%;}body{background:url() no-repeat;background-size:cover;}



引用公共的头部在不同的页面通过iframe引入

<iframe marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no src="header.html"  width="100%"></iframe>


然后在这个header里面写  //top.location.href是最外层的页面跳转

$("li").each(function(){

if(top.location.href.indexOf($("a",this).attr("href"))>-1){

$(this).addClass("active");

}

});


有时候加载插件css和js都没办法实现想要的样式,可能是在js的后面添加?skin=twitter。。写成<script src="js/jquery.artDialog.js?skin=twitter"></script>


当想增加项时,如果填写的某个基本信息为空,就不能让他增加,就不能弹出增加的那个表单。

阻住一个函数的执行,如果这个函数是自定义的function a(){}这种形式,最后要写return true。应该是if(!a){a();}


a代表基本信息的验证。b代表弹出的那个表单。弹出表单的前提是a验证通过了。


function a(){//如果执行了下面的某个if返回的就是false,那么就不能执行

 if(x==0){alert(1);return false;  、、这里的return false代表不往下判断了。跳出这个函数

 }

 if(x==1){alert(2);return false;

 }

return true;

}



function b(){

  return a();   、、如果a执行了返回了true就往下面执行否则返回false就不往下执行。

  alert(222);

}



表单form不能嵌套,否则程序就不知道用户的请求到底是那个了




直接在html里面写<input type="button" onClick="window.close();" value="关闭窗口"/>

window.close();关闭窗口

window.print();打印


history.go(1)前进

history.go(-1)后退


让文字竖排排列:

-webkit-writing-mode: vertical-lr;



css和jquery里面的:first-child。其实里面都是一样的。

tr td:first-child{...}

$("tr td:first-child").click(function(){})

$("tr td").eq(0).click(function(){})和上面的功能是完全一样的。



所有的子元素不包括第几个。$('#leftbar li:not(:first-child)')这是first-child含有括号的

css设置样式的写法是#leftbar li:not(:first-child){}


两个多选框但是只有选择一个就是类似的和单选框一样的功能 $(this).siblings("input").prop("checked",!$(this).prop("checked"));所以类似的如果他和旁边的那个元素只能有一个选中也就是完全相反的格式。那么就可以直接像上面那样写。


想让一个按钮隐藏但是还是可以点击的就需要设置他的透明度opacity:0;如果你是设置display:none的话就不能点击了


你想获取this的下一个元素然后再其他操作时,改变他的某个属性。

var pic=$(this).parents("h3").find("img");

if (window.FileReader) {    

   $(pic).attr("src",e.target.result);  //在下面就改变可以啦。你不能var pic=var pic=$(this).parents                                              //("h3").find("img");然后在下面pic=e.target.result这样就实现不了。

 }; 




vue里面没有this。你想要获取this就应该。页面的html是@click="closePic($event)"

closePic(e){ var this1=e.srcElement;}


如果list是数字,必须这样 mui.alert(list+"")输出才能显示


如果一个函数他写undefined。可能是没有找到,你可以在之前找到window在找这个元素

 <div class="close" onclick="closePic(this)" >x</div>  、、如果这里写@click就可能不能被复制了。所以用原生的。在mounted里面写这个函数

window.closePic=function(e){alert(00)}



微信分享, 

页面<button class="mui-btn" @tap="sharebox=true">分享给朋友</button>

<div class="mui-fullscreen sharebox" v-if="sharebox" @tap="sharebox=false" style="background-image: url(img/ZC/share1.png);z-index: 33;"></div>


.sharebox{background-size:cover}

.fullscreen{position:fixed;}这样可以保证下拉上拉这个外面的遮罩层都可以覆盖,位置是不变的。


js写:

data里面写sharebox:false

  引入 import wxapi from '../common/wxapi'

然后在整个页面访问的接口里面写 wxapi.showMenuItems(db.project_name, list.length > 0 && list[0].posters, this.$route.params.id, localStorage.getItem('uid'), 5);这里面的内容就是你分享出去他显示的内容,最后一个

是名片的这个uid固定的。


就是不用接口直接访问获取的后台传来的lastvid

this.$route.query.lastvid;是名片的id不用修改。其他的都可以在上面你访问的接口里面找到。



如果打开两个命令行窗口,端口号一定不能一样否则就会报错。

要在config-index.js里面改一下端口号port: 93


如果写在style里面就是所有的页面都引用。如果在style scoped里面就是只要当前页面引用。


如果你有个只要传到后台,必须把他在data里面定义了,然后他就会监听,然后再method里面通过this.data.里面取得名字。就可以获取到这个值啦。


返回到某个vue的页面。需要window.location.href="./#/CrowdFunding/edit";


拼接字符串。http://wx.wmh920.com/是个字符串,m.poster_map是个变量

:src="'http://wx.wmh920.com/'+m.poster_map" 


list="'+list.image+'"



v-bind:style="{backgroundImage:'url(' +poster_map + ')'}"   poster_map是变量 

v-bind:class="'finish'+item.is_read"  finish是固定的。item.is_read是变量

原有的文件内容用单引号引着加上变量的内容v-bind:src="'http://admin.wanmei/'+img"


页面跳转传值,把id值传过去。v-href={name:'新的页面',query: { id }}  这个id是接口里传过来的id。并且还在data里面定义了的

在新的页面接收。this.$route.query.id



params也是可以传参的额,区别在于这个path,如果path后面还有:id之类的,后面就会

{

  name: "TA的众筹",

  path: '/CrowdFunding/Mycrowd:uid/:id',

  component: require("./众筹/TA的众筹")

        },

如果你想获得params

  this.$router.push({ name: 'TA的众筹', params: { uid: localStorage.getItem("uid"), id: db.eid } })



post在后面写键值对this.$api("/Bssay/wxinfo",{id:this.$route.query.id}).then(data => {

get的方式,就是直接在地址后面写?id=4.   this.$api("Bssay/Entryreport?id="+this.$route.query.id).then(data => {})



如果最外层的page里面添加一个背景图片。但是显示了下部的三个tab导航,你需要把这个页面放在router.js里面的固定位置(即不显示下部tab的地方),就是然后再page里面设置position:absolute; (否则该页面底部就会出现很多的空白)。




 {{imgroot+'111'}}  这个111就是从接口接到的地址v-bind:src="imgroot+list[2].url"

 <img :src="img | imgroot" />下面的data里面直接可以写那个没有前面域名的地址


底部按钮

<nav class="mui-bar mui-bar-tab">

   <a class="mui-tab-item" id="submit">提交订单</a>

</nav>



if(this.$route.path.indexOf("/Praise/Story1/")==0){}     indexof()==0代表存在这个页面


v-for是在当前的这个标签里面循环的,比如

<ul><li v-for="">这里会一直循环li</li></ul>


页面

 <div class="item" v-for="item in list" @tap="link({id:item.goods_id})">

    <img v-bind:src="item.goods_image" />

 </div>


methods里面

  link(db) {

      this.$router.push({ name: '商品详情', params: { id: db.id, uid: localStorage.getItem('uid') } });

   }



没有登录所以没有uid,所以可能会报错没有定义uid。这时你需要在谷歌的application里的localstorage里面自己随便写一个uid。


 created(){

        this.$api("Bssong/firstEndImg").then(data=>{

            Object.assign(this.$data,data);   // this.$data指的是这个js里的data(){return }里面的值。data指的是那个接口里的数据.写在created里面只在加载的时候执行一次。mounted()里面每次刷新时都会执行.如果写this.data就是那个store里面的data{}里面的内容

        });

    },


Object.assign(target, source);合并对象, 把source对象合并到target



如果在给后台传数据时一些是store里面的。我们可以直接用this.参数合集名。如果store:{data:{A:'aaa',B:'bbb',c:'zzz',}}就是this.data表示这里面的很多数字A,B,C。

注意页面允许

 import {mapGetters,mapState,mapMutations,mapActions} from "vuex"

 computed:{    

    ...mapState({

    data:s=>s.gwc.data,  //页面里可以直接用store里面封装的参数。data.goods_price

   }),



this.$api("Bsfamily/Order",{...this.data,this.num  这个this.data是store里定义的。注意如果这个接口只要一个参数就可以直接写this.data就可以啦。但是你还传别的数据,就必须打三个点,然后是其他的键值对形式。this.$data就是指的页面下面的所有data数据

            storeadress:this.goods.storeadress, 这个是当前页面的data里面定义的

            }).then(db=>{  });



this.data 是store里面定义的data的所有内容

this.$data 是这个里面data定义的

...this.data是需要多个参数时写的


vuex相当于把一些页面给的数据存储起来,然后在其他地方也可以用。


当我们把数据存在store里面的时,需要在store里面把对应的多有字段用一个名字命名。



当前页面想放在里面的商品。如果是一个数组那么这个数组是在data里面定义的,并且通过接口赋值的。

然后在提交的时候。 this.$store.commit("选择商品", this.fgoodsInfo);就能访问store里面的mutations里面的那个函数 选择商品函数。



在你想用的页面你写computed:{    

    ...mapState({

    data:s=>s.gwc.fgoodsInfo,  //页面里可以直接用store里面封装的参数。data.goods_price

   }),

}

然后页面直接通过fgoodsInfo.goods_img就可以直接显示你保存在store里面的开始的那些数据了


 state:{

fgoodsInfo:{"goods_body": "",

            "goods_freight": "0",

            "goods_name": "",

            "goods_price": "0",

            "goods_img": "",

            "goods_collect": "1",

            "goods_jianjie": "",

            "brand": "",

            "goods_id": "1",

            "sp_name": "",

            "sp_value_name": "",


        },

},

 mutations:{

        "选择商品"(state,data){

            state.fgoodsInfo=data;

        },






 lunbo:[{picture:"http://1.png",title:"名字1"},{picture:"http://1.png",title:"名字2"}]

 this.header=db.lunbo.map(l=>{return { 

  posters:l.picture,  因为那个插件里面的图片地址是poster,标题名是s_title,所以这里的接口的数组的名字,要和他对应的,而map就是分解数组里面的各个参数的。

  s_title:l.title



 if ((db.list||[]).length == 0) return done(true);。。判断是否存在db.list如果只写length=0.可能它是空的就没有length啦。这种写法等同于db.list == null || db.list.length == 0

} });


如果这个元素可能为空,你赋值的方式是:this.collection = obj.collection || [];



list:[]和list:null是不同的,[]代表他是个数组,所以取得里面的内容不会有null的情况。图片的话你要是设置初始null那么刚开始加载的时候可能会报个错。某个图片不存在但是你却不能确定是哪个图片,这时你需要,在哪个上面写上v-if="img!=null"或者在最前面写那个数组的不为空。



全选

 selectall(e) {

  this.list.forEach(a => { a.checked = e.srcElement.checked; })

   }



页面中只能有一个大的div包裹住所有的内容。所以你可以有点击以后弹出的一个层,也必须包裹在这个层里面。



取掉谷歌自带的默认记住密码的黄色背景:

input:-webkit-autofill{

 -webkit-box-shadow: 0 0 0 400px #E8ECED inset;

}


返回到上一步。等同于

mui.back()

history.back()

this.$router.go(-1);


前进3步,this.$router.go(3)


vue的style里面不能写background:url()这样是会报错的。只能在行内直接添加样式


this.$nextTick(()=>{})如果你用了某个插件,需要在js里面添加配置参数。这时需要把配置的代码写在mounted(){}里,用this.$nextTick(()=>{})


他会先运行这个代码,然后再算this.$api()里面的数据。如果你想要在最开始计算页面有几个ul,那么他可能不能正确的算出你用v-if标记的ul,因为他还没有加载呢。所以你要把计算ul的代码写在这个接口里面。等v-if执行完了,你再去计算;

  this.$api("Member/index").then(db => {

        this.db = db;

        this.dot();   //计算页面ul里面有几个li如果只有一个,就没有哪个dot

  })

methods:{

  dot(){

    var num=0;

    $(".page .mui-table-view").each(function(){

      num= $(this).find("li").length;  

      if(num==1){$(this).find(".dot").hide();}

   });

}

}


autofocus="autofocus"自动获取焦点


没有内容时显示

<div class="mui-loading" v-if="data==''">

     <div class="mui-spinner"></div><h6 class="mui-text-center">精彩内容马上呈现..</

上一篇:极速猫新手理财大攻略   |  下一篇:共享单车押金退款管理