MediaWiki

Extension talk:JQuery Tab Container

Latest comment: 11 years ago by P1ayer in topic Version of My Fix
Learn more about this page

Please post your questions to our forum. Any feedback is welcome.

issues with extension

edit
Latest comment: 15 years ago1 comment1 person in discussion

contents of tabs doesn't seem to be fully parsed (templates are not parsed), also styling of text is different from MW default, result looks a bit out of place. Went to your forum, but it wasn't clear how to post message (I gave it a 3 second effort and failed :) so posting it here.

Also some tabs take a while to switch, with about 1s delay.

Thanks! Evgeny Fadeev 23:33, 26 April 2009 (UTC)Reply

Re: issues with extension

edit
  • templates work just fine for us within the tabs on mediawiki-1.13.3
  • use theme="none" and then write your own CSS for tabs. or try prepackaged ones:
    • base
    • cupertino
    • redmond
    • start

any ways it is *standard* jquery tabs styles which make font looks different. So again, either write your own styles or fix an existing ones

Great improve

edit
Latest comment: 15 years ago1 comment1 person in discussion

If you plan to link specified tab or bookmark it, it is currently impossible. To enable that, simply put following code into JQuerytabs.php 

$html .= "jQuery('#".$jsId."').tabs();\n"; // AFTER THIS LINE AD NEW CODE:

    $html .= "jQuery('#".$jsId."').bind('tabsselect', function(event, ui) { document.location='#'+(ui.index+1);})\n";
    $html .= "if(document.location.hash!='') { indexToLoad = document.location.hash.substr(1,document.location.hash.length); jQuery('#".$jsId."').tabs('select',indexToLoad-1);}\n";

Thats it! Now when you use anchor, for example 2 - www.xxsx.com/page.htm#2 and refresh page it will work smoothly!----Analienholakres3 14:03, 4 June 2009 (UTC)AnAlienHolakres3 14:02, 4 June 2009 (UTC)Reply

Auto Rotate

edit
Latest comment: 15 years ago1 comment1 person in discussion

Is there anyway to add some sort of auto rotate to this? --Contributions/205.232.42.46 13:48, 15 June 2009 (UTC)Reply

Undeclared constant theme on line 34

edit
Latest comment: 15 years ago1 comment1 person in discussion

It seems there is a typo on line 34 of JQueryTabs.php, it reads 

$html .= "@import '".$javascript."/themes/".${theme}."/ui.all.css';\n";

but should be 

$html .= "@import '".$javascript."/themes/".$theme."/ui.all.css';\n";

a little in the JQuery zone methinks 213.31.11.80 15:22, 25 June 2009 (UTC)Reply

Version of My Fix

edit
Latest comment: 11 years ago1 comment1 person in discussion
var OnloadHook = {};

window.runOnloadHook = function() 
{
	for(var name in OnloadHook)
	{
		OnloadHook[name].func();
	}
}
  • /extensions/jQuery/ui/jQuery.ui.tabs.php
<?php
if( !defined( 'MEDIAWIKI' ) )
	die( -1 );

$wgExtensionFunctions[] = "efJQueryTabs";

$wgJQueryTabsExtensionPath = $wgScriptPath . '/extensions/jQuery/ui';

function efJQueryTabs() {
	global $wgParser;

	$wgParser->setHook( 'tabs', 'renderTabContainer' );
	$wgParser->setHook( 'tab' , 'renderTabPane' );
}

function renderTabContainer( $body, $params, &$parser) {
	global $wgJQueryTabsExtensionPath;

	$html = "";
	$javascript = $wgJQueryTabsExtensionPath;

	$jsId = isset($params["jsid"]) ? $params["jsid"]: md5(uniqid());
	$theme = isset($params["theme"]) ? $params["theme"]: "base";

	$html .= "<script type='text/javascript'>\n";
	$html .= "importScriptURI('".$javascript."/jquery-1.3.2.min.js');\n";
	$html .= "importScriptURI('".$javascript."/jquery-ui-1.7.2.custom.min.js');\n";
	
	if ($theme != "none") {
		$html .= "importStylesheetURI('".$javascript."/themes/".$theme."/jquery-ui-1.7.2.custom.css');\n";
	}
	$html .= "var TabsIndex = {};\n";
	$html .= "</script>\n";

	if ($theme == "none") {
		$html .= "<style type='text/css'>\n";
		$html .= ".ui-tabs .ui-tabs-hide { display: none !important; }\n";
		$html .= "</style>\n";
	}

	$html .= "<div id='".$jsId."' style='display:none;'>\n";
	$html .= "	<ul id='".$jsId."_ul'></ul>\n";
	$html .= $parser->replaceVariables( $body );
	$html .= "</div>";


	$html2 .= "<script type='text/javascript'>\n";
	$html2 .= 'OnloadHook.'.$jsId.' = {
	check: function () { 
		if (typeof($) == "undefined") return true;
		if (typeof($.ui) == "undefined") return true;
		if (typeof($.fn["tabs"]) == "undefined") return true;
		if (typeof($("#'.$jsId.'").tabs) == "undefined") return true;
		
		this.initTabLink();
		return false;
	},
	initTabLink: function ()
	{
		var strTabLink = "";
		for(var name in TabsIndex)
		{
			var jsId = name;
			var strTitle = TabsIndex[name].title;
			strTabLink += "<li><a href=\'#"+jsId+"\'><span>"+strTitle+"</span></a></li>";
		}
		var tabs = $("#'.$jsId.'_ul");
		tabs.html(strTabLink);
	},
	func: function ()
	{
		var cmd = OnloadHook.'.$jsId.';
		if (cmd.check()) {
			cmd.hTimer = setTimeout("OnloadHook.'.$jsId.'.func()",500);
		} else {
			clearTimeout(cmd.hTimer);
			$(document).ready(function(){
				with ($("#'.$jsId.'"))
				{
					css("display", "block");
					tabs();
				}
			});
		}
	}
}';

	$html2 .= "</script>\n";
	
	$html2 = str_replace( "\n", '', $html2 );
	$html2 = str_replace( "\t", '', $html2 );
	$html .= $html2;

	return $html;			
}

function renderTabPane( $body, $params, &$parser) {
	$jsId = isset($params["jsid"]) ? $params["jsid"]: md5(uniqid());
	$title = isset($params["title"]) ? $params["title"]: "Default Tab Title (change it!)";

	$html = "<div id='".$jsId."'>".$parser->recursiveTagParse( $body )."</div>";

	$html .= "<script type='text/javascript'>";
	$html .= 'TabsIndex["'.$jsId.'"]={};';
	$html .= 'TabsIndex["'.$jsId.'"].title="'.$title.'";';
	$html .= "</script>";

	return $html;			
}


/**
 * for Special:Version
 */
$wgExtensionCredits['other'][] = array(
	'name'        => 'jQuery Tab Container extension(fix to use Jquery 1.3.2 and JQuery UI 1.7)',
	'version'     => '1.0 ',
	'author'      => 'Speed Computer Research',
	'description' => 'Helps you organize content of your page into AJAX tabs.',
	'url'         => 'http://s-c-research.com/Mediawiki_jQuery_Tab_Container',
);

?>

Use Microsoft Ajax CDN

edit 
importScriptURI('http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js');
importScriptURI('http://ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.2.1.min.js');

var OnloadHook = {};
 
window.runOnloadHook = function() 
{
        for(var name in OnloadHook)
        {
                OnloadHook[name].func();
        }
}
  • at /extensions/jQuery/ui/jQuery.ui.tabs.php
<?php
if( !defined( 'MEDIAWIKI' ) )
	die( -1 );

$wgExtensionFunctions[] = "efJQueryTabs";

$wgJQueryTabsExtensionPath = $wgScriptPath . '/extensions/jQuery/ui';

function efJQueryTabs() {
	global $wgParser;

	$wgParser->setHook( 'tabs', 'renderTabContainer' );
	$wgParser->setHook( 'tab' , 'renderTabPane' );
}

function renderTabContainer( $body, $params, &$parser) {
	global $wgJQueryTabsExtensionPath;

	$html = "";
	$javascript = $wgJQueryTabsExtensionPath;

	$jsId = isset($params["jsid"]) ? $params["jsid"]: md5(uniqid());
	//$theme = isset($params["theme"]) ? $params["theme"]: "base";
	if (isset($params['theme'])) {
		switch ($params['theme']) {
			case 'base':
			case 'black-tie':
			case 'blitzer':
			case 'cupertino':
			case 'dark-hive':
			case 'dot-luv':
			case 'eggplant':
			case 'excite-bike':
			case 'flick':
			case 'hot-sneaks':
			case 'humanity':
			case 'le-frog':
			case 'mint-choc':
			case 'overcast':
			case 'pepper-grinder':
			case 'redmond':
			case 'smoothness':
			case 'south-street':
			case 'start':
			case 'sunny':
			case 'swanky-purse':
			case 'trontastic':
			case 'ui-darkness':
			case 'ui-lightness':
			case 'vader':
				$theme = $params["theme"];
				break;
			default:
				$theme = "base";
		}
	} else {
		$theme = "base";
	}

	$html .= "<script type='text/javascript'>\n";
	$html .= "importScriptURI('http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js');\n";
	
	if ($theme != "none") {
		$html .= "importStylesheetURI('http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/".$theme."/jquery-ui.css');\n";
	}
	$html .= "var TabsIndex = {};\n";
	$html .= "</script>\n";

	if ($theme == "none") {
		$html .= "<style type='text/css'>\n";
		$html .= ".ui-tabs .ui-tabs-hide { display: none !important; }\n";
		$html .= "</style>\n";
	}

	$html .= "<div id='".$jsId."' style='display:none;'>\n";
	$html .= "	<ul id='".$jsId."_ul'></ul>\n";
	$html .= $parser->replaceVariables( $body );
	$html .= "</div>";


	$html2 .= "<script type='text/javascript'>\n";
	$html2 .= 'OnloadHook.'.$jsId.' = {
	check: function () { 
		if (typeof($) == "undefined") return true;
		if (typeof($.ui) == "undefined") return true;
		if (typeof($.fn["tabs"]) == "undefined") return true;
		if (typeof($("#'.$jsId.'").tabs) == "undefined") return true;
		
		this.initTabLink();
		return false;
	},
	initTabLink: function ()
	{
		var strTabLink = "";
		for(var name in TabsIndex)
		{
			var jsId = name;
			var strTitle = TabsIndex[name].title;
			strTabLink += "<li><a href=\'#"+jsId+"\'><span>"+strTitle+"</span></a></li>";
		}
		var tabs = $("#'.$jsId.'_ul");
		tabs.html(strTabLink);
	},
	func: function ()
	{
		var cmd = OnloadHook.'.$jsId.';
		if (cmd.check()) {
			cmd.hTimer = setTimeout("OnloadHook.'.$jsId.'.func()",500);
		} else {
			clearTimeout(cmd.hTimer);
			$(document).ready(function(){
				with ($("#'.$jsId.'"))
				{
					css("display", "block");
					tabs();
				}
			});
		}
	}
}';

	$html2 .= "</script>\n";
	
	$html2 = str_replace( "\n", '', $html2 );
	$html2 = str_replace( "\t", '', $html2 );
	$html .= $html2;

	return $html;			
}

function renderTabPane( $body, $params, &$parser) {
	$jsId = isset($params["jsid"]) ? $params["jsid"]: md5(uniqid());
	$title = isset($params["title"]) ? $params["title"]: "Default Tab Title (change it!)";

	$html = "<div id='".$jsId."'>".$parser->recursiveTagParse( $body )."</div>";

	$html .= "<script type='text/javascript'>";
	$html .= 'TabsIndex["'.$jsId.'"]={};';
	$html .= 'TabsIndex["'.$jsId.'"].title="'.$title.'";';
	$html .= "</script>";

	return $html;			
}


/**
 * for Special:Version
 */
$wgExtensionCredits['other'][] = array(
	'name'        => 'jQuery Tab Container extension(fix to use jQuery 1.10.2 and JQuery UI 1.10.3 from CDN)',
	'version'     => '1.0 ',
	'author'      => 'Speed Computer Research',
	'description' => 'Helps you organize content of your page into AJAX tabs.',
	'url'         => 'http://s-c-research.com/Mediawiki_jQuery_Tab_Container',
);

?>
-P1ayer (talk) 13:07, 31 October 2013 (UTC)Reply

Account suspended

edit
Latest comment: 13 years ago1 comment1 person in discussion

Hi. This extension looks great, but the project homepage is unavailable. Same for download link. Perhaps the code and an example css could be posted on the extension page? Thanks.
mitchelln 10:22, 26 January 2010 (GMT)

An IP found the project page at google code. It does not provide a zipped file for download, but the code. Hopefully it works. --[[kgh]] 09:44, 26 January 2011 (UTC)Reply

MW 1.19 Incompatibility Issue

edit

Does anyone have an example of this issue or output code / screenshots of the error that it is encountering. My company is currently running 1.18.x and I am hesitant to upgrade it to v1.19.x without knowing the full scope of issues.

Thank you.

Add topic
Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension_talk:JQuery_Tab_Container&oldid=811487"
Return to "JQuery Tab Container" page.