j-Dockable

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Funciona sólo con +v18
Soporta toques
Móvil
Redimensionable

Configuración:

style {Number} 1 el panel inferior será de ancho completo, el panel inferior 2 estará entre el panel izquierdo y derecho
parent {String} selector jquery debido a la altura del contenedor (predeterminado: window)
margin {Number} un margen inferior (predeterminado: 0)
NEW reoffsetresize {Boolean} todos los paneles flotantes se volverán a compensar según la dimensión de la ventana main (predeterminado: false)

El componente dockable espera Array de objetos.

// Component declaration
var panel = {

	// Component ID
	id: 'PANEL_ID',

	// Positioning
	// You can define specific display size and if the display size is not specified then the window tries to find a size for larger display
	html: 'THE CONTENT OF PANEL', // or can be raw HTMLElement

	offset: { x: 200, y: 100, width: 600, height: 400, minwidth: 200, minheight: 200, maxwidth: 1000, maxheight: 1000, dockminwidth: 200, dockminheight: 200, dockmaxwidth: 400, dockmaxheight: 400 }, // minwidth, maxwidth, maxheight, minheight, dockminheight, dockminwidth, dockmaxheight, dockmaxwidth are optional

	// Default settings
	actions: { move: true, close: true, hide: true, resize: true, autosave: false, resizeX: true, resizeY: true },
	// GOOD TO KNOW:
	// "undefined" close or "close:false" and "hide:true" doesn't destroy the instance of panel (it will be hidden only)

	// A window title
	title: 'Title for the panel',

	// Handlers (optional):
	destroy: function() {
		// @el {jQuery} a content of the window
		// @this {Instance}

		// is executed when the window is destroyed
	},

	make: function(el) {

		// @el {jQuery} a content of the window
		// @this {Instance}

		// this.meta {Object} a reference to window object
		// this.element {jQuery} a content element of the window
		// this.container {jQuery} a main content element of the window
		// this.main {Object} a reference to "Windows" component
		// this.width {Number} a width of window
		// this.height {Number} a height of the content of the window
		// this.x {Number} offset X
		// this.y {Number} offset Y

		// Methods:
		// this.setsize(width, height);
		// this.setcommand(cmd); Allowed commands: "close", "maximize", "resetmaximize", "togglemaximize", "minimize", "resetminimize", "toggleminimize", "resize", "move", "focus"
		// this.setoffset(x, y);

		// is executed when the window is making
	},

	data: function(type, data, el) {

		// @type {String}
		// @data {Object}
		// @el {jQuery} a content element of the window
		// @this {Instance}

		// is executed when data are sent via SETTER('windows', 'send', 'TYPE', 'DATA')
	},

	resize: function(width, height, el, x, y) {

		// @width {Number}
		// @height {Number}
		// @el {jQuery} a content of the window
		// @this {Instance}

		// is executed when the window is resized
	},

	move: function(x, y, el) {

		// @x {Number}
		// @y {Number}
		// @el {jQuery} a content of the window
		// @this {Instance}

		// is executed when the window is moved
	},

	service: function(counter, el) {

		// @counter {Number} count of calls
		// @el {jQuery} a content of the window
		// @this {Instance}

		// the component will execute this handler each 5 seconds
	}
};

PUSH('panels', panel);

Métodos:

component.finditem(panel_id) encuentra el panel específico según ID
NEW component.show(panel_id) muestra un panel
NEW component.hide(panel_id) oculta un panel
NEW component.toggle(panel_id) alterna un panel

Úselo con <ui-component name="dockable">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

example.html

<style>
	body{padding:0;margin:0;overflow:hidden;}
</style>

<ui-component name="dockable" path="mypanels">

	<div class="padding">
		YOUR CONTENT
	</div>

</ui-component>

<script>

	var mypanels = [];

	mypanels.push({
		id: 'A',
		offset: { x: 200, y: 100, width: 250, height: 400, minwidth: 200, minheight: 200, docked: 'left' },
		title: 'Components',
		html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
		actions: { move: true, resize: true, close: false, dockable: 'left right bottom' }
	});

	mypanels.push({
		id: 'B',
		offset: { x: 600, y: 300, width: 250, height: 400, minwidth: 200, minheight: 200, docked: 'right' },
		title: 'Properties',
		html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
		actions: { move: true, resize: true, close: true, dockable: 'left right bottom' }
	});

	mypanels.push({
		id: 'C',
		offset: { x: 600, y: 300, width: 300, height: 200, minwidth: 200, minheight: 200, docked: 'bottom' },
		title: 'Console',
		html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
		actions: { move: true, resize: true, close: true, dockable: 'right bottom' }
	});

</script>