Change tab display in hostby1

  caroucel -> list

diff --git a/karesansui/static/css/tab.css b/karesansui/static/css/tab.css
index f017e4c..cb805c8 100644 (file)
--- a/karesansui/static/css/tab.css
+++ b/karesansui/static/css/tab.css
@@ -1,4 +1,4 @@
-#page #main #content #tab {
+#tab {
     height:28px;
     width: auto;
     overflow: hidden;
@@ -7,17 +7,20 @@
     height:30px;
 }
 
+#tab a {
+    text-decoration:none;
+}
 
-#page #main #content #tab .text {
+#tab .text {
     padding-left: 10px;
     padding-top: 2px;
 }
 
-#page #main #content #tab .text ul {
+#tab .text ul {
     width:auto;
 }
 
-#page #main #content #tab .text ul li {
+#tab li.top-tab{
     float:left;
     list-style-image:none;
     list-style-position:outside;
@@ -25,7 +28,7 @@
     margin-left:0;
 }
 
-#page #main #content #tab .text ul li a {
+#tab .tab-left {
     background:transparent url(../images/tab-left.jpg) no-repeat scroll left top;
     color:#444444;
     display:block;
@@ -33,75 +36,41 @@
     font-size:12px;
     height:29px;
     padding-left:20px;
-    text-decoration:none;
 }
 
-#page #main #content #tab .text ul li a span {
+#tab .tab-right {
     background:transparent url(../images/tab-right.jpg) no-repeat scroll right top;
     display:block;
     float:left;
     height:29px;
     padding:8px 20px 0 0;
-/**/
-//    width: 140px;
-//    text-align: center;
-/**/
 }
 
-#page #main #content #tab .text ul li.ui-tabs-selected a {
+#tab .text ul li.ui-tabs-selected a {
     background:transparent url(../images/tab-left-active.jpg) no-repeat scroll left top;
 }
 
-#page #main #content #tab .text ul li.ui-tabs-selected span {
+#tab .text ul li.ui-tabs-selected span {
     background:transparent url(../images/tab-right-active.jpg) no-repeat scroll right top;
 }
 
-#tab .jcarousel-item {
-    height:30px;
-/**/
-    width: auto !important;
-//    width: 180px !important;
-/**/
-}
-
-#tab .jcarousel-item-horizontal {
-/**/
-    margin-right: 5px;
-//    margin-right: 1px;
-/**/
-}
-
-#tab .left {
-    position:relative;
-    float:left;
-    background:transparent url(/karesansui/v1/static/images/tag-left.jpg) repeat scroll 0 0;
-    height:30px;
-    width:24px;
-    cursor:pointer;
-    z-index:3;
-}
-
-#tab .left.off{
-    background:transparent url(/karesansui/v1/static/images/tag-left-off.jpg) repeat scroll 0 0;
-    cursor:default;
-}
+#tab .stacktab-list {
+    background-image: url(../images/stacktab-back.png);
+    float: left;
+    border:1px solid #C7C7C7;
 
-#tab-main .jcarousel-clip {
-    height:30px;
+    position: absolute;
+    display:none;
+    margin-top: 28px;
+    z-index: 3;
 }
 
-#tab .right{
-    position:relative;
-    float:right;
-    background:transparent url(/karesansui/v1/static/images/tag-right.jpg) repeat scroll 0 0;
-    height:30px;
-    width:24px;
-    cursor:pointer;
-    z-index:3;
+#tab .stacktab-item {
+    padding: 5px 20px 5px 20px;
+    color: #FFFFFF;
+    display: block;
 }
 
-#tab .right.off{
-    cursor:default;
-    background:transparent url(/karesansui/v1/static/images/tag-right-off.jpg) repeat scroll 0 0;
+#tab .selected {
+    background-color: #A9CF15;
 }
-

diff --git a/karesansui/static/images/stack-tab.png b/karesansui/static/images/stack-tab.png
deleted file mode 100644 (file)
index 840f60c..0000000
Binary files a/karesansui/static/images/stack-tab.png and /dev/null differ

diff --git a/karesansui/static/images/stacktab-back.png b/karesansui/static/images/stacktab-back.png
new file mode 100644 (file)
index 0000000..c32e958
Binary files /dev/null and b/karesansui/static/images/stacktab-back.png differ

diff --git a/karesansui/static/images/stacktab-point.png b/karesansui/static/images/stacktab-point.png
new file mode 100644 (file)
index 0000000..0f70c52
Binary files /dev/null and b/karesansui/static/images/stacktab-point.png differ

diff --git a/karesansui/templates/default/hostby1/hostby1.html b/karesansui/templates/default/hostby1/hostby1.html
index d636d50..81df508 100644 (file)
--- a/karesansui/templates/default/hostby1/hostby1.html
+++ b/karesansui/templates/default/hostby1/hostby1.html
@@ -32,37 +32,95 @@ $(document).ready(function(){
             goto_tab(tab_url, null);
         }
     });
+
+    $("#tab .text li").hover(function(){
+        $(this).children("div.stacktab-list").show();
+    }, function() {
+        $(this).children("div.stacktab-list").hide();
+    });
+
+    $("a.stacktab-item").hover(function(){
+        $(this).addClass("selected");
+    }, function() {
+        $(this).removeClass("selected");
+    });
+
+    $("a.stacktab-item").mousedown(function(){
+        $(this).removeClass("selected");
+    });
+
+    $("a.stacktab-item").mouseup(function(){
+        $(this).addClass("selected");
+    });
+
+    $("div.stacktab-list").hide();
+    $("div.stacktab-list a[id$='guest.part']").click();
 });
 // -->
 </script>
-             <div class="left"></div>
-             <div class="right"></div>
-             <div id="caroucel">
                    <div class="text">
                        <ul>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/guest.part"><span>${_('Guests')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/setting.part"><span>${_('Settings')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/network.part"><span>${_('Network')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/job.part"><span>${_('Job')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/firewall.part"><span>${_('Firewall')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/updater.part"><span>${_('Packages')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/networkstorage.part"><span>${_('Network_Storage')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/storagepool.part"><span>${_('StoragePool')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/guestimport.part"><span>${_('Export Data')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/networksettings.part"><span>${_('Network Settings')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/iptables.part"><span>${_('iptables Settings')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/staticroute.part"><span>${_('Static Route Settings')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/report.part"><span>${_('Report')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/watch.part"><span>${_('Watch')}</span></a></li>
-                        <li><a href="#" id="${ctx.homepath}/host/${model.id}/service.part"><span>${_('Service')}</span></a></li>
+                        <li class="top-tab">
+                            <a class="tab-left" href="#" id="${ctx.homepath}/host/${model.id}/guest.part">
+                                <span class="tab-right">${_('Guest')}<img src="${ctx.homepath}/static/images/stacktab-point.png"></span>
+                            </a>
+                            <div class="stacktab-list">
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/guest.part">${_('Guests')}</a>
+                            </div>
+                        </li>
+                        <li class="top-tab">
+                            <a class="tab-left" href="#" id="${ctx.homepath}/host/${model.id}/setting.part">
+                                <span class="tab-right">${_('Settings')}<img src="${ctx.homepath}/static/images/stacktab-point.png"></span>
+                            </a>
+                            <div class="stacktab-list">
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/setting.part">${_('Settings')}</a>
+                            </div>
+                        </li>
+                        <li class="top-tab">
+                            <a class="tab-left" href="#" id="${ctx.homepath}/host/${model.id}/job.part">
+                                <span class="tab-right">${_('Job')}<img src="${ctx.homepath}/static/images/stacktab-point.png"></span>
+                            </a>
+                            <div class="stacktab-list">
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/job.part">${_('Job')}</a>
+                            </div>
+                        </li>
+                        <li class="top-tab">
+                            <a class="tab-left" href="#" id="${ctx.homepath}/host/${model.id}/network.part">
+                                <span class="tab-right">${_('Network')}<img src="${ctx.homepath}/static/images/stacktab-point.png"></span>
+                            </a>
+                            <div class="stacktab-list">
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/network.part">${_('Network')}</a>
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/firewall.part">${_('Firewall')}</a>
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/networksettings.part">${_('Network Settings')}</a>
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/staticroute.part">${_('Static Route Settings')}</a>
+                            </div>
+                        </li class="top-tab">
+                        <li class="top-tab">
+                            <a class="tab-left" href="#" id="${ctx.homepath}/host/${model.id}/storagepool.part">
+                                <span class="tab-right">${_('Storage')}<img src="${ctx.homepath}/static/images/stacktab-point.png"></span>
+                            </a>
+                            <div class="stacktab-list">
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/storagepool.part">${_('StoragePool')}</a>
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/networkstorage.part">${_('Network_Storage')}</a>
+                            </div>
+                        </li>
+                        <li class="top-tab">
+                            <a class="tab-left" href="#" id="${ctx.homepath}/host/${model.id}/updater.part">
+                                <span class="tab-right">${_('Management')}<img src="${ctx.homepath}/static/images/stacktab-point.png"></span>
+                            </a>
+                            <div class="stacktab-list">
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/updater.part">${_('Packages')}</a>
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/report.part">${_('Report')}</a>
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/watch.part">${_('Watch')}</a>
+                                <a class="stacktab-item" href="#" id="${ctx.homepath}/host/${model.id}/service.part">${_('Service')}</a>
+                            </div>
+                        </li>
+<!--
+                        <a href="#" id="${ctx.homepath}/host/${model.id}/guestimport.part"><span>${_('Export Data')}</span></a>
+                        <a href="#" id="${ctx.homepath}/host/${model.id}/iptables.part"><span>${_('iptables Settings')}</span></a>
+-->
                     </ul>
                 </div>
-            </div>
-<script type="text/javascript">
-<!--
-tab_carousel("#caroucel", "#tab .left", "#tab .right");
-// -->
-</script>
 </%def>
 
 <%def name="show()">
@@ -70,7 +128,7 @@ tab_carousel("#caroucel", "#tab .left", "#tab .right");
 <!--
 $(document).ready(function(){
     $(function() {
-        $("#tab .text ul li a[id$='guest.part']").click();
+
     });
 });
 // -->