saurabh
/
orbit-basic
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dock effect

This commit is contained in:
devin 2012-04-04 05:53:49 +08:00 committed by Christophe Vilayphiou
parent 2646c3fe33
commit 293e084bea
4 changed files with 97 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/javascripts/orbitdesktop.js
View File

@ -274,3 +274,33 @@ var orbitDesktop = function(dom){
orbitDesktop.prototype.themefolder = "themes"; orbitDesktop.prototype.themefolder = "themes";
// devin
(function(){
$(document).ready(function(){
var $widget_fn = $('.widget_fn'),
$fn_des = $('.fn_des');
$widget_fn.hover(function(){
var fn_name = $(this).find('img').attr('alt'),
nth = $(this).parents('.d_cate').index(),
des_left = $('.dock_child').eq(nth).width();
$(this).addClass('thmc1');
$fn_des
.text(fn_name)
.css({
'top':nth * 60,
'left': des_left + 60
})
.stop(true, true)
.fadeIn();
}, function(){
$(this).removeClass('thmc1');
$fn_des.stop(true, true).fadeOut();
});
});
}());

39
app/assets/stylesheets/desktopmain.css
View File

@ -89,6 +89,32 @@ a { text-decoration: none; }
height: 30px; height: 30px;
margin: 15px 0 0 15px; margin: 15px 0 0 15px;
} }
.docklist {
}
.docklist li {
position: relative;
}
.dock_child {
display: none;
overflow: hidden;
position: absolute;
left: 60px;
top: 0;
}
.docklist > li:hover .dock_child { display: block; }
.dock_item { float: left; }
.fn_des.thmtxt {
line-height: 60px;
padding: 0 6px;
font-size: 15px;
position: absolute;
min-width: 48px;
text-align: center;
white-space: nowrap;
display: none;
}
.ini_input { .ini_input {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -249,19 +275,6 @@ a { text-decoration: none; }
font-size: 15px; font-size: 15px;
} }
/* fake Orbit bar */
#orbitbar {
height: 28px;
border-radius: 0px;
padding-top: 2px;
padding-bottom: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
background-image: -webkit-linear-gradient(top, #444, #111);
position: absolute;
z-index: 9999;
top: 0;
width: 100%;
}
#group_wrapper{ #group_wrapper{
} }

1
app/assets/stylesheets/style.css.erb
View File

@ -1,3 +1,4 @@
@import url(http://fonts.googleapis.com/css?family=Cuprum);
@font-face{ @font-face{
font-family: 'WebSymbolsRegular'; font-family: 'WebSymbolsRegular';
src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>); src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);

79
app/views/desktop/index.html.erb
View File

@ -1,60 +1,61 @@
<div id="side"> <div id="side">
<div id="rwidget" class="wh3 thmc4"> <div id="rwidget" class="wh3 thmc4">
<ul class="docklist"> <ul class="docklist">
<li><a href="desktop" class="widget_fn wh3 hh3" id='d_desktop' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="home_icon" width="30" height="30"/></span></a> <li class="d_cate"><a href="desktop" class="widget_fn wh3 hh3" id='d_desktop' onclick="return false;"><span class="widget_icon"><img src="" alt="Home" id="home_icon" width="30" height="30"/></span></a>
<ul> <ul class="dock_child hh3 thmc4" style="width: 180px;">
<li><a href="app_manager" class="widget_fn wh3 hh3" id="d_app_manager" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="app_manager_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="app_manager" class="widget_fn wh3 hh3" id="d_app_manager" onclick="return false;"><span class="widget_icon"><img src="" alt="App Manager" id="app_manager_icon" width="30" height="30"/></span></a></li>
<li><a href="sections" class="widget_fn wh3 hh3" id="d_sections" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="sections_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="sections" class="widget_fn wh3 hh3" id="d_sections" onclick="return false;"><span class="widget_icon"><img src="" alt="All Sections" id="sections_icon" width="30" height="30"/></span></a></li>
<li><a href="settings" class="widget_fn wh3 hh3" id="d_settings" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="settings_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="settings" class="widget_fn wh3 hh3" id="d_settings" onclick="return false;"><span class="widget_icon"><img src="" alt="Settings" id="settings_icon" width="30" height="30"/></span></a></li>
</ul> </ul>
</li> </li>
<li><a href="publication" class="widget_fn wh3 hh3" id='d_publication' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="publication_icon" width="30" height="30"/></span></a> <li class="d_cate"><a href="publication" class="widget_fn wh3 hh3" id='d_publication' onclick="return false;"><span class="widget_icon"><img src="" alt="Publication" id="publication_icon" width="30" height="30"/></span></a>
<ul> <ul class="dock_child hh3 thmc4" style="width: 180px;">
<li><a href="journal_p" class="widget_fn wh3 hh3" id='d_journal_p' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="journal_p_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="journal_p" class="widget_fn wh3 hh3" id='d_journal_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Journal Papers" id="journal_p_icon" width="30" height="30"/></span></a></li>
<li><a href="seminar_p" class="widget_fn wh3 hh3" id='d_seminar_p' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="seminar_p_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="seminar_p" class="widget_fn wh3 hh3" id='d_seminar_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Seminar Papers" id="seminar_p_icon" width="30" height="30"/></span></a></li>
<li><a href="books" class="widget_fn wh3 hh3" id='d_books' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="books_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="books" class="widget_fn wh3 hh3" id='d_books' onclick="return false;"><span class="widget_icon"><img src="" alt="Books" id="books_icon" width="30" height="30"/></span></a></li>
</ul> </ul>
</li> </li>
<li><a href="research" class="widget_fn wh3 hh3" id='d_research' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="research_icon" width="30" height="30"/></span></a> <li class="d_cate"><a href="research" class="widget_fn wh3 hh3" id='d_research' onclick="return false;"><span class="widget_icon"><img src="" alt="Research" id="research_icon" width="30" height="30"/></span></a>
<ul> <ul class="dock_child hh3 thmc4" style="width: 240px;">
<li><a href="research_d" class="widget_fn wh3 hh3" id='d_research_d' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="research_d_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="research_d" class="widget_fn wh3 hh3" id='d_research_d' onclick="return false;"><span class="widget_icon"><img src="" alt="Research Domain" id="research_d_icon" width="30" height="30"/></span></a></li>
<li><a href="research_p" class="widget_fn wh3 hh3" id='d_research_p' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="research_p_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="research_p" class="widget_fn wh3 hh3" id='d_research_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Research Project" id="research_p_icon" width="30" height="30"/></span></a></li>
<li><a href="patents" class="widget_fn wh3 hh3" id='d_patents' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="patents_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="patents" class="widget_fn wh3 hh3" id='d_patents' onclick="return false;"><span class="widget_icon"><img src="" alt="Patents" id="patents_icon" width="30" height="30"/></span></a></li>
<li><a href="labs" class="widget_fn wh3 hh3" id='d_labs' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="labs_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="labs" class="widget_fn wh3 hh3" id='d_labs' onclick="return false;"><span class="widget_icon"><img src="" alt="Labs" id="labs_icon" width="30" height="30"/></span></a></li>
</ul> </ul>
</li> </li>
<li><a href="experience" class="widget_fn wh3 hh3" id='d_experience' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="experience_icon" width="30" height="30"/></span></a> <li class="d_cate"><a href="experience" class="widget_fn wh3 hh3" id='d_experience' onclick="return false;"><span class="widget_icon"><img src="" alt="Experience" id="experience_icon" width="30" height="30"/></span></a>
<ul> <ul class="dock_child hh3 thmc4" style="width: 300px;">
<li><a href="working" class="widget_fn wh3 hh3" id='d_working' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="working_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="working" class="widget_fn wh3 hh3" id='d_working' onclick="return false;"><span class="widget_icon"><img src="" alt="Working" id="working_icon" width="30" height="30"/></span></a></li>
<li><a href="education" class="widget_fn wh3 hh3" id='d_education' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="education_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="education" class="widget_fn wh3 hh3" id='d_education' onclick="return false;"><span class="widget_icon"><img src="" alt="Education" id="education_icon" width="30" height="30"/></span></a></li>
<li><a href="honors" class="widget_fn wh3 hh3" id='d_honors' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="honors_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="honors" class="widget_fn wh3 hh3" id='d_honors' onclick="return false;"><span class="widget_icon"><img src="" alt="Honors" id="honors_icon" width="30" height="30"/></span></a></li>
<li><a href="activities" class="widget_fn wh3 hh3" id='d_activities' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="activities_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="activities" class="widget_fn wh3 hh3" id='d_activities' onclick="return false;"><span class="widget_icon"><img src="" alt="Activities" id="activities_icon" width="30" height="30"/></span></a></li>
<li><a href="clubs" class="widget_fn wh3 hh3" id='d_clubs' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="clubs_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="clubs" class="widget_fn wh3 hh3" id='d_clubs' onclick="return false;"><span class="widget_icon"><img src="" alt="Clubs" id="clubs_icon" width="30" height="30"/></span></a></li>
</ul> </ul>
</li> </li>
<li><a href="landt" class="widget_fn wh3 hh3" id='d_landt' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="landt_icon" width="30" height="30"/></span></a> <li class="d_cate"><a href="landt" class="widget_fn wh3 hh3" id='d_landt' onclick="return false;"><span class="widget_icon"><img src="" alt="Learning & Teaching" id="landt_icon" width="30" height="30"/></span></a>
<ul> <ul class="dock_child hh3 thmc4" style="width: 180px;">
<li><a href="courses" class="widget_fn wh3 hh3" id='d_courses' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="courses_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="courses" class="widget_fn wh3 hh3" id='d_courses' onclick="return false;"><span class="widget_icon"><img src="" alt="Courses" id="courses_icon" width="30" height="30"/></span></a></li>
<li><a href="homework" class="widget_fn wh3 hh3" id='d_homework' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="homework_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="homework" class="widget_fn wh3 hh3" id='d_homework' onclick="return false;"><span class="widget_icon"><img src="" alt="Homework" id="homework_icon" width="30" height="30"/></span></a></li>
<li><a href="certification" class="widget_fn wh3 hh3" id='d_certification' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="certification_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="certification" class="widget_fn wh3 hh3" id='d_certification' onclick="return false;"><span class="widget_icon"><img src="" alt="Certification" id="certification_icon" width="30" height="30"/></span></a></li>
</ul> </ul>
</li> </li>
<li><a href="personal" class="widget_fn wh3 hh3" id='d_personal' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="personal_icon" width="30" height="30"/></span></a> <li class="d_cate"><a href="personal" class="widget_fn wh3 hh3" id='d_personal' onclick="return false;"><span class="widget_icon"><img src="" alt="Personal" id="personal_icon" width="30" height="30"/></span></a>
<ul> <ul class="dock_child hh3 thmc4" style="width: 300px;">
<li><a href="mypage" class="widget_fn wh3 hh3" id='d_mypage' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="mypage_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="mypage" class="widget_fn wh3 hh3" id='d_mypage' onclick="return false;"><span class="widget_icon"><img src="" alt="myPage" id="mypage_icon" width="30" height="30"/></span></a></li>
<li><a href="blog" class="widget_fn wh3 hh3" id='d_blog' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="blog_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="blog" class="widget_fn wh3 hh3" id='d_blog' onclick="return false;"><span class="widget_icon"><img src="" alt="Blog" id="blog_icon" width="30" height="30"/></span></a></li>
<li><a href="album" class="widget_fn wh3 hh3" id='d_album' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="album_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="album" class="widget_fn wh3 hh3" id='d_album' onclick="return false;"><span class="widget_icon"><img src="" alt="Album" id="album_icon" width="30" height="30"/></span></a></li>
<li><a href="calendar" class="widget_fn wh3 hh3" id='d_calendar' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="calendar_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="calendar" class="widget_fn wh3 hh3" id='d_calendar' onclick="return false;"><span class="widget_icon"><img src="" alt="Calendar" id="calendar_icon" width="30" height="30"/></span></a></li>
<li><a href="files" class="widget_fn wh3 hh3" id='d_files' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="files_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="files" class="widget_fn wh3 hh3" id='d_files' onclick="return false;"><span class="widget_icon"><img src="" alt="Files" id="files_icon" width="30" height="30"/></span></a></li>
</ul> </ul>
</li> </li>
<li><a href="orbit" class="widget_fn wh3 hh3" id='d_orbit' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="orbit_icon" width="30" height="30"/></span></a> <li class="d_cate"><a href="orbit" class="widget_fn wh3 hh3" id='d_orbit' onclick="return false;"><span class="widget_icon"><img src="" alt="Orbit" id="orbit_icon" width="30" height="30"/></span></a>
<ul> <ul class="dock_child hh3 thmc4" style="width: 60px;">
<li><a href="connection" class="widget_fn wh3 hh3" id='d_connection' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="connection_icon" width="30" height="30"/></span></a></li> <li class="dock_item"><a href="connection" class="widget_fn wh3 hh3" id='d_connection' onclick="return false;"><span class="widget_icon"><img src="" alt="Academia Connection" id="connection_icon" width="30" height="30"/></span></a></li>
</ul> </ul>
</li> </li>
<li><a href="appstore" class="widget_fn wh3 hh3" id='d_appstore' onclick="return false;"><span class="widget_icon"><img src="" alt="" 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> </div>
</div> </div>
<div id="container"> <div id="container">