`

JS 弹出框 (jquery 弹出层)

 
阅读更多

几种皮肤式样

 

 

 

 

 

功能:

//1. 传入字符串
art.dialog({
    content: '我支持HTML'
});
 

效果:

 

 

/*2. 传入HTMLElement
备注:1、元素不是复制而是完整移动到对话框中,所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框,会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置,style display属性也将恢复
*/
art.dialog({
    content: document.getElementById('demoCode_content_DOM'),
    id: 'EF893L'
});

 效果:把指定的div加载到这个弹框上

 

 

//标题 [title]
art.dialog({
    title: 'hello world!'
});

  效果:

 

 

/*确定取消按钮 [ok & cancel]
备注:回调函数this指向扩展接口,如果返回false将阻止对话框关闭*/
art.dialog({
    content: '如果定义了回调函数才会出现相应的按钮',
    ok: function () {
    	this.title('3秒后自动关闭').time(3);
        return false;
    },
    cancelVal: '关闭',
    cancel: true //为true等价于function(){}
});
 

  效果:

 

/*自定义按钮 [button]
备注:回调函数this指向扩展接口,如果返回false将阻止对话框关闭;button参数对应的扩展方法名称也是"button"*/
art.dialog({
    id: 'testID',
    content: 'hello world!',
    button: [
        {
            name: '同意',
            callback: function () {
                this.content('你同意了').time(2);
                return false;
            },
            focus: true
        },
        {
            name: '不同意',
            callback: function () {
                alert('你不同意')
            }
        },
        {
            name: '无效按钮',
            disabled: true
        },
        {
            name: '关闭我'
        }
    ]
});

    效果:  

 

//定时关闭的消息 [time]
art.dialog({
    time: 2,
    content: '两秒后关闭'
});
 

  效果:  

 

 

/*定义消息图标 [icon]
请查看skin/icons目录下的图标*/
art.dialog({
    icon: 'succeed',
    content: '我可以定义消息图标哦'
});
 

 

  效果:

 

 

//锁屏 [lock & background & opacity]
art.dialog({
    lock: true,
    background: '#600', // 背景色
    opacity: 0.87,	// 透明度
    content: '中断用户在对话框以外的交互,展示重要操作与消息',
    icon: 'error',
    ok: function () {
        art.dialog({content: '再来一个锁屏', lock: true});
        return false;
    },
    cancel: true
});
 

 

  效果: 这是个锁屏的你可自定义背景颜色和图标等等一些属性

 

 

//自定义坐标 [left & top]
art.dialog({
    left: 100,
    top: '60%',
    content: '我改变坐标了'
});
 

  效果:

 

//创建一个全屏对话框
art.dialog({
    width: '100%',
    height: '100%',
    left: '0%',
    top: '0%',
    fixed: true,
    resize: false,
    drag: false
})

 效果:

 

//右下角滑动通知
artDialog.notice = function (options) {
    var opt = options || {},
        api, aConfig, hide, wrap, top,
        duration = 800;
        
    var config = {
        id: 'Notice',
        left: '100%',
        top: '100%',
        fixed: true,
        drag: false,
        resize: false,
        follow: null,
        lock: false,
        init: function(here){
            api = this;
            aConfig = api.config;
            wrap = api.DOM.wrap;
            top = parseInt(wrap[0].style.top);
            hide = top + wrap[0].offsetHeight;
            
            wrap.css('top', hide + 'px')
                .animate({top: top + 'px'}, duration, function () {
                    opt.init && opt.init.call(api, here);
                });
        },
        close: function(here){
            wrap.animate({top: hide + 'px'}, duration, function () {
                opt.close && opt.close.call(this, here);
                aConfig.close = $.noop;
                api.close();
            });
            
            return false;
        }
    };	
    
    for (var i in opt) {
        if (config[i] === undefined) config[i] = opt[i];
    };
    
    return artDialog(config);
};
//调用示例:
art.dialog.notice({
    title: '万象网管',
    width: 220,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能//导致artDialog收缩
    content: '尊敬的顾客朋友,您IQ卡余额不足10元,请及时充值',
    icon: 'face-sad',
    time: 5
});

 

 

 

//跨域访问
//跨域访问无法自适应大小,也无法进行父页面与子页面数据交换
art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html',
    {title: '人人网', width: 320, height: 400});

 

 

 

//加载googleMAP
art.dialog.open('googleMaps.html');
 

 

 

 

换皮肤只要换上下面图片上的css文件名就可以

 


****************************************************************
用法
1.导入

<script src="artDialog/artDialog.js?skin=default"></script>

2.加上

(function (config) {
    config['lock'] = true;
    config['fixed'] = true;
    config['okVal'] = 'Ok';
    config['cancelVal'] = 'Cancel';
    // [more..]
})(art.dialog.defaults);//这个是用哪个主题有很多主题的你把名字打上就行啦

 

googleMap的代码

<!doctype html>
<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; background-color: #FFF }
#map_canvas { height: 100% }
</style>
	<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh_CN"></script>
	<script> 
		var map, geocoder;
		function initialize() {
			var latlng = new google.maps.LatLng(39.904214, 116.407413);
			var options = {
				zoom: 11,
				center: latlng,
				disableDefaultUI: true,
				panControl: true,
				zoomControl: true,
				mapTypeControl: true,
				scaleControl: true,
				streetViewControl: false,
				overviewMapControl: true,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map(document.getElementById("map_canvas"), options);
			geocoder = new google.maps.Geocoder();
			geocoder.geocode({latLng: latlng}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (results[3]) {
						document.getElementById("map_address").value = results[3].formatted_address;
					}
				}
			});
			
			var dialog = art.dialog.open.api;
			dialog.title('google mpas')
			.size(558, 360)
			.button({name: '截图', callback: function () {
				var center = map.getCenter().lat() + ',' + map.getCenter().lng(),
					zoom = map.getZoom(),
					maptype = map.getMapTypeId(),
					url = 'http://maps.googleapis.com/maps/api/staticmap';
					url += '?center=' + encodeURIComponent(center);
					url += '&zoom=' + encodeURIComponent(zoom);
					url += '&size=558x360';
					url += '&maptype=' + encodeURIComponent(maptype);
					url += '&markers=' + encodeURIComponent(center);
					url += '&language=zh_CN';
					url += '&sensor=false';
				
				art.dialog.through({title: false, content: '<img src="' + url + '" />', padding: 0, width: 558, height: 360, lock: true});
				
				return false;
			}, focus: true})
			.position('50%', 'goldenRatio');
			
			document.getElementById("map-search-sumbit").onclick = function () {
				var input = document.getElementById('map_address');
				search(input.value);
			};
		}
		function search(address) {
			if (!map) return;
			geocoder.geocode({address : address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setZoom(11);
					map.setCenter(results[0].geometry.location);
					var marker = new google.maps.Marker({
						map: map,
						position: results[0].geometry.location
					});
				} else {
					alert("Invalid address: " + address);
				}
			});
		}
	</script>
	</head>
	<body onLoad="initialize();" style="font: 12px/1.11 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial;">
    <div style="width:100%; height:100%">
      <table style="width:100%;height:100%;">
        <tr>
          <td style="height:38px"><div style="margin:5px;">地址:  <input id="map_address"  value="" style="width:200px; padding:4px;"> <button id="map-search-sumbit">搜 索</button></div></td>
        </tr>
        <tr>
          <td style="height:100%"><div id="map_canvas" style="height:100%; margin:0 5px"></div></td>
        </tr>
      </table>
    </div>
</body>
</html>
 

 

http://www.iteye.com/topic/1117866

 

 

 

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    dnSpy-net-win32-222.zip

    dnSpy-net-win32-222.zip

    和美乡村城乡融合发展数字化解决方案.docx

    和美乡村城乡融合发展数字化解决方案.docx

    如何看待“适度宽松”的货币政策.pdf

    如何看待“适度宽松”的货币政策.pdf

    C#连接sap NCO组件 X64版

    NCO 3.0.18 64位

    法码滋.exe法码滋2.exe法码滋3.exe

    法码滋.exe法码滋2.exe法码滋3.exe

    基于MATLAB的导航科学计算库

    * GPS IMU经典15维ESKF松组合 * VRU/AHRS姿态融合算法 * 捷联惯导速度位置姿态解算例子 * UWB IMU紧组合融合 * 每个例子自带数据集

    毕业设计Jupyter Notebook基于深度网络的垃圾识别与分类算法研究项目源代码,用PyTorch框架中的transforms方法对数据进行预处理操作,后经过多次调参实验,对比不同模型分类效果

    在现代社会生活与生产活动下,不可避免的会产生巨量且多样的垃圾。我国的人口和经济总量均位居世界前列,因此,必然面临着庞大数量的垃圾处理的难题。如何通过人工智能来对垃圾进行有效分类,成为当前备受关注的研究热点。本文为展开基于深度网络的垃圾识别与分类算法研究,先使用PyTorch框架中的transforms方法对数据进行预处理操作,后经过多次调参实验,对比朴素贝叶斯模型、Keras卷积神经网络模型、ResNeXt101模型的垃圾分类效果。确定最佳分类模型是ResNeXt101,该模型在GPU环境下的分类准确率达到了94.7%。最后利用postman软件来测试API接口,完成图片的在线预测。在微信开发者工具的基础上,利用一些天行数据的垃圾分类的API接口再结合最佳模型的API接口,开发出了一个垃圾分类微信小程序。本文的研究内容丰富和完善了垃圾图像分类的相关研究,也为后续的研究提供了一定的参考价值。

    C#上位机开发与工控通讯实战课程

    一、上位机简介   在单片机项目开发中,上位机也是一个很重要的部分,主要用于数据显示(波形、温度等)、用户控制(LED,继电器等),下位机(单片机)与 上位机之间要进行数据通信的两种方式都是基于串口的: USB转串口 —— 上位机和下位机通过USB转串口连接线直接相连进行数据交互 串口转WIFI(ESP8266)—— 上位机和下位机基于TCP/IP协议通过以太网或者WIFI传输数据 串口转蓝牙(HC-06)—— 不多用,暂不介绍   Windows上位机(EXE可执行程序),最早用VB语言开发,后来由于C++的发展,采用MFC开发,近几年,微软发布了基于.NET框架的面向对象语言C#,更加稳定安全,再配合微软强大的VS进行开发,效率奇高。   本文使用Visual Studio 2022作为开发环境,上位机开发主要有WPF框架与Winform框架,他们都是基于.NET框架 WPF需要C/S基础,使用XAML来构建应用UI,界面比较美观,但是内存开销大 Winform可以使用窗口控件来构建应用,比较简单易学 二、开发环境设置 1. 安装Visual Studio 首先,确保你已经

    course_s4_ALINX_ZYNQ_MPSoC开发平台Linux驱动教程V1.04.pdf

    course_s4_ALINX_ZYNQ_MPSoC开发平台Linux驱动教程V1.04.pdf

    基于JavaWeb的毕业季旅游一站式定制服务平台_88z1j4jp_208-wx-(1).zip

    基于JavaWeb的毕业季旅游一站式定制服务平台_88z1j4jp_208-wx-(1).zip

    数据恢复软件 Apeaksoft Data Recovery for Mac v1.6.16

    Apeaksoft Data Recovery for Mac v1.6.16

    cms测试练习项目(linux系统部署)

    cms测试练习项目(linux系统部署),可以用来进行python的测试练手项目

    大学录取结果数据集,大学录取结果分析数据,大学录取因素分析

    数据集简介:大学录取结果分析 概述 大学录取结果数据集包含了有关大学录取过程的信息,包括关键变量,可用于分析不同学术因素与申请者是否被录取之间的关系。该数据集非常适合进行探索性数据分析、训练预测模型以及研究影响录取决策的因素。 数据集列描述 admit:指示申请者是否被录取(1=被录取,0=未录取)。 paes:申请者在高等教育能力测试(PAES)中获得的分数。 nem:中学教育成绩平均分,评分范围从1.0到7.0。 rank:申请者在其班级中的排名,数值越低表示排名越好。 数据集目的 本数据集旨在让用户探索学术指标(如PAES分数、GPA和排名)与大学录取成功率之间的关系。这可以用于: 开发预测模型:基于学术表现预测录取可能性。 识别趋势:找出影响录取的关键学术因素。 生成可视化图表:理解分数分布及录取结果的关系。 数据集规模 记录数:1813条。 列数:5列。

    STM32F427+rtthread下的bootload 网口(webclient)+串口(ymodem)传输,代码无质量,谨慎使用

    STM32F427+rtthread下的bootload 网口(webclient)+串口(ymodem)传输,代码无质量,谨慎使用

    电影院购票-JAVA-基于springBoot的电影院购票系统设计与实现(毕业论文)

    1. 用户管理功能 用户注册与登录:用户可以通过手机号、邮箱等方式注册账户,并且可以通过账号登录系统进行购票、查看历史订单等操作。 个人信息管理:用户可以查看和修改个人信息(如姓名、手机号、邮箱等),并进行密码重置等操作。 实名认证:部分电影院购票系统要求用户进行实名认证,确保用户身份的真实性。 2. 电影信息展示功能 电影排片查询:用户可以查看当前和未来一段时间内的电影排片表,包括电影名称、上映时间、影片时长、类型、导演、演员等详细信息。 电影详情页:点击具体电影后,用户可以查看电影的详细信息,如剧情介绍、影评、评分、预告片等内容。 电影评分与评论:用户可以查看其他观众的评分和评论,也可以对已观看的电影进行评分和评论。 3. 座位选择与预定功能 影厅座位图:系统展示每场次的影厅座位图,用户可以通过座位图查看当前座位的状态(如可选、已选、已售出、VIP座位等)。 座位选择:用户可以选择自己喜欢的座位,系统会实时更新座位的可用状态,避免重复选择。 座位偏好设置:用户可以设置自己的座位偏好,如选择前排、中排或后排,靠窗或靠过道等。 4. 电影票购买与支付功能 票价展示:系统会展示每个座位的

    Bukkit-BETA1.8.1服务端核心

    Bukkit-BETA1.8.1服务端核心

    快速排序在Go中的高效实现与应用

    内容概要:本文详细介绍了快速排序算法的原理和在Go语言中的高效实现方法。首先解释了快速排序的基本思想和实现步骤,接着提供了Go语言中实现快速排序的核心代码,并讨论了性能优化策略。最后,通过具体的应用场景实例,展示了快速排序在实际项目中的高效应用。 适合人群:具备一定编程基础,特别是对Go语言感兴趣的开发人员。 使用场景及目标:①理解快速排序算法的基本原理和分治策略;②学习如何在Go语言中高效实现快速排序;③掌握快速排序在实际项目中的应用实例。 阅读建议:本文不仅详细讲解了快速排序的原理,还提供了具体的实现代码和优化策略,建议读者在阅读过程中尝试实现和调试代码,以便更好地理解和掌握相关知识点。

    java毕设项目之学生社团管理系统+vue(完整前后端+说明文档+mysql+lw).zip

    项目包含完整前后端源码和数据库文件,均测试可正常运行 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 部署容器:tomcat7

    NSMethodNotImplementedException如何解决.md

    NSMethodNotImplementedException如何解决

    计算机接口实验报告.zip

    计算机接口实验报告,环境:PC 机一台,TD-PITE 实验装置一套。报告内容有,实验目的、实验设备、实验内容、实验步骤、实验程序(汇编)、实验结果、实验总结,一步到位!!!!!! 一步到位!!!!!!

Global site tag (gtag.js) - Google Analytics