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 22:52]
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 44: / Line 45: @@
 Verzeichnis: ** /template/inc_css/specific/jquery/themes/base/ **
+<note>
+**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;
-**Bedingung:** ##$phpwcms['allow_cntPHP_rt']   = 1;## -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]]
 ----
-----
-\\
+~~UP~~
 ===== Beschreibung =====
-FIXME In Bearbeitung
 **1.** Update auf die jüngste Version
@@ Line 67: / Line 77: @@
 **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: **tab_sort_section_jquery.tmpl**
   * Sichern und das Ergebnis im FE ansehen :-)
+\\
@@ Line 119: / Line 130: @@
 <!--TABS_START//-->
-<!--SORT_INTO_NEW_BLOCKS//-->
+<!--SORT_INTO_NEW_BLOCKS_V12//-->
 [PHP]
 // ===========================================================================
-// ---- Load the right css classes
+// ---- 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';
 // ---- Load the right JS plugin
@@ Line 143: / Line 160: @@
 	</script>';
 // ===========================================================================
@@ Line 202: / Line 216: @@
 </code>
+\\
 ==== CSS ====
-**Datei:** /template/inc_css/specific/mootools/reg_tabs_simpletabs01.css
+Beispiel aus dem [[http://jqueryui.com/|jQuery UI]] Theme "Base": (Bitte schauen Sie sich die Funktionsweise der Themen genauer  an.)
-<code css |h reg_tabs_simpletabs01.css |h &gt;
+**Datei:** /template/inc_css/specific/jquery/base/ui.all.css
-/* CSS for simpletabs in RT "Register Tabs" */
+<code css>
+@import "ui.base.css&quot;;
+@import "ui.theme.css";
+</code>
-#rgt_content {
+**Datei:** /template/inc_css/specific/jquery/base/ui.base.css
-	font-size:1em;
+<;code css>;
-	line-height:135%;
+@import url(";ui.core.css";);
-	margin:10px 35px 0pt 20px;
-	padding-bottom:55px;
-	position:relative;
-	z-index:5;
-	width: 500px;
-}
-#rgt_content p {
+@import url("ui.accordion.css");
-	margin:0pt 0pt 10px;
+@import url("ui.datepicker.css");
-	padding:0pt;
+@import url("ui.dialog.css");
-}
+@import url("ui.progressbar.css");
+@import url("ui.resizable.css");
+@import url("ui.slider.css");
+@import url("ui.tabs.css");
+</code>
-#rgt_content h1, #rgt_content h2, #rgt_content h3, #rgt_content h4, #rgt_content h5, #rgt_content h6 {
+**Datei:** /template/inc_css/specific/jquery/base/ui.core.css
-	margin:0pt 0pt 15px;
-	padding:0pt;
-}
-#rgt_content div#simpletabs div.tab-wrapper {
+**Datei:** /template/inc_css/specific/jquery/base/ui.theme.css
-	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 {
+\\
-/*	background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll left top; */
+**Für die Tabs werden lediglich verwendet:**
-	background-color: #FDCC00;
+  * /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
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a span {
-/*	background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll right top; */
-	background-color: #FDCC00;
-	color: #4E4E4E;
-}
-#rgt_content div#simpletabs ul.tab-menu li a:hover,
-#rgt_content div#simpletabs ul.tab-menu li a:hover span {
-	background-color: #FF946F;
-	color: #1E1E1E;
-}
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover,
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover span {
-	background-color: #FFAD1F;
-	color: #2E2E2E;
-}
-</code>

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

Show page Old revisions