start editing setting page

some relevant stuff updated
This commit is contained in:
devin 2012-04-10 01:06:29 +08:00
parent 695c1dee58
commit 6006f1b3c6
6 changed files with 112 additions and 76 deletions

View File

@ -151,6 +151,8 @@ var orbitDesktop = function(dom){
}, function(){ }, function(){
$(this).addClass('op01'); $(this).addClass('op01');
}); });
// simple dropdown menu
var $sdm = $('.sdm'); var $sdm = $('.sdm');
if( !$sdm.children('.sdm_o') ){ if( !$sdm.children('.sdm_o') ){
@ -255,12 +257,13 @@ var orbitDesktop = function(dom){
} }
else else
$("#"+$(this).attr("data-category")).append(element); $("#"+$(this).attr("data-category")).append(element);
},over:function(){ },
over:function(){
$(this).find('span.tile').removeClass('op06'); $(this).find('span.tile').removeClass('op06');
}, },
out:function(){ out:function(){
$(this).find('span.tile').addClass('op06'); $(this).find('span.tile').addClass('op06');
} }
}); });
$('#holder').tinyscrollbar({ axis: 'x'}); $('#holder').tinyscrollbar({ axis: 'x'});
var $sdm = $('.sdm'); var $sdm = $('.sdm');
@ -291,7 +294,8 @@ var orbitDesktop = function(dom){
var bindHandlers = function(){ var bindHandlers = function(){
$("select#change_theme").change(function(){ $("select#change_theme").change(function(){
o.changeTheme($(this).val()); o.changeTheme($(this).val());
}) });
$('#panel_r').tinyscrollbar({ axis: 'y'});
} }
if(!o.desktopData[o.currentface]){ if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){ $(o.contentHolder).empty().load("/desktop/"+target,function(){

View File

@ -173,6 +173,7 @@ a, a:hover { text-decoration: none; }
} }
.appholder { .appholder {
position: relative; position: relative;
z-index: 2;
padding-bottom: 12px; padding-bottom: 12px;
} }
.holder_f { .holder_f {
@ -180,8 +181,8 @@ a, a:hover { text-decoration: none; }
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
/* left: 0; left: 0;
top: 0; */ top: 0;
} }
.dtitle { .dtitle {
font-size: 30px; font-size: 30px;
@ -213,6 +214,10 @@ a, a:hover { text-decoration: none; }
top: 0; top: 0;
} }
/* panel */
#panel_l { background-color: #f0f0f0; float: left; }
#panel_r { margin-left: 252px; position: relative;}
/* simple dropdown menu */ /* simple dropdown menu */
.sdm {} .sdm {}
.sdm:hover .sdm_o { display: block; } .sdm:hover .sdm_o { display: block; }
@ -227,6 +232,22 @@ a, a:hover { text-decoration: none; }
.sdm_o li:first-child { border: none; } .sdm_o li:first-child { border: none; }
.sdm_o .admtxt { display: block; line-height: 36px; } .sdm_o .admtxt { display: block; line-height: 36px; }
.sdm_o .admtxt:hover { background-color: #F0F0F0; } .sdm_o .admtxt:hover { background-color: #F0F0F0; }
/* simple menu */
.s_menu { font-size: 15px; line-height: 36px; }
.s_menu li { border-top: solid 1px #ddd; }
.s_menu li:first-child { border: none; }
.s_menu a { display: block; }
/* simple tabs */
.s_tab { font-size: 15px; line-height: 36px; }
.stb_h {}
.stb_v {}
.s_tab li { display: inline-block; }
.s_tab a { display: block; }
.st_c { display: none; }
.st_c:first-child { display: block; }
/* theme color opacity */ /* theme color opacity */
.op10 { opacity: 1; } .op10 { opacity: 1; }
.op09 { opacity: 0.9; } .op09 { opacity: 0.9; }
@ -247,6 +268,8 @@ a, a:hover { text-decoration: none; }
.wh1 { width: 30px; } .wh1 { width: 30px; }
.wh2 { width: 36px; } .wh2 { width: 36px; }
.wh3 { width: 60px; } .wh3 { width: 60px; }
.w100 { width: 100%; }
.pw { width: 572px; }
.h1 { height: 96px; } .h1 { height: 96px; }
.h2 { height: 228px; } .h2 { height: 228px; }
@ -254,6 +277,7 @@ a, a:hover { text-decoration: none; }
.hh1 { height: 30px; } .hh1 { height: 30px; }
.hh2 { height: 36px; } .hh2 { height: 36px; }
.hh3 { height: 60px; } .hh3 { height: 60px; }
.ph { height: 516px; }
.hp { padding-left: 12px; padding-right: 12px; } .hp { padding-left: 12px; padding-right: 12px; }
.vp { padding-top: 12px; padding-bottom: 12px; } .vp { padding-top: 12px; padding-bottom: 12px; }
@ -287,12 +311,9 @@ a, a:hover { text-decoration: none; }
/* tiny scrollbar */ /* tiny scrollbar */
#holder .viewport { width: auto; height: 516px; overflow: hidden; position: relative; } #holder .viewport { width: auto; height: 516px; overflow: hidden; position: relative; }
#holder .overview { position: absolute; left: 0; top: 0; } #holder .overview { position: absolute; left: 0; top: 0; }
#holder .scrollbar { #holder .scrollbar { position: absolute; }
position: absolute; #holder .scrollbar.sb_h { left: 0; bottom: 0; height: 12px; }
bottom: 0; #holder .scrollbar.sb_v { right: 0; top: 0; width: 12px; }
left: 0;
height: 12px;
}
#holder .track { height: 100%; width: 12px; position: relative; } #holder .track { height: 100%; width: 12px; position: relative; }
#holder .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; } #holder .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#holder .thumb .end { overflow: hidden; height: 12px; width: 12px; } #holder .thumb .end { overflow: hidden; height: 12px; width: 12px; }
@ -330,5 +351,4 @@ a, a:hover { text-decoration: none; }
} }
.grp{ .grp{
min-height:540px; min-height:540px;
} }

View File

@ -13,7 +13,7 @@
</div> </div>
<div id="holder"> <div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div> <div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport"> <div class="viewport">
<div id="group_wrapper" class="overview"> <div id="group_wrapper" class="overview">

View File

@ -13,7 +13,7 @@
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div class="scrollbar op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div> <div class="scrollbar sb_h op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport"> <div class="viewport">
<div id="group_wrapper" class="overview"> <div id="group_wrapper" class="overview">
<div class="group"> <div class="group">

View File

@ -5,7 +5,7 @@
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div> <div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport"> <div class="viewport">
<div id="group_wrapper" class="overview"> <div id="group_wrapper" class="overview">
<div class="group"> <div class="group">
@ -19,70 +19,70 @@
</div> </div>
<ul class="grp" id="section1"> <ul class="grp" id="section1">
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
@ -99,70 +99,70 @@
</div> </div>
<ul class="grp" id="section2"> <ul class="grp" id="section2">
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
</ul> </ul>

View File

@ -5,19 +5,34 @@
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport"> <div id="panel_l" class="ph">
<div class="overview"> <div class="s_menu sm_v">
<ul> <ul>
<li><a href="" class="admtxt">Overview</a></li> <li><a href="" class="admtxt hh2 w2 hp">Overview</a></li>
<li><a href="" class="admtxt">Account</a></li> <li><a href="" class="admtxt hh2 w2 hp">Account</a></li>
<li><a href="" class="admtxt">Sections</a></li> <li><a href="" class="admtxt hh2 w2 hp">Sections</a></li>
<li><a href="" class="admtxt">Theme</a></li> <li><a href="" class="admtxt hh2 w2 hp">Theme</a></li>
<li><a href="" class="admtxt">Connection</a></li> <li><a href="" class="admtxt hh2 w2 hp">Connection</a></li>
</ul> </ul>
</div>
</div>
<div id="panel_r" class="ph pw admbg">
<div class="s_tab stb_h">
<ul>
<li><a href="#st1" class="hh2 hp thmtxt thmc1">Select Theme</a></li>
<li><a href="#st2" class="hh2 hp admtxt">Custom Theme</a></li>
</ul>
</div>
<div class="scrollbar sb_v"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview w100">
<div id="st1" class="st_c hp vp">try</div>
<div id="st2" class="st_c hp vp">test</div>
</div>
</div>
</div>
<div class="clear"></div> <div class="clear"></div>
<<<<<<< HEAD
=======
<select id="change_theme"> <select id="change_theme">
<option value='default'>Default Theme</option> <option value='default'>Default Theme</option>
<option value='snake'>Snake Theme</option> <option value='snake'>Snake Theme</option>
@ -27,8 +42,5 @@
</select> </select>
<br /> <br />
<button onClick="od.tempFunc();">Save</button> <button onClick="od.tempFunc();">Save</button>
>>>>>>> desktop_harry
</div>
</div>
</div> </div>
</div> </div>