hypejunction/ui_popup

Elgg 的弹出窗口 AMD 模块

维护者

详细信息

github.com/hypeJunction/Elgg-ui_popup

主页

源代码

问题

安装: 70

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 1

开放问题: 0

语言:JavaScript

类型:elgg-plugin

1.1.0 2016-04-06 21:03 UTC

Requires

GPL-2.0 6b68d3343ce08f4b94dac084842a5ee6566f5cc7

  • Ismayil Khayredinov <info.woop@hypejunction.com>

uipluginpopupelgg

This package is auto-updated.

Last update: 2024-08-29 04:31:06 UTC

README

Elgg 2.0

功能

  • 将弹出窗口转换为 AMD 模块
  • 允许程序化打开和关闭弹出窗口
  • 允许通过触发器的 data- 参数传递弹出窗口位置

用法

通过 href 属性绑定

此行为与向锚元素添加 rel="popup" 相同。

echo elgg_view('output/url', array(
	'class' => 'popup-trigger',
	'href' => '#popup',
));
define(function(require) {
	var $ = require('jquery');
	var popup = require('elgg/popup');
	popup.bind($('.popup-trigger'));
});

自定义元素

echo elgg_format_element('button', [
	'class' => 'elgg-button elgg-button-popup',
	'data-my' => 'center top',
	'data-at' => 'center bottom+10px',
], 'Open Popup');
echo elgg_format_element('div', [
	'class' => 'elgg-module elgg-module-popup hidden',
], 'My popup');
define(function(require) {
	var $ = require('jquery');
	$(document).on('click', '.elgg-button-popup', function(e) {
		e.preventDefault();
		var $trigger = $(this);
		var $target = $(this).next('.elgg-module-popup');
		if ($target.length) {
			require(['elgg/popup'], function(popup) {
				popup.open($trigger, $target, {
					'collision': 'fit none'
				});
			});
		}
	});
});