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()

转载于:https://www.cnblogs.com/interdrp/p/9093581.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值