NAVIGATION
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:35] 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. | [[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: -- \\ | Docu: -- \\ | ||
- | Forum: -- | + | Forum: -- \\ |
+ | Basis: [[http://jqueryui.com/demos/tabs/]] | ||
**Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/02/15 // \\ | **Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/02/15 // \\ | ||
Line 38: | Line 39: | ||
Verzeichnis: ** /template/lib/jquery/plugin/ ** | Verzeichnis: ** /template/lib/jquery/plugin/ ** | ||
- | Dateiename: **tab_sort_section_jquery.tmpl.tmpl** \\ | + | Dateiename: **tab_sort_section_jquery.tmpl** \\ |
Verzeichnis: ** /template/inc_cntpart/tabs/ ** | 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/ ** | 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 ===== | ===== Beschreibung ===== | ||
- | FIXME In Bearbeitung | ||
**1.** Update auf die jüngste Version | **1.** Update auf die jüngste Version | ||
Line 67: | Line 77: | ||
**3.** Installation: | **3.** Installation: | ||
* Erstelle aus den drei folgenden Texten die drei angegebenen Dateien in den angegebenen Verzeichnissen. | * 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: | **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** | * Wähle als Vorlage: **tab_sort_section_jquery.tmpl** | ||
* Sichern und das Ergebnis im FE ansehen :-) | * Sichern und das Ergebnis im FE ansehen :-) | ||
+ | \\ | ||
Line 119: | Line 130: | ||
<!--TABS_START//--> | <!--TABS_START//--> | ||
- | <!--SORT_INTO_NEW_BLOCKS//--> | + | <!--SORT_INTO_NEW_BLOCKS_V12//--> |
[PHP] | [PHP] | ||
// =========================================================================== | // =========================================================================== | ||
- | // ---- Load the right css classes | + | // ---- Load all UI css classes |
$GLOBALS['block']['css']['jquery_ui_tabs'] = 'specific/jquery/themes/base/ui.all.css'; | $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 | // ---- Load the right JS plugin | ||
Line 143: | Line 160: | ||
</script>'; | </script>'; | ||
- | |||
- | |||
- | |||
// =========================================================================== | // =========================================================================== | ||
Line 202: | Line 216: | ||
</code> | </code> | ||
+ | \\ | ||
==== CSS ==== | ==== 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 > | + | **Datei:** /template/inc_css/specific/jquery/base/ui.all.css |
- | /* CSS for simpletabs in RT "Register Tabs" */ | + | <code css> |
+ | @import "ui.base.css"; | ||
+ | @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> | + | |