foreword
Hello everyone, my name is Bai Xiaoseng, I am a C# development engineer, and I am also good at multiple programming languages. The usual work is to develop enterprise management systems (ERP, CRM). At present, enterprise management systems are mostly C/S architecture, and C/S architecture multi-window data processing is more flexible. Just in order to follow the trend, the company developed the existing enterprise management system with a new B/S structure. Our original idea was to use a browser-like multi-tabbed mode in the B/S structure interface. Most of them were rejected, and these customers agreed that the client-side multi-window operation mode is better. Therefore, it has to be developed in accordance with the traditional C/S mode.
However, the layer plug-ins that are currently most used in web page pop-ups have not met our expectations or have not reached the level of multi-windows in the C/S architecture. Therefore, I took advantage of the May Day holiday to do the surgery myself.
Two days later, Layx was born...
why was it called Layx? In fact, it is very simple. The English word for layer is layer, but there is already a very mature layer plug-in, so I can call it an awesome name: LayerX - which means more awesome than layer * ^ *. In the end, after thinking about it, I found that the name is still a bit long, and it was a bit rushed to take advantage of the heat of the layer, so I simply removed the er and called it LayX directly.
introduce
Layx is a web pop-up plug-in written in pure native Javascript, which completely imitates the Windows 10 operating system window for design and development.
Support text window, page window (iframe)
Support maximize, minimize, restore, close, top function
Support window dragging and four-direction dragging control
Support 8 directions of window drag and drop to change size (up, right, down, left, upper left, lower left, upper right, lower right)
Window minimum width, maximum width control
Window focus activation control
Support window shadow control
The window automatically records the last position
Support double click title to switch windows
Support dragging the window to the top to automatically maximize, maximize and drag to automatically restore the normal window
Support MDI multi-level nested windows
Support window appearance control (background color, transparency, border color, status bar, etc.)
Support window icon customization, operation button customization
Support mutual communication between windows
Support window operation monitoring (minimize monitoring, maximize monitoring, restore monitoring, top monitoring, drag monitoring, resize monitoring, loading monitoring, etc.)
Support window opening initialization position control (middle, top left, top right, bottom left, bottom right, custom top and left)
Support window blocking and masking
Support to automatically get the title of the iframe page to fill the window title
Support window state interceptor, which can intercept all operation functions of the window
Support window loading prompt control
Support window auto-close control
Support message prompt window (alert, confirm, prompt, loadding, error) only completes the alert
Compatible with IE9+, Chrome, Edge, FF, Opera and other modern mainstream browsers
The future has much more than that...
matchset
// layx default configuration parameters
var defaults = {
id: 'layx', // unique id
icon: '', // icon, set false to disable, html code is supported here
title: '', // window title
bgColor: '#fff', // background color, iframe page background is transparent and effective
borderColor: '#3based', // border color
opacity: 1, // transparency
type: 'html', // Window type: support iframe,alert,confirm,error,load,prompt
url: '', // iframe type address, valid when type=iframe
content: '', // non-iframe type content, support text, html
width: 800, // initialize width
height: 600, // initialize height
loadingText: 'Content loading...', // Content loading text content, supports html
position: 'center', // initialize position, support 'center', 'lt', 'rt', 'lb', 'rb' and [top,left] array
useFrameTitle: false, // Whether to automatically get the iframe page title to fill the window title
minWidth: 150, // minimum width of drag size
minHeight: 150, // maximum width of drag size
shadable: false, // whether to enable window blocking
alwaysOnTop: false, // whether to always top
pinable: false, // Whether to display the pushpin button, when alwaysOnTop is true, the pinable is automatically displayed
minimizable: true, // whether to allow minimization
maximizable: true, // whether to allow maximization
closable: true, // whether to allow closing
resizable: true, // whether to allow drag size
autoDestroy: false, // The window is automatically closed, if false is not enabled, the parameter can be milliseconds, such as 3000=>3 seconds
// drag direction control
resizeLimit: {
t: true, // Whether to allow the top drag size, true allows
r: true, // Whether to allow the right drag size, true allows
b: true, // Whether to allow the dragging size below, true allows
l: true, // Whether to allow the left drag size, true allows
lt: true, // Whether to allow the drag size of the upper left, true allows
rt: true, // Whether to allow the drag size of the upper right, true allows
lb: true, // Whether to allow the drag size of the lower left, true allows
rb: true // Whether to allow the drag size of the bottom right, true allows
},
movable: true, // whether to allow dragging the window
// The drag window is displayed. When vertical is true, horizontal dragging is prohibited. When horizontal is true, vertical dragging is prohibited.
moveLimit: {
vertical: false, // Whether to prohibit vertical drag, false does not prohibit
horizontal: false, // Whether to prohibit horizontal dragging, false does not prohibit
leftOut: true, // Whether to allow the left to drag out, true allows
rightOut: true, // Whether to allow the right to drag out, true allows
topOut: true, // Whether to allow the top to be dragged out, true allows, whether this setting is false or true, the window cannot be dragged out of the form
bottomOut: true, // Whether to allow the bottom to be dragged out, true allows
},
statusBar: false, // whether to display the status bar
focusable: true, // Whether to enable iframe page click to top
// scaleAnimatable: false, // Whether to enable window scaling animation, in development....
allowTitleDblclickToRestore: true, // Whether to allow the title to double click to restore the form
// parent: null, // Parent form id, when this option is set, the form will be opened on the page inside the form (MDI mode) and share the same life cycle as the parent window; Note: Only non-cross-domain pages are supported. In development...
// menuItems: [], // Customize the top drop-down menu, support Infinitus, in development....
// Interceptor, which can monitor the various states of the window
intercept: {
// iframe page load listener
load: {
// Before loading, return false; disable loading
before: function(windowDom, winform) {},
// after loading
after: function(windowDom, winform, iframe) {}
},
// minimize listening
min::
// Before minimization, return false; disable minimization
before: function(windowDom, winform) {},
// after minimization
after: function(windowDom, winform) {}
},
// maximize listening
max: {
// Before maximizing, return false; disable maximization
before: function(windowDom, winform) {},
// after maximized
after: function(windowDom, winform) {}
},
// resume listening
restore: {
// Before recovery, return false; recovery is prohibited
before: function(windowDom, winform) {},
// after recovery
after: function(windowDom, winform) {}
},
// close the listener
destroy: {
// Before closing, return false; disable closing
before: function(windowDom, winform) {},
// after closing
after: function(windowDom, winform) {}
},
// top monitor
pin: {
// Before sticking to the top, return false; operation is prohibited
before: function(windowDom, winform) {},
// after the top
after: function(windowDom, winform) {}
},
// move window listener
move: {
// before moving
before: function(windowDom, winform) {},
// moving
moveing: function(windowDom, winform) {},
// end of move
after: function(windowDom, winform) {}
},
// Drag window size monitor
resize: {
// before dragging
before: function(windowDom, winform) {},
// dragging
resizing: function(windowDom, winform) {},
// end of dragging
after: function(windowDom, winform) {}
}
}
};
demo
http://baisoft.gotoip11.com/layx/doc/
open source