Joomla! Programmierung/Framework/JHtmlBehavior/modal

Aus Joomla! Dokumentation
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] Beschreibung

JHTMLBehavior/modal läd alle benötigten Javascriptdateien in den <head></head> um eine Modalbox (Lightbox) darstellen zu können.

[Bearbeiten] Syntax

static modal( [$selector], [$params] )
  • @return void
  • @since Joomla 1.5
Parameter Datentyp Beschreibung Standardwert
$selector string Der Tag und die Klasse, auf die das Modal angewandt werden soll. a.modal
$params array Parameter für die Javascriptklasse. Werden als array ('name'=> 'wert') übergeben. array()

[Bearbeiten] Beispiele

[Bearbeiten] Modal auf Link anwenden 

<?php JHtml::_('behavior.modal'); ?>
 
<!-- Eine Seite in der Modalbox laden -->
<a href="http://www.joomla.org" title="Joomla!.org" class="modal" rel="{handler: 'iframe'}">Joomla!.org</a>
 
<!-- Eine Seite mit einer bestimmten Größe in der Modalbox laden -->
<a href="http://www.joomla.org" title="Joomla!.org" class="modal" rel="{handler: 'iframe', size: {x: 570, y: 200}}">Joomla!.org</a>
 
<!-- Ein Bild in der Modalbox laden -->
<a href="http://cdn.joomla.org/images/logo.png" title="Joomla! Logo" class="modal">
<img src="http://cdn.joomla.org/images/logo.png" alt="Joomla! Logo" />
</a>

[Bearbeiten] CSS

Die CSS-Einstellungen finden sich unter \media\system\css\modal.css (in Joomla! 1.5.12): 

.body-overlayed embed, .body-overlayed object, .body-overlayed select
{
	visibility:				hidden;
}
 
#sbox-window embed, #sbox-window object, #sbox-window select
{
	visibility:				visible;
}
 
#sbox-overlay
{
	position:				absolute;
	background-color:		#000;
}
 
#sbox-window
{
	position:				absolute;
	background-color:		#000;
	text-align:				left;
	overflow:				visible;
	padding:				10px;
	-moz-border-radius:		3px;
}
 
* html #sbox-window
{
	top: 50% !important;
	left: 50% !important;
}
 
#sbox-btn-close
{
	position:				absolute;
	width:					30px;
	height:					30px;
	right:					-15px;
	top:					-15px;
	background:				url(../images/closebox.png) no-repeat top left;
	border:					none;
}
 
.sbox-loading #sbox-content
{
	background-image:		url(../images/spinner.gif);
	background-repeat:		no-repeat;
	background-position:	center;
}
 
#sbox-content
{
	clear:					both;
	overflow:				auto;
	background-color:		#fff;
	height:					100%;
	width:					100%;
}
 
.sbox-content-image#sbox-content
{
	overflow:				visible;
}
 
#sbox-image
{
	display:				block;
}
 
.sbox-content-image img
{
	display:				block;
}
 
.sbox-content-iframe#sbox-content
{
	overflow:				visible;
}

[Bearbeiten] Quellcode

JHtmlBehavior::modal in Joomla! 2.5.4

Folder blue.png libraries

  • Folder red.png joomla
    • Folder green.png html
      • Folder yellow.png html
        • File php.png behavior.php 
  1. public static function modal($selector = 'a.modal', $params = array())
  2. {
  3.    $document = JFactory::getDocument();
  4.  
  5.    // Load the necessary files if they haven't yet been loaded
  6.    if (!isset(self::$loaded[__METHOD__]))
  7.    {
  8.       // Include MooTools framework
  9.       self::framework();
  10.  
  11.       // Load the javascript and css
  12.       JHtml::_('script', 'system/modal.js', true, true);
  13.       JHtml::_('stylesheet', 'system/modal.css', array(), true);
  14.    }
  15.  
  16.    $sig = md5(serialize(array($selector, $params)));
  17.    if (isset(self::$loaded[__METHOD__][$sig]))
  18.    {
  19.       return;
  20.    }
  21.  
  22.    // Setup options object
  23.    $opt['ajaxOptions']      = (isset($params['ajaxOptions']) && (is_array($params['ajaxOptions']))) ? $params['ajaxOptions'] : null;
  24.    $opt['handler']         = (isset($params['handler'])) ? $params['handler'] : null;
  25.    $opt['fullScreen']      = (isset($params['fullScreen'])) ? (bool) $params['fullScreen'] : null;
  26.    $opt['parseSecure']      = (isset($params['parseSecure'])) ? (bool) $params['parseSecure'] : null;
  27.    $opt['closable']      = (isset($params['closable'])) ? (bool) $params['closable'] : null;
  28.    $opt['closeBtn']      = (isset($params['closeBtn'])) ? (bool) $params['closeBtn'] : null;
  29.    $opt['iframePreload']   = (isset($params['iframePreload'])) ? (bool) $params['iframePreload'] : null;
  30.    $opt['iframeOptions']   = (isset($params['iframeOptions']) && (is_array($params['iframeOptions']))) ? $params['iframeOptions'] : null;
  31.    $opt['size']         = (isset($params['size']) && (is_array($params['size']))) ? $params['size'] : null;
  32.    $opt['shadow']         = (isset($params['shadow'])) ? $params['shadow'] : null;
  33.    $opt['overlay']         = (isset($params['overlay'])) ? $params['overlay'] : null;
  34.    $opt['onOpen']         = (isset($params['onOpen'])) ? $params['onOpen'] : null;
  35.    $opt['onClose']         = (isset($params['onClose'])) ? $params['onClose'] : null;
  36.    $opt['onUpdate']      = (isset($params['onUpdate'])) ? $params['onUpdate'] : null;
  37.    $opt['onResize']      = (isset($params['onResize'])) ? $params['onResize'] : null;
  38.    $opt['onMove']         = (isset($params['onMove'])) ? $params['onMove'] : null;
  39.    $opt['onShow']         = (isset($params['onShow'])) ? $params['onShow'] : null;
  40.    $opt['onHide']         = (isset($params['onHide'])) ? $params['onHide'] : null;
  41.  
  42.    $options = JHtmlBehavior::_getJSObject($opt);
  43.  
  44.    // Attach modal behavior to document
  45.    $document
  46.       ->addScriptDeclaration(
  47.       "
  48.    window.addEvent('domready', function() {
  49.  
  50.       SqueezeBox.initialize(" . $options . ");
  51.       SqueezeBox.assign($$('" . $selector . "'), {
  52.          parse: 'rel'
  53.       });
  54.    });"
  55.    );
  56.  
  57.    // Set static array
  58.    self::$loaded[__METHOD__][$sig] = true;
  59.  
  60.    return;
  61. }

[Bearbeiten] Siehe auch

Von „http://www.joomla-wiki.de/index.php?title=Joomla!_Programmierung/Framework/JHtmlBehavior/modal&oldid=6144“
Meine Werkzeuge
Namensräume
Varianten
Aktionen
Navigation
Sonstiges
Team Navigation
Werkzeuge