Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等,并在其上开发的大量UI组件组成的前端开发套件。
森中灵 最后提交于3月前 整理V8.0.6
zhiqim_floater.mobile.js10KB
/*
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。[遇见知启蒙,邂逅框架梦]
*
* https://zhiqim.org/project/zhiqim_framework/zhiqim_ui.htm
*
* Zhiqim UI is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
* http://license.coscl.org.cn/MulanPSL2
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
+(function(Z)
{
/****************************************/
//“操作”弹窗
/****************************************/
Z.Popup = Z.Class.newInstance();
Z.Popup.cache = new Z.HashMap();
Z.Popup.close = function(id, immediate)
{
id = id?((id.charAt(0)=="#")?id.substring(1):id):id;
if (!id)
{//删除全部
Z.each(Z.Popup.cache.values(), function(zmPopup){
zmPopup.fadeOut(immediate);
});
Z.Popup.cache.clear();
}
else
{//找到id删除
var zmPopup = Z.Popup.cache.get(id);
if (zmPopup)
{
zmPopup.fadeOut(immediate);
Z.Popup.cache.remove(id);
}
}
};
Z.Popup.get = function(id)
{
id = id?((id.charAt(0)=="#")?id.substring(1):id):id;
return Z.Popup.cache.get(id);
};
Z.Popup.prototype =
{
//start of Z.Popup.prototype
defaults:
{//定义
//基础参数
target: null, //指定弹出对象
start: "left", //弹窗起始位置:left/top/right/bottom
overlay: "all", //覆盖部分:all/part
overlayRatio: "75", //覆盖该主轴上的比例
},
validate: function()
{//验证参数是否有误
if (!this.target)
{//null,或为空、0
Z.alert("Z.Popup参数“target”未设置!");
return false;
}
if (Z.T.isString(this.target) || Z.T.isObject(this.target))
{//字符串类型,或者对象类型
if (!Z(this.target)[0]) {
Z.alert("Z.Popup参数“target”设置不正确!");
return false;
}
}
if (!Z.AR.contains(["left","top","right","bottom"],this.start)){
this.start = "left";
}
if (!Z.AR.contains(["part","all"],this.overlay)){
this.start = "part";
}
return true;
},
execute: function()
{//执行
if (!this.validate()){
return;
}
this.id = Z(this.target).attr("id");
if (!this.id){
this.id = "Z_zmPopup_" + Z.Ids.uuid();
Z(this.target).attr(this.id);
}
Z.Popup.cache.put(this.id,this);
//定义popup
this.creatPopup();
//事件绑定
this.attachEvent();
//执行弹出
this.fadeIn();
},
creatPopup: function()
{//创建popup盒子
this.$popup = Z(this.target);
this.$popup.removeClass("z-overlay-all").removeClass("z-overlay-part")
.addClass("z-overlay-" + this.overlay);
this.$popup.removeClass("z-top").removeClass("z-right").removeClass("z-bottom").removeClass("z-left")
.addClass("z-" + this.start).css("display","none");
this.$bg = this.$popup.find(".z-popup-bg");
this.$main = this.$popup.find(".z-popup-main");
this.$title = this.$popup.find(".z-popup-title");
this.$sure = this.$popup.find(".z-popup-sure");
this.$cancel = this.$popup.find(".z-popup-cancel");
this.$con = this.$popup.find(".z-popup-content");
},
attachEvent: function()
{//事件绑定
this.$bg.on("touchstart",this.fadeOut,this);
this.$cancel.on("touchstart",this.fadeOut,this);
if (this.$sure[0]){
this.$sure[0].$this = this;
this.$sure.on("touchstart",function(ev){
this.$this.fadeOut(ev);
})
};
var transitionEndEvent = this.transitionFixed();
this.$main.on(transitionEndEvent,this.transitionEnd,this);
},
fadeIn: function()
{//显示弹窗
var that = this;
var req = window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| function(fun){window.setTimeout(fun,1000/60)};
req(function(){
that.$popup.css("display","block");
req(function(){
that.$popup.addClass("z-popup-fadeIn");
that = null;
});
});
},
fadeOut: function(ev)
{//隐藏弹窗
Z.E.forbidden(ev);
this.$popup.removeClass("z-popup-fadeIn");
this.$popup.addClass("z-popup-fadeOut");
Z.Popup.cache.remove(this.id);
if (Z(this.target).attr("id").indexOf("Z_zmPopup_") > -1){
Z(this.target).removeAttr("id");
}
},
transitionEnd: function(ev)
{//动画结束,退出动画结束时触发
if(this.$popup.hasClass("z-popup-fadeOut")){
this.$popup.css("display","none");
this.$popup.removeClass("z-popup-fadeOut");
}
},
transitionFixed: function()
{//兼容写法
var $div = document.createElement('div');
if ($div.style["transition"] !== undefined ){
$div = null;
return "transitionend";
}
if ($div.style["OTransition"] !== undefined ){
$div = null;
return "oTransitionEnd";
}
if ($div.style["WebkitTransition"] !== undefined ){
$div = null;
return "webkitTransitionEnd";
}
},
//end of Z.Popup.prototype
}
/****************************************/
//“操作列表”,底部展示/选择按钮
/****************************************/
Z.ActionList = Z.Class.newInstance();
Z.ActionList.cache = new Z.HashMap();
Z.ActionList.close = function(id, immediate)
{
id = id?((id.charAt(0)=="#")?id.substring(1):id):id;
if (!id)
{//删除全部
Z.each(Z.ActionList.cache.values(), function(actionList){
actionList.fadeOut(immediate);
});
Z.ActionList.cache.clear();
}
else
{//找到id删除
var actionList = Z.ActionList.cache.get(id);
if (actionList)
{
actionList.fadeOut(immediate);
Z.ActionList.cache.remove(id);
}
}
};
Z.ActionList.get = function(id)
{
id = id?((id.charAt(0)=="#")?id.substring(1):id):id;
return Z.ActionList.cache.get(id);
};
Z.ActionList.prototype =
{
//start of Z.ActionList.prototype
defaults:
{//定义
id: "", //按钮ID,可选
html: "", //内容自定义
height: .7, //高度限制
},
validate: function()
{//验证参数是否有误
if (Z.V.isEmpty(this.html)){
Z.alert('Z.ActionList参数“html”未设置!');
return false;
}
if (!this.id) {
this.id = "Z_actionList_" + Z.Ids.uuid();
}
return true;
},
execute: function()
{//执行
if (!this.validate){
return;
}
Z.ActionList.cache.put(this.id,this);
//定义popup
this.creatActionList();
//事件绑定
this.attachEvent();
//执行弹出
this.fadeIn();
},
creatActionList: function()
{//创建popup盒子
// language=HTML
var listHtml = '<div class="z-popup z-overlay-part z-bottom"><div class="z-popup-bg"></div><div class="z-popup-main"><div class="z-popup-content"></div></div></div></div>';
this.$action = Z(listHtml);
this.$action.appendTo(Z("body"));
//touchend 事件
Z.ResetTouchEnd.load(this.$action);
//数值按钮
var $content = this.$action.find(".z-popup-content");
$content.htmlc(this.html);
if (this.html.match(/data-role\s*=\s*"z-numInput"/)){
Z.NumInput.load($content);
}
this.$bg = this.$action.find(".z-popup-bg");
this.$main = this.$action.find(".z-popup-main");
this.$con = this.$action.find(".z-popup-content");
//计算高度
var docHeight = parseInt(Z.D.clientHeight());
var conHeight = docHeight * this.height;
this.$con.css("height",conHeight)
},
attachEvent: function()
{//事件绑定
this.$bg.on("touchstart",this.fadeOut,this);
var transitionEndEvent = this.transitionFixed();
this.$main.on(transitionEndEvent,this.transitionEnd,this);
},
fadeIn: function()
{//显示弹窗
var that = this;
var req = window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| function(fun){window.setTimeout(fun,1000/60)};
req(function(){
that.$action[0].style.display = "block";
req(function(){
that.$action.addClass("z-popup-fadeIn");
});
});
},
fadeOut: function()
{//隐藏弹窗
Z.ActionList.cache.remove(this.id);
this.$action.removeClass("z-popup-fadeIn");
this.$action.addClass("z-popup-fadeOut");
},
transitionEnd: function(ev)
{//动画结束,退出动画结束时触发
if(this.$action.hasClass("z-popup-fadeOut")){
this.$action.remove();
}
},
transitionFixed: function()
{//兼容写法
var $div = document.createElement('div');
if ($div.style["transition"] !== undefined ){
$div = null;
return "transitionend";
}
if ($div.style["OTransition"] !== undefined ){
$div = null;
return "oTransitionEnd";
}
if ($div.style["WebkitTransition"] !== undefined ){
$div = null;
return "webkitTransitionEnd";
}
},
//end of Z.ActionList.prototype
}
//END
})(zhiqim);