layer层、modal模拟窗 单独测试页面
layer_test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开始使用layer——单独的测试页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<input type="button" value="弹出一个提示层" id="test2"> <script src="static/js/jquery-1.10.1.min.js"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="static/layer-v3.1.1/layer/layer.js"></script>
<script>
//弹出一个提示层
$('#test1').on('click', function(){
layer.msg('hello');
}); //弹出一个页面层
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '\<\div style="padding:20px;">自定义内容\<\/div>'
});
}); //弹出一个iframe层
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe父子操作',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['800px' , '520px'],
content: 'test/iframe.html'
});
}); //弹出一个loading层
$('#test4').on('click', function(){
var ii = layer.load();
//此处用setTimeout演示ajax的回调
setTimeout(function(){
layer.close(ii);
}, 1000);
}); //弹出一个tips层
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
});
</script>
</body>
</html>
bootstrap_model_test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开始使用Bootstrap创建modal模态框——单独的测试页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="static/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h2>使用Bootstrap创建modal模态框</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>这是一个模态框标题</h3>
</div>
<div class="modal-body">
<h4>模态框中的文本</h4>
<p>你可以在这添加一些文本。</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">唤醒活动</a>
<a href="#" class="btn" data-dismiss="modal">关闭</a>
</div>
</div>
<!-- 这里是自动绑定的事件 -->
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">发动演示模态框</a></p>
</div>
<input type="button" id="test" value="示模态框"> <script src="static/js/jquery-1.10.1.min.js"></script><!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="static/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script>
//手动执行
$("#test").click(function(){
//example和<div id="example"对应
$('#example').modal('show');
});
</script>
</body>
</html>
layer层、modal模拟窗 单独测试页面的更多相关文章
- charles_02_模拟弱网测试
前言 用户使用app的场景是多变的,不一定稳定在WiFi或者4G网络下.大多数用户会在地铁.电梯等弱网情况下使用app,这些弱网情况下app常会出现一些数据丢失.闪退.页面展示不友好等情况.在测试过程 ...
- robotframework_如何用Chrome模拟手机打开H5页面
由于公司目前的产品大部分都是APP端的H5页面,APP原生页面很少,测试H5页面如果去搭建appium或者macaca这类自动化平台太费时,太重而不能快速落地:与自动化的目标:提高测试效率相悖.但如果 ...
- 模拟SWPU邮件登录页面
模拟SWPU邮件登录页面设计流程 一.开发工具准备 本次开发该页面时使用的开发工具为vscode—— 在下载安装完成后,需要下载各类插件——如汉化.通过浏览器打开网页插件等. 二.开发过程 首先,打开 ...
- 如果layer层在iframe下不居中滚动
需要在layer前面加上parent.layer. 2.运用layer层的步骤: 1.引入1.8版本以上的jquery文件 <script type="text/javascript& ...
- 第一个Leap Motion测试页面 (webgl/three/leapjs/leap)
div#canvas-frame{ border: none; cursor: pointer; width: 100%; height: 800px; background-color: #EEEE ...
- 让Jayrock插上翅膀(加入输入输出参数注释,测试页面有注释,下拉框可以搜索)
继上一篇文章介绍了Jayrock组件开发接口的具体步骤和优缺点之后,今天给大家带来的就是,如何修复这些缺点. 首先来回顾一下修复的缺点有哪些: 1.每个接口的只能写大概的注释,不能分开来写,如接口的主 ...
- django 单独测试模块
今天单独测试django的一个views文件,出现错误import的模块没有定义,这个模块是在django项目中自己编写的,解决办法: 1../manage.py shell 通过命令行进去加载,再执 ...
- 模拟post请求-->测试api是否可用-->再交给ios开发
提交给iso开发前.先模拟post提交,测试返回是否正确 =============post.php文件 ios每次最少要提交5个数据, 加密串 seqno , 请求验证码 source, 设备唯一标 ...
- 测试页面,页面里边一次加载50张不同的图片,每张5M以上,查看浏览器的内存使用情况
测试页面 1.需要你写个测试页面,页面里边一次加载50张不同的图片,每张5M,查看浏览器的内存使用情况 2.可以10张 递增的方式测试 3.图片需要缩放,比如所有图片缩放成600*800的比例 目的 ...
随机推荐
- oracle中常见的查询操作
普通查询:select * from t; 去除重复值:select distinct f1,f2 from t; between用法:select * from t where f1 not/bet ...
- RobotFramework测试问题二:各种元素不能定位问题
各种元素不能定位问题 一.元素定位 A. Click Element + xpath B. Click Element + contains C. Execute Javascript + getEl ...
- QC内部分享ppt
Quality Center是一个基于Web的测试管理工具,可以组织和管理应用程序测试流程的所有阶段,包括制定测试需求.计划测试.执行测试和跟踪缺陷.此外,通过Quality Center还可以创建报 ...
- PowerShell 连接远程服务器
>>服务端Enable-PSRemoting winrm quickconfig ————这个可能不需要 >>客户端Set-Item wsman:\localhost\Clie ...
- C#中List的方法RemoveAt小测试
结论:在C#中将一个List中的项插入到别一个List中,会复制,而不是从源List中移除. 示例如下 void Start () { TestList (); } void TestList () ...
- 判断 php 程序是通过什么方式运行的 (浏览器,还是命令行)
php 程序既可以通过浏览器来访问(一般是 apache.nginx等服务器), 也可以通过命令行来直接运行(cli 执行) 如果需要判断 当前程序是以何种方式来执行,应该怎样判断呢,使用:php_s ...
- 进程间通信IPC-信号量
semget semget函数创建一个新的信号量或是获得一个已存在的信号量键值. int semget(key_t key, int num_sems, int sem_flags); 第一个参数k ...
- [JZOJ5837] Omeed
Description Solution 有两种做法 一种是线段树维护一次方程系数,一种是线段树维护矩阵 准备都写一写 维护系数 首先把式子推出来 \[CS=B\times \sum\limits_{ ...
- JVM笔记——编译期的优化
一.编译过程 解析和填充符号表的过程 插入注解处理器的注解处理过程 语义分析与字节码生成过程 二.解析和填充符号表 解析包含两个过程:词法分析和语法分析 (一)词法分析 将源代码的字符流转变成标记(T ...
- H5实现魔方游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...