xtipers用法及demo合集
代码语言：html
所属分类：选择器
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/xtiper.css">
<script src="http://repo.bfw.wiki/bfwrepo/js/xtiper.min.js" type="text/javascript"></script>
<title>Xtiper</title>
</head>
<body>
<div class="top top_height app_width hide_ful show_1200">
<div class="top_btn ll"><button><span></span><span></span><span></span></button></div>
<div class="top_cen">关于 Xtiper</div>
<div class="top_btn lr"><button><span></span><span></span></button></div>
</div>
<div class="top_zw top_height hide_ful show_1200"></div>
<div class="pleft_zw"></div>
<div class="page">
<div class="page_pr">
<div class="pleft">
<ul>
<li class="on li_explain"><a href="#explain">关于 Xtiper</a></li>
<li class="li_msg"><a href="#msg">短消息 xtip.msg</a></li>
<li class="li_danmu"><a href="#danmu">弹幕 xtip.danmu</a></li>
<li class="li_tips"><a href="#tips">气泡 xtip.tips</a></li>
<li class="li_alert"><a href="#alert">通知 xtip.alert</a></li>
<li class="li_confirm"><a href="#confirm">反馈 xtip.confirm</a></li>
<li class="li_win"><a href="#win">弹窗层 xtip.win</a></li>
<li class="li_photo hide_app"><a href="#photo">相册层 xtip.photo</a></li>
<li class="li_photoapp"><a href="#photoapp">移动端相册层 xtip.photoApp</a></li>
<li class="li_open"><a href="#open">页面层 xtip.open</a></li>
<li class="li_load"><a href="#load">加载层 xtip.load</a></li>
<li class="li_sheet"><a href="#sheet">面板菜单 xtip.sheet</a></li>
<li class="li_close"><a href="#close">关闭层 xtip.close<All></a></li>
</ul>
</div>
<div class="pright">
<div id="explain" class="maindiv">
<div class="page_tit">关于 Xtiper</div>
<div class="page_con">
<div class="page_tit2">概述</div>
<p>Xtiper 是一款整合 PC 、移动端的弹层弹窗（甚至还有弹幕）web 应用解决方案。采用原生的 javascript 编写，体积小，不依赖任何 js 库，不加载任何图片，使用方便。</p>
<p><br></p>
<div class="page_tit2">注意事项</div>
<p>1.Xtiper 可拖动的层可以拖动 <span class="litit">3/4</span> 的窗体到浏览器外部</p>
<p><br></p>
<p>2.面板菜单主要应用于移动端 ，其他层 pc 和移动端可通用</p>
<p><br></p>
<p>3.所有 <span class="litit">string</span> 类型的可选值都可以用首字母简写表示，例如： <span class="litit">black</span> 可简写成 <span class="litit">b</span> 。也可以大小写混合，例如 <span class="litit">noready</span> 可以写成 <span class="litit">noReady</span> 。</p>
<p><br></p>
<p>4.关于属性的说明</p>
<table class="xtable xfirst">
<tr>
<td style="white-space:nowrap;">属性</td>
<td>说明</td>
</tr>
<tr>
<td style="white-space:nowrap;">[必填]</td>
<td>如字面意思</td>
</tr>
<tr>
<td style="white-space:nowrap;">[可选]</td>
<td>如字面意思</td>
</tr>
<tr>
<td style="white-space:nowrap;">[默认:true]</td>
<td>默认值为 <span class="litit">true</span></td>
</tr>
<tr>
<td style="white-space:nowrap;">[默认:空]</td>
<td>默认值为 <span class="litit">空</span> 或者 <span class="litit">空字符</span> 或 <span class="litit">未定义</span></td>
</tr>
<tr>
<td style="white-space:nowrap;">[类型]</td>
<td>数据类型 (number, string, boolean, array, function, this)</td>
</tr>
<tr>
<td style="white-space:nowrap;">[选值]</td>
<td>从文档中给出的值中选取一个填写</td>
</tr>
<tr>
<td style="white-space:nowrap;">[说明]</td>
<td>额外的说明</td>
</tr>
<tr>
<td style="white-space:nowrap;">[限制]</td>
<td>说明限制条件</td>
</tr>
<tr>
<td style="white-space:nowrap;">( )</td>
<td>解释说明，例如：[默认:#ffffff(白色)]</td>
</tr>
<tr>
<td style="white-space:nowrap;">< ></td>
<td>不一定存在，例如：[默认:确定<,取消>]，表示有可能是 <span class="litit">确定</span> 或者 <span class="litit">确定,取消</span></td>
</tr>
</table>
<p><br></p>
<p>5.弹窗层按钮无回调函数时，点击按钮会关闭；面板菜单选项无回调函数时，点击选项不会有反应。</p>
<p><br></p>
<p>6.<span class="litit">win</span> 弹窗层和 <span class="litit">open</span> 页面层按下键盘的 <span class="litit">Esc</span> 键可关闭窗口。<span class="litit">win</span> 弹窗层如果只有一个 <span class="litit">btn1</span> 的回调按钮，那么按下回车会调用 <span class="litit">btn1</span> 的回调函数，具体在实际案例中体验一下。</p>
<p><br></p>
<p>7.IE 兼容至 IE10 ，IE10 以下的不进行兼容，以后也不会兼容！</p>
</div>
</div>
<div id="msg" class="maindiv">
<div class="page_tit">短消息 xtip.msg()</div>
<div class="page_tit3">短消息顾名思义，就是用来显示简短的文本消息的，PC 最多支持 <span>50</span> 个中文字符（带图标 <span>48</span> 个），移动端最多支持 <span>18</span> 个中文字符（带图标 <span>16</span> 个），更长的文本消息请用 <span>win</span> 弹窗层或 <span>open</span> 页面层实现</div>
<div class="table_row">
<div class="example">
<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>
</div>
<div class="pre">
<ol>
<li><span><button class="xbutton" onclick="xtip.msg('这是一个短消息')">短消息</button></span></li>
<li><span><button class="xbutton" onclick="xtip.msg('The world!',{times:4})">停顿4秒</button></span></li>
<li><span><button class="xbutton" onclick="xtip.msg('顶部消息',{pos:'t'})">顶部消息</button></span></li>
<li><span><button class="xbutton" onclick="xtip.msg('底部消息',{pos:'b'})">底部消息</button></span></li>
<li><span><button class="xbutton" onclick="xtip.msg('带图标',{icon:'s'})">带图标</button></span></li>
<li><span><button class="xbutton" onclick="xtip.msg('白色风格',{icon:'e',type:'w'})">白色风格</button></span></li>
<li><span><button class="xbutton" onclick="xtip.msg('自定义图标',{icon:'css/img.png',type:'w'})">自定义图标</button></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div>
</div>
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">表达式：xtip.msg(<em>tip</em>, <em>config</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>tip</td>
<td>消息内容</td>
<td>[类型:string] [必填]</td>
</tr>
<tr>
<td>config.times</td>
<td>停顿秒数</td>
<td>[类型:number] [可选] [默认:2]</td>
</tr>
<tr>
<td>config.type</td>
<td>风格</td>
<td>
<p>[类型:string] [可选] [默认:空] [选值]</p><br>
<table>
<tr><td width="120">可选值</td><td>解释</td></tr>
<tr><td><span>b</span> 或 <span>black</span></td><td>黑色 [默认]</td></tr>
<tr><td><span>w</span> 或 <span>white</span></td><td>白色</td></tr>
</table>
</td>
</tr>
<tr>
<td>config.pos</td>
<td>位置</td>
<td>
<p>[类型:string] [可选] [默认:m(中间)] [选值]</p><br>
<table>
<tr><td width="120">可选值</td><td>解释</td></tr>
<tr><td><span>m</span> 或 <span>middle</span></td><td>中间 [默认]</td></tr>
<tr><td><span>t</span> 或 <span>top</span></td><td>顶部</td></tr>
<tr><td><span>b</span> 或 <span>bottom</span></td><td>底部</td></tr>
</table>
</td>
</tr>
<tr>
<td>config.icon</td>
<td>图标</td>
<td>
<p>[类型:string] [可选] [选值]</p><br>
<table>
<tr><td width="120">固定可选值</td><td>解释</td></tr>
<tr><td><span>s</span> 或 <span>success</span></td><td>成功</td></tr>
<tr><td><span>e</span> 或 <span>error</span></td><td>失败</td></tr>
<tr><td><span>w</span> 或 <span>warning</span></td><td>警告</td></tr>
<tr><td><span>a</span> 或 <span>ask</span></td><td>询问</td></tr>
<tr><td><span>h</span> 或 <span>hello</span></td><td>微笑</td></tr>
</table><br>
<p>或者</p><br>
<p>[类型:string / array] [可选] [选值]</p><br>
<table>
<tr><td width="120">自定义图片</td><td>解释</td></tr>
<tr><td><span>string</span> 类型</td><td>图片路径，例如：<span>css/img.png</span></td></tr>
</table>
</td>
</tr>
<tr>
<td>config.zindex</td>
<td>层叠顺序</td>
<td>[类型:number] [可选] [默认:99999]</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div>
<div id="danmu" class="maindiv">
<div class="page_tit">弹幕 xtip.danmu()</div>
<div class="page_tit3">弹幕是我在所有层中唯一带着好玩、和实验性质写的，在实际项目中用到的可能性不高，所以在给定参数上不会纠结太多，例如字体大小、弹幕速度之类的。动画改用 css3 实现，性能大幅度提升。弹幕的分布区间是从顶部 10 像素 - 页面高度的 65% 的位置</div>
<div class="table_row">
<div class="example">
<button class="xbutton" onclick="xtip.danmu('弹幕填充',{light:true,type:'b',icon:'w'})">弹幕</button>
<button class="xbutton" onclick="danmulist2();this.innerHTML='多点几次测试性能'">前方高能</button>
<button class="xbutton" onclick="danmuclose()">关闭弹幕</button>
<script>
function danmu()
{
icon = arrforone(['','s','e','w','a','h','css/img.png']);
type = arrforone(['w','b']);
tip = '随机弹幕'+randbix(1,10);
xtip.danmu(tip,{
icon: icon,
type: type,
});
}
//数组随机取值
function arrforone(items)
{
var item = items[Math.floor(Math.random()*items.length)];
return item;
}
var dm;
function danmulist2()
{
danmu();
dm = setInterval(function(){
danmu();
},3*200);
return dm;
}
function danmuclose()
{
if(dm){
clearInterval(dm);
dm = null;
}
}
function randomNum(n,m)
{
var rander = Math.round(Math.random()*(m-n))+n;
return rander;
}
//随机小数点
function randbix(n,m)
{
bix = Math.random().toFixed(2);
num = Number(randomNum(n,m)) + Number(bix);
r2 = randomNum(2,10);
return num.toFixed(r2);
}
</script>
</div>
<div class="pre">
<ol>
<li><span><button class="xbutton" onclick="xtip.danmu('弹幕填充',{light:true,type:'b',icon:'w'})">弹幕</button></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div>
</div>
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">表达式：xtip.danmu(<em>tip</em>, <em>config</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>tip</td>
<td>消息内容</td>
<td>[类型:string] [必填]</td>
</tr>
<tr>
<td>config.type</td>
<td>风格</td>
<td>
<p>[类型:string] [可选] [默认:空] [选值]</p><br>
<table>
<tr><td width="120">可选值</td><td>解释</td></tr>
<tr><td><span>b</span> 或 <span>black</span></td><td>黑色 [默认]</td></tr>
<tr><td><span>w</span> 或 <span>white</span></td><td>白色</td></tr>
</table>
</td>
</tr>
<tr>
<td>config.icon</td>
<td>图标</td>
<td>
<p>[类型:string] [可选] [选值]</p><br>
<table>
<tr><td width="120">固定可选值</td><td>解释</td></tr>
<tr><td><span>s</span> 或 <span>success</span></td><td>成功</td></tr>
<tr><td><span>e</span> 或 <span>error</span></td><td>失败</td></tr>
<tr><td><span>w</span> 或 <span>warning</span></td><td>警告</td></tr>
<tr><td><span>a</span> 或 <span>ask</span></td><td>询问</td></tr>
<tr><td><span>h</span> 或 <span>hello</span></td><td>微笑</td></tr>
</table><br>
<p>或者</p><br>
<p>[类型:string / array] [可选] [选值]</p><br>
<table>
<tr><td width="120">自定义图片</td><td>解释</td></tr>
<tr><td><span>string</span> 类型</td><td>图片路径，例如：<span>css/img.png</span></td></tr>
</table>
</td>
</tr>
<tr>
<td>config.light</td>
<td>是否高亮显示</td>
<td>[类型:boolean] [可选] [默认:false] [限制:弹幕多于1条时生效]</td>
</tr>
<tr>
<td>config.zindex</td>
<td>层叠顺序</td>
<td>[类型:number] [可选] [默认:99999]</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div>
<div id="tips" class="maindiv">
<div class="page_tit">气泡 xtip.tips()</div>
<div class="page_tit3">气泡层一个关联元素只能有一个实例。可应用于对表单提交验证的提示等。</div>
<div class="table_row">
<div class="example">
<button class="xbutton" id="tipsxf" disabled="disabled">被关联元素</button><br><br>
<button class="xbutton" onclick="xtip.tips('上提示',this,{pos:'t',bgcolor:'white'})">上</button>
<button class="xbutton" onclick="xtip.tips('下提示',this,{pos:'b',bgcolor:'#2b84d0'})">下</button>
<button class="xbutton" onclick="xtip.tips('左提示',this,{pos:'l',bgcolor:'#37b72c'})">左</button>
<button class="xbutton" onclick="xtip.tips('右提示',this,{pos:'r',bgcolor:'#f89310'})">右</button>
<button class="xbutton" onclick="xtip_tips()">关联元素id</button>
<script type="text/javascript">
function xtip_tips()
{
xtip.tips('关联元素，长文本长文本长文本长文本，长文本长文本长文本。长文本长文本长文本长文本。','tipsxf',{
bgcolor: 'rgb(255,255,255)',
times: 3,
pos: 't',
});
}
</script>
</div>
<div class="pre">
<ol>
<li><span><button class="xbutton" id="tipsxf" disabled="disabled">被关联元素</button><br><br></span></li>
<li><span><button class="xbutton" onclick="xtiper_tips('上提示',this,{pos:'t',bgcolor:'white'})">上</button></span></li>
<li><span><button class="xbutton" onclick="xtiper_tips('下提示',this,{pos:'b',bgcolor:'#2b84d0'})">下</button></span></li>
<li><span><button class="xbutton" onclick="xtiper_tips('左提示',this,{pos:'l',bgcolor:'#37b72c'})">左</button></span></li>
<li><span><button class="xbutton" onclick="xtiper_tips('右提示',this,{pos:'r',bgcolor:'#f89310'})">右</button></span></li>
<li><span><button class="xbutton" onclick="xtiper_tips1()">关联元素id</button></span></li>
<li><span></span></li>
<li><span><script type="text/javascript"></span></li>
<li><span>function xtiper_tips1()</span></li>
<li><span>{</span></li>
<li class="level2"><span>xtiper_tips('关联元素，长文本长文本长文本长文本，长文本长文本长文本。','tipsxf',{</span></li>
<li class="level3"><span>bgcolor: 'rgb(255,255,255)',</span></li>
<li class="level3"><span>times: 3,</span></li>
<li class="level3"><span>pos: 't',</span></li>
<li class="level2"><span>});</span></li>
<li><span>}</span></li>
<li><span></script></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div>
</div>
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">表达式：xtip.tips(<em>tip</em>, <em>element</em>, <em>config</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>tip</td>
<td>消息内容</td>
<td>[类型:string] [必填]</td>
</tr>
<tr>
<td>element</td>
<td>关联元素</td>
<td>
<p>[类型:string / this] [必填] [选值]</p><br>
<table>
<tr><td width="120">可选值</td><td>解释</td></tr>
<tr><td>(关联元素id)</td><td>例如：<span>#id</span> (#号可以省略)，不可以使用 <span>.class</span> 类名选择器</td></tr>
<tr><td><span>this</span></td><td>元素本身</td></tr>
</table>
</td>
</tr>
<tr>
<td>config.bgcolor</td>
<td>背景颜色</td>
<td>[类型:string] [可选] [默认:#000000(黑色)]</td>
</tr>
<tr>
<td>config.color</td>
<td>字体颜色</td>
<td>[类型:string] [可选] [默认:#ffffff(白色)]<br>[说明:当背景色为白色时，字体颜色自动变成黑色，也可以手动设置]</td>
</tr>
<tr>
<td>config.times</td>
<td>停顿秒数</td>
<td>[类型:number] [可选] [默认:2]</td>
</tr>
<tr>
<td>config.pos</td>
<td>方向</td>
<td>
<p>[类型:string] [可选] [默认:r] [选值]</p><br>
<table>
<tr><td width="120">可选值</td><td>解释</td></tr>
<tr><td><span>t</span> 或 <span>top</span></td><td>上</td></tr>
<tr><td><span>b</span> 或 <span>bottom</span></td><td>下</td></tr>
<tr><td><span>l</span> 或 <span>left</span></td><td>左</td></tr>
<tr><td><span>r</span> 或 <span>right</span></td><td>右 [默认]</td></tr>
</table>
</td>
</tr>
<tr>
<td>config.zindex</td>
<td>层叠顺序</td>
<td>[类型:number] [可选] [默认:99999]</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div>
<div id="alert" class="maindiv">
<div class="page_tit">通知 xtip.alert()</div>
<div class="page_tit3 hide_1200" style="cursor:pointer;" onclick="diff();">通知 <span>xtip.alert()</span> 和 反馈 <span>xtip.confirm</span> 的区别是什么？</div>
<div class="table_row">
<div class="example">
<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><br><br>
<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>
</div>
<div class="pre">
<ol>
<li><span><button class="xbutton" onclick="xtip.alert('通知')">通知</button></span></li>
<li><span><button class="xbutton" onclick="xtip.alert('3秒后自动消失','e',{times:3,title:'Are you sure?',btn:'Sure'})">3秒后自动消失</button></span></li>
<li><span><button class="xbutton" onclick="xtip.alert('无遮罩','w',{shade:false})">无遮罩</button></span></li>
<li><span></span></li>
<li><span><button class="xbutton" onclick="xtip.alert('无图标')">无图标</button></span></li>
<li><span><button class="xbutton" onclick="xtip.alert('成功','s')">成功</button></span></li>
<li><span><button class="xbutton" onclick="xtip.alert('失败','e')">失败</button></span></li>
<li><span><button class="xbutton" onclick="xtip.alert('警告','w')">警告&am.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0