Änderungen von Dokument Show Hide Macro
Zuletzt geändert von jklein am 2025/06/02 14:04
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
-
Objekte (5 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -3,7 +3,7 @@ 3 3 with the same kind of CSS rules. However, it is now based on jQuery, and need requireJS, so it requires 4 4 XWiki 5.x or more. 5 5 6 -{{showhide}} 6 +{{showhide title="PublicAPI" effect="slide" effectduration="0.5"}} 7 7 Inhalt 8 8 Inhalt 9 9 Inhalt
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -1,7 +1,7 @@ 1 1 require(['jquery'], function($) { 2 2 function onClick () { 3 3 var button = $(this), 4 - content = button. parent().next(),4 + content = button.closest('.showhide-header').next('.showhidecontent'), 5 5 effect = button.attr('data-show-effect'), 6 6 data = button.data(); 7 7 ... ... @@ -8,15 +8,12 @@ 8 8 if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1) 9 9 effect = 'toggle'; 10 10 11 - // Toggle-Zustand berechnen 12 12 data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible')); 13 13 14 - // Pfeil und Text setzen 15 15 var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'); 16 16 var icon = data.showHideState ? '▼ ' : '► '; 17 17 button.html(icon + message); 18 18 19 - // Inhalt ein-/ausblenden 20 20 content.stop()[effect](parseInt(button.attr('data-show-duration'))); 21 21 22 22 return false;
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,8 +1,16 @@ 1 +.showhide-header { 2 + border: 1px solid #ccc; 3 + background-color: #f7f7f7; 4 + border-radius: 4px 4px 0 0; 5 + padding: 8px 12px; 6 + margin-bottom: 0; 7 +} 8 + 1 1 .showhide-header-flex { 2 2 display: flex; 3 3 justify-content: space-between; 4 4 align-items: center; 5 - padding: 6px 10px;13 + padding: 6px 0px; 6 6 font-weight: bold; 7 7 } 8 8 ... ... @@ -17,3 +17,19 @@ 17 17 font-weight: normal; 18 18 } 19 19 28 +.showhidecontent { 29 + border: 1px solid #ccc; 30 + border-top: none; 31 + border-radius: 0 0 4px 4px; 32 + padding: 10px; 33 + background-color: #fff; 34 +} 35 + 36 +.showhide-header:hover { 37 + background-color: #f0f0f0; 38 + cursor: default; 39 +} 40 + 41 +.showhidebutton a:hover { 42 + text-decoration: underline; 43 +}
- XWiki.WikiMacroClass[0]
-
- Makro-Code
-
... ... @@ -20,24 +20,19 @@ 20 20 #set($title = $escapetool.xml($mparams.title)) 21 21 (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %) 22 22 ((( 23 -(% class="showhide-header" %) 24 -((( 25 25 {{html clean=false}} 26 -<div class="showhide-header-flex"> 27 - <div class="showhide-title">$title</div> 28 - <div class="showhidebutton"> 29 - <a href="javascript:void(0)" 30 - #if($id && $id!="")id="showhidebuttontext${id}" #end 31 - data-show-duration="$effectduration" 32 - data-show-effect="$effect" 33 - data-show-message="$showmessage" 34 - data-hide-message="$hidemessage"> 35 - ► $showmessage 36 - </a> 24 +<div class="showhide-header" 25 + #if($id && $id!="") id="showhideheader${id}" #end 26 + data-show-duration="$effectduration" 27 + data-show-effect="$effect" 28 + data-show-message="$showmessage" 29 + data-hide-message="$hidemessage"> 30 + <div class="showhide-header-flex"> 31 + <div class="showhide-title">$title</div> 32 + <div class="showhide-icon">► $showmessage</div> 37 37 </div> 38 38 </div> 39 39 {{/html}} 40 -))) 41 41 (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %) 42 42 ((( 43 43 (((
- XWiki.WikiMacroParameterClass[3]
-
- Parameter-Vorgabe
-
... ... @@ -1,1 +1,1 @@ 1 - toggle1 +slide
- XWiki.WikiMacroParameterClass[7]
-
- Parameter-Beschreibung
-
... ... @@ -1,1 +1,0 @@ 1 -Titel