tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

elofgren: USABILITY: Add + and - toggle icons to TogglePanel? and use 'cursor: pointer;' to make it obvious that it is clickable. Move toggle images to sapphire/images/

Browse Source 
(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@41935 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-15 21:03:01 +00:00
parent 1c90231f45
commit 7256d2dfdc
4 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/toggle-closed.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 B

BIN
images/toggle-open.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 B

3
javascript/TogglePanel.js
View File

@ -2,6 +2,9 @@ Behaviour.register({
'h2.TogglePanelHeader' : {
onclick : function() {
var contentDiv = $('panel_' + this.id);
var toggleID = this.id.replace('panel_','') + '_toggle';
Element.toggle(toggleID + '_closed');
Element.toggle(toggleID + '_open');
if(contentDiv.style.display == 'none') {
contentDiv.style.display = '';
Element.removeClassName(this, 'closed');

6
templates/TogglePanel.ss
View File

@ -1,4 +1,8 @@
<h2 id="$id" class="TogglePanelHeader$ClosedClass">$Title</h2>
<h2 id="$id" style="cursor: pointer;" class="TogglePanelHeader$ClosedClass">
<img id="{$id}_toggle_closed" src="sapphire/images/toggle-closed.gif" alt="+" title="Show" />
<img id="{$id}_toggle_open" src="sapphire/images/toggle-open.gif" alt="-" style="display:none;" title="Hide" />
$Title
</h2>
<div id="panel_$id" $ClosedStyle>
<% control FieldSet %>
$FieldHolder