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 页面层实现

<button class="xbutton" onclick="xtip.msg('这是一个短消息')">短消息</button>
<button class="xbutton" onclick="xtip.msg('The world!',{times:4})">停顿4秒</button>
<button class="xbutton" onclick="xtip.msg('顶部消息',{pos:'t'})">顶部消息</button>
<button class="xbutton" onclick="xtip.msg('底部消息',{pos:'b'})">底部消息</button>
<button class="xbutton" onclick="xtip.msg('带图标',{icon:'s'})">带图标</button>
<button class="xbutton" onclick="xtip.msg('白色风格',{icon:'e',type:'w'})">白色风格</button>
<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% 的位置

<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()

气泡层一个关联元素只能有一个实例。可应用于对表单提交验证的提示等。

<button class="xbutton" id="tipsxf" disabled="disabled">被关联元素</button><br><br>
<button class="xbutton" onclick="xtiper_tips('上提示',this,{pos:'t',bgcolor:'white'})">上</button>
<button class="xbutton" onclick="xtiper_tips('下提示',this,{pos:'b',bgcolor:'#2b84d0'})">下</button>
<button class="xbutton" onclick="xtiper_tips('左提示',this,{pos:'l',bgcolor:'#37b72c'})">左</button>
<button class="xbutton" onclick="xtiper_tips('右提示',this,{pos:'r',bgcolor:'#f89310'})">右</button>
<button class="xbutton" onclick="xtiper_tips1()">关联元素id</button>
<script type="text/javascript">
function xtiper_tips1()
{
xtiper_tips('关联元素，长文本长文本长文本长文本，长文本长文本长文本。','tipsxf',{
bgcolor: 'rgb(255,255,255)',
times: 3,
pos: 't',
});
}
</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 的区别是什么？

<button class="xbutton" onclick="xtip.alert('通知')">通知</button>
<button class="xbutton" onclick="xtip.alert('3秒后自动消失','e',{times:3,title:'Are you sure?',btn:'Sure'})">3秒后自动消失</button>
<button class="xbutton" onclick="xtip.alert('无遮罩','w',{shade:false})">无遮罩</button>
<button class="xbutton" onclick="xtip.alert('无图标')">无图标</button>
<button class="xbutton" onclick="xtip.alert('成功','s')">成功</button>
<button class="xbutton" onclick="xtip.alert('失败','e')">失败</button>
<button class="xbutton" onclick="xtip.alert('警告','w')">警告</button>
<button class="xbutton" onclick="xtip.alert('询问','a')">询问</button>
<button class="xbutton" onclick="xtip.alert('微笑','h')">微笑</button>
<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 的区别是什么？

<button class="xbutton" onclick="delmsg(1)">删除</button>
<button class="xbutton" onclick="xtip.confirm('确认删除吗？','',{title:'This is English',shade:false,btn:['Yes','No']});">无遮罩</button>
<button class="xbutton" onclick="xtip.confirm('成功','',{icon:'s'})">成功</button>
<button class="xbutton" onclick="xtip.confirm('失败','',{icon:'e'})">失败</button>
<button class="xbutton" onclick="xtip.confirm('警告','',{icon:'w'})">警告</button>
<button class="xbutton" onclick="xtip.confirm('询问','',{icon:'a'})">询问</button>
<button class="xbutton" onclick="xtip.confirm('微笑','',{icon:'h'})">微笑</button>
<button class="xbutton" onclick="xtip.confirm('自定义图标','',{icon:['css/img.png','#1dbbae']})">自定义图标</button>
<script>
//一般可以自定义一个函数用来传参数
function delmsg(id)
{
xtip.confirm('确认删除吗？',function(){
xtip.msg('执行你的删除代码，要删除的id：'+id);
});
}
</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()

弹窗层是使用率最多的弹层类型，具体说明请点击下面按钮

<button class="xbutton" onclick="xtip_win()">弹窗层是功能更强大的【反馈】</button>
<button class="xbutton" onclick="xtip_win2()">自定义图标</button>
<script>
function xtip_win()
{
xtip.win({
type: 'confirm', //alert 或 confirm
btn: ['蕾米莉亚','蕾姆','拉姆','斯巴鲁'],
tip: '【通知】和【反馈】都属于【弹窗层】的子类，与【通知】和【反馈】相比，【弹窗层】功能更强大：<br><br>1.可设定最多4个按钮<br>2.可为所有按钮设置回调函数<br>3.如果按钮2、3、4如果没有设置回调函数，会显示浅色的按钮<br>4.可显示最小化<br>5.可设置点击遮罩不关闭<br>6.可锁定滚动条<br>7.可自定义标题、宽度、层叠顺序',
icon: 'success',
title: "弹窗层的功能",
min: true,
width: '600px',
shade: false,
shadeClose: false,
lock: false,
btn1: function(){
xtip.msg('我爱蕾米莉亚');
},
btn2: function(){
xtip.msg('我爱蕾姆');
},
btn3: function(){
xtip.msg('我爱拉姆');
},
zindex: 99999,
});
}
function xtip_win2()
{
xtip.win({
tip: '自定义图标',
icon: ['css/img.png','#782fbd'],
title: '自定义图标',
btn: ['A','B','C','D'],
btn1: function(){
xtip.msg('我爱蕾米莉亚');
},
btn2: function(){
xtip.msg('我爱蕾姆');
},
btn3: function(){
xtip.msg('我爱拉姆');
},
});
}
</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 层，简化了参数。高度默认自适应，也可以固定高度。

<button class="xbutton" onclick="xtip.photo('img1')">相册层</button>
<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 层，简化了参数，滑动下拉移动一定距离或者点击空白处可以关闭。请在移动端中打开。

<button class="xbutton" onclick="xtip.photoApp('img1')">移动端相册层</button>

表达式：xtip.photoApp(content)
参数	说明	属性
content	相册组名称	[类型:string] [必填]
index	显示第几张图片	[类型:number] [可选] [默认:1]

查看参数

页面层 xtip.open()

【ready类型】已存在元素

ready 类型会读取整个元素的标签 (outerHTML)，并且会过滤 id 属性防止冲突，过滤最外层标签隐藏属性 display:none

这是一个在页面上已存在的元素。内容背景色可以自定义

<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>
<button class="xbutton" onclick="xtip_open1()">已存在的元素 (outerHTML)</button>
<button class="xbutton" onclick="xtip_open1_2()">APP模式</button>
<script type="text/javascript">
function xtip_open1()
{
xtip.open({
type: 'ready',
content: '.tip_content1',
title: '【ready类型】',
width: '700px',
height: '400px',
lock: true,
move:false,
max: true,
bgcolor: '#000',
});
}
function xtip_open1_2()
{
xtip.open({
type: 'ready',
content: '.tip_content1',
title: '【ready类型】',
bgcolor: '#000',
height: '400px',
app: true,
});
}
</script>

【noready类型】注释元素

有些时候你想让一些元素不要在页面打开的时候就显示，而是以代码注释的方式先隐藏起来 (就像这样：)，在需要的时候才进行显示，这种时候就可以用 noready 类型。好处是不需要用 js 拼接一大段 html 代码，调试时只需要把前面的 <-- 暂时删去即可。注意别让其他开发人员误认为是无用注释代码删去！

<div id="tip_content2">
<!-- <div class="loginbox">
<strong>实例：一个简单的登录框</strong><br><br>
<div><input type="text" class="xinput xful" placeholder="登录名" /></div>
<div><input type="password" class="xinput xful" placeholder="密码" /></div>
<div><button class="xbutton xful xblue">登录</button></div>
</div>
</div> -->
</div>
<button class="xbutton" onclick="xtip_open2()">注释元素 (innerHTML)</button>
<button class="xbutton" onclick="xtip_open2_2()">APP模式</button>
<script type="text/javascript">
function xtip_open2()
{
xtip.open({
type: 'noready',
content: '#tip_content2',
title: '【noready类型】',
width: '320px',
height: '360px',
min: true,
shade: false,
});
}
function xtip_open2_2()
{
xtip.open({
type: 'noready',
content: '#tip_content2',
app: true,
});
}
</script>

【url类型】包含链接

<p><input class="xinput" id="openval" type="text" placeholder="测试用" /></p><br>
<button class="xbutton" onclick="xtip_open3()">包含链接 (iframe)</button>
<button class="xbutton" onclick="xtip_open3_2()">APP模式</button>
<script type="text/javascript">
function xtip_open3()
{
xtip.open({
type: 'url',
content: 'open.html',
title: '【url类型】',
lock: true,
width: '1100px',
height: '80%',
min: true,
max: true,
closeBtn: false,
});
}
function xtip_open3_2()
{
xtip.open({
type: 'url',
content: 'open.html',
title: '【url类型】',
height: '80%',
app: true,
});
}
</script>

【html类型】html代码

直接填写html代码。长代码不推荐使用 html 类型，用 js 拼接 html 会导致代码可读性极差，遇到多引号、双引号时还需要转义，调试和后期修改不方便，推荐使用 noready 类型。

<button class="xbutton" onclick="xtip_open4()">html代码</button>
<button class="xbutton" onclick="xtip_open4_2()">APP模式</button>
<script type="text/javascript">
function xtip_open4()
{
xtip.open({
type: 'html',
width: '720px',
height: '550px',
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>',
title: false,
lock: true,
});
}
function xtip_open4_2()
{
xtip.open({
type: 'html',
height: '60%',
content: '<div id="htmlcode" class="myclass">APP模式</div>',
app: true,
});
}
</script>

【photo类型】相册

给图片标签 <img> 添加 data-xphoto 属性，名称相同的为同一组相册；添加 data-xhref 属性可以点击图片打开链接；添加 title 属性可显示图片名称；添加 data-xsrc 属性可以设置大图路径，如果没有则读取 src 值。默认高度是自适应，也可以自己设置固定高度。

<div>
<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" />
<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" />
<img height="120" src="css/img.png" data-xphoto="img1" data-xsrc="css/img.png" title="星星" />
</div><br>
<button class="xbutton" onclick="xtip_open5()">【photo类型】相册</button>
<button class="xbutton" onclick="xtip_open5_2()">APP模式</button>
<button class="xbutton" onclick="xtip.photoApp('img1')">APP模式还可以直接 xtip.photoApp()</button>
<script type="text/javascript">
function xtip_open5()
{
xtip.open({
type: 'photo',
width: '60%',
content: 'img1',
title: '相册',
over: false,
lock: true,
min: true,
max: true,
});
}
function xtip_open5_2()
{
xtip.open({
type: 'photo',
content: 'img1',
app: true,
});
}
</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() 实现。

<button class="xbutton" onclick="xtip.load()">默认</button>
<button class="xbutton" onclick="xtip.load('加载中...')">带文字</button>
<button class="xbutton" onclick="xtip.load('',{lock:true})">锁定滚动条</button>
<button class="xbutton" onclick="xtip.load('2秒后自动关闭',{times:2})">2秒后自动关闭</button>
<button class="xbutton" onclick="ajaxdata()">Ajax返回结果后关闭load层</button>
<script type="text/javascript">
//本地调试: 审查元素-Network-Online改为Slow 3G进行调试
function ajaxdata()
{
loadid = xtip.load();
$.ajax({
type: "post",
url: "ajax.php",
dataType: "json",
data: "",
success:function(redata){
if(redata.status==1){
xtip.close(loadid);
}
}
});
}
</script>

表达式：xtip.load(tip, config)
参数	说明	属性
tip	消息内容	[类型:string] [可选] [默认:空]
config.times	几秒后自动关闭	[类型:number] [可选] [默认:0(不自动关闭)]
config.lock	是否锁定滚动条	[类型:boolean] [可选] [默认:false(不锁定)]

查看参数

面板菜单 xtip.sheet()

面板菜单主要应用于移动端，会锁定滚动条。面板菜单选项无回调函数时，点击选项不会有反应。

<button class="xbutton" onclick="xtiper_sheet1()">默认</button>
<button class="xbutton" onclick="xtiper_sheet2()">带标题、靠左</button>
<button class="xbutton" onclick="xtiper_sheet3()">强制选择</button>
<script type="text/javascript">
function xtiper_sheet1()
{
sheet = xtip.sheet({
btn: ['选择1 回调函数','选择2 链接跳转(当前页面)','选择3 链接跳转(新页面)','选择4 空/空字符/未定义'],
btn1: function(){
xtip.msg('你选择了1')
},
btn2: 'open.html',
btn3: ['open.html','blank'],
});
}
function xtiper_sheet2()
{
sheet = xtip.sheet({
title: '确定要删除吗？',
align: 'left',
btn: ['确定'],
btn1: function(){
xtip.msg('已经删除了！')
},
end: function(){
xtip.msg('关闭了',{times:1});
},
btnClose: 'Close',
});
}
function xtiper_sheet3()
{
sheet = xtip.sheet({
force: '请选择一个',
btn: ['蕾姆','拉姆'],
btn1: function(){
xtip.msg('蕾姆赛高！');
},
btn2: function(){
xtip.msg('拉姆赛高！');
},
});
}
</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() 不需要

<button class="xbutton" onclick="xip_close1()">开启一个层</button>
<button class="xbutton" onclick="xtip.close(xipid)">关闭指定层</button>
<button class="xbutton" onclick="xtip.closeAll()">关闭所有层</button>
<script type="text/javascript">
var xipid;
function xip_close1()
{
xipid = xtip.win({
title: '测试',
shade: false
});
}
</script>

表达式：xtip.close(id)
参数	说明	属性
id	弹层 id 值	[类型:string] [必填]

表达式：xtip.closeAll()
参数	说明	属性
无	-	-

查看参数