add tinyscrollbar

This commit is contained in:
devin 2012-04-05 02:31:32 +08:00
parent c4b9a9e275
commit a7d84e8583
9 changed files with 52 additions and 19 deletions

View File

@ -7,6 +7,7 @@
//= require jquery //= require jquery
//= require jquery_ujs //= require jquery_ujs
//= require jquery-ui //= require jquery-ui
//= require jquery.tinyscrollbar.min
//= require bootstrap //= require bootstrap
//= require orbitdesktopAPI //= require orbitdesktopAPI
//= require orbitdesktop //= require orbitdesktop

View File

@ -33,7 +33,7 @@ var orbitDesktop = function(dom){
}; };
this.bindDesktopEvents = function(){ this.bindDesktopEvents = function(){
$("a#app_manager").click(function(){ $("a#d_app_manager").click(function(){
var target = $(this).attr("href"); var target = $(this).attr("href");
if(o.currenthtml!=target){ if(o.currenthtml!=target){
o.desktopData[o.currentface] = $(o.contentHolder).html(); o.desktopData[o.currentface] = $(o.contentHolder).html();
@ -42,7 +42,7 @@ var orbitDesktop = function(dom){
}); });
} }
}); });
$("a#desktop").click(function(){ $("a#d_desktop").click(function(){
var target = $(this).attr("href"); var target = $(this).attr("href");
if(o.currenthtml!=target){ if(o.currenthtml!=target){
o.desktopData[o.currentface] = $(o.contentHolder).html(); o.desktopData[o.currentface] = $(o.contentHolder).html();
@ -51,7 +51,7 @@ var orbitDesktop = function(dom){
}); });
} }
}); });
$("a#sections").click(function(){ $("a#d_sections").click(function(){
var target = $(this).attr("href"); var target = $(this).attr("href");
if(o.currenthtml!=target){ if(o.currenthtml!=target){
o.desktopData[o.currentface] = $(o.contentHolder).html(); o.desktopData[o.currentface] = $(o.contentHolder).html();
@ -122,6 +122,7 @@ var orbitDesktop = function(dom){
} }
}); });
$('#holder').tinyscrollbar({ axis: 'x'});
} }
if(!o.desktopData[o.currentface]){ if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){ $(o.contentHolder).empty().load("/desktop/"+target,function(){
@ -174,6 +175,7 @@ var orbitDesktop = function(dom){
$(".group_search").html(allApps); $(".group_search").html(allApps);
return false; return false;
}) })
$('#holder').tinyscrollbar({ axis: 'x'});
} }
if(!o.desktopData[o.currentface]){ if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("desktop_pages/"+target,function(){ $(o.contentHolder).empty().load("desktop_pages/"+target,function(){
@ -213,6 +215,7 @@ var orbitDesktop = function(dom){
$(".section_label ul li:not(:nth-child(1)) span.tile").hover(function(){ $(".section_label ul li:not(:nth-child(1)) span.tile").hover(function(){
$(this).toggleClass("op06"); $(this).toggleClass("op06");
})//.mouseleave(function(){$(this).addClass("op06");}); })//.mouseleave(function(){$(this).addClass("op06");});
$('#holder').tinyscrollbar({ axis: 'x'});
}; };
if(!o.desktopData[o.currentface]){ if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("desktop_pages/"+target,function(){ $(o.contentHolder).empty().load("desktop_pages/"+target,function(){
@ -300,6 +303,7 @@ orbitDesktop.prototype.themefolder = "themes";
$fn_des.stop(true, true).fadeOut(); $fn_des.stop(true, true).fadeOut();
}); });
}); });

View File

@ -24,6 +24,11 @@ time, mark, audio, video {
font: inherit; font: inherit;
vertical-align: baseline; vertical-align: baseline;
} }
#container input, #container textarea, #container select, #container input:focus, #container textarea:focus {
border-radius: 0;
box-shadow: none;
font: inherit;
}
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { footer, header, hgroup, menu, nav, section {
@ -54,7 +59,7 @@ body {
font-size: 12px; font-size: 12px;
background-color: #000; background-color: #000;
} }
a { text-decoration: none; } a, a:hover { text-decoration: none; }
/* desktop layout */ /* desktop layout */
#container { #container {
margin: 72px 0 0 156px; margin: 72px 0 0 156px;
@ -69,12 +74,14 @@ a { text-decoration: none; }
position: absolute; position: absolute;
top: 144px; top: 144px;
left: 0; left: 0;
z-index: 999; z-index: 9;
} }
#holder { #holder {
overflow: hidden; /*overflow: hidden;
overflow-x: auto; overflow-x: auto;*/
height: 540px; height: 540px;
width: auto;
position: relative;
} }
#rwidget { #rwidget {
height: 516px; height: 516px;
@ -104,7 +111,7 @@ a { text-decoration: none; }
} }
.docklist > li:hover .dock_child { display: block; } .docklist > li:hover .dock_child { display: block; }
.dock_item { float: left; } .dock_item { float: left; }
.fn_des.thmtxt { .fn_des.admtxt {
line-height: 60px; line-height: 60px;
padding: 0 6px; padding: 0 6px;
font-size: 15px; font-size: 15px;
@ -154,7 +161,7 @@ a { text-decoration: none; }
float: left; float: left;
margin: 0 12px 0 0; margin: 0 12px 0 0;
position: relative; position: relative;
z-index: 99; z-index: 9;
} }
.dtitle:hover { .dtitle:hover {
/* $(this).addClass( .thmc1 or .thmc2 ); */ /* $(this).addClass( .thmc1 or .thmc2 ); */
@ -247,6 +254,19 @@ a { text-decoration: none; }
.clear { clear: both; } .clear { clear: both; }
/* tiny scrollbar */
#holder .viewport { width: auto; height: 516px; overflow: hidden; position: relative; }
#holder .overview { position: absolute; left: 0; top: 0; }
#holder .scrollbar {
position: absolute;
bottom: 0;
left: 0;
height: 12px;
}
#holder .track { height: 100%; width: 12px; position: relative; }
#holder .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#holder .thumb .end { overflow: hidden; height: 12px; width: 12px; }
#holder .disable{ display: none; }
/* Orbit Notification */ /* Orbit Notification */
#orbitnote { #orbitnote {

View File

@ -13,8 +13,9 @@
</div> </div>
<div id="holder"> <div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
<div id="group_wrapper"> <div class="viewport">
<div id="group_wrapper" class="overview">
<div class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div> <div class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div>
<div class="group_search"> <div class="group_search">
@ -118,4 +119,5 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
</div>
</div> </div>

View File

@ -1,6 +1,6 @@
<div id="content"> <div id="content">
<div id="header" class="hh3"> <div id="header" class="hh3">
<div class="dtitle thmc1 w2 hh3 hp"> <div class="dtitle w2 hh3 hp">
<span class="thmtxth">Desktop</span> <span class="thmtxth">Desktop</span>
<div class="section_slc admbg"> <div class="section_slc admbg">
<ul> <ul>
@ -12,7 +12,9 @@
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div id="group_wrapper"> <div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">
<div class="group"> <div class="group">
<ul class="grp ui-sortable"> <ul class="grp ui-sortable">
<li class="element w2 h2 hp vp thmc1 op07" data-category="abc"> <li class="element w2 h2 hp vp thmc1 op07" data-category="abc">
@ -104,6 +106,7 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

View File

@ -55,7 +55,7 @@
</li> </li>
<li class="d_cate"><a href="appstore" class="widget_fn wh3 hh3" id='d_appstore' onclick="return false;"><span class="widget_icon"><img src="" alt="AppStore" id="appstore_icon" width="30" height="30"/></span></a></li> <li class="d_cate"><a href="appstore" class="widget_fn wh3 hh3" id='d_appstore' onclick="return false;"><span class="widget_icon"><img src="" alt="AppStore" id="appstore_icon" width="30" height="30"/></span></a></li>
</ul> </ul>
<div class="fn_des hh3 thmc2 thmtxt"></div> <div class="fn_des hh3 admbg admtxt"></div>
</div> </div>
</div> </div>
<div id="container"> <div id="container">

View File

@ -1,11 +1,13 @@
<div id="content"> <div id="content">
<div id="header" class="hh3"> <div id="header" class="hh3">
<div class="dtitle thmc1 w2 hh3 hp"> <div class="dtitle w2 hh3 hp">
<span class="thmtxth">All Sections</span> <span class="thmtxth">All Sections</span>
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div id="group_wrapper"> <div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">
<div class="group"> <div class="group">
<div class="section_label" > <div class="section_label" >
<ul> <ul>
@ -168,4 +170,5 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
</div>
</div> </div>

View File

@ -1,6 +1,6 @@
<div id="content"> <div id="content">
<div id="header" class="hh3"> <div id="header" class="hh3">
<div class="dtitle thmc1 w2 hh3 hp"> <div class="dtitle w2 hh3 hp">
<span class="thmtxth">Desktop</span> <span class="thmtxth">Desktop</span>
<div class="section_slc admbg"> <div class="section_slc admbg">
<ul> <ul>

View File

@ -1,6 +1,6 @@
<div id="content"> <div id="content">
<div id="header" class="hh3"> <div id="header" class="hh3">
<div class="dtitle thmc1 w2 hh3 hp"> <div class="dtitle w2 hh3 hp">
<span class="thmtxth">All Sections</span> <span class="thmtxth">All Sections</span>
</div> </div>
</div> </div>