Trying new jquery tabs system. Appearance may not be quite right
authorOwen Leonard <oleonard@myacpl.org>
Tue, 11 Sep 2007 20:02:18 +0000 (15:02 -0500)
committerChris Cormack <crc@liblime.com>
Tue, 11 Sep 2007 21:41:31 +0000 (16:41 -0500)
Signed-off-by: Chris Cormack <crc@liblime.com>
koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
koha-tmpl/intranet-tmpl/prog/en/includes/members-search.inc
koha-tmpl/intranet-tmpl/prog/en/js/staff-global.js
koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.tabs-ie.css [new file with mode: 0644]
koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.tabs.css [new file with mode: 0644]
koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.tabs.pack.js [new file with mode: 0644]

index 52d1807..efe7b06 100644 (file)
@@ -260,18 +260,6 @@ div#circ_search,div#catalog_search,div#patron_search {
        padding : 0 0 .2em 0;
 }
 
-div#patron_search {
-       display : none;
-}
-
-div#circ_search {
-       display : block;
-}
-
-div#catalog_search {
-       display : none;
-}
-
 /* Panel-Switch Tabs */
 ul.link-tabs {
        list-style-type: none;
index 6c3e45b..54712e4 100644 (file)
@@ -2,8 +2,12 @@
 <link rel="shortcut icon" href="<!-- TMPL_VAR NAME="themelang" -->/includes/favicon.ico" type="image/x-icon" />
 
 <link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/lib/jquery/plugins/clickmenu.css" />
+<link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/lib/jquery/plugins/jquery.tabs.css" />
 <link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/css/staff-global.css" />
-
+        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
+        <!--[if lte IE 7]>
+        <link rel="stylesheet" href="<!-- TMPL_VAR NAME="themelang" -->/lib/jquery/plugins/jquery.tabs-ie.css" type="text/css" media="projection, screen">
+        <![endif]-->
 <!-- TMPL_IF NAME="css_libs" -->
 <!-- TMPL_LOOP NAME="css_libs" -->
 <link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/<!-- TMPL_VAR NAME="lib" -->" />
@@ -24,6 +28,7 @@
 <!-- /TMPL_IF -->
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/jquery.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.clickmenu.pack.js"></script>
+<script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.tabs.pack.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/js/staff-global.js"></script>
 <!-- TMPL_IF NAME="js_libs" -->
 <!-- TMPL_LOOP NAME="js_libs" -->
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/<!-- TMPL_VAR NAME="widget" -->"></script>
 <!-- /TMPL_LOOP -->
 <!-- /TMPL_IF -->
-<script type="text/javascript">$(document).ready(function() 
-{ 
-    $('#toplevelmenu').clickMenu(); 
-}); </script>
 <!-- TMPL_IF NAME="popup" --><link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/css/intranet2popup.css" /><!-- /TMPL_IF -->
 <!-- TMPL_IF NAME="login" --><link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/css/login.css" /><!-- /TMPL_IF -->
 <!-- TMPL_IF NAME="wizard" --><link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/css/wizard.css" />
index ea1d1ce..a467281 100644 (file)
@@ -1,6 +1,6 @@
 <!-- Begin Members Resident Search Box -->
 <div id="header_search">
-       <div class="tip" id="residenttip">Enter patron card number or partial name:</div>
+       <p class="tip" id="residenttip">Enter patron card number or partial name:</p>
        <div id="patron_search">
        <form action="/cgi-bin/koha/members/member.pl" method="post">
     <input id="searchmember" size="25" name="member" type="text" />
                                <input type="submit" name="op" id="opac-submit" value="Submit"  class="form-submit" />
                </form>
        </div>
-                       <ul class="link-tabs">
-                       <li class="off"><a id="showPatronSearch" href="/cgi-bin/koha/members/members-home.pl">Search Patrons</a></li>
-                       <li class="on"><a id="showCircSearch" href="/cgi-bin/koha/circ/circulation.pl">Check Out</a></li>
-                       <li class="off"><a id="showCatSearch" href="/cgi-bin/koha/catalogue/advsearch.pl">Search the Catalog</a></li>
+                       <ul>
+                       <li><a href="/cgi-bin/koha/members/members-home.pl#patron_search">Search Patrons</a></li>
+                       <li><a href="/cgi-bin/koha/circ/circulation.pl#circ_search">Check Out</a></li>
+                       <li><a href="/cgi-bin/koha/catalogue/advsearch.pl#catalog_search">Search the Catalog</a></li>
                        </ul>   
 </div>
 <!-- End Members Resident Search Box -->
\ No newline at end of file
index 9b4a5b7..397d7b3 100644 (file)
@@ -2,44 +2,10 @@
 
  $(document).ready(function() {
        $(".focus").focus();
- });
- $(document).ready(function() {
-       $('a#showCatSearch').click(function() {
-               $('#catalog_search').show();
-               $('#circ_search').hide();
-               $('#patron_search').hide();
-               $('#showCircSearch').parents("li").addClass('off').removeClass('on');
-               $('#showPatronSearch').parents("li").addClass('off').removeClass('on');
-               $('#showCatSearch').parents("li").addClass('on').removeClass('off');
-               $('#search-form').val($('#findborrower').val()).focus();
-               $('#residenttip').html("Enter search keywords:");
-               return false;
-       });
+       $('#toplevelmenu').clickMenu(); 
+       $('#header_search').tabs();
        
-       $('a#showCircSearch').click(function() {
-               $('#circ_search').show();
-               $('#catalog_search').hide();
-               $('#patron_search').hide();
-               $('#showCatSearch').parents("li").addClass('off').removeClass('on');
-               $('#showPatronSearch').parents("li").addClass('off').removeClass('on');
-               $('#showCircSearch').parents("li").addClass('on').removeClass('off');
-               $('#findborrower').val($('#search-form').val()).focus();
-               $('#residenttip').html("Enter patron card number or partial name:");
-               return false;
-       });
-       
-               $('a#showPatronSearch').click(function() {
-               $('#patron_search').show();
-               $('#catalog_search').hide();
-               $('#circ_search').hide();
-               $('#showCircSearch').parents("li").addClass('off').removeClass('on');
-               $('#showCatSearch').parents("li").addClass('off').removeClass('on');
-               $('#showPatronSearch').parents("li").addClass('on').removeClass('off');
-               $('#findborrower').val($('#search-form').val()).focus();
-               $('#residenttip').html("Enter patron card number or partial name:");
-               return false;
-       });
        
  });
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.tabs-ie.css b/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.tabs-ie.css
new file mode 100644 (file)
index 0000000..b0dd7f4
--- /dev/null
@@ -0,0 +1,20 @@
+/*
+Tabs - additional IE specific bug fixes
+
+Recommended usage (Conditional Comments):
+<!--[if lte IE 7]>
+<link rel="stylesheet" href="tabs_ie.css" type="text/css" media="projection, screen" />
+<![endif]-->
+
+*/
+.tabs-nav { /* auto clear */
+    display: inline-block;
+}
+.tabs-nav .tabs-disabled {
+    position: relative; /* fixes opacity */
+    filter: alpha(opacity=40);
+}
+.tabs-nav .tabs-disabled a span {
+    _height: 19px; /* for some reason the height is 1px to less with opacity... */
+    min-height: 19px; /* ...in both IE 6 and 7 */
+}
diff --git a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.tabs.css b/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.tabs.css
new file mode 100644 (file)
index 0000000..e2a2d99
--- /dev/null
@@ -0,0 +1,87 @@
+/* Caution! Ensure accessibility in print and other media types... */
+@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
+    .tabs-hide {
+        display: none;
+    }
+}
+
+/* Hide useless elements in print layouts... */
+@media print {
+    .tabs-nav {
+        display: none;
+    }
+}
+
+/* Skin */
+.tabs-nav {
+    margin: 0;
+    padding: 0 0 0 4px;
+}
+
+.tabs-nav li {
+       list-style : none;
+}
+
+.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
+    display: block;
+    clear: both;
+    content: " ";
+}
+.tabs-nav li {
+    float: left;
+    margin: 0 0 0 1px;
+    min-width: 84px; /* be nice to Opera */
+}
+.tabs-nav a, .tabs-nav a span {
+    display: block;
+    padding: 4px 10px;
+}
+.tabs-nav a {
+    position: relative;
+    top: 1px;
+    z-index: 2;
+    white-space: nowrap; /* required in IE 6 */    
+}
+.tabs-nav .tabs-selected a {
+       background-color : #FFFFCC;
+       border-top: 1px solid #FFFFCC;
+       border-right: 1px solid #FF9900;
+       border-bottom: 1px solid #FF9900;
+       border-left: 1px solid #FFCC66;
+       font-weight : bold;
+       text-decoration : none;
+       top : -1px;
+}
+.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
+    outline: 0; /* prevent dotted border in Firefox */
+}
+.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
+}
+.tabs-nav a span {
+    width: 64px; /* IE 6 treats width as min-width */
+    min-width: 64px;
+    height: 18px; /* IE 6 treats height as min-height */
+    min-height: 18px;
+    padding-top: 6px;
+    padding-right: 0;
+}
+*>.tabs-nav a span { /* hide from IE 6 */
+    width: auto;
+    height: auto;
+}
+.tabs-nav .tabs-selected a span {
+    padding-top: 7px;
+}
+
+.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
+    cursor: text;
+}
+.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
+    cursor: pointer;
+}
+.tabs-nav .tabs-disabled {
+    opacity: .4;
+}
+.tabs-container {
+    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
+}
diff --git a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.tabs.pack.js b/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.tabs.pack.js
new file mode 100644 (file)
index 0000000..e958e76
--- /dev/null
@@ -0,0 +1,14 @@
+/**
+ * Tabs - jQuery plugin for accessible, unobtrusive tabs
+ * @requires jQuery v1.1.1
+ *
+ * http://stilbuero.de/tabs/
+ *
+ * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * Version: 2.7.4
+ */
+eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(4($){$.2l({z:{2k:0}});$.1P.z=4(x,w){3(O x==\'2Y\')w=x;w=$.2l({K:(x&&O x==\'1Z\'&&x>0)?--x:0,12:C,J:$.1f?2h:T,18:T,1r:\'2X&#2Q;\',21:\'18-2F-\',1m:C,1u:C,1l:C,1F:C,1x:\'2u\',2r:C,2p:C,2m:T,2i:C,1d:C,1c:C,1j:\'z-1M\',H:\'z-2b\',14:\'z-12\',16:\'z-26\',1q:\'z-1H\',1L:\'z-2L\',2j:\'10\'},w||{});$.8.1D=$.8.U&&($.8.1Y&&$.8.1Y<7||/2A 6.0/.2y(2x.2w));4 1w(){1V(0,0)}F 5.Y(4(){2 p=5;2 r=$(\'13.\'+w.1j,p);r=r.V()&&r||$(\'>13:9(0)\',p);2 j=$(\'a\',r);3(w.18){j.Y(4(){2 c=w.21+(++$.z.2k),B=\'#\'+c,2f=5.1O;5.1O=B;$(\'<10 S="\'+c+\'" 34="\'+w.16+\'"></10>\').2c(p);$(5).19(\'1B\',4(e,a){2 b=$(5).I(w.1L),X=$(\'X\',5)[0],27=X.1J;3(w.1r){X.1J=\'<24>\'+w.1r+\'</24>\'}1p(4(){$(B).2T(2f,4(){3(w.1r){X.1J=27}b.17(w.1L);a&&a()})},0)})})}2 n=$(\'10.\'+w.16,p);n=n.V()&&n||$(\'>\'+w.2j,p);r.P(\'.\'+w.1j)||r.I(w.1j);n.Y(4(){2 a=$(5);a.P(\'.\'+w.16)||a.I(w.16)});2 s=$(\'A\',r).20($(\'A.\'+w.H,r)[0]);3(s>=0){w.K=s}3(1e.B){j.Y(4(i){3(5.B==1e.B){w.K=i;3(($.8.U||$.8.2E)&&!w.18){2 a=$(1e.B);2 b=a.15(\'S\');a.15(\'S\',\'\');1p(4(){a.15(\'S\',b)},2D)}1w();F T}})}3($.8.U){1w()}n.1a(\':9(\'+w.K+\')\').1C().1n().2C(\':9(\'+w.K+\')\').I(w.1q);$(\'A\',r).17(w.H).9(w.K).I(w.H);j.9(w.K).N(\'1B\').1n();3(w.2m){2 l=4(d){2 c=$.2B(n.1t(),4(a){2 h,1A=$(a);3(d){3($.8.1D){a.Z.2z(\'1X\');a.Z.G=\'\';a.1k=C}h=1A.L({\'1h-G\':\'\'}).G()}E{h=1A.G()}F h}).2v(4(a,b){F b-a});3($.8.1D){n.Y(4(){5.1k=c[0]+\'1W\';5.Z.2t(\'1X\',\'5.Z.G = 5.1k ? 5.1k : "2s"\')})}E{n.L({\'1h-G\':c[0]+\'1W\'})}};l();2 q=p.1U;2 m=p.1v;2 v=$(\'#z-2q-2o-V\').1t(0)||$(\'<X S="z-2q-2o-V">M</X>\').L({1T:\'2n\',3a:\'39\',38:\'37\'}).2c(Q.1S).1t(0);2 o=v.1v;36(4(){2 b=p.1U;2 a=p.1v;2 c=v.1v;3(a>m||b!=q||c!=o){l((b>q||c<o));q=b;m=a;o=c}},35)}2 u={},11={},1R=w.2r||w.1x,1Q=w.2p||w.1x;3(w.1u||w.1m){3(w.1u){u[\'G\']=\'1C\';11[\'G\']=\'1H\'}3(w.1m){u[\'W\']=\'1C\';11[\'W\']=\'1H\'}}E{3(w.1l){u=w.1l}E{u[\'1h-2g\']=0;1R=1}3(w.1F){11=w.1F}E{11[\'1h-2g\']=0;1Q=1}}2 t=w.2i,1d=w.1d,1c=w.1c;j.19(\'2e\',4(){2 c=$(5).1g(\'A:9(0)\');3(p.1i||c.P(\'.\'+w.H)||c.P(\'.\'+w.14)){F T}2 a=5.B;3($.8.U){$(5).N(\'1b\');3(w.J){$.1f.1N(a);1e.B=a.1z(\'#\',\'\')}}E 3($.8.1y){2 b=$(\'<2d 33="\'+a+\'"><10><32 31="2a" 30="h" /></10></2d>\').1t(0);b.2a();$(5).N(\'1b\');3(w.J){$.1f.1N(a)}}E{3(w.J){1e.B=a.1z(\'#\',\'\')}E{$(5).N(\'1b\')}}});j.19(\'1E\',4(){2 a=$(5).1g(\'A:9(0)\');3($.8.1y){a.1o({W:0},1,4(){a.L({W:\'\'})})}a.I(w.14)});3(w.12&&w.12.1K){29(2 i=0,k=w.12.1K;i<k;i++){j.9(--w.12[i]).N(\'1E\').1n()}};j.19(\'28\',4(){2 a=$(5).1g(\'A:9(0)\');a.17(w.14);3($.8.1y){a.1o({W:1},1,4(){a.L({W:\'\'})})}});j.19(\'1b\',4(e){2 g=e.2Z;2 d=5,A=$(5).1g(\'A:9(0)\'),D=$(5.B),R=n.1a(\':2W\');3(p[\'1i\']||A.P(\'.\'+w.H)||A.P(\'.\'+w.14)||O t==\'4\'&&t(5,D[0],R[0])===T){5.25();F T}p[\'1i\']=2h;3(D.V()){3($.8.U&&w.J){2 c=5.B.1z(\'#\',\'\');D.15(\'S\',\'\');1p(4(){D.15(\'S\',c)},0)}2 f={1T:\'\',2V:\'\',G:\'\'};3(!$.8.U){f[\'W\']=\'\'}4 1I(){3(w.J&&g){$.1f.1N(d.B)}R.1o(11,1Q,4(){$(d).1g(\'A:9(0)\').I(w.H).2U().17(w.H);R.I(w.1q).L(f);3(O 1d==\'4\'){1d(d,D[0],R[0])}3(!(w.1u||w.1m||w.1l)){D.L(\'1T\',\'2n\')}D.1o(u,1R,4(){D.17(w.1q).L(f);3($.8.U){R[0].Z.1a=\'\';D[0].Z.1a=\'\'}3(O 1c==\'4\'){1c(d,D[0],R[0])}p[\'1i\']=C})})}3(!w.18){1I()}E{$(d).N(\'1B\',[1I])}}E{2S(\'2R P 2P 2O 26.\')}2 a=1G.2N||Q.1s&&Q.1s.23||Q.1S.23||0;2 b=1G.2M||Q.1s&&Q.1s.22||Q.1S.22||0;1p(4(){1G.1V(a,b)},0);5.25();F w.J&&!!g});3(w.J){$.1f.2K(4(){j.9(w.K).N(\'1b\').1n()})}})};2 y=[\'2e\',\'1E\',\'28\'];29(2 i=0;i<y.1K;i++){$.1P[y[i]]=(4(d){F 4(c){F 5.Y(4(){2 b=$(\'13.z-1M\',5);b=b.V()&&b||$(\'>13:9(0)\',5);2 a;3(!c||O c==\'1Z\'){a=$(\'A a\',b).9((c&&c>0&&c-1||0))}E 3(O c==\'2J\'){a=$(\'A a[@1O$="#\'+c+\'"]\',b)}a.N(d)})}})(y[i])}$.1P.2I=4(){2 c=[];5.Y(4(){2 a=$(\'13.z-1M\',5);a=a.V()&&a||$(\'>13:9(0)\',5);2 b=$(\'A\',a);c.2H(b.20(b.1a(\'.z-2b\')[0])+1)});F c[0]}})(2G);',62,197,'||var|if|function|this|||browser|eq||||||||||||||||||||||||||tabs|li|hash|null|toShow|else|return|height|selectedClass|addClass|bookmarkable|initial|css||trigger|typeof|is|document|toHide|id|false|msie|size|opacity|span|each|style|div|hideAnim|disabled|ul|disabledClass|attr|containerClass|removeClass|remote|bind|filter|click|onShow|onHide|location|ajaxHistory|parents|min|locked|navClass|minHeight|fxShow|fxFade|end|animate|setTimeout|hideClass|spinner|documentElement|get|fxSlide|offsetHeight|unFocus|fxSpeed|safari|replace|jq|loadRemoteTab|show|msie6|disableTab|fxHide|window|hide|switchTab|innerHTML|length|loadingClass|nav|update|href|fn|hideSpeed|showSpeed|body|display|offsetWidth|scrollTo|px|behaviour|version|number|index|hashPrefix|scrollTop|scrollLeft|em|blur|container|tabTitle|enableTab|for|submit|selected|appendTo|form|triggerTab|url|width|true|onClick|tabStruct|remoteCount|extend|fxAutoHeight|block|font|fxHideSpeed|watch|fxShowSpeed|1px|setExpression|normal|sort|userAgent|navigator|test|removeExpression|MSIE|map|not|500|opera|tab|jQuery|push|activeTab|string|initialize|loading|pageYOffset|pageXOffset|such|no|8230|There|alert|load|siblings|overflow|visible|Loading|object|clientX|value|type|input|action|class|50|setInterval|hidden|visibility|absolute|position'.split('|'),0,{}))
\ No newline at end of file