|
|
YIQI-YAP 是模仿APP页面切换效果，主要原理是把所有页面写到一个HTML中，
并根据需求调用不同的页面，并有多种切换效果。
扫码体验
先设置 body
<body id="YIQI-UI">
</body>
在body中创建页面如：
<view class="yiqi-ui-pages">
<view class="yiqi-ui-view" id="index">默认首页</view>
<view class="yiqi-ui-view" id="about" fun="demo">第二页面</view>
<view class="yiqi-ui-view" id="news" fun="scroll">第三页面</view>
<view class="yiqi-ui-view" id="user">第四页面</view>
</view>
参数注解：
id = 每个view为一个独立页面，把你的逻辑代码写到<view></view>中间，并为这个页面绑定一个唯一ID（必须）
fun = 打开页面后，执行函数（可选）
<script>
$("#YIQI-UI").yiqi_ui({
addonsname: 'page', //类型
pagedefault: '#index', //默认首页
pagebackground:'#fff', //页面背景颜色
pageanimate:'right' //从右层弹出，支持 left、 right、 top、 bottom
});
</script>
插入通用头部：
<view class="yiqi-ui-top">
<a href="javascript:;" class="close" viewid="about" viewfun="close">关闭</a>
</view>
参数注解：
viewid = 绑定页面ID，如view中的id一致（必须）
viewfun = 关闭后执行函数（可选）
通用头部要插入到view页面内。
插入通用页脚：
<view class="yiqi-ui-footer">
<view class="w25 text-c"><a href="javascript:;" class="click" viewid="index">首页</a></view>
<view class="w25 text-c"><a href="javascript:;" class="click" viewid="about" viewgb="#ccc">关于</a></view>
<view class="w25 text-c"><a href="javascript:;" class="click" viewid="news" viewgb="#999">新闻</a></view>
<view class="w25 text-c"><a href="javascript:funpage();">我的</a></view>
</view>
参数注解：
viewid = 绑定页面ID，如view中的id一致（必须）
viewgb = 独立为这个页面设置背景色（可选）
view.yiqi-ui-footer要放到view.yiqi-ui-pages外层。
侧栏：
<a href="javascript:;" class="sidebar" viewid="sidebar" viewgb="#ffff00" sidebarsize="250px" opensidebar="left" viewfun="sidebar">打开侧栏</a>
<view class="yiqi-ui-sidebar" id="sidebar">
我是侧边栏
</view>
参数注解：
viewid = 侧栏页面ID（必须）
viewgb = 独立为这个页面设置背景色（可选）
sidebarsize = 侧栏弹出宽度（必须）
opensidebar = 侧栏弹出方向，支持 left、 right、 top、 bottom
viewfun = 弹出后执行函数（可选）
view.yiqi-ui-sidebar要放到view.yiqi-ui-pages内层。
其它：
打开页面：<a href="javascript:;" class="click" viewid="news" viewgb="#ccc">新闻</a>
参数注解：
class 必须为 click （必须）
viewid 要打开页面的绑定ID（必须）
viewgb = 独立为这个页面设置背景色（可选）
关闭页面：<a href="javascript:;" class="close" viewid="news" viewfun="close">关闭</a>
参数注解：
class 必须为 close （必须）
viewid 要关闭页面的绑定ID（必须）
viewfun = 关闭后执行函数（可选）
close = function close(){}
用函数打开新页面：<a href="javascript:funpage();">打开新页面</a>
function funpage()
{
$("#YIQI-UI").yiqi_ui({
addonsname: 'pagediv',//类型
pageid: '#user',//要打开页面的绑定ID
pagebackground:'#00ffff',//给页面设置背景色
pageanimate:'bottom',//页面弹出方向，支持 left、 right、 top、 bottom
viewfun:'demo'//打开页面后，执行函数
});
}
打开弹出窗：<a href="javascript:openalert();">打开弹出窗</a>
YIQI-YAP的弹窗只有一个，更多样式请使用layui
function openalert()
{
$(".yiqi-ui-alert").yiqi_ui({
addonsname: 'alert', //类型
alertcontent: '我是一个小窗窗', //弹窗内容
alertbtnfont: '知道了', //按钮文字
viewfun:'close' //关闭弹窗后执行函数
});
}
列表页面触底滚动：
在view面页绑定函数scroll
<view class="yiqi-ui-view" id="news" fun="scroll">我是新闻列表页面</view>
设置函数
function scroll()
{
var d = true;
var $div = $('#news');
var divHeight = $div.outerHeight();
var threshold = 10;
$div.scroll(function(){
var scrollTop = $div.scrollTop();
var maxScrollTop = $div.get(0).scrollHeight - divHeight;
if (maxScrollTop - scrollTop <= threshold) {
if(d){
var html = '';
for (let i = 0; i < 10; i++) {
html += '<p>新闻内容'+i+'</p>';
}
$($div).append(html);
d = true;
return;
}
d = false;
}
});
}
背景水印
<div id="water-wrapper"></div>
<script>
$("#water-wrapper").yiqi_ui({
addonsname: 'water',
value:'YIQI-UI'
});
</script>
金额转大写
<script>
var moeny = $("#YIQI-UI").yiqi_ui({
addonsname: 'numberParseChina',
value:'1000'
});
</script>
判断手机号 返回true或false
<script>
var phone = $("#YIQI-UI").yiqi_ui({
addonsname: 'phone',
value:'13199509559'
});
</script>
判断邮箱 返回true或false
<script>
var email = $("#YIQI-UI").yiqi_ui({
addonsname: 'email',
value:'13199509559@qq.com'
});
</script>
<div class="yiqi-ui-image-gallery">
<img src="https://www.ourphp.net/templates/ourphp/images/p111.jpg?988" class="w50">
<img src="https://www.ourphp.net/templates/ourphp/images/p1.png?988" class="w50">
<img src="https://www.ourphp.net/templates/ourphp/images/p2.png?123" class="w50">
</div>
<div class="yiqi-ui-lightbox">
<div class="yiqi-ui-lightbox-content">
<span class="yiqi-ui-close">×</span>
<img class="yiqi-ui-lightbox-image" src="">
</div>
</div>
<script>
$(".yiqi-ui-image-gallery").yiqi_ui({
addonsname: 'imglightbox',
threshold:50
});
</script>
|
