Select2 a Joomla 3

Hodnocení uživatelů: 3 / 5

Aktivní hodnoceníAktivní hodnoceníAktivní hodnoceníNeaktivní hodnoceníNeaktivní hodnocení
 

Jednou z nejvýraznějších změn v Joomle 3 jsou formulářové prvky, tedy aspoň na pohled.

HTML select list

klasický select list

jQuery Chosen element

select list s jQuery chosen

Úvod - formbehavior.chosen

Nejvíce se mi líbí funkčnost nových "select listů". Po delší chvilce pátrání v kódu Joomly a zkoušení jsem zjistil, že za proměnou je následující příkaz:

JHtml::_('formbehavior.chosen', 'select');

Tento volá funkci chosen třídy JHtmlFormbehavior souboru

[joomla root]/libraries/cms/html/formbehavior.php

Funkce přidá potřebné CSS soubory a Javascriptu jQuery pluginu Chosen do dokumentu a použije na vybrané prvky formuláře, ve výchozím nastavení na všechny prvky select.

Chosen plugin je velký krok vpřed, ale Select2 toho podle mě nabízí ještě více. Tím hlavním důvodem u mě byla potřeba dostat k položkám select-listu obrázky.

Třída formbehavior2 pro Select2

Analogicky k způsobu, jakým byl plugin chosen vložen do Joomly, jsem vytvořil následující soubor:

abstract class JHtmlFormbehavior2
{
	/**
	 * @var    array  Array containing information for loaded files
	 * @since  3.0
	 */
	protected static $loaded = array();

	/**
	 * Method to load the Select2 JavaScript framework and supporting CSS into the document head
	 *
	 * @param   string  $selector  Class for Chosen elements. [optional]
	 * @param   string  $option    options for Select2 elements. [optional]
	 * @param   mixed   $debug     Is debugging mode on? [optional]
	 *
	 * @return  void
	 *
	 * @since   3.0
	 */
	public static function select2($selector = '.advancedSelect', $option = '', $debug = null)
	{
		if (isset(static::$loaded[__METHOD__][$selector]))
		{
			return;
		}

		// Include jQuery
		JHtml::_('jquery.framework');

   	// If no debugging value is set, use the configuration setting
		if ($debug === null)
		{
			$config = JFactory::getConfig();
			$debug  = (boolean) $config->get('debug');
		}

		JHtml::_('script', 'jui/select2.min.js', false, true, false, false, $debug);
		JHtml::_('script', 'jui/select2_locale_cs.js', false, true, false, false, $debug);
		JHtml::_('stylesheet', 'jui/select2.css', false, true);
		JFactory::getDocument()->addScriptDeclaration("
				jQuery(document).ready(function (){
					jQuery('" . $selector . "').select2({
						" .$option. "
					});
				});
			"
		);

		static::$loaded[__METHOD__][$selector] = true;

		return;
	}
} 

Funkce select2 vloží potřebné soubory (JavaScript, CSS) pluginu Select2 do dokumentu - webové stránky.

Ke stažení

Stáhněte si tento zip soubor a obsažené soubory nakopírujte do [joomla root].

Obsah:

libraries/cms/html/formbehavior2.php
media/jui/js/select2.js
media/jui/js/select2.min.js
media/jui/css/select2.css
media/jui/css/select2.png
Hotovo! Teď můžete v Joomle tvořit pěkné formuláře s podporou Select2.
vyzkoušejte ukázkovou komponentu se select2 prvky
prostudujte zdrojový kód a syntaxi.