AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.csdn.net/download/cometwo/9437895）

2016-02-23 3654
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层支撑，采用Native JavaScript编写，完全独立于PC版的layer，您需要按照场景选择使用。 官方地址：http://layer.layui.com/mobile/ 下载地址：http://download.csdn.net/detail/cometwo/9441001

这里写图片描述
这里写图片描述

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta http-equiv="refresh" content="100">
        <title>手机</title>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <link rel="stylesheet" href="css/layer.css" />
        <script type="text/javascript" src="js/fastclick.js"></script>
        <script type="text/javascript" src="js/layer.js"></script>
        <style type="text/css">
            input {
                width: auto;
                padding: 10px;
                line-height: 20px;
                background: red;
                border: 1px solid blue;
                margin: 10px;

            }
        </style>
        <script type="text/javascript">
            FastClick.attach(document.body);
            $(function() {
                $('.btn1').click(function() {
                    layer.open({
                        content: '您好',
                        anim: true,
                        time: 2 //2秒后自动关闭
                    });
                });
                $('.btn2').click(function() {
                    layer.open({
                        content: '通过style设置你想要的样式',
                        style: 'background-color:#09C1FF; color:#fff; border:none;margin: 0px;',
                        time: 2
                    });
                });
                $('.btn3').click(function() {
                    layer.open({
                        title: [
                            '我是标题',
                            'background-color:#fff; color:#000;'
                        ],
                        cancel: function() {
                            layer.open({
                                content: '你点了x',
                                time: 1
                            });
                        },
                        btn: ['确认', '取消'],
                        shadeClose: false, //默认：true，是否点击遮罩时关闭层
                        yes: function() {
                            layer.open({
                                content: '你点了确认',
                                time: 1
                            });
                        },
                        no: function() {
                            layer.open({
                                content: '你选择了取消',
                                time: 1
                            });
                        },
                        content: '标题风格任你定义。。'
                    });
                });
                $('.btn4').click(function() {
                    layer.open({
                        //                      title: [
                        //                          '我是标题',
                        //                          'background-color:#8DCE16; color:#fff;'
                        //                      ],
                        content: '通过style设置你想要的样式',
                        btn: ['OK']
                    });
                });
                $('.btn5').click(function() {
                    layer.open({
                        content: '你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？',
                        btn: ['确认', '取消'],
                        shadeClose: false, //默认：true，是否点击遮罩时关闭层
                        yes: function() {
                            layer.open({
                                content: '你点了确认',
                                time: 1
                            });
                        },
                        no: function() {
                            layer.open({
                                content: '你选择了取消',
                                time: 1
                            });
                        }
                    });
                });
                $('.btn6').click(function() {
                    layer.open({
                        title: '信息',
                        content: '移动版和PC版不能同时使用在同一页面。'
                    });
                });
                $('.btn7').click(function() {
                    layer.open({
                        title: '提示',
                        content: '您确定要刷新一下本页面吗？',
                        btn: ['嗯', '不要'],
                        yes: function(index) {
                            location.reload();
                            layer.close(index);
                        }
                    });
                });
                $('.btn8').click(function() {
                    layer.open({
                        type: 1,
                        content: '<img src="img/layer-mobile.png">'
                    })
                });
                $('.btn9').click(function() {
                    layer.open({
                        type: 1,
                        content: '可传入任何内容，支持html。一般用于手机页面中',
                        anim: 0,
                        style: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 30px; border:none;color:red'
                    });
                });
                $('.btn10').click(function() {
                    layer.open({
                        type: 2
                            //,shade: false
                            ,
                        time: 5
                            //,content: '加载测试中…'
                    });
                });
            })
        </script>
    </head>


    <body>
        <input type="button" class="btn1" value="弹出框1" />
        <input type="button" class="btn2" value="弹出框2" />
        <input type="button" class="btn3" value="弹出框3" />
        <input type="button" class="btn4" value="弹出框4" />
        <input type="button" class="btn5" value="弹出框5" />
        <input type="button" class="btn6" value="信息框" />
        <input type="button" class="btn7" value="询问框" />
        <input type="button" class="btn8" value="二维码" />
        <input type="button" class="btn9" value="页面层" />
        <input type="button" class="btn10" value="加载条" />
    </body>


</html>


<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta http-equiv="refresh" content="100">
        <title>手机</title>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <link rel="stylesheet" href="css/layer.css" />
        <script type="text/javascript" src="js/fastclick.js"></script>
        <script type="text/javascript" src="js/layer.js"></script>
        <style type="text/css">
            input {
                width: auto;
                padding: 10px;
                line-height: 20px;
                background: red;
                border: 1px solid blue;
                margin: 10px;

            }
        </style>
        <script type="text/javascript">
            FastClick.attach(document.body);
            $(function() {
                $('.btn1').click(function() {
                    layer.open({
                        content: '您好',
                        anim: true,
                        time: 2 //2秒后自动关闭
                    });
                });
                $('.btn2').click(function() {
                    layer.open({
                        content: '通过style设置你想要的样式',
                        style: 'background-color:#09C1FF; color:#fff; border:none;margin: 0px;',
                        time: 2
                    });
                });
                $('.btn3').click(function() {
                    layer.open({
                        title: [
                            '我是标题',
                            'background-color:#fff; color:#000;'
                        ],
                        cancel: function() {
                            layer.open({
                                content: '你点了x',
                                time: 1
                            });
                        },
                        btn: ['确认', '取消'],
                        shadeClose: false, //默认：true，是否点击遮罩时关闭层
                        yes: function() {
                            layer.open({
                                content: '你点了确认',
                                time: 1
                            });
                        },
                        no: function() {
                            layer.open({
                                content: '你选择了取消',
                                time: 1
                            });
                        },
                        content: '标题风格任你定义。。'
                    });
                });
                $('.btn4').click(function() {
                    layer.open({
                        //                      title: [
                        //                          '我是标题',
                        //                          'background-color:#8DCE16; color:#fff;'
                        //                      ],
                        content: '通过style设置你想要的样式',
                        btn: ['OK']
                    });
                });
                $('.btn5').click(function() {
                    layer.open({
                        content: '你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？',
                        btn: ['确认', '取消'],
                        shadeClose: false, //默认：true，是否点击遮罩时关闭层
                        yes: function() {
                            layer.open({
                                content: '你点了确认',
                                time: 1
                            });
                        },
                        no: function() {
                            layer.open({
                                content: '你选择了取消',
                                time: 1
                            });
                        }
                    });
                });
                $('.btn6').click(function() {
                    layer.open({
                        title: '信息',
                        content: '移动版和PC版不能同时使用在同一页面。'
                    });
                });
                $('.btn7').click(function() {
                    layer.open({
                        title: '提示',
                        content: '您确定要刷新一下本页面吗？',
                        btn: ['嗯', '不要'],
                        yes: function(index) {
                            location.reload();
                            layer.close(index);
                        }
                    });
                });
                $('.btn8').click(function() {
                    layer.open({
                        type: 1,
                        content: '<img src="img/layer-mobile.png">'
                    })
                });
                $('.btn9').click(function() {
                    layer.open({
                        type: 1,
                        content: '可传入任何内容，支持html。一般用于手机页面中',
                        anim: 0,
                        style: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 30px; border:none;color:red'
                    });
                });
                $('.btn10').click(function() {
                    layer.open({
                        type: 2
                            //,shade: false
                            ,
                        time: 5
                            //,content: '加载测试中…'
                    });
                });
            })
        </script>
    </head>


    <body>
        <input type="button" class="btn1" value="弹出框1" />
        <input type="button" class="btn2" value="弹出框2" />
        <input type="button" class="btn3" value="弹出框3" />
        <input type="button" class="btn4" value="弹出框4" />
        <input type="button" class="btn5" value="弹出框5" />
        <input type="button" class="btn6" value="信息框" />
        <input type="button" class="btn7" value="询问框" />
        <input type="button" class="btn8" value="二维码" />
        <input type="button" class="btn9" value="页面层" />
        <input type="button" class="btn10" value="加载条" />
    </body>


</html>
文章标签：
JavaScript
前端开发
Android开发
关键词：
HTTP .net
手机pc端
pc端HTTP
mobile手机
layer .NET
cometwo123
目录
相关文章
极客小俊
|
存储 Android开发 iOS开发
【保姆级教程】 全网最强HTTP+Fiddler抓包实战超级全面图文教程 《Fiddler 苹果IOS 数据抓包---ios手机设置网络代理》
Fiddler使用教程完全详解
极客小俊
224 0
【保姆级教程】 全网最强HTTP+Fiddler抓包实战超级全面图文教程 《Fiddler 苹果IOS 数据抓包---ios手机设置网络代理》
w风雨无阻w
|
API Android开发 数据安全/隐私保护
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
w风雨无阻w
1013 0
sumith
|
7月前
Burpsuite系列 -- (PC端、手机端)抓包配置
Burpsuite系列 -- (PC端、手机端)抓包配置
sumith
306 0
奔跑的数据
|
4月前
|
数据采集 JSON API
异步方法与HTTP请求：.NET中提高响应速度的实用技巧
本文探讨了在.NET环境下，如何通过异步方法和HTTP请求提高Web爬虫的响应速度和数据抓取效率。介绍了使用HttpClient结合async和await关键字实现异步HTTP请求，避免阻塞主线程，并通过设置代理IP、user-agent和cookie来优化爬虫性能。提供了代码示例，演示了如何集成这些技术以绕过目标网站的反爬机制，实现高效的数据抓取。最后，通过实例展示了如何应用这些技术获取API的JSON数据，强调了这些方法在提升爬虫性能和可靠性方面的重要性。
奔跑的数据
65 1
异步方法与HTTP请求：.NET中提高响应速度的实用技巧
蓝色流星1000
|
4月前
|
Java Android开发 UED
安卓scheme_url调端：如果手机上多个app都注册了 http或者https 的 intent。 调端的时候，调起哪个app呢？
当多个Android应用注册了相同的URL Scheme（如http或https）时，系统会在尝试打开这类链接时展示一个选择对话框，让用户挑选偏好应用。若用户选择“始终”使用某个应用，则后续相同链接将直接由该应用处理，无需再次选择。本文以App A与App B为例，展示了如何在`AndroidManifest.xml`中配置对http与https的支持，并提供了从其他应用发起调用的示例代码。此外，还讨论了如何在系统设置中管理这些默认应用选择，以及建议开发者为避免冲突应注册更独特的Scheme。
蓝色流星1000
170 0
爱你三千遍斯塔克
|
5月前
|
SQL NoSQL 关系型数据库
若依修改02，若以提供了多种版本，RuoYi-Cloud和SpringBoot+Vue都是PC端的，如果想要适配手机端,用Uniapp+vue，导入Mysql和启动Redis
若依修改02，若以提供了多种版本，RuoYi-Cloud和SpringBoot+Vue都是PC端的，如果想要适配手机端,用Uniapp+vue，导入Mysql和启动Redis
爱你三千遍斯塔克
174 0
爱你三千遍斯塔克
|
5月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器，国内的UC都是根据Webkit修改过来的内核，开发重点关注尺寸，常见移动端尺寸汇总，移动端，理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器，国内的UC都是根据Webkit修改过来的内核，开发重点关注尺寸，常见移动端尺寸汇总，移动端，理想视口根据你设别的样式进行修改
爱你三千遍斯塔克
47 0
G佳伟
|
6月前
|
缓存
去除discuz手机版链接&mobile=2后缀
去除discuz手机版链接&mobile=2后缀
G佳伟
49 0
青玉白露
|
7月前
|
存储 网络协议 Go
7天玩转 Golang 标准库之 http/net
7天玩转 Golang 标准库之 http/net
青玉白露
61 2
长梦
|
7月前
|
JSON 编解码 Go
Golang深入浅出之-HTTP客户端编程：使用net/http包发起请求
【4月更文挑战第25天】Go语言`net/http`包提供HTTP客户端和服务器功能，简化高性能网络应用开发。本文探讨如何发起HTTP请求，常见问题及解决策略。示例展示GET和POST请求的实现。注意响应体关闭、错误处理、内容类型设置、超时管理和并发控制。最佳实践包括重用`http.Client`，使用`context.Context`，处理JSON以及记录错误日志。通过实践这些技巧，提升HTTP编程技能。
长梦
79 1

热门文章

最新文章

  • 1
    十步教你ASP“.NET研究”.NET MVC2项目升级MVC 3 RC
  • 2
    .Net单元测试业务实践
  • 3
    译】使用自定义ViewHelper来简化Asp.net MVC view的开发------part4
  • 4
    ASP.NET MVC路由(三)
  • 5
    ASP.NET MVC5+EF6+EasyUI 后台管理系统（58）-DAL层重构
  • 6
    asp.net IE下div背景图片100%拉伸填充，可以缩放
  • 7
    一起谈.NET技术，ASP.NET MVC 入门介绍 (下)
  • 8
    .NET简谈组件程序设计之(初识远程调用)
  • 9
    乱想-ASP.NET 整个生命周期（含IIS处理）
  • 10
    Asp.net Mvc Framework 五 (向View传值以及Redirect)
  • 1
    socket，tcp，http三者之间的原理和区别
    62
  • 2
    Linux命令发送http
    103
  • 3
    http-server实现本地服务器
    113
  • 4
    干货｜代理IP协议有何区别？深入了解 SOCKS5、HTTP 代理
    66
  • 5
    干货｜代理IP协议有何区别？深入了解 SOCKS5、HTTP 代理
    322
  • 6
    对于Android的http请求的容错管理
    35
  • 7
    android通过http上传文件，服务器端用php写(原创)
    66
  • 8
    Java中如何通过代理实现对HTTP2网站的访问？
    92
  • 9
    常见的http状态码
    41
  • 10
    nginx 302 301 设置 url 转跳 nginx 资源重定向 nginx tcp 和 http 转发
    213

    • 相关课程

    更多
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应
  • 云安全基础课- HTTP协议基础

    • 相关电子书

    更多
  • Tangram
  • 360手机卫士 插件化漫谈
  • 手机京东Crash自动分析处理系统

    • 相关实验场景

    更多
  • 通过轻量消息队列（原MNS）主题HTTP订阅+ARMS实现自定义数据多渠道告警
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月