程序博客网 > 淘宝网汽车用品超市

弹出层-非jquery

来源：互联网 发布：淘宝网汽车用品超市 编辑：程序博客网 时间：2024/05/16 19:08

 转自http://www.iteye.com/topic/1117866 本人备忘 感谢原作

 

[img][/img]先让我们看看他提供的几种皮肤吧











功能：
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; background-color: #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 和 css在附件里googlemap代码我粘贴出来啦记得COpy祝你好运
  • artDialog4.1.2.zip (608.3 KB)
  • 下载次数: 122
淘宝网汽车用品超市 淘宝网汽车用品超市
原创粉丝点击
热门IT博客
java linux创建文件夹java linux创建文件夹
手机怎么管理淘宝店铺手机怎么管理淘宝店铺
打开的软件关不掉
时时彩源码出售wlyxck
mac os x10.10
不合格品的数据分析
联通手机电视软件
好学近乎知翻译
听古典音乐的软件
apache cgi
sql端口1433
c语言输出菱形
中国移动大数据平台
mysql删除表中记录
ip网络功放怎么使用
excel中多列数据对比
家装软件
淘宝购物车误删除
阿里云 http服务器
乐视网络电视哪个好
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 儿童纸盘画图案 创意纸盘画的图片 纸盘鱼 教师纸盘画图片获奖作品图片 纸盘手工图片 纸盘鱼图片 纸盘花朵手工图片 纸盘作品 纸盘手工制作 餐巾纸盘纸生产厂家 餐巾纸盘纸厂家 纸盘手工制作大全 一次性纸盘手工制作 纸盘花 白色纸盘 垫盘纸 一次性纸盘手工 纸盘娃娃 载带纸盘 一次性纸盘青花瓷 用纸盘做手工 烤盘垫纸 手工制作纸盘 幼儿园纸盘手工 纸盘娃娃制作 纸盘手工作品 蛋糕纸盘手工 纸盘面具 一次性纸盘diy 纸盘图片 蛋糕纸盘手工制作图片 缠绕膜 打包盒 航空杯 封口膜 奶茶纸杯 豆浆杯 奶茶杯 塑料杯 青花瓷图片简笔画纸盘 碎纸机 小型碎纸机价格

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里