mxmehl/uberspace-webadmin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

test new show/hide button

Browse Source
This commit is contained in:
mxmehl
2015-07-09 12:50:05 +03:00
parent 82647eea3e
commit ea07206446
3 changed files with 71 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
index.php
View File

@@ -29,10 +29,6 @@
<p>You can add a new Email account your primary and all other domains.<br />
Please do not add your domain, just everything in front of the @-symbol.</p>
<div class="more">
<!--
<i class="show">Show &#187;</i>
<i class="hide">&#171; Hide</i>
-->
<button type="button" id="show" class="show">Show more &#187;</button>
<button type="button" id="hide" class="hide">&#171; Show less</button>
<br />
@@ -51,19 +47,27 @@
</div> <!-- /holder -->
</div> <!-- outer -->
<h2 id="changepw">Change password of an Email account</h2>
<form action="submit.php" method="post">
<label>Username:</label>
<input name="user" title="User" />
<label>New Password:</label>
<input name="pass" title="Password" type="password" />
<br />
<button type="submit" name="action" value="changepw">Change password</button>
<!-- Hidden confirmation box -->
<input type="hidden" name="sure" value="yes" />
</form>
<div id="gallery">
<h2 id="changepw">Change password of an Email account</h2>
<b class="switch"><span class="turn_on">Show</span><span class="turn_off">Hide</span> input fields...</b>
<div class="hide">
<form action="submit.php" method="post">
<label>Username:</label>
<input name="user" title="User" />
<label>New Password:</label>
<input name="pass" title="Password" type="password" />
<br />
<button type="submit" name="action" value="changepw">Change password</button>
<!-- Hidden confirmation box -->
<input type="hidden" name="sure" value="yes" />
</form>
</div>
<hr />
</div>
<h2 id="listusers">List all Email accounts</h2>
<form action="submit.php" method="post">
<button type="submit" name="action" value="listusers">List accounts</button>

40
static/click_toggle.js
View File

@@ -2,27 +2,43 @@
This copyright notice must be untouched at all times.
The original version of this script and the associated (x)html
is available at http://www.stunicholls.com/various/more.html
is available at http://www.stunicholls.com/gallery/more_and_more.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This script and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
clickMenu = function(menu,element,cname) {
var getEls = document.getElementById(menu).getElementsByTagName(element);
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
if ((this.className.indexOf(cname))!=-1)
{
if ((this.className.indexOf('click'))!=-1) {
this.className=this.className.replace("click", "");;
onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('B') [i++]) {
if (e.className == 'switch') {
e.onclick = function () {
var getEls = document.getElementById('gallery').getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
if (getEls[z].className == 'hide') {
w=getEls[z].previousSibling;
while (w.nodeType!=1) {
w=w.previousSibling;
}
w.className=w.className.replace('switch over', 'switch');
}
else {
this.className+=" click";
if (getEls[z].className == 'show') {
getEls[z].className=getEls[z].className.replace('show', 'hide');
w=getEls[z].previousSibling;
while (w.nodeType!=1) {
w=w.previousSibling;
}
w.className=w.className.replace('switch off', 'switch over');
}
}
this.className = this.className == 'switch' ? 'switch off' : 'switch';
x=this.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling;
}
x.className = this.className == 'switch off' ? 'show' : 'hide';
}
}
}
}

24
static/style.css
View File

@@ -23,6 +23,29 @@ button {
padding: 6px;
}
/* New click/hide */
#gallery {position:relative; font:11px verdana,arial,sans-serif; line-height:20px; width:705px; padding: 50px 0 0 10px; background:url(pointer.jpg) no-repeat left top; height:450px;}
#gallery h3 {color:#222; font-size:13px;}
#gallery h3.color {color:#000; margin:10px 25px;}
#gallery .switch {display:block; cursor:pointer; color:#000; font-weight:normal;}
#gallery .switch .turn_off {display:none;}
#gallery .off {color:#c00;}
#gallery .off .turn_off {display:inline;}
#gallery .off .turn_on {display:none;}
#gallery .hide {display:none;}
#gallery .show {position:absolute; top:0; left:380px; display:block; width:370px; background:#fff; z-index:200;}
#gallery form {width:270px; height:200px; background:url(form.jpg); padding:50px;}
#gallery form fieldset {background:#fff;}
#gallery .table {background:url(tables.jpg) no-repeat left bottom; padding:0 25px 25px; width:320px;}
#gallery table, #gallery caption, #gallery table tr, #gallery table tr td {border:1px solid #000; padding:5px; background:#fff;}
#gallery a, #gallery a:visited {color:#00c; line-height:30px;}
#gallery textarea {width:350px; border-color:#0cc; color:#048; padding:10px;}
#gallery dl {width:370px;}
/* Click Toogle */
/* always visible */
#outer .holder {
@@ -74,3 +97,4 @@ button {
display:block;
}