关于 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.兼容 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. closeBtn:  true,
  16. });
  17. }
  18. </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.closeBtn 是否开启关闭按钮 [类型:boolean] [可选] [默认:false(关闭)]
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秒后自动消失', {icon: 'e', times: 3, title: 'Are you sure?', btn: 'Sure'})">3秒后自动消失</button>
  3. <button class="xbutton" onclick="xtip.alert('无遮罩', {icon: 'w', shade: false})">无遮罩</button>
  5. <button class="xbutton" onclick="xtip.alert('无图标')">无图标</button>
  6. <button class="xbutton" onclick="xtip.alert('成功', {icon: 's'})">成功</button>
  7. <button class="xbutton" onclick="xtip.alert('失败', {icon: 'e'})">失败</button>
  8. <button class="xbutton" onclick="xtip.alert('警告', {icon: 'w'})">警告</button>
  9. <button class="xbutton" onclick="xtip.alert('询问', {icon: 'a'})">询问</button>
  10. <button class="xbutton" onclick="xtip.alert('微笑', {icon: 'h'})">微笑</button>
  11. <button class="xbutton" onclick="xtip.alert('自定义图标', {icon: ['css/img.png', 'black']})">自定义图标</button>
表达式：xtip.alert(tip, config)
参数 说明 属性
tip 消息内容 [类型:string] [可选] [默认:空]
congif.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.btn1 确定后的回调函数 [类型:function] [可选] [默认:空]
config.times 几秒后自动关闭 [类型:number] [可选] [默认:0(不自动关闭)]
config.shade 是否开启遮罩 [类型:boolean] [可选] [默认:true(开启)]
config.shadeClose 是否开启点击遮罩关闭 [类型:boolean] [可选] [默认:true(开启)] [限制:开启遮罩时才会生效]
config.closeBtn 是否开启关闭按钮 [类型: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('确认删除吗？', {btn1: function(){
  16. xtip.msg('执行你的删除代码，要删除的id：'+id);
  17. }
  18. });
  19. }
  20. </script>
表达式：xtip.confirm(tip, myfun, 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.title 弹层标题 [类型:string] [可选] [默认:提示]
config.btn 按钮 [类型:array] [可选] [默认:确定,取消]
config.btn1 确定后的回调函数 [类型:function] [可选] [默认:空]
config.btn2 取消后的回调函数 [类型:function] [可选] [默认:空]
config.shade 是否开启遮罩 [类型:boolean] [可选] [默认:true(开启)]
config.shadeClose 是否开启点击遮罩关闭 [类型:boolean] [可选] [默认:true(开启)] [限制:开启遮罩时才会生效]
config.closeBtn 是否开启关闭按钮 [类型: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. maxWidth: '100%',
  16. shade: false,
  17. shadeClose: false,
  18. lock: false,
  19. btn1: function(){
  20. xtip.msg('我爱蕾米莉亚');
  21. },
  22. btn2: function(){
  23. xtip.msg('我爱蕾姆');
  24. },
  25. btn3: function(){
  26. xtip.msg('我爱拉姆');
  27. },
  28. btn4: function(){
  29. xtip.msg('斯巴鲁');
  30. },
  31. btnbg: [true, true, true, false],
  32. zindex: 99999,
  33. });
  34. }
  36. function xtip_win2()
  37. {
  38. xtip.win({
  39. tip: '自定义图标',
  40. icon: ['css/img.png','#782fbd'],
  41. title: '自定义图标',
  42. btn: ['A','B','C','D'],
  43. btn1: function(){
  44. xtip.msg('我爱蕾米莉亚');
  45. },
  46. btn2: function(){
  47. xtip.msg('我爱蕾姆');
  48. },
  49. btn3: function(){
  50. xtip.msg('我爱拉姆');
  51. },
  52. });
  53. }
  54. </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.maxWidth 最大宽度 [类型:string] [可选] [默认:无] [限制:当 width 为 px 类型且 maxWidth 为 % 类型时才生效]
config.shade 是否开启遮罩 [类型:boolean] [可选] [默认:true(开启)]
config.shadeClose 是否开启点击遮罩关闭 [类型:boolean] [可选] [默认:true(开启)] [限制:开启遮罩时才会生效]
config.closeBtn 是否开启关闭按钮 [类型:boolean] [可选] [默认:true(开启)]
config.end 关闭后的回调函数 [类型:function] [可选] [默认:空]
config.lock 是否锁定滚动条 [类型:boolean] [可选] [默认:false(不锁定)]
config.btn 按钮 [类型:array] [可选] [默认:确定<,取消>] [限制:最多只能有4个按钮]
config.btn[1-4] 按钮[1-4]的回调函数 [类型:function] [可选] [默认:空]
config.btnbg 按钮[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]
config.iftitle 是否显示标题 [类型:boolean] [可选] [默认:true(显示)]
config.iforder 是否显示序号 [类型:boolean] [可选] [默认:true(显示)]
config.app 是否开启APP模式 [类型:boolean] [可选] [默认:false (不开启)] [说明:也可以直接调用photoAPP()]
查看参数
移动端相册层 xtip.photoApp()
实际是调用 xtip.open 层，简化了参数，滑动下拉移动一定距离或者点击空白处可以关闭。请在移动端中打开。
  1. <button class="xbutton" onclick="xtip.photoApp('img1')">移动端相册层</button>
表达式：xtip.photoApp(content, config)
参数 说明 属性
content 相册组名称 [类型:string] [必填]
config.index 显示第几张图片 [类型:number] [可选] [默认:1]
config.iftitle 是否显示标题 [类型:boolean] [可选] [默认:true(显示)]
config.iforder 是否显示序号 [类型:boolean] [可选] [默认:true(显示)]
查看参数
页面层 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. maxWidth: '100%',
  15. lock: true,
  16. move: false,
  17. max: true,
  18. bgcolor: '#000',
  19. });
  20. }
  22. function xtip_open1_2()
  23. {
  24. xtip.open({
  25. type: 'ready',
  26. content: '.tip_content1',
  27. title: '【ready类型】',
  28. bgcolor: '#000',
  29. height: '400px',
  30. app: true,
  31. });
  32. }
  33. </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 parentFun(id)
  7. {
  8. xtip.alert('这个值是从子页面传递过来的：'+id);
  9. }
  11. function xtip_open3()
  12. {
  13. xtip.open({
  14. type: 'url',
  15. content: 'open.html',
  16. title: '【url类型】',
  17. lock: true,
  18. width: '1100px',
  19. height: '80%',
  20. min: true,
  21. max: true,
  22. closeBtn: false,
  23. });
  24. }
  26. function xtip_open3_2()
  27. {
  28. xtip.open({
  29. type: 'url',
  30. content: 'open.html',
  31. title: '【url类型】',
  32. height: '80%',
  33. app: true,
  34. });
  35. }
  36. </script>
【html类型】html代码
直接填写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.maxWidth 最大宽度 [类型:string] [可选] [默认:无] [限制:当 width 为 px 类型且 maxWidth 为 % 类型时才生效]
config.maxHeight 最大高度 [类型:string] [可选] [默认:无] [限制:当 height 为 px 类型且 maxHeight 为 % 类型时才生效]
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.reset 是否重置窗口内容 [类型:boolean] [可选] [默认:true (重置)] [说明:为 false 时一个实例(根据输入参数判断)只能有一个窗口，且窗口内容改变后不会重置]
config.id 实例id [类型:number / string] [可选] [默认:空] [说明:参数完全相同的事件，如果不设置 reset 为 true 时只能开启一个实例，这时可以修改 id 值给参数完全相同的事件创建不同的实例]
config.success 成功后的回调函数 [类型:function] [可选] [默认:空] [说明:可返回自身弹层对象 success: function(x){console.log(x);}]
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(不锁定)]
config.closeBtn 是否开启关闭按钮 [类型: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