Differences

This shows you the differences between two versions of the page.

--- deutsch:phpwcms-system:artikel:contentparts:register-tabs:jquery-ui-tabs [2010/02/15 21:19]
Knut Heermann (flip-flop)
+++ deutsch:phpwcms-system:artikel:contentparts:register-tabs:jquery-ui-tabs [2018/06/03 18:08] (current)
@@ Line 8: / Line 8: @@
 [[http://jqueryui.com/home|jQuery UI]] bietet Abstraktionen für Low-Level-Interaktion und Animationen, anspruchsvolle Effekte und sehr gute vorlagenfähige Widgets, auf  der jQuery-Bibliothek aufbauend die verwendet werden können um interaktive Webanwendungen zu erstellen.
+Möglich wird der Einsatz der jQuery Tabs erst durch die Verwendung dieses frontend_init-Scriptes: [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section]]
 \\
@@ Line 24: / Line 24: @@
 Docu: -- \\
-Forum: --
+Forum: -- \\
+Basis: [[http://jqueryui.com/demos/tabs/]]
 **Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/02/15 // \\
@@ Line 38: / Line 39: @@
 Verzeichnis: ** /template/lib/jquery/plugin/ **
-Dateiename: **tab_sort_section_jquery.tmpl.tmpl** \\
+Dateiename: **tab_sort_section_jquery.tmpl** \\
 Verzeichnis: ** /template/inc_cntpart/tabs/ **
-Dateiename: **ui.all.css** \\
+Dateiename: **ui.all.css** //(aus dem UI-Set )// \\
 Verzeichnis: ** /template/inc_css/specific/jquery/themes/base/ **
+<note>
-**Bedingung:** ##$phpwcms['allow_cntPHP_rt']   = 1;## -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]]
+**Download: {{:deutsch:phpwcms-system:artikel:contentparts:register-tabs:jquery_ui_and_theme_172.zip|jQuery UI v1.7.2 - UI-JS & css-Themes}}**
-----
-----
 \\
 \\
+**PHP:** [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.2]] //(Sortieren von Bereichen)//
+</note>
+**Bedingung:**  -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\
+  * $phpwcms['allow_ext_init']  = 1;
+  * $phpwcms['allow_cntPHP_rt']   = 1;
+----
+~~UP~~
 ===== Beschreibung =====
-FIXME In Bearbeitung
 **1.** Update auf die jüngste Version
@@ Line 62: / Line 72: @@
 **2.** Login und gehe nach  ADMIN -> Vorlagen - begutachte die neuen Optionen
-  * Wähle **MooTools 1.2**, immer laden (?), und Google Ajax Lib benutzen, wenn notwendig. \\ Hier ist es sehr wichtig, **MooTools 1.2** auszuwählen :!:
+  * Wähle **jQuery 1.4**
 **3.** Installation:
   * Erstelle aus den drei folgenden Texten die drei angegebenen Dateien in den angegebenen Verzeichnissen.
+  * Installiere **PHP:** [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.2]] //(Sortieren von (Template) Bereichen)//
 **4.** Im Gebrauch:
-  * Fülle eine CP Register/Tabs mit deinen Einträgen //(Siehe Beispiel oben)//.
+  * Fülle einen CP Register/Tabs mit deinen Einträgen //(Siehe Beispiel oben)//.
-  * Wähle als Vorlage: **simpletabs01.tmpl**
+  * Wähle als Vorlage: **tab_sort_section_jquery.tmpl**
   * Sichern und das Ergebnis im FE ansehen :-)
-<note>
+\\
-**Für Entwickler:**
-Es ist ein neuer Template Ersetzer verfügbar um JavaScript dynamisch zu laden. \\
-//Siehe: [[http://code.google.com/p/phpwcms/source/detail?r=381]]// Bsp.:
-<code><!-- JS: SimpleTabs --></code>
-Braucht genau diese Datei in diesem Pfad \\
-**template/lib/mootools/plugin-1.2/mootools.SimpleTabs.js** Du kannst auch so etwas wie
-<code<php><!-- JS: http://digitarald.de/project/simple-tabs/1-0/source/SimpleTabs.js --></code>
-verwenden.
-:!: Nicht getestet :!:
-Das ist für das Template.
-In PHP Scripts //(z.B. spezielle frontend_render Aktionen oder Module)// kann auch das verwendet werden
-<code php>
-<?php
-initJSPlugin('SimpleTabs');
-?>
-</code>
-Es ist das Gleiche.
-Beim Aufruf eines Plugins auf diese Weise, wird die Mootools Lib immer automatisch geladen. \\
-Das ist alle.
-</note>
-==== JavaScript ====
-**Datei:**  /template/lib/mootools/plugin-1.2/mootools.SimpleTabs.js  \\
-//(Identisch mit [[http://digitarald.de/project/simple-tabs/1-0/source/SimpleTabs.js]])//
-<code js |h mootools.SimpleTabs.js |h >
-/**
- * SimpleTabs - Unobtrusive Tabs with Ajax
- *
- * @example
- *
- *	var tabs = new SimpleTabs($('tab-element'), {
- * 		selector: 'h2.tab-tab'
- *	});
- *
- * @version		1.0
- *
- * @license		MIT License
- * @author		Harald Kirschner <mail [at] digitarald.de>
- * @copyright	2007 Author
- */
-var SimpleTabs = new Class({
-	Implements: [Events, Options],
-	/**
-	 * Options
-	 */
-	options: {
-		show: 0,
-		selector: '.tab-tab',
-		classWrapper: 'tab-wrapper',
-		classMenu: 'tab-menu',
-		classContainer: 'tab-container',
-		onSelect: function(toggle, container, index) {
-			toggle.addClass('tab-selected');
-			container.setStyle('display', '');
-		},
-		onDeselect: function(toggle, container, index) {
-			toggle.removeClass('tab-selected');
-			container.setStyle('display', 'none');
-		},
-		onRequest: function(toggle, container, index) {
-			container.addClass('tab-ajax-loading');
-		},
-		onComplete: function(toggle, container, index) {
-			container.removeClass('tab-ajax-loading');
-		},
-		onFailure: function(toggle, container, index) {
-			container.removeClass('tab-ajax-loading');
-		},
-		onAdded: Class.empty,
-		getContent: null,
-		ajaxOptions: {},
-		cache: true
-	},
-	/**
-	 * Constructor
-	 *
-	 * @param {Element} The parent Element that holds the tab elements
-	 * @param {Object} Options
-	 */
-	initialize: function(element, options) {
-		this.element = $(element);
-		this.setOptions(options);
-		this.selected = null;
-		this.build();
-	},
-	build: function() {
-		this.tabs = [];
-		this.menu = new Element('ul', {'class': this.options.classMenu});
-		this.wrapper = new Element('div', {'class': this.options.classWrapper});
-		this.element.getElements(this.options.selector).each(function(el) {
-			var content = el.get('href') || (this.options.getContent ? this.options.getContent.call(this, el) : el.getNext());
-			this.addTab(el.innerHTML, el.title || el.innerHTML, content);
-		}, this);
-		this.element.empty().adopt(this.menu, this.wrapper);
-		if (this.tabs.length) this.select(this.options.show);
-	},
-	/**
-	 * Add a new tab at the end of the tab menu
-	 *
-	 * @param {String} inner Text
-	 * @param {String} Title
-	 * @param {Element|String} Content Element or URL for Ajax
-	 */
-	addTab: function(text, title, content) {
-		var grab = $(content);
-		var container = (grab || new Element('div'))
-			.setStyle('display', 'none')
-			.addClass(this.options.classContainer)
-			.inject(this.wrapper);
-		var pos = this.tabs.length;
-		var evt = (this.options.hover) ? 'mouseenter' : 'click';
-		var tab = {
-			container: container,
-			toggle: new Element('li').grab(new Element('a', {
-				href: '#',
-				title: title
-			}).grab(
-				new Element('span', {html: text})
-			)).addEvent(evt, this.onClick.bindWithEvent(this, [pos])).inject(this.menu)
-		};
-		if (!grab && $type(content) == 'string') tab.url = content;
-		this.tabs.push(tab);
-		return this.fireEvent('onAdded', [tab.toggle, tab.container, pos]);
-	},
-	onClick: function(evt, index) {
-		this.select(index);
-		return false;
-	},
-	/**
-	 * Select the tab via tab-index
-	 *
-	 * @param {Number} Tab-index
-	 */
-	select: function(index) {
-		if (this.selected === index || !this.tabs[index]) return this;
-		if (this.ajax) this.ajax.cancel().removeEvents();
-		var tab = this.tabs[index];
-		var params = [tab.toggle, tab.container, index];
-		if (this.selected !== null) {
-			var current = this.tabs[this.selected];
-			if (this.ajax && this.ajax.running) this.ajax.cancel();
-			params.extend([current.toggle, current.container, this.selected]);
-			this.fireEvent('onDeselect', [current.toggle, current.container, this.selected]);
-		}
-		this.fireEvent('onSelect', params);
-		if (tab.url && (!tab.loaded || !this.options.cache)) {
-			this.ajax = this.ajax || new Request.HTML();
-			this.ajax.setOptions({
-				url: tab.url,
-				method: 'get',
-				update: tab.container,
-				onFailure: this.fireEvent.pass(['onFailure', params], this),
-				onComplete: function(resp) {
-					tab.loaded = true;
-					this.fireEvent('onComplete', params);
-				}.bind(this)
-			}).setOptions(this.options.ajaxOptions);
-			this.ajax.send();
-			this.fireEvent('onRequest', params);
-		}
-		this.selected = index;
-		return this;
-	}
-});
-</code>
-\\
 ==== Template ====
-**Datei:**  /template/inc_cntpart/tabs/simpletabs01.tmpl
+**Datei:**  /template/inc_cntpart/tabs/tab_sort_section_jquery.tmpl
 <note>
@@ Line 271: / Line 99: @@
 </note>
-**Update:** 26.01.10 by MP (pepe) - [[http://phpwcms-templates.de]] Manfred Peperkorn \\
-- Für eine bessere Integration von CPs und Artikeln mit dem Tag {SHOW_CONTENT:....}
-<code html>selector: \'h3\' --> selector: \'h3.moo_registerTab\'</code>
+<code html |h tab_sort_section_jquery.tmpl |h >
+/**
+ ********************************************************************
+ * Template to build in a jQuery tab snippet using jQuery-UI
+ * tab_sort_section_query.tmpl for the CP Register (Tabs)
+ * http://jqueryui.com/demos/tabs/
+ *
+ * 15.02.10 Knut Heermann (flip-flop) - http://planmatrix.de
+ * ------------------------------------------------------------------
+ * Selector: #tabs
-<code html><h3 title="{TABTITLE}">{TABTITLE}</h3> --> <h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}<;/h3></code>
+ * Corresponding with the basic css file:
+ * - template/inc_css/specific/jquery/themes/base/ui.all.css.css
+ *
+ * Uses the js files:
+ * - template/lib/jquery/plugin/jquery.jquery-ui.min.js  (UI)
+ * - template/lib/jquery/jquery-1.4.min.js (Core)
+ *
+ * Recomended:
+ * - template/inc_script/frontend_init/cp_trig_sort_section.php
+ *
+ *
+ * Put this file into the Folder
+ * - template/inc_cntpart/tabs/*
+ *
+ * Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt']   = 1;
+ *********************************************************************
+*/
-<code html><h3 title="TabElse">TabElse</h3> --> <h3 class="moo_registerTab" title="TabElse">TabElse</h3></code>
+<!--TABS_START//-->
+<!--SORT_INTO_NEW_BLOCKS_V12//-->
+[PHP]
+// ===========================================================================
+// ---- Load all UI css classes
+$GLOBALS['block']['css']['jquery_ui_tabs'] = 'specific/jquery/themes/base/ui.all.css';
+// ---- Load the right UI css classes (Only these files are used for the tabs)
+// $GLOBALS['block']['css']['jquery_ui_core'] = 'specific/jquery/themes/base/ui.core.css';
+// $GLOBALS['block']['css']['jquery_ui_tabs'] = 'specific/jquery/themes/base/ui.tabs.css';
+// $GLOBALS['block']['css']['jquery_ui_theme'] = 'specific/jquery/themes/base/ui.theme.css';
-<code html |h simpletabs01.tmpl |h >
+// ---- Load the right JS plugin
-/* ********************************************************************
+initJSPlugin('jquery-ui.min');
-  moo_simpletabs01.tmpl for the CP Register (Tabs)
-  http://digitarald.de/project/simple-tabs/1-0/showcase/tabbed/
-.12.09 KH (flip-flop) - http://planmatrix.de Knut Heermann
-.01.10 Update: MP (pepe) - [[http://phpwcms-templates.de]] Manfred Peperkorn
-  selector: \'h3\' -> selector: \'h3.moo_registerTab\'
-  <;h3 title="{TABTITLE}">{TABTITLE}</h3> -> <h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3>
-  <h3 title="TabElse">TabElse</h3> -> <h3 class="moo_registerTab" title="TabElse">TabElse</h3>
-  ---
-  Corresponding with the file /template/inc_css/specific/reg_tabs_simpletabs01.css
-  Uses the js file lib/mootools/plugin-1.2/mootools.SimpleTabs.js
-  - and lib/mootools/mootools-1.2-core-yc.js
-  - Put this file into the Folder /template/inc_cntpart/tabs/*
-  - Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt']   = 1;
-*********************************************************************** */
-<!--TABS_START//-->
+// ---- Load the right js
+$GLOBALS['block']['custom_htmlhead']['jqueryui-tabs'] = '  <script type="text/javascript">
+	//<![CDATA[
+	$(function() {
+		$("#tabs").tabs({
+			collapsible: true
+		});
+		//setter
+		$("#tabs").tabs(\'option\', \'fx\', { height: \'toggle\', opacity: \'toggle\' });
+	});
+	//]]>;
+	</script>';
-<div id="rgt_content">
+// ===========================================================================
+[/PHP]
-[TITLE]<h1>{TITLE}</h1>[/TITLE]
+[TITLE]<h3>{TITLE}</h3>[/TITLE]
 [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
-<div id="simpletabs">
+[CP_TRIG_DEFINITION]
-[TABS_ENTRIES]{TABS_ENTRIES}[/TABS_ENTRIES]
+[BLOCK_01X_PREFIX]<ul class="tabnav">[/BLOCK_01X_PREFIX]
+[BLOCK_01X_SUFFIX]</ul>[/BLOCK_01X_SUFFIX]
-</div>
+[BLOCK_02X_PREFIX][/BLOCK_02X_PREFIX]
+[BLOCK_02X_SUFFIX][/BLOCK_02X_SUFFIX]
-[PHP]
+[/CP_TRIG_DEFINITION]
-initJSPlugin('SimpleTabs');
+[TABS_ENTRIES]
-	$GLOBALS['block']['css']['reg_tabs_simpletabs01'] = 'specific/mootools/reg_tabs_simpletabs01.css';
+<div style="width: 560px;">;
-	$GLOBALS['block']['custom_htmlhead']['reg_tabs_simpletabs01'] = '  <script type="text/javascript">
+<div id="tabs">
-  //* <![CDATA[ *//
+[CP_TRIG_WRAP_CONTENT]
+	{TABS_ENTRIES}
+[/CP_TRIG_WRAP_CONTENT]
+</div><!--/tabs-->
+</div>
-	window.addEvent(\'domready\', function() {
-		var tabs = new SimpleTabs(\'simpletabs\', {
+[/TABS_ENTRIES]
-			selector: \'h3.moo_registerTab\'
+<!--TABS_END//-->;
-		});
-	});
-	//* ]]> *//
-  </script>';
-[/PHP]
-</div> <!--  END id="rgt_content" //-->
-<!--TABS_END//-->
 <!--TABS_ENTRY_START//-->
-[TABTITLE]
-<h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3>
-[/TABTITLE]
-[TABTITLE_ELSE]
-<h3 class="moo_registerTab" title="TabElse">TabElse</h3>
-[/TABTITLE_ELSE]
-	[TABCONTENT]
-	<div>
-		[TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE]
-		[TABTEXT]{TABTEXT}[/TABTEXT]
-	</div>
-	[/TABCONTENT]
-<!--TABS_ENTRY_END//-->
+[CP_TRIG_CONTENT]
+[BLOCK_01X]
+	<li><a href="#tabs-[COUNTX]">[TABTITLE]<b>{TABTITLE}</b>[/TABTITLE][TABTITLE_ELSE]<b>New Title</b>[/TABTITLE_ELSE]</a></li>
+[/BLOCK_01X]
-</code>
+[BLOCK_02X]
+[TABCONTENT]<div id="tabs-[COUNTX]">
+	[TABHEADLINE]<h3>{TABHEADLINE}</h3>[/TABHEADLINE]
+	[TABTEXT]{TABTEXT}[/TABTEXT]
+</div>[/TABCONTENT]
+[/BLOCK_02X]
-==== CSS ====
-**Datei:** /template/inc_css/specific/mootools/reg_tabs_simpletabs01.css
+[/CP_TRIG_CONTENT]
-<code css |h reg_tabs_simpletabs01.css |h >
+<!--TABS_ENTRY_END//-->
-/* CSS for simpletabs in RT "Register Tabs" */
-#rgt_content {
+<;/code>;
-	font-size:1em;
-	line-height:135%;
-	margin:10px 35px 0pt 20px;
-	padding-bottom:55px;
-	position:relative;
-	z-index:5;
-	width: 500px;
-}
-#rgt_content p {
+\\
-	margin:0pt 0pt 10px;
-	padding:0pt;
-}
-#rgt_content h1, #rgt_content h2, #rgt_content h3, #rgt_content h4, #rgt_content h5, #rgt_content h6 {
+==== CSS ====
-	margin:0pt 0pt 15px;
-	padding:0pt;
-}
-#rgt_content div#simpletabs div.tab-wrapper {
+Beispiel aus dem [[http://jqueryui.com/|jQuery UI]] Theme ";Base";: (Bitte schauen Sie sich die Funktionsweise der Themen genauer  an.)
-	padding: 8px 8px 4px 8px;
-	border: 1px solid #d0d0d0;
-	background-color: #f0f0f0;
-	z-index: 5;
-}
-#rgt_content div#simpletabs ul.tab-menu {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	position: relative;
-	height: 21px;
-	z-index: 10;
-	top: 1px;
-	/* border-bottom: 1px solid #dedede; */
-}
-#rgt_content div#simpletabs ul.tab-menu li {
-	float: left;
-	margin: 0 2px 0 0;
-	padding: 0;
-}
-#rgt_content div#simpletabs ul.tab-menu li a {
-	float: left;
-	display: block;
-	padding: 0 0 0 10px;
-/*	background: #dedede url(picture/navi/tabs/simple/inactive_tab.png) no-repeat left top;
-*/
-	background-color: #dedede;
-	color: #808080;
-	font-weight: bold;
-	text-decoration: none;
-	height: 21px;
-	overflow: hidden;
-	line-height: normal;
-}
-#rgt_content div#simpletabs ul.tab-menu li a span {
-	float: left;
-	display: block;
-	padding: 2px 10px 0 0;
-/*	background: #dedede url(picture/navi/tabs/simple/inactive_tab.png) no-repeat right top; */
-	background-color: #dedede;
-	height: 21px;
-	cursor: pointer;
-}
-#rgt_content div.simpletabs ul.tab-menu li a:focus span {
-}
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a {
+**Datei:** /template/inc_css/specific/jquery/base/ui.all.css
-/*	background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll left top; */
+<code css>;
-	background-color: #FDCC00;
+@import "ui.base.css";
-}
+@import "ui.theme.css";
+</code>
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a span {
+**Datei:** /template/inc_css/specific/jquery/base/ui.base.css
-/*	background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll right top; */
+<;code css>;
-	background-color: #FDCC00;
+@import url("ui.core.css");
-	color: #4E4E4E;
-}
-#rgt_content div#simpletabs ul.tab-menu li a:hover,
+@import url("ui.accordion.css");
-#rgt_content div#simpletabs ul.tab-menu li a:hover span {
+@import url("ui.datepicker.css");
-	background-color: #FF946F;
+@import url("ui.dialog.css");
-	color: #1E1E1E;
+@import url("ui.progressbar.css");
-}
+@import url("ui.resizable.css");
+@import url("ui.slider.css");
+@import url("ui.tabs.css");
+</code>
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover,
+**Datei:** /template/inc_css/specific/jquery/base/ui.core.css
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover span {
-	background-color: #FFAD1F;
-	color: #2E2E2E;
-}
+**Datei:** /template/inc_css/specific/jquery/base/ui.theme.css
-</code>
+\\
+**Für die Tabs werden lediglich verwendet:**
+  * /template/inc_css/specific/jquery/base/ui.core.css
+  * /template/inc_css/specific/jquery/base/ui.tabs.css
+  * /template/inc_css/specific/jquery/base/ui.theme.css

deutsch/phpwcms-system/artikel/contentparts/register-tabs/jquery-ui-tabs.1266265160.txt.gz · Last modified: 2018/06/03 18:06 (external edit)

Show page Old revisions