mui 总结

出框框


js内容 mui(".mui-popover").popover('toggle');
       
点击“弹出框框”就会弹出这个有class="mui-popover"的窗口，点除了窗口的其他位置就隐藏,注意这个窗口一定要写在header之外
此外，mui（".classname").popover("hide");隐藏classname的内容        mui(".classname").popover("toggle");classname的内容隐藏和显示切换
或者（点击一个次显示再点击一次隐藏）
2.var event_b=true;(注意这里是下划线，否则就会编译出错)
mui('#OA_task_1').on('tap', '.mui-btn-red', function() {       
if(event_b){
        event_b=true执行这个函数       
}
else{
        event_b=false执行这个函数       
}
event_b=!event_b;最终结束的时候改变event-b的值，这样每次点击效果就不一样。但是只适用于一行的隐藏显示，如果多行的，点击一次内容就显示event_b=true，当点击第二行的时候。event_b=false。第二行内容就是隐藏的。
3.利用if语句判断如果是显示就隐藏，反之亦然。
var olist=document.getElementById("list");
mui('.mui-header1').on('tap','.mui-btn',function(){
if(olist.style.display=="none"){
        olist.style.display="block";}
else{
olist.style.display="none";
        }
});
F
想要选择框在上面不占位position:absolute;z-index:2px;Z-index在使用绝对定位 position:absolute属性条件下使用才能使用




变量'+db.title+'
mui-table-view-cell 下横线左端有一定距离。调整的方法
.mui-table-view-cell:after{left:0}




这样选择类型就不会被选中
选择类型 cat-1 cat-2 cat-3

和js有点类似
var info = document.getElementById("info");document.getElementById("alertBtn").addEventListener('tap', function() { mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {info.innerText = '你刚关闭了警告框';});});document.getElementById("confirmBtn").addEventListener('tap', function() {var btnArray = ['否', '是'];mui.confirm('MUI是个好框架，确认？', 'Hello MUI', btnArray, function(e) {if (e.index == 1) {info.innerText = '你刚确认MUI是个好框架';} else {info.innerText = 'MUI没有得到你的认可，继续加油'}



querySelector只选中第一个,querySelectorAll()选择所有的。它是JavaScript的dom选择器，比document.getElementById(),document.getElementByClassName().document.getElementByTagName()更加方便，因为他不局限于id class tagname这样。更加灵活，可以document.querySelector('#holder')或者document.querySelector('input[type='text']')或者document.querySelector('div>li:first-child')






组织冒泡，在里面的元素里面写return false；
阻止默认行为 e。preventDefault()
阻止冒泡 e.stopPropagation()


使用mui.trigger()方法可以动态触发特定DOM元素上的事件。


.trigger( dom元素 , "tap" , 需要传递给事件的业务参数)




在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例：


mui.plusReady(function(){
console.log("当前页面URL："+plus.webview.currentWebview().getURL());
});


导航和底部固定写在一个页面，在这个页面里面用
mui.init(){
subpages:[{
url:'', //这里面的内容就是页面的主要信息
id:'',
styles:{top:'',bottom:''}
}]};


想要两个元素相对位置不变，需要把这两个元素写在一个标签内，在父标签上写position：relative。在子标签上写position：absolute；top：10px；left：10px；
下面的例子当选择这两个字改变位置，1122也会随着改变
<div style="position：relative">
选择

• 11
  
  
• 22
  
  

图标是字体的形式，所以可以改变颜色background-color大小font-size


一个元素（按钮）在屏幕上居中
把按钮写在一个p标签内。
p{margin:auto;
text-align:center;}




一个div中的字体如果想让他在这个div块中垂直居中，为这个字体设置line-height=这个div的高度


不管屏幕大小怎样变化，一个元素相对位置不变，都比如处在屏幕中间，父元素position：relative；
这个子元素position：absolute；left：50%;




获取当时触发的这个元素的第一个子元素this.childNodes[1];本来第一个的下标为0但是，空格也算一个，所以他变成了1


名字：

如果不写oninput可能是出现不匹配的时候提示框还是请填写此字段，那个验证的"两至五个汉字"不出现,不单独写*而是，直接在css里面加上一个图片的样式input:required, textarea:required {
background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}




输入mList会出现一个有三项的列表。class样式已经给出了，mButton会出现一个蓝色按钮


mui只有一些手势事件，但是缺少鼠标事件，要使用鼠标事件需要对象.addEventlistener("mouseout",function(){...})






CSS outline（轮廓属性 outline位于边框的外面，不一定是方形，三个参数颜色outline-color，样式outline-style，粗细outline-width -----#ffffff，solid，thick




电话号码：^(0|86|17951)?(13[0-9]|15[01234567889]|17[678]|18[0-9]|14[57])[0-9]{8}$
身份证：^([0-9]){7,18}(x|X)?$
密码：^[a-zA-Z]w{5,17}$ 字母开头，长度在6~18之间，只能包含字母、数字和下划线
强密码：^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间


maxLength可以写在任何input里面。代表输入字段的最大长度，max规定输入字段的最大值和min配 套使用
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。






修改在css中显示的表单placeholder的样式
::-webkit-input-placeholder { color: blue;} //safira和chrome
::-moz-placeholder{color:blue} 火狐4-18
:-moz-placeholder {color: blue;} 火狐19+
:ms-input-placeholder{}//ie
input:focus::-webkit-input-placeholder{}






#F4B5B8




z-index只能在position属性值为relative或absolute或fixed的元素上有效。z-index值只决定同一父元素中的同级子元素的堆叠顺序。先写的元素一定会比后写的位置靠下，即使他的z-index大


如果点击就直接出现提示的框 .form_hint {display：none；z-index: 999;position:absolute;} 可以为这个提示框加尖尖.form_hint::before{content:'25c0';color:}点击时显示提示form input:focus + .form_hint {display: inline;}
验证正确时提示form input:required:valid + .form_hint {background: blue;}
input:focus {background-color:#fff !important;} 可能有的时候就需要加上！important才效果。


title是和pattren配对使用的，代表如果不符合pattren就弹出“请与所请求的格式保持一致
+title内容”的提示信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息。也可以为链接添加描述性文字


pattren不必使用^和$表示要匹配字段值的开头和结尾


Form 事件
onvalid当元素无效时运行的脚本
oninput当元素获得用户输入时运行的脚本
把一个div变成小三角。这个div里面不要写文字。如果写的话
border-width:10px;
border-style:solid;
border-color:transparent #333 transparent transparent;
display:block;
也可以直接写成,下面这个样式：
border：10px solid transparent;
border-right:10px solid #333;
display:block;


在一个框前面加一个小三角；可先设置这个元素div{poisition：relative；}
div：before{poisition：absolute；content:'';top:17px;right:100%;height:0px;width:0px;border:7px solid transparent;border-right:7px solid #ccc;}




两个按钮中间有个竖线，那个竖线可以当成一个元素的右边框，两个就是a的链接标签。a{display：inline-block; width：50%；}




使用JavaScript代码调用元素的setCustomValidity()方法，可以很方便地修改元素在验证时展示的系统提示信息，其调用格式如下：
页面元素.setCustomValidity("系统提示信息"）;
注意目前为止，只有Opera 11才支持该方法，其他浏览器暂时还不支持该方法。




mui中自带的select是没有边框的，所以要想它右边框需要在当前页面添加select{border：solid #cccc 1px！important；}加上！important是使它优先考虑这个




Item 1后面有个箭头
<li class="mui-table-view-cell">
       
        Item 1
       



//点击“确定”后选中内容显示在输入框中,多选
<li class="gn[]">


var ogns=document.getElementsByClassName("gn"); //注意有时必须添下标("gn")[0]才可以。
var ogn=document.getElementsByClassName("gn[]");
mui(".hidelist").on("tap",".sure",function( ){
        var flag=""; //flag容器，放选中的下拉
for(var i=0;i
$(document).ready(function () {
//点击“返回顶部”
$('.goTop').click(function () {
$(document).scrollTop(0);
});
//页面加载隐藏“返回顶部”
});




设置css使文字和图片同排同行时上下垂直居中图片和文字在同一排，要让文字和图片都是居中的img{vertical-align:middle;}




作为背景的图片一定要设高度，否则就不显示
居中对齐margin：0 auto；width：960px；一定要设高度否则还是不居中


去掉两个img之间的白线，用img{display：block；}




密码：

重复密码：

两次输入密码不一致





getElementsByClassName()得到的是个数组，所以要在后面添加[0]
getElementsByClassName("classname")[0]




Maximum call stack size exceeded堆栈溢出错误可能是有死循环。


*和
/g, '>')






注意var oli=this.parentNode.parentNode;
如果想要使用这个js中的变量oli在jquery中。$(oli).css("display","none")注意这里的oli并没有打引号


先找到父元素，在在父元素中的子元素var oli=this.parentNode.parentNode; $(oli).find(".childclass").css();


mui.swipeoutOpen(里面是js的选择器用this而不是$(this)) 参数dom元素
mui.swipeoutClose()




如果你通过addClassName来给元素添加样式，而最后用css（“color”，“red”）这种方式来改变该元素样式的话，两者可能冲突，可能在某些时候就失效了。所以要采用一样的方式。


当改变有一个图片时，把它从新命名，再添加到页面中，这样页面中的效果可以更快的加载新的页面。




hightchart规定y轴
yAxis: {
yAxis：{ min: 0, //规定y的开始坐标
title: {
text: '预约人数'
},
tickPositions: [0,10,20,30,40],//这里是y轴的值的设定
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},




$(".date").slideToggle("fast"); //卷入卷出相切换




给一个自己设的下拉ul设置 height: 270px; overflow: auto;就会有下拉啦


$('#leftbar li:not(:first-child)').click(function(){ //#leftbar li:not(:first-child)li必须是 #leftbar的第一元素才行，否 //则就是除去的是 #leftbar里面的第一个元素。如果想找 #leftbar里面的第一 个li就得写#leftbar li:not(:nth-of-type(1))
/、$(".text").toggle();//点击一下显示再点击一下隐藏


// $(".text").css('margin-top',$(".monthta").height()/8+$(this).index()*53);
// $(".text").css('margin-left',$(".monthta").width()/6);
// $('.text').html($(this).text()+"收益共计:"+20000+'元').show(1000);












如果想要获取2016-2中的2016，可以获取整个2016-2 rs.text再利用split("-")来分割成两个。rs.text.split("-")[0]就是2016。rs.text.split("-")[1]就是2






/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #fff;
}

/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}

/*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid yellow;
}




当内容超出手机页面时可以考虑指定外层div设置width：100%，然后加滚动条overflow：sroll，这样内层的div只需设个固定的width=900px。就可以让多余900的内容滚动拖拽进来了。。。
但是数据很少还添加这个效果的话就会有问题。就可能是屏幕小时，合适。大的时候就有留白。所以判断一下数据多少，多的话就加

       







鼠标滑动li时，可以为它添加背景图片，不仅仅是改变字体颜色






利用雪碧图，实现点击时皮肤换色
ul li{width:15px;height:15px;margin-left:10px;
list-style:none;background-image:url(images/bg.gif);cursor:pointer;float:left;display:block;}
#skin_1{background-position:0 0;}       
#skin_2{background-position: -25px 0;}
#skin_3{background-position: -50px 0;}
#skin_1.selected{background-position:0 -16px;}
#skin_2.selected{background-position:-25px -16px;}
#skin_3.selected{background-position:-50px -16px;}


        $("li").click(function(){
$("#"+this.id).addClass("selected").siblings().removeClass("selected");}







$("#cssfile").attr("href","css/"+this.id+".css");
也可以在链接外部样式表中加id，之后js中改变他的链接样式






你想创建一个元素，使它的宽度占满它的父元素，但还要留出一部分像素宽做其它用处
.parent {
width: 100%;
position: relative;
}

.child {
position: absolute;
left: 100px;
width: calc(90% - 100px);
}










var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = 'Item ' + (i + 1) + '';
table.insertBefore(li, table.firstChild);//把li插在table的第一个孩子前面








回到顶部 这是在mui中的方法
$("#toppic").click(function () {
if(mui.os.ios){ //如果是ios系统
mui("#pullrefresh").pullRefresh().scrollTo(0,0);

});
       
}else{//如果是其它，android
        window.scrollTo(0, 0);
}
}）；


下拉出现的元素他的位置是固定的，那么你应该设置position:fixed;top:0px;
$('.scrolltop').hide();刚开始滚动条是隐藏的。
$(window).scroll(function(){ 滚动条滚动时触发事件



        if($(window).scrollTop()