Layer For Mobile 之 layer.full()

背景介绍:layer mobile是专门针对手机页面开发的一套框架,具体介绍请看官方文档 http://layer.layui.com/mobile/api.html,因其扩展方法有限,我用到了layer Pc版的layer.full这里做了扩展。

问题:目前layer mobile是2.0版,没有layer.full方法。因为用到做了扩展。

包括两部分,一部分是js,一部分是样式。

js部分

function LayerFull(title, url) {

    layer.open({
type: 1,
btn: ["点击关闭本页面"],
yes: function (index) {
layer.close(index);
},
title: title,
content: "<iframe src=" + url + " width='100%' height='96%'></iframe>",
style: 'position:fixed; left:0; top:0; width:100%; height:96%; border: none;'
}); };

css部分

.layui-m-layercont {
height: 80%;
}
.layui-m-layercont iframe {
border: none;
z-index:;
}
.layui-m-layermain .layui-m-layerchild h3 {
height: 30px;
line-height: 30px;
} /**
iOS兼容iFrame滚动条样式
*/
.layui-m-layercont {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
/*height: 330px;*/
} .layui-m-layercont iframe {
width: 100%;
/*height: 80%;*/
}

layer mobile开发layer.full的更多相关文章

  1. jQuery Layer mobile 弹出层

    layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...

  2. layer.js中layer.tips

    <script src="~/Content/js/layer/layer.js"></script> layer.tips('名称不能为空', '#pro ...

  3. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  4. 18个jQuery Mobile开发贴士和教程

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

  5. Transport layer and Network layer

    http://stackoverflow.com/questions/13333794/networking-difference-between-transport-layer-and-networ ...

  6. layer mobile 指定URL连接 弹全屏

    var url_a = $("#"+id).attr("alt"); //打开新页面 var pageii = layer.open({ type: 1, bt ...

  7. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  8. jquery mobile开发笔记之Ajax提交数据(转)

    http://my.oschina.net/xiahuawuyu/blog/81763 这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对 ...

  9. 关于 layer.mask = label.layer 出现空白情况

    源代码如下: self.numLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width/3, ...

随机推荐

  1. Animation Parameter

    [Animation Parameter] Animation Parameters are variables that are defined within the animation syste ...

  2. 【bzoj2749】[HAOI2012]外星人

    2749: [HAOI2012]外星人 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 677  Solved: 360[Submit][Status][ ...

  3. 633. Sum of Square Numbers 是否由两个完全平方数构成

    [抄题]: Given a non-negative integer c, your task is to decide whether there're two integers a and b s ...

  4. sed陷阱

    sed陷阱:   sed -i 后不要紧跟字母, 否则会产生一个新的备份文件(在原文件后多出来一个字母) // 正确写法 /usr/bin/sed -i "/PREFIX=/d" ...

  5. 浏览器访问www.meituan.com过程

    “从浏览器输入 xxx 到跳转完成的过程发生了什么”,是一个常见的比较综合的面试题,以下是我查阅了一些资料后总结的,如有错误,还望批评指正.(以美团网为例) 1.在浏览器地址栏输入:meituan.c ...

  6. 黑盒测试实践--Day4 11.28

    黑盒测试实践--Day4 11.28 今天完成任务情况: 分块明确自己部分的工作,并做前期准备 完成被测系统--学生管理系统的需求规格说明书 完成Mook上高级测试课程的第六章在线学习,观看自动化测试 ...

  7. App测试从入门到精通之安装、卸载和运行测试

    关于手机App测试需要说的点有很多.目前市场上主要的APP测试主要是针对的是安卓.和苹果两大主流操作系统.主要考虑的就是功能性.兼容性.稳定性.性能测试等.我们看下App的安装和卸载有哪些常用的场景: ...

  8. PHP解决跨域访问的问题

    在控制器的第一行放如下代码即可解决 header('Access-Control-Allow-Origin: http://ding.taozugong.com'); header('Access-C ...

  9. 编写高质量代码改善C#程序的157个建议——建议48:Dispose方法应允许被多次调用

    建议48:Dispose方法应允许被多次调用 一个类型的Dispose方法应该允许被多次调用而不抛出异常.鉴于此,类型内部维护了一个私有的bool变量disposed,如下: private bool ...

  10. react-native-echarts构建的图表出现滚动条并且可以滑动的问题

    前段时间做echarts饼状图,按照官方提供的写法完成以后图表可以出来,但是虚拟机上演示出现了滚动条,并且拖动时就会出现空白,双击会缩小像这样       参考GitHub上给出的方法修改成功: no ...