ADD New爲添加animation動畫部分
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>彈框</title>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<style type="text/css">
.window-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
filter: alpha(opacity=30);
opacity: 0.30;
background: #000;
display1: none;
font-size: 1px;
overflow: hidden;
}
.window-shadow {
border-radius: 4px 4px 0 0;
position: absolute;
background: #555;
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2,MakeShadow=false,ShadowOpacity=0.2);
}
.panel.panelnomargin {
margin: 0px 0px 0px 0px;
}
.window {
background-color: #afd2f0;
padding: 0px 6px 6px 6px;
}
.window {
font-size: 12px;
position: absolute;
background: #fafafa;
padding: 0px;
border: 1px solid #666;
}
.panel {
position: relative;
margin: 0px 0px 0px 0px;
}
li{
list-style: none;
border: solid #00ffd1;
margin:10px;
width:420px;
cursor:pointer;
}
.pos{
position: absolute;
width: 500px;
height: 600px;
border: solid burlywood;
left: 531px;
display:none;
}
</style>
</head>
<body>
<div style="border: solid #00ffd1;width:520px; position: absolute;">
<ul>
<li src="https://www.baidu.com">********************first***********************</li>
<li src="https://www.taobao.com">********************second************************</li>
<li src="http://www.w3school.com.cn/">********************three************************</li>
<li src="https://www.mi.com/">********************four************************</li>
</ul>
</div>
<div class="pos">
<iframe src="https://www.baidu.com" width="100%" height="100%"></iframe>
</div>
</div>
</body>
<script src="openwindow.js"></script>
<script src="ta3Index.js"></script>
<script>
$("li").hover(function(event){
},function(event){
closeWindow('imgWin')
});
$("li").click(function(){
var src=$(this).attr("src");
openWindow('imgWin', '個人參保信息', src, {"dto['aac001']": "1021211"}, 650, 350, null, null,true,null,null,true);
});
</script>
</html>JS
/**
* 打開窗口
* @method openWindow
* @param {String} id 窗口id
* @param {String} title 窗口標題
* @param {String} url aciton地址
* @param {map} parameter 入參 json格式對象，例如:{"dto['aac001']":"1000001","dto['aac002']":"01"}
* @param {Number} width 寬度 不要加 px；也可設置成百分比，例如"80%"
* @param {Number} height 高度 不要加 px；也可設置成百分比，例如"80%"
* @param {Function} onLoad 窗口加載完畢回調，如果useIframe=true的話 這參數不起作用
* @param {Funciton} onClose 窗口關閉的時候回調
* @param {Boolean} useIframe 是否使用iframe的方式加載，默認爲false，iframe方式會存在seesion丟失，應當避免;爲true的時候，打開頁面爲一個完整的jsp頁面
* @param {String} style 自定義打開窗口css樣式
* @param {Object} myoptions window的創建參數
*/ //ADD NEW
function openWindow(id, title, url, parameter, width, height, onLoad, onClose, useIframe, style, myoptions,animation) {
var $w = $("<div id=\"" + id + "\" " + (style ? "style=\"" + style + "\"" : "") + "></div>");
$w.appendTo($("body"));
var tawindow = new TaWindow_new($w);
console.log(tawindow);
var options = {};
title ? options.title = title : null;
width ? options.width = width : options.width = 200;
height ? options.height = height : options.height = 200;
onLoad ? options.onLoad = onLoad : null;
//ADD NEW
animation ? options.animation = animation : false;
options.modal = false;
options.resizable = false;
options.minimizable = false;
options.collapsible = false;
if (parameter) {
if (url.indexOf('?') != -1) {
url += "&" + jQuery.param(parameter);
} else {
url += "?" + jQuery.param(parameter);
}
}
if (url.indexOf('?') != -1) {
url += "&_r=" + Math.random();
} else {
url += "?_r=" + Math.random();
}
url += "&___businessId=" + "test";
// url += "&___businessId=" + "test";
if (url && useIframe) {
options.content = '<iframe type="window" src="' + url + '" frameborder="0" style="width:100%;height:100%"></iframe>';
} else {
url ? options.href = url : null;
}
options.onClose = function (_onClose) {
return function () {
if (_onClose) _onClose($w.attr("id"));
//remove window裏面TaUIManager對應的對象
Ta.core.TaUIManager.removeObjInCantainer($w);
Base.hideMask();
//$w.window('destroy');
tawindow.window_slide('destroy');
$w.remove();
};
}(onClose);
if (myoptions) $.extend(options, myoptions);
//$w.window(options);
tawindow.window_slide(options);
if (!url) {
onLoad();
}
}
function TaWindow_new($windowId) {
var defaults = {
zIndex: 999999,
draggable: true,
resizable: true,
shadow: true,
modal: false,
// window's property which difference from panel
title: 'New Window',
collapsible: true,
minimizable: true,
maximizable: true,
closable: true,
closed: false
};
function taWindow(options, param) {
if (typeof options == 'string') {
switch (options) {
case 'options':
return $.data($windowId[0], 'window').options;
case 'window':
return $.data($windowId[0], 'window').window;
case 'setTitle':
return $windowId.each(function () {
// $(this).ta3panel('setTitle', param);
new TaPanel($(this)).ta3panel('setTitle', param);
});
case 'open':
return $windowId.each(function () {
// $(this).ta3panel('open', param);
new TaPanel($(this)).ta3panel('open', param);
});
case 'close':
return $windowId.each(function () {
// $(this).ta3panel('close', param);
new TaPanel($(this)).ta3panel('close', param);
});
case 'destroy':
return $windowId.each(function () {
// $(this).ta3panel('destroy', param);
new TaPanel($(this)).ta3panel('destroy', param);
});
case 'refresh':
return $windowId.each(function () {
// $(this).ta3panel('refresh');
new TaPanel($(this)).ta3panel('refresh');
});
case 'resize':
return $windowId.each(function () {
// $(this).ta3panel('resize', param);
new TaPanel($(this)).ta3panel('resize', param);
});
case 'move':
return $windowId.each(function () {
// $(this).ta3panel('move', param);
new TaPanel($(this)).ta3panel('move', param);
});
case 'maximize':
return $windowId.each(function () {
// $(this).ta3panel('maximize');
new TaPanel($(this)).ta3panel('maximize');
});
case 'minimize':
return $windowId.each(function () {
// $(this).ta3panel('minimize');
new TaPanel($(this)).ta3panel('minimize');
});
case 'restore':
return $windowId.each(function () {
// $(this).ta3panel('restore');
new TaPanel($(this)).ta3panel('restore');
});
case 'collapse':
return $windowId.each(function () {
// $(this).ta3panel('collapse', param);
new TaPanel($(this)).ta3panel('collapse', param);
});
case 'expand':
return $windowId.each(function () {
// $(this).ta3panel('expand', param);
new TaPanel.ta3panel('expand', param);
});
}
}
options = options || {};
return $windowId.each(function () {
init(this, options);
setProperties(this);
});
}
function setSize(target, param) {
// $(target).ta3panel('resize');
new TaPanel($(target)).ta3panel('resize');
}
/**
* create and initialize window, the window is created based on panel component
*/
function init(target, options) {
var state = $.data(target, 'window');
var opts;
if (state) {
opts = $.extend(state.opts, options);
} else {
var t = $(target);
opts = $.extend({}, defaults, {
title: t.attr('title'),
collapsible: t.attr('collapsible') ? t.attr('collapsible') == 'true' : undefined,
minimizable: t.attr('minimizable') ? t.attr('minimizable') == 'true' : undefined,
maximizable: t.attr('maximizable') ? t.attr('maximizable') == 'true' : undefined,
closable: t.attr('closable') ? t.attr('closable') == 'true' : undefined,
closed: t.attr('closed') ? t.attr('closed') == 'true' : undefined,
shadow: t.attr('shadow') ? t.attr('shadow') == 'true' : undefined,
modal: t.attr('modal') ? t.attr('modal') == 'true' : undefined,
//add by cy openwindow 添加最大最小寬高
maxheight: undefined,
minheight: undefined,
maxwidth: undefined,
minwidth: undefined
}, options);
//liys add 彈出框寬度增加百分比配置，兼容屏幕分辨率
if (opts.width && isNaN(opts.width)) {
if (opts.width.lastIndexOf("%") == opts.width.length - 1) {
var tem = opts.width.substring(0, opts.width.length - 1);
if (!isNaN(tem)) {
tem = tem / 100;
}
opts.width = Math.ceil(getPageArea().width * tem);
//add by cy 添加最大高度最大寬度,最小高度,最小寬度屬性
if (opts.maxwidth && opts.maxwidth > 0) {
opts.width = opts.width > opts.maxwidth ? opts.maxwidth : opts.width;
}
if (opts.minWidth && opts.minWidth > 0) {
opts.width = opts.width < opts.minWidth ? opts.minWidth : opts.width;
}
}
}
//liys add 彈出框高度增加百分比配置，兼容屏幕分辨率
if (opts.height && isNaN(opts.height)) {
if (opts.height.lastIndexOf("%") == opts.height.length - 1) {
var tem = opts.height.substring(0, opts.height.length - 1);
if (!isNaN(tem)) {
tem = tem / 100;
}
opts.height = Math.ceil(getPageArea().height * tem);
//add by cy 添加最大高度最大寬度,最小高度,最小寬度屬性
if (opts.maxheight && opts.maxheight > 0) {
opts.height = opts.height > opts.maxheight ? opts.maxheight : opts.height;
}
if (opts.minheight && opts.minheight > 0) {
opts.height = opts.height < opts.minheight ? opts.minheight : opts.height;
}
}
}
$(target).attr('title', '');
state = $.data(target, 'window', {});
}
// create window
// var win = $(target).ta3panel($.extend({}, opts, {
var win = new TaPanel($(target)).ta3panel($.extend({}, opts, {
border: false,
doSize: true, // size the panel, the property undefined in window component
closed: true, // close the panel
cls: 'window',
headerCls: 'window-header',
bodyCls: 'window-body',
onBeforeDestroy: function onBeforeDestroy() {
if (opts.onBeforeDestroy) {
if (opts.onBeforeDestroy.call(target) == false) return false;
}
var state = $.data(target, 'window');
if (state.shadow) state.shadow.remove();
if (state.mask) state.mask.remove();
},
onClose: function onClose() {
var state = $.data(target, 'window');
if (state.shadow) state.shadow.hide();
if (state.mask) state.mask.hide();
if (opts.onClose) opts.onClose.call(target);
},
onOpen: function onOpen() {
var state = $.data(target, 'window');
var z_index = state.opts.zIndex || defaults.zIndex;
if (state.mask) {
state.mask.css({
display: 'block',
zIndex: z_index++
});
}
if (state.shadow) {
state.shadow.css({
display: 'block',
zIndex: z_index++,
left: state.options.left,
top: state.options.top,
width: state.window.outerWidth(true),
height: state.window.outerHeight(true)
});
}
state.window.css('z-index', z_index++);
// if (state.mask) state.mask.show();
//add by cy 直接彈出tawindow框時表格不會重新佈局導致頁面混亂
$(target).find(".datagrid").each(function () {
$(this).triggerHandler("_resize");
});
if (opts.onOpen) opts.onOpen.call(target);
},
onResize: function onResize(width, height) {
var state = $.data(target, 'window');
if (state.shadow) {
state.shadow.css({
left: state.options.left,
top: state.options.top,
width: state.window.outerWidth(true),
height: state.window.outerHeight(true)
});
}
if (opts.onResize) opts.onResize.call(target, width, height);
},
onMove: function onMove(left, top) {
var state = $.data(target, 'window');
if (state.shadow) {
state.shadow.css({
left: state.options.left,
top: state.options.top
});
}
if (opts.onMove) opts.onMove.call(target, left, top);
},
onMinimize: function onMinimize() {
var state = $.data(target, 'window');
if (state.shadow) state.shadow.hide();
if (state.mask) state.mask.hide();
if (opts.onMinimize) opts.onMinimize.call(target);
},
onBeforeCollapse: function onBeforeCollapse() {
if (opts.onBeforeCollapse) {
if (opts.onBeforeCollapse.call(target) == false) return false;
}
var state = $.data(target, 'window');
if (state.shadow) state.shadow.hide();
},
onExpand: function onExpand() {
var state = $.data(target, 'window');
if (state.shadow) state.shadow.show();
if (opts.onExpand) opts.onExpand.call(target);
}
}));
var panel = new TaPanel(win);
// save the window state
//state.options = win.ta3panel('options');
state.options = panel.ta3panel('options');
state.opts = opts;
//state.window = win.ta3panel('panel');
state.window = panel.ta3panel('panel');
// create mask
if (state.mask) state.mask.remove();
if (opts.modal == true) {
state.mask = $('<div class="window-mask"></div>').appendTo('body');
state.mask.css({
// zIndex: defaults.zIndex++,
width: getPageArea().width,
height: getPageArea().height,
display: 'none'
});
}
// create shadow
if (state.shadow) state.shadow.remove();
if (opts.shadow == true) {
state.shadow = $('<div class="window-shadow"></div>').insertAfter(state.window);
state.shadow.css({
// zIndex: defaults.zIndex++,
display: 'none'
});
}
// state.window.css('z-index', defaults.zIndex++);
// if require center the window
if (state.options.left == null) {
var width = state.options.width;
if (isNaN(width)) {
width = state.window.outerWidth(true);
}
//ADD NEW
if(state.options.animation){//隱藏到最左邊
state.options.left = "-2000px";
}else{
state.options.left = ($(window).width() - width) / 2 + $(document).scrollLeft();
}
}
if (state.options.top == null) {
var height = state.window.height();
if (isNaN(height)) {
height = state.window.outerHeight(true);
}
state.options.top = ($(window).height() - height) / 2 + $(document).scrollTop();
}
//win.window('move');
win.each(function () {
// $(this).ta3panel('move');
new TaPanel($(this)).ta3panel('move');
});
if (state.opts.closed == false) {
//win.window('open'); // open the window
win.each(function () {
// $(this).ta3panel('open');
new TaPanel($(this)).ta3panel('open');
});
}
}
/**
* set window drag and resize property
*/
function setProperties(target) {
var state = $.data(target, 'window');
//自定義動畫，從左滑出
//ADD NEW
if(state.options.animation){
$(".window-shadow").animate({"left":($(window).width()-state.window.outerWidth(true)) / 2 + $(document).scrollLeft()+"px"});
$(".panelnomargin").animate({"left":($(window).width()-state.window.outerWidth(true)) / 2 + $(document).scrollLeft()+"px"});
}
//state.window.draggable({
new TaDraggable(state.window).draggable({
handle: '>div.panel-header>div.panel-title',
disabled: state.options.draggable == false,
onStartDrag: function onStartDrag(e) {
if (state.mask) state.mask.css('z-index', defaults.zIndex++);
if (state.shadow) state.shadow.css('z-index', defaults.zIndex++);
state.window.css('z-index', defaults.zIndex++);
if (!state.proxy) {
state.proxy = $('<div class="window-proxy"></div>').insertAfter(state.window);
}
state.proxy.css({
display: 'none',
zIndex: defaults.zIndex++,
left: e.data.left,
top: e.data.top,
width: $.boxModel == true ? state.window.outerWidth(true) - (state.proxy.outerWidth(true) - state.proxy.width()) : state.window.outerWidth(true),
height: $.boxModel == true ? state.window.outerHeight(true) - (state.proxy.outerHeight(true) - state.proxy.height()) : state.window.outerHeight(true)
});
setTimeout(function () {
if (state.proxy) state.proxy.show();
}, 500);
},
onDrag: function onDrag(e) {
state.proxy.css({
display: 'block',
left: e.data.left,
top: e.data.top
});
state.window.css({
display: 'none'
});
state.shadow.css({
display: 'none'
});
return false;
},
onStopDrag: function onStopDrag(e) {
if (e.data.left < 0) e.data.left = 0;
if (e.data.top < 0) e.data.top = 0;
if ($(window).height() - e.data.top < 30) e.data.top = $(window).height() - 30;
if ($(window).width() - e.data.left < 60) e.data.left = $(window).width() - 60;
state.options.left = e.data.left;
state.options.top = e.data.top;
//$(target).window('move');
new TaWindow($(target)).window('move');
state.proxy.remove();
state.proxy = null;
state.window.css({
display: 'block'
});
state.shadow.css({
display: 'block'
});
//如果window被選中需要觸發事件，要在這裏添加
}
});
//state.window.resizable({
new TaResizable(state.window).resizable({
disabled: state.options.resizable == false,
onStartResize: function onStartResize(e) {
if (!state.proxy) {
state.proxy = $('<div class="window-proxy"></div>').insertAfter(state.window);
}
state.proxy.css({
zIndex: defaults.zIndex++,
left: e.data.left,
top: e.data.top,
width: $.boxModel == true ? e.data.width - (state.proxy.outerWidth(true) - state.proxy.width()) : e.data.width,
height: $.boxModel == true ? e.data.height - (state.proxy.outerHeight(true) - state.proxy.height()) : e.data.height
});
},
onResize: function onResize(e) {
state.proxy.css({
left: e.data.left,
top: e.data.top,
width: $.boxModel == true ? e.data.width - (state.proxy.outerWidth(true) - state.proxy.width()) : e.data.width,
height: $.boxModel == true ? e.data.height - (state.proxy.outerHeight(true) - state.proxy.height()) : e.data.height
});
return false;
},
onStopResize: function onStopResize(e) {
state.options.left = e.data.left;
state.options.top = e.data.top;
state.options.width = e.data.width;
state.options.height = e.data.height;
setSize(target);
state.proxy.remove();
state.proxy = null;
}
});
}
function getPageArea() {
if (document.compatMode == 'BackCompat') {
if (document.body.className.indexOf("no-scrollbar") < 0) {
//判斷body是否有滾動條 yanglq
return {
width: Math.max(document.body.scrollWidth, document.body.clientWidth),
height: Math.max(document.body.scrollHeight, document.body.clientHeight)
};
} else {
return {
width: Math.max(document.body.offsetHeight, document.body.clientWidth),
height: Math.max(document.body.offsetHeight, document.body.clientHeight)
};
}
} else {
if (document.body.className.indexOf("no-scrollbar") < 0) {
return {
width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
};
} else {
return {
width: Math.max(document.documentElement.offsetHeight, document.documentElement.clientWidth),
height: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight)
};
}
}
}
// when window resize, reset the width and height of the window's mask
$(window).resize(function () {
$('.window-mask').css({
width: $(window).width(),
height: $(window).height()
});
setTimeout(function () {
$('.window-mask').css({
width: getPageArea().width,
height: getPageArea().height
});
}, 50);
});
$.extend(this, { // 爲this對象
"cmptype": 'window', // 將方法註冊爲公共方法
"version": "3.13.0",
"window_slide": taWindow
});
}
/**
* 關閉窗口
* @method closeWindow
* @param {String} id 窗口id
*/
function closeWindow(id) {
//setTimeout(function(){ $("#"+id).window('close');}, 1);
setTimeout(function () {
new TaWindow_new($("#" + id)).window_slide('close');
}, 1);
}