关于 Xtiper
关于 Xtiper
概述

Xtiper 是一款整合 PC 、移动端的弹层弹窗（甚至还有弹幕）web 应用解决方案。采用原生的 javascript 编写，体积小，不依赖任何 js 库，不加载任何图片，使用方便。


注意事项

1.Xtiper 可拖动的层可以拖动 3/4 的窗体到浏览器外部


2.面板菜单主要应用于移动端 ，其他层 pc 和移动端可通用


3.所有 string 类型的可选值都可以用首字母简写表示，例如： black 可简写成 b 。也可以大小写混合，例如 noready 可以写成 noReady 。


4.关于属性的说明

属性 说明
[必填] 如字面意思
[可选] 如字面意思
[默认:true] 默认值为 true
[默认:空] 默认值为 空 或者 空字符 或 未定义
[类型] 数据类型 (number, string, boolean, array, function, this)
[选值] 从文档中给出的值中选取一个填写
[说明] 额外的说明
[限制] 说明限制条件
( ) 解释说明，例如：[默认:#ffffff(白色)]
< > 不一定存在，例如：[默认:确定<,取消>]，表示有可能是 确定 或者 确定,取消


5.弹窗层按钮无回调函数时，点击按钮会关闭；面板菜单选项无回调函数时，点击选项不会有反应。


6.win 弹窗层和 open 页面层按下键盘的 Esc 键可关闭窗口。win 弹窗层如果只有一个 btn1 的回调按钮，那么按下回车会调用 btn1 的回调函数，具体在实际案例中体验一下。


7.IE 兼容至 IE10 ，IE10 以下的不进行兼容，以后也不会兼容！

短消息 xtip.msg()
短消息顾名思义，就是用来显示简短的文本消息的，PC 最多支持 50 个中文字符（带图标 48 个），移动端最多支持 18 个中文字符（带图标 16 个），更长的文本消息请用 win 弹窗层或 open 页面层实现
  1. <button class="xbutton" onclick="xtip.msg('这是一个短消息')">短消息</button>
  2. <button class="xbutton" onclick="xtip.msg('The world!',{times:4})">停顿4秒</button>
  3. <button class="xbutton" onclick="xtip.msg('顶部消息',{pos:'t'})">顶部消息</button>
  4. <button class="xbutton" onclick="xtip.msg('底部消息',{pos:'b'})">底部消息</button>
  5. <button class="xbutton" onclick="xtip.msg('带图标',{icon:'s'})">带图标</button>
  6. <button class="xbutton" onclick="xtip.msg('白色风格',{icon:'e',type:'w'})">白色风格</button>
  7. <button class="xbutton" onclick="xtip.msg('自定义图标',{icon:'css/img.png',type:'w'})">自定义图标</button>
表达式：xtip.msg(tip, config)
参数 说明 属性
tip 消息内容 [类型:string] [必填]
config.times 停顿秒数 [类型:number] [可选] [默认:2]
config.type 风格

[类型:string] [可选] [默认:空] [选值]


可选值解释
b 或 black黑色 [默认]
w 或 white白色
config.pos 位置

[类型:string] [可选] [默认:m(中间)] [选值]


可选值解释
m 或 middle中间 [默认]
t 或 top顶部
b 或 bottom底部
config.icon 图标

[类型:string] [可选] [选值]


固定可选值解释
s 或 success成功
e 或 error失败
w 或 warning警告
a 或 ask询问
h 或 hello微笑

或者


[类型:string / array] [可选] [选值]


自定义图片解释
string 类型图片路径，例如：css/img.png
config.zindex 层叠顺序 [类型:number] [可选] [默认:99999]
查看参数
弹幕 xtip.danmu()
弹幕是我在所有层中唯一带着好玩、和实验性质写的，在实际项目中用到的可能性不高，所以在给定参数上不会纠结太多，例如字体大小、弹幕速度之类的。动画改用 css3 实现，性能大幅度提升。弹幕的分布区间是从顶部 10 像素 - 页面高度的 65% 的位置
  1. <button class="xbutton" onclick="xtip.danmu('弹幕填充',{light:true,type:'b',icon:'w'})">弹幕</button>
表达式：xtip.danmu(tip, config)
参数 说明 属性
tip 消息内容 [类型:string] [必填]
config.type 风格

[类型:string] [可选] [默认:空] [选值]


可选值解释
b 或 black黑色 [默认]
w 或 white白色
config.icon 图标

[类型:string] [可选] [选值]


固定可选值解释
s 或 success成功
e 或 error失败
w 或 warning警告
a 或 ask询问
h 或 hello微笑

或者


[类型:string / array] [可选] [选值]


自定义图片解释
string 类型图片路径，例如：css/img.png
config.light 是否高亮显示 [类型:boolean] [可选] [默认:false] [限制:弹幕多于1条时生效]
config.zindex 层叠顺序 [类型:number] [可选] [默认:99999]
查看参数
气泡 xtip.tips()
气泡层一个关联元素只能有一个实例。可应用于对表单提交验证的提示等。


  1. <button class="xbutton" id="tipsxf" disabled="disabled">被关联元素</button><br><br>
  2. <button class="xbutton" onclick="xtiper_tips('上提示',this,{pos:'t',bgcolor:'white'})">上</button>
  3. <button class="xbutton" onclick="xtiper_tips('下提示',this,{pos:'b',bgcolor:'#2b84d0'})">下</button>
  4. <button class="xbutton" onclick="xtiper_tips('左提示',this,{pos:'l',bgcolor:'#37b72c'})">左</button>
  5. <button class="xbutton" onclick="xtiper_tips('右提示',this,{pos:'r',bgcolor:'#f89310'})">右</button>
  6. <button class="xbutton" onclick="xtiper_tips1()">关联元素id</button>
  8. <script type="text/javascript">
  9. function xtiper_tips1()
  10. {
  11. xtiper_tips('关联元素，长文本长文本长文本长文本，长文本长文本长文本。','tipsxf',{
  12. bgcolor: 'rgb(255,255,255)',
  13. times: 3,
  14. pos: 't',
  15. });
  16. }
  17. </script>
表达式：xtip.tips(tip, element, config)
参数 说明 属性
tip 消息内容 [类型:string] [必填]
element 关联元素

[类型:string / this] [必填] [选值]


可选值解释
(关联元素id)例如：#id (#号可以省略)，不可以使用 .class 类名选择器
this元素本身
config.bgcolor 背景颜色 [类型:string] [可选] [默认:#000000(黑色)]
config.color 字体颜色 [类型:string] [可选] [默认:#ffffff(白色)]
[说明:当背景色为白色时，字体颜色自动变成黑色，也可以手动设置]
config.times 停顿秒数 [类型:number] [可选] [默认:2]
config.pos 方向

[类型:string] [可选] [默认:r] [选值]


可选值解释
t 或 top上
b 或 bottom下
l 或 left左
r 或 right右 [默认]
config.zindex 层叠顺序 [类型:number] [可选] [默认:99999]
查看参数
通知 xtip.alert()
通知 xtip.alert() 和 反馈 xtip.confirm 的区别是什么？


  1. <button class="xbutton" onclick="xtip.alert('通知')">通知</button>
  2. <button class="xbutton" onclick="xtip.alert('3秒后自动消失','e',{times:3,title:'Are you sure?',btn:'Sure'})">3秒后自动消失</button>
  3. <button class="xbutton" onclick="xtip.alert('无遮罩','w',{shade:false})">无遮罩</button>
  5. <button class="xbutton" onclick="xtip.alert('无图标')">无图标</button>
  6. <button class="xbutton" onclick="xtip.alert('成功','s')">成功</button>
  7. <button class="xbutton" onclick="xtip.alert('失败','e')">失败</button>
  8. <button class="xbutton" onclick="xtip.alert('警告','w')">警告</button>
  9. <button class="xbutton" onclick="xtip.alert('询问','a')">询问</button>
  10. <button class="xbutton" onclick="xtip.alert('微笑','h')">微笑</button>
  11. <button class="xbutton" onclick="xtip.alert('自定义图标',['css/img.png','black'])">自定义图标</button>
表达式：xtip.alert(tip, icon, config)
参数 说明 属性
tip 消息内容 [类型:string] [可选] [默认:空]
icon 图标

[类型:string] [可选] [选值]


固定可选值解释
s 或 success成功
e 或 error失败
w 或 warning警告
a 或 ask询问
h 或 hello微笑

或者


[类型:string / array] [可选] [选值]


自定义图片解释
string 类型图片路径，例如：css/img.png
array 类型图片路径 + 按钮主颜色，例如：['css/img.png', '#000']
config.title 弹层标题 [类型:string] [可选] [默认:提示]
config.btn 按钮 [类型:string / array] [可选] [默认:确定]
config.times 几秒后自动关闭 [类型:number] [可选] [默认:0(不自动关闭)]
config.shade 是否开启遮罩 [类型:boolean] [可选] [默认:true(开启)]
查看参数
反馈 xtip.confirm()
通知 xtip.alert() 和 反馈 xtip.confirm 的区别是什么？


  1. <button class="xbutton" onclick="delmsg(1)">删除</button>
  2. <button class="xbutton" onclick="xtip.confirm('确认删除吗？','',{title:'This is English',shade:false,btn:['Yes','No']});">无遮罩</button>
  4. <button class="xbutton" onclick="xtip.confirm('成功','',{icon:'s'})">成功</button>
  5. <button class="xbutton" onclick="xtip.confirm('失败','',{icon:'e'})">失败</button>
  6. <button class="xbutton" onclick="xtip.confirm('警告','',{icon:'w'})">警告</button>
  7. <button class="xbutton" onclick="xtip.confirm('询问','',{icon:'a'})">询问</button>
  8. <button class="xbutton" onclick="xtip.confirm('微笑','',{icon:'h'})">微笑</button>
  9. <button class="xbutton" onclick="xtip.confirm('自定义图标','',{icon:['css/img.png','#1dbbae']})">自定义图标</button>
  11. <script>
  12. //一般可以自定义一个函数用来传参数
  13. function delmsg(id)
  14. {
  15. xtip.confirm('确认删除吗？',function(){
  16. xtip.msg('执行你的删除代码，要删除的id：'+id);
  17. });
  18. }
  19. </script>
表达式：xtip.confirm(tip, myfun, config)
参数 说明 属性
tip 消息内容 [类型:string] [可选] [默认:空]
myfun 确定后的回调函数 [类型:function] [可选] [默认:空]
config.icon 图标

[类型:string] [可选] [选值]


固定可选值解释
s 或 success成功
e 或 error失败
w 或 warning警告
a 或 ask询问
h 或 hello微笑

或者


[类型:string / array] [可选] [选值]


自定义图片解释
string 类型图片路径，例如：css/img.png
array 类型图片路径 + 按钮主颜色，例如：['css/img.png', '#000']
config.title 弹层标题 [类型:string] [可选] [默认:提示]
config.btn 按钮 [类型:array] [可选] [默认:确定,取消]
config.shade 是否开启遮罩 [类型:boolean] [可选] [默认:true(开启)]
查看参数
弹窗层 xtip.win()
弹窗层是使用率最多的弹层类型，具体说明请点击下面按钮
  1. <button class="xbutton" onclick="xtip_win()">弹窗层是功能更强大的【反馈】</button>
  2. <button class="xbutton" onclick="xtip_win2()">自定义图标</button>
  4. <script>
  5. function xtip_win()
  6. {
  7. xtip.win({
  8. type: 'confirm', //alert 或 confirm
  9. btn: ['蕾米莉亚','蕾姆','拉姆','斯巴鲁'],
  10. tip: '【通知】和【反馈】都属于【弹窗层】的子类，与【通知】和【反馈】相比，【弹窗层】功能更强大：<br><br>1.可设定最多4个按钮<br>2.可为所有按钮设置回调函数<br>3.如果按钮2、3、4如果没有设置回调函数，会显示浅色的按钮<br>4.可显示最小化<br>5.可设置点击遮罩不关闭<br>6.可锁定滚动条<br>7.可自定义标题、宽度、层叠顺序',
  11. icon: 'success',
  12. title: "弹窗层的功能",
  13. min: true,
  14. width: '600px',
  15. shade: false,
  16. shadeClose: false,
  17. lock: false,
  18. btn1: function(){
  19. xtip.msg('我爱蕾米莉亚');
  20. },
  21. btn2: function(){
  22. xtip.msg('我爱蕾姆');
  23. },
  24. btn3: function(){
  25. xtip.msg('我爱拉姆');
  26. },
  27. zindex: 99999,
  28. });
  29. }
  31. function xtip_win2()
  32. {
  33. xtip.win({
  34. tip: '自定义图标',
  35. icon: ['css/img.png','#782fbd'],
  36. title: '自定义图标',
  37. btn: ['A','B','C','D'],
  38. btn1: function(){
  39. xtip.msg('我爱蕾米莉亚');
  40. },
  41. btn2: function(){
  42. xtip.msg('我爱蕾姆');
  43. },
  44. btn3: function(){
  45. xtip.msg('我爱拉姆');
  46. },
  47. });
  48. }
  49. </script>
表达式：xtip.win(config)
参数 说明 属性
config.type 弹窗类型

[类型:string] [可选] [选值] [默认:confirm]


可选值解释
a 或 alert通知 (无回调函数，无取消按钮)
c 或 confirm反馈 [默认]
config.tip 消息内容 [类型:string] [可选] [默认:空]
config.icon 图标

[类型:string] [可选] [选值]


固定可选值解释
s 或 success成功
e 或 error失败
w 或 warning警告
a 或 ask询问
h 或 hello微笑

或者


[类型:string / array] [可选] [选值]


自定义图片解释
string 类型图片路径，例如：css/img.png
array 类型图片路径 + 按钮主颜色，例如：['css/img.png', '#000']
config.times 几秒后自动关闭 [类型:number] [可选] [默认:0(不自动关闭)] [限制:alert 类型才会生效]
config.title 弹层标题 [类型:string] [可选] [默认:提示]
config.width 宽度 [类型:string] [可选] [默认:300px]
config.shade 是否开启遮罩 [类型:boolean] [可选] [默认:true(开启)]
config.shadeClose 是否开启点击遮罩关闭 [类型:boolean] [可选] [默认:true(开启)] [限制:开启遮罩时才会生效]
config.end 关闭后的回调函数 [类型:function] [可选] [默认:空]
config.lock 是否锁定滚动条 [类型:boolean] [可选] [默认:false(不锁定)]
config.btn 按钮 [类型:array] [可选] [默认:确定<,取消>] [限制:最多只能有4个按钮]
config.btn[1-4] 按钮[1-4]的回调函数 [类型:function] [可选] [默认:空]
config.min 是否开启最小化按钮 [类型:boolean] [可选] [默认:false(不开启)]
config.zindex 层叠顺序 [类型:number] [可选] [默认:99999]
查看参数
相册层 xtip.photo()
实际是调用 xtip.open 层，简化了参数。高度默认自适应，也可以固定高度。
  1. <button class="xbutton" onclick="xtip.photo('img1')">相册层</button>
  2. <button class="xbutton" onclick="xtip.photo('img1',{height:'500px',title:'固定高度'})">固定高度</button>
表达式：xtip.photo(content, config)
参数 说明 属性
content 相册组名称 [类型:string] [必填]
config.title 弹层标题 [类型:string] [可选] [默认:无]
config.width 宽度 [类型:string] [可选] [默认:600px]
config.height 高度 [类型:string] [可选] [默认:400px]
config.index 显示第几张图片 [类型:number] [可选] [默认:1]
查看参数
移动端相册层 xtip.photoApp()
实际是调用 xtip.open 层，简化了参数，滑动下拉移动一定距离或者点击空白处可以关闭。请在移动端中打开。
  1. <button class="xbutton" onclick="xtip.photoApp('img1')">移动端相册层</button>
表达式：xtip.photoApp(content)
参数 说明 属性
content 相册组名称 [类型:string] [必填]
index 显示第几张图片 [类型:number] [可选] [默认:1]
查看参数
页面层 xtip.open()
【ready类型】已存在元素
ready 类型会读取整个元素的标签 (outerHTML)，并且会过滤 id 属性防止冲突，过滤最外层标签隐藏属性 display:none
隐藏这是一个在页面上已存在的元素。内容背景色可以自定义

  1. <div id="tip_content1" class="tip_content1"><div id="myclass" class="myclass" style="background-color:#08c; color:#fff;"><span style="display:none;">隐藏</span>这是一个在页面上已存在的元素。内容背景色可以自定义</div></div><br>
  2. <button class="xbutton" onclick="xtip_open1()">已存在的元素 (outerHTML)</button>
  3. <button class="xbutton" onclick="xtip_open1_2()">APP模式</button>
  5. <script type="text/javascript">
  6. function xtip_open1()
  7. {
  8. xtip.open({
  9. type: 'ready',
  10. content: '.tip_content1',
  11. title: '【ready类型】',
  12. width: '700px',
  13. height: '400px',
  14. lock: true,
  15. move:false,
  16. max: true,
  17. bgcolor: '#000',
  18. });
  19. }
  21. function xtip_open1_2()
  22. {
  23. xtip.open({
  24. type: 'ready',
  25. content: '.tip_content1',
  26. title: '【ready类型】',
  27. bgcolor: '#000',
  28. height: '400px',
  29. app: true,
  30. });
  31. }
  32. </script>
【noready类型】注释元素
有些时候你想让一些元素不要在页面打开的时候就显示，而是以代码注释的方式先隐藏起来 (就像这样：<!-- <div>内容</div> -->)，在需要的时候才进行显示，这种时候就可以用 noready 类型。好处是不需要用 js 拼接一大段 html 代码，调试时只需要把前面的 <-- 暂时删去即可。注意别让其他开发人员误认为是无用注释代码删去！
  1. <div id="tip_content2">
  2. <!-- <div class="loginbox">
  3. <strong>实例：一个简单的登录框</strong><br><br>
  4. <div><input type="text" class="xinput xful" placeholder="登录名" /></div>
  5. <div><input type="password" class="xinput xful" placeholder="密码" /></div>
  6. <div><button class="xbutton xful xblue">登录</button></div>
  7. </div>
  8. </div> -->
  9. </div>
  10. <button class="xbutton" onclick="xtip_open2()">注释元素 (innerHTML)</button>
  11. <button class="xbutton" onclick="xtip_open2_2()">APP模式</button>
  13. <script type="text/javascript">
  14. function xtip_open2()
  15. {
  16. xtip.open({
  17. type: 'noready',
  18. content: '#tip_content2',
  19. title: '【noready类型】',
  20. width: '320px',
  21. height: '360px',
  22. min: true,
  23. shade: false,
  24. });
  25. }
  27. function xtip_open2_2()
  28. {
  29. xtip.open({
  30. type: 'noready',
  31. content: '#tip_content2',
  32. app: true,
  33. });
  34. }
  35. </script>
【url类型】包含链接


  1. <p><input class="xinput" id="openval" type="text" placeholder="测试用" /></p><br>
  2. <button class="xbutton" onclick="xtip_open3()">包含链接 (iframe)</button>
  3. <button class="xbutton" onclick="xtip_open3_2()">APP模式</button>
  5. <script type="text/javascript">
  6. function xtip_open3()
  7. {
  8. xtip.open({
  9. type: 'url',
  10. content: 'open.html',
  11. title: '【url类型】',
  12. lock: true,
  13. width: '1100px',
  14. height: '80%',
  15. min: true,
  16. max: true,
  17. closeBtn: false,
  18. });
  19. }
  21. function xtip_open3_2()
  22. {
  23. xtip.open({
  24. type: 'url',
  25. content: 'open.html',
  26. title: '【url类型】',
  27. height: '80%',
  28. app: true,
  29. });
  30. }
  31. </script>
【html类型】html代码
直接填写html代码。长代码不推荐使用 html 类型，用 js 拼接 html 会导致代码可读性极差，遇到多引号、双引号时还需要转义，调试和后期修改不方便，推荐使用 noready 类型。
  1. <button class="xbutton" onclick="xtip_open4()">html代码</button>
  2. <button class="xbutton" onclick="xtip_open4_2()">APP模式</button>
  4. <script type="text/javascript">
  5. function xtip_open4()
  6. {
  7. xtip.open({
  8. type: 'html',
  9. width: '720px',
  10. height: '550px',
  11. content: '<div id="htmlcode" class="myclass">直接填写html代码。<br><br><button class="xbutton" onclick="xtip.msg(\'你好鸭\')">这个按钮的引号需要转义</button><br><br>长代码不推荐使用 html 类型，用 js 拼接 html 会导致代码可读性极差，遇到多引号、双引号时还需要转义，调试和后期修改不方便。<br><br>本例的代码长这个样子：<br><br><div class="keduxing"></div><br><br>是不是可读性极差，有点让人想抓狂？<br><br>所以，长代码推荐用 <span class="litit">noready</span> 类型！</div>',
  12. title: false,
  13. lock: true,
  14. });
  15. }
  17. function xtip_open4_2()
  18. {
  19. xtip.open({
  20. type: 'html',
  21. height: '60%',
  22. content: '<div id="htmlcode" class="myclass">APP模式</div>',
  23. app: true,
  24. });
  25. }
  26. </script>
【photo类型】相册
给图片标签 <img> 添加 data-xphoto 属性，名称相同的为同一组相册；添加 data-xhref 属性可以点击图片打开链接；添加 title 属性可显示图片名称；添加 data-xsrc 属性可以设置大图路径，如果没有则读取 src 值。默认高度是自适应，也可以自己设置固定高度。

  1. <div>
  2. <img height="120" src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/jqueryapi.png" title="jquery" data-xphoto="img1" data-xhref="https://www.jquery123.com" />
  3. <img height="120" src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/vuejs.png" title="vue.js" data-xphoto="img1" data-xhref="https://vuejs.bootcss.com" />
  4. <img height="120" src="css/img.png" data-xphoto="img1" data-xsrc="css/img.png" title="星星" />
  5. </div><br>
  6. <button class="xbutton" onclick="xtip_open5()">【photo类型】相册</button>
  7. <button class="xbutton" onclick="xtip_open5_2()">APP模式</button>
  8. <button class="xbutton" onclick="xtip.photoApp('img1')">APP模式还可以直接 xtip.photoApp()</button>
  10. <script type="text/javascript">
  11. function xtip_open5()
  12. {
  13. xtip.open({
  14. type: 'photo',
  15. width: '60%',
  16. content: 'img1',
  17. title: '相册',
  18. over: false,
  19. lock: true,
  20. min: true,
  21. max: true,
  22. });
  23. }
  25. function xtip_open5_2()
  26. {
  27. xtip.open({
  28. type: 'photo',
  29. content: 'img1',
  30. app: true,
  31. });
  32. }
  33. </script>
表达式：xtip.open(config)
参数 说明 属性
config.type 内容类型

[类型:string] [必填] [选值]


可选值解释
r 或 ready已存在的元素
n 或 noready注释元素 [说明:你甚至可以写成 notready ，防止手贱写错]
u 或 url 包含链接
h 或 html html代码
p 或 photo 相册
config.content 内容

[类型:string] [必填] [选值]


当选值为填写的内容
ready 填写元素 id 或 class (取第一个)，例如：#myid 或 .myclass
noready 填写元素 id 或 class (取第一个)，例如：#myid 或 .myclass
url 填写 url 链接，例如：open.html 或 https://www.baidu.com/
html 填写 html 代码，例如：<div id="htmlcode">html代码</div>
photo 填写相册组名称，例如：group1
config.title 弹层标题 [类型:string] [可选] [默认:无]
config.width 宽度 [类型:string] [可选] [默认:600px]
config.height 高度 [类型:string] [可选] [默认:600px]
config.x 横向位置偏移 [类型:number] [可选] [默认:空] [说明:正数向右，负数向左。偏移基于中间位置，单位px]
config.y 纵向位置偏移 [类型:number] [可选] [默认:空] [说明:正数向下，负数向上。偏移基于中间位置，单位px]
config.bgcolor 内容背景色 [类型:string] [可选] [默认:空]
config.shade 是否开启遮罩 [类型:boolean] [可选] [默认:true(开启)]
config.shadeClose 是否开启点击遮罩关闭 [类型:boolean] [可选] [默认:true(开启)] [限制:开启遮罩时才会生效]
config.end 关闭后的回调函数 [类型:function] [可选] [默认:空]
config.min 是否开启最小化按钮 [类型:boolean] [可选] [默认:false(不开启)]
config.max 是否开启最大化按钮 [类型:boolean] [可选] [默认:false(不开启)]
config.closeBtn 是否开启关闭按钮 [类型:boolean] [可选] [默认:true(开启)]
config.move 是否开启拖拽窗口 [类型:boolean] [可选] [默认:true(开启)]
config.lock 是否锁定滚动条 [类型:boolean] [可选] [默认:false(不锁定)]
config.over 内容超出范围时是否显示 [类型:boolean] [可选] [默认:true(以滚动条形式显示)]
config.index 相册层参数，显示第几张图片 [类型:number] [可选] [默认:1]
config.app 是否开启APP模式 [类型:boolean] [可选] [默认:false (不开启)] 关于APP模式的一些说明
config.zindex 层叠顺序 [类型:number] [可选] [默认:99999]
查看参数
加载层 xtip.load()
加载层默认不会自动关闭，方便 Ajax 返回数据后关闭，实现用户交互。关闭层用 xtip.close() 实现。
  1. <button class="xbutton" onclick="xtip.load()">默认</button>
  2. <button class="xbutton" onclick="xtip.load('加载中...')">带文字</button>
  3. <button class="xbutton" onclick="xtip.load('',{lock:true})">锁定滚动条</button>
  4. <button class="xbutton" onclick="xtip.load('2秒后自动关闭',{times:2})">2秒后自动关闭</button>
  5. <button class="xbutton" onclick="ajaxdata()">Ajax返回结果后关闭load层</button>
  7. <script type="text/javascript">
  8. //本地调试: 审查元素-Network-Online改为Slow 3G进行调试
  9. function ajaxdata()
  10. {
  11. loadid = xtip.load();
  12. $.ajax({
  13. type: "post",
  14. url: "ajax.php",
  15. dataType: "json",
  16. data: "",
  17. success:function(redata){
  18. if(redata.status==1){
  19. xtip.close(loadid);
  20. }
  21. }
  22. });
  23. }
  24. </script>
表达式：xtip.load(tip, config)
参数 说明 属性
tip 消息内容 [类型:string] [可选] [默认:空]
config.times 几秒后自动关闭 [类型:number] [可选] [默认:0(不自动关闭)]
config.lock 是否锁定滚动条 [类型:boolean] [可选] [默认:false(不锁定)]
查看参数
面板菜单 xtip.sheet()
面板菜单主要应用于移动端，会锁定滚动条。面板菜单选项无回调函数时，点击选项不会有反应。
  1. <button class="xbutton" onclick="xtiper_sheet1()">默认</button>
  2. <button class="xbutton" onclick="xtiper_sheet2()">带标题、靠左</button>
  3. <button class="xbutton" onclick="xtiper_sheet3()">强制选择</button>
  5. <script type="text/javascript">
  6. function xtiper_sheet1()
  7. {
  8. sheet = xtip.sheet({
  9. btn: ['选择1 回调函数','选择2 链接跳转(当前页面)','选择3 链接跳转(新页面)','选择4 空/空字符/未定义'],
  10. btn1: function(){
  11. xtip.msg('你选择了1')
  12. },
  13. btn2: 'open.html',
  14. btn3: ['open.html','blank'],
  15. });
  16. }
  18. function xtiper_sheet2()
  19. {
  20. sheet = xtip.sheet({
  21. title: '确定要删除吗？',
  22. align: 'left',
  23. btn: ['确定'],
  24. btn1: function(){
  25. xtip.msg('已经删除了！')
  26. },
  27. end: function(){
  28. xtip.msg('关闭了',{times:1});
  29. },
  30. btnClose: 'Close',
  31. });
  32. }
  34. function xtiper_sheet3()
  35. {
  36. sheet = xtip.sheet({
  37. force: '请选择一个',
  38. btn: ['蕾姆','拉姆'],
  39. btn1: function(){
  40. xtip.msg('蕾姆赛高！');
  41. },
  42. btn2: function(){
  43. xtip.msg('拉姆赛高！');
  44. },
  45. });
  46. }
  47. </script>
表达式：xtip.sheet(config)
参数 说明 属性
config.btn 选项组 [类型:array] [必填] [限制:最多只能有8个选项]
config.btn[1-8] 选项组[1-8]的回调

[类型:function / string / array] [必填] [选值]


选值解释
function(){alert('函数');} 回调函数
open.html 跳转链接
['open.html','blank'] 跳转链接在新窗口
config.title 标题 [类型:string] [可选] [默认:空]
config.align 文字对齐

[类型:string] [可选] [选值] [默认:center]


选值解释
c 或center 居中 [默认]
l 或 left 居左
r 或 right 居右
config.force 强制选择 (模式下的提示内容) [类型:string] [可选] [默认:空]
[说明:当 force 存在时开启强制选择模式，内容为强制选择的提示内容]
config.btnClose 关闭按钮文字 [类型:string] [可选] [默认:取消]
[说明:为适应中文以外的语言版本而存在]
config.end 关闭后的回调函数 [类型:function] [可选] [默认:空]
config.zindex 层叠顺序 [类型:number] [可选] [默认:99999]
查看参数
关闭层 xtip.close() / 关闭所有层xtip.closeAll()
xtip.close() 需要填写参数，xtip.closeAll() 不需要
  1. <button class="xbutton" onclick="xip_close1()">开启一个层</button>
  2. <button class="xbutton" onclick="xtip.close(xipid)">关闭指定层</button>
  3. <button class="xbutton" onclick="xtip.closeAll()">关闭所有层</button>
  5. <script type="text/javascript">
  6. var xipid;
  7. function xip_close1()
  8. {
  9. xipid = xtip.win({
  10. title: '测试',
  11. shade: false
  12. });
  13. }
  14. </script>
表达式：xtip.close(id)
参数 说明 属性
id 弹层 id 值 [类型:string] [必填]
表达式：xtip.closeAll()
参数 说明 属性
无 - -
查看参数
本项目为原生javascript，参考了Layer