码迷，mamicode.com
首页 > Web开发 > 详细

很牛的js弹出层-artDialog4.1.2

时间：2015-01-06 15:12:29      阅读：195      评论：0      收藏：0      [点我收藏+]

标签：

[转]很牛的js弹出层-artDialog4.1.2

博客分类：
javascript 

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

 

Sharpleo 写道
先让我们看看他提供的几种皮肤吧 
技术分享
技术分享
技术分享
技术分享
技术分享
技术分享
技术分享
技术分享
技术分享
技术分享

功能： 
Java代码  技术分享
  1. 1. 传入字符串  
  2. art.dialog({  
  3.     content: ‘我支持HTML‘  
  4. });  

效果：技术分享

Java代码  技术分享
  1. 2. 传入HTMLElement  
  2. 备注：1、元素不是复制而是完整移动到对话框中，所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框，会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置，style display属性也将恢复  
  3.   
  4. ********************************************************************************************  
  5. 只前这个东东也是朋友完我的，后来经刚刚一位朋友提醒，我google一下，现在完整的教程都在里面，所有包都在里面。  
  6. 我也不好意思，现在补充下。呵呵，因为不算晚吧。  
  7. art.dialog({  
  8.     content: document.getElementById(‘demoCode_content_DOM‘),  
  9.     id: ‘EF893L‘  
  10. });  

效果：把指定的div加载到这个弹框上 
技术分享
Java代码  技术分享
  1. 标题 [title]  
  2. art.dialog({  
  3.     title: ‘hello world!‘  
  4. });  

效果：技术分享
Java代码  技术分享
  1. 确定取消按钮 [ok & cancel]  
  2. 备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭  
  3. art.dialog({  
  4.     content: ‘如果定义了回调函数才会出现相应的按钮‘,  
  5.     ok: function () {  
  6.         this.title(‘3秒后自动关闭‘).time(3);  
  7.         return false;  
  8.     },  
  9.     cancelVal: ‘关闭‘,  
  10.     cancel: true //为true等价于function(){}  
  11. });  

效果：技术分享
Java代码  技术分享
  1. 自定义按钮 [button]  
  2. 备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭；button参数对应的扩展方法名称也是"button"  
  3. art.dialog({  
  4.     id: ‘testID‘,  
  5.     content: ‘hello world!‘,  
  6.     button: [  
  7.         {  
  8.             name: ‘同意‘,  
  9.             callback: function () {  
  10.                 this.content(‘你同意了‘).time(2);  
  11.                 return false;  
  12.             },  
  13.             focus: true  
  14.         },  
  15.         {  
  16.             name: ‘不同意‘,  
  17.             callback: function () {  
  18.                 alert(‘你不同意‘)  
  19.             }  
  20.         },  
  21.         {  
  22.             name: ‘无效按钮‘,  
  23.             disabled: true  
  24.         },  
  25.         {  
  26.             name: ‘关闭我‘  
  27.         }  
  28.     ]  
  29. });  

效果：技术分享
Java代码  技术分享
  1. 定时关闭的消息 [time]  
  2. art.dialog({  
  3.     time: 2,  
  4.     content: ‘两秒后关闭‘  
  5. });  

效果：2秒后关闭这个只有看才看得到效果截图不行 
技术分享
Java代码  技术分享
  1. 定义消息图标 [icon]  
  2. 请查看skin/icons目录下的图标  
  3. art.dialog({  
  4.     icon: ‘succeed‘,  
  5.     content: ‘我可以定义消息图标哦‘  
  6. });  

图标有好几种就拿这个success效果图给大家看下： 
技术分享
Java代码  技术分享
  1. 锁屏 [lock & background & opacity]  
  2. art.dialog({  
  3.     lock: true,  
  4.     background: ‘#600‘, // 背景色  
  5.     opacity: 0.87,  // 透明度  
  6.     content: ‘中断用户在对话框以外的交互，展示重要操作与消息‘,  
  7.     icon: ‘error‘,  
  8.     ok: function () {  
  9.         art.dialog({content: ‘再来一个锁屏‘, lock: true});  
  10.         return false;  
  11.     },  
  12.     cancel: true  
  13. });  

效果：这是个锁屏的你可自定义背景颜色和图标等等一些属性 
技术分享
Java代码  技术分享
  1. 自定义坐标 [left & top]  
  2. art.dialog({  
  3.     left: 100,  
  4.     top: ‘60%‘,  
  5.     content: ‘我改变坐标了‘  
  6. });  

效果：自定义坐标 传X,Y就可以啦 
技术分享
Java代码  技术分享
  1. 创建一个全屏对话框  
  2. art.dialog({  
  3.     width: ‘100%‘,  
  4.     height: ‘100%‘,  
  5.     left: ‘0%‘,  
  6.     top: ‘0%‘,  
  7.     fixed: true,  
  8.     resize: false,  
  9.     drag: false  
  10. })  

技术分享
Java代码  技术分享
  1. 右下角滑动通知  
  2. artDialog.notice = function (options) {  
  3.     var opt = options || {},  
  4.         api, aConfig, hide, wrap, top,  
  5.         duration = 800;  
  6.           
  7.     var config = {  
  8.         id: ‘Notice‘,  
  9.         left: ‘100%‘,  
  10.         top: ‘100%‘,  
  11.         fixed: true,  
  12.         drag: false,  
  13.         resize: false,  
  14.         follow: null,  
  15.         lock: false,  
  16.         init: function(here){  
  17.             api = this;  
  18.             aConfig = api.config;  
  19.             wrap = api.DOM.wrap;  
  20.             top = parseInt(wrap[0].style.top);  
  21.             hide = top + wrap[0].offsetHeight;  
  22.               
  23.             wrap.css(‘top‘, hide + ‘px‘)  
  24.                 .animate({top: top + ‘px‘}, duration, function () {  
  25.                     opt.init && opt.init.call(api, here);  
  26.                 });  
  27.         },  
  28.         close: function(here){  
  29.             wrap.animate({top: hide + ‘px‘}, duration, function () {  
  30.                 opt.close && opt.close.call(this, here);  
  31.                 aConfig.close = $.noop;  
  32.                 api.close();  
  33.             });  
  34.               
  35.             return false;  
  36.         }  
  37.     };    
  38.       
  39.     for (var i in opt) {  
  40.         if (config[i] === undefined) config[i] = opt[i];  
  41.     };  
  42.       
  43.     return artDialog(config);  
  44. };  
  45. 调用示例：  
  46. art.dialog.notice({  
  47.     title: ‘万象网管‘,  
  48.     width: 220,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩  
  49.     content: ‘尊敬的顾客朋友，您IQ卡余额不足10元，请及时充值‘,  
  50.     icon: ‘face-sad‘,  
  51.     time: 5  
  52. });  

效果：模仿网吧右下角通知  带动画效果5秒后自动消失 
技术分享
Java代码  技术分享
  1. 跨域访问  
  2. 跨域访问无法自适应大小，也无法进行父页面与子页面数据交换  
  3. art.dialog.open(‘http://www.connect.renren.com/igadget/renren/index.html‘,  
  4.     {title: ‘人人网‘, width: 320, height: 400});  

效果：技术分享
Java代码  技术分享
  1. 加载googleMAP  
  2. art.dialog.open(‘googleMaps.html‘);  

效果图 
技术分享
技术分享

对啦忘记说啦要换皮肤只要换上下面图片上的css文件名就可以啦 
技术分享


**************************************************************** 
功能太多啦我手软啦 不写啦  直接说怎么用吧 
1.导入<script src="artDialog/artDialog.js?skin=default"></script> 
2.加上 
Java代码  技术分享
  1. (function (config) {  
  2.     config[‘lock‘] = true;  
  3.     config[‘fixed‘] = true;  
  4.     config[‘okVal‘] = ‘Ok‘;  
  5.     config[‘cancelVal‘] = ‘Cancel‘;  
  6.     // [more..]  
  7. })(art.dialog.defaults);//这个是用哪个主题有很多主题的你把名字打上就行啦  



**********************这是googleMap的代码Copy就行啦没有问题有问题给我留言不懂就问只要你问我就说*********************************** 
Java代码  技术分享
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  5.     <style>  
  6. html { height: 100% }  
  7. body { height: 100%; margin: 0; padding: 0; #FFF }  
  8. #map_canvas { height: 100% }  
  9. </style>  
  10.     <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh_CN"></script>  
  11.     <script>   
  12.         var map, geocoder;  
  13.         function initialize() {  
  14.             var latlng = new google.maps.LatLng(39.904214, 116.407413);  
  15.             var options = {  
  16.                 zoom: 11,  
  17.                 center: latlng,  
  18.                 disableDefaultUI: true,  
  19.                 panControl: true,  
  20.                 zoomControl: true,  
  21.                 mapTypeControl: true,  
  22.                 scaleControl: true,  
  23.                 streetViewControl: false,  
  24.                 overviewMapControl: true,  
  25.                 mapTypeId: google.maps.MapTypeId.ROADMAP  
  26.             };  
  27.             map = new google.maps.Map(document.getElementById("map_canvas"), options);  
  28.             geocoder = new google.maps.Geocoder();  
  29.             geocoder.geocode({latLng: latlng}, function(results, status) {  
  30.                 if (status == google.maps.GeocoderStatus.OK) {  
  31.                     if (results[3]) {  
  32.                         document.getElementById("map_address").value = results[3].formatted_address;  
  33.                     }  
  34.                 }  
  35.             });  
  36.               
  37.             var dialog = art.dialog.open.api;  
  38.             dialog.title(‘google mpas‘)  
  39.             .size(558, 360)  
  40.             .button({name: ‘截图‘, callback: function () {  
  41.                 var center = map.getCenter().lat() + ‘,‘ + map.getCenter().lng(),  
  42.                     zoom = map.getZoom(),  
  43.                     maptype = map.getMapTypeId(),  
  44.                     url = ‘http://maps.googleapis.com/maps/api/staticmap‘;  
  45.                     url += ‘?center=‘ + encodeURIComponent(center);  
  46.                     url += ‘&zoom=‘ + encodeURIComponent(zoom);  
  47.                     url += ‘&size=558x360‘;  
  48.                     url += ‘&maptype=‘ + encodeURIComponent(maptype);  
  49.                     url += ‘&markers=‘ + encodeURIComponent(center);  
  50.                     url += ‘&language=zh_CN‘;  
  51.                     url += ‘&sensor=false‘;  
  52.                   
  53.                 art.dialog.through({title: false, content: ‘<img src="‘ + url + ‘" />‘, padding: 0, width: 558, height: 360, lock: true});  
  54.                   
  55.                 return false;  
  56.             }, focus: true})  
  57.             .position(‘50%‘, ‘goldenRatio‘);  
  58.               
  59.             document.getElementById("map-search-sumbit").onclick = function () {  
  60.                 var input = document.getElementById(‘map_address‘);  
  61.                 search(input.value);  
  62.             };  
  63.         }  
  64.         function search(address) {  
  65.             if (!map) return;  
  66.             geocoder.geocode({address : address}, function(results, status) {  
  67.                 if (status == google.maps.GeocoderStatus.OK) {  
  68.                     map.setZoom(11);  
  69.                     map.setCenter(results[0].geometry.location);  
  70.                     var marker = new google.maps.Marker({  
  71.                         map: map,  
  72.                         position: results[0].geometry.location  
  73.                     });  
  74.                 } else {  
  75.                     alert("Invalid address: " + address);  
  76.                 }  
  77.             });  
  78.         }  
  79.     </script>  
  80.     </head>  
  81.     <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;">  
  82.     <div style="width:100%; height:100%">  
  83.       <table style="width:100%;height:100%;">  
  84.         <tr>  
  85.           <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>  
  86.         </tr>  
  87.         <tr>  
  88.           <td style="height:100%"><div id="map_canvas" style="height:100%; margin:0 5px"></div></td>  
  89.         </tr>  
  90.       </table>  
  91.     </div>  
  92. </body>  
  93. </html>  

很牛的js弹出层-artDialog4.1.2

标签：

原文地址：http://www.cnblogs.com/lk516924/p/4205858.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！