diff --git a/index.htm b/index.htm index ffde6ee..b74e851 100644 --- a/index.htm +++ b/index.htm @@ -40,7 +40,7 @@ -
+
Ribbon App Test
File diff --git a/ribbon/ribbon-tworows.css b/ribbon/ribbon-tworows.css new file mode 100644 index 0000000..acec04d --- /dev/null +++ b/ribbon/ribbon-tworows.css @@ -0,0 +1,379 @@ +body +{ + padding-top: 151px; +} + +.page +{ + border: 1px solid #a5acb5; + margin: 20px; + padding: 15px; + -webkit-box-shadow: #000000 0px 0px 10px; + -moz-box-shadow: #000000 0px 0px 10px; + box-shadow: #000000 0px 0px 10px; + background: #FFF; + behavior: url(/PIE.htc); +} + +.ribbon +{ + font-family: "Segoe UI" , Verdana, Tahoma, Helvetica, sans-serif; + + cursor: default; + font-size: 8pt; + padding-top: 10px; + background-color: #eaedf1; + border-bottom: 1px solid #8b9097; + -webkit-box-shadow: #8b9097 0px 1px 3px; + -moz-box-shadow: #8b9097 0px 1px 3px; + box-shadow: #8b9097 0px 1px 3px; + overflow: hidden; + behavior: url(/PIE.htc); + z-index: 25; + top: 0; + left: 0; + right: 0; + height: 135px; +} + +.ribbon.backstage +{ + height: auto; + bottom: 0; +} +.ribbon .ribbon-window-title +{ + text-align: center; + color: #000; + padding: 2px; + font-size: 10pt; + display: block; +} + +.ribbon .ribbon-tab-header-strip +{ + margin: 5px 0 0 10px; + white-space: nowrap; +} + +.ribbon .ribbon-tab-header +{ + display: inline; + margin: 0 5px; + padding: 5px 10px; + font-size: 8pt; + color: #444; /*border: 1px solid #eaedf1;*/ + border-bottom: 1px solid #b6babf; + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; + position: relative; + z-index: 40; +} + +.ribbon.backstage .ribbon-tab-header +{ + border-bottom: 1px solid #1f48a1; +} + +.ribbon .ribbon-tab-header:hover +{ + background: #f1f3f4; + border: 1px solid #b6babf; + margin: -1px 4px; + cursor: pointer; +} + +.ribbon.backstage .ribbon-tab-header +{ + border-bottom: 1px solid #1f48a1; +} + +.ribbon .ribbon-tab-header.sel, .ribbon .ribbon-tab-header.sel:hover +{ + background: #fff; + margin: -1px 4px; + border: 1px solid #b6babf; + border-bottom: 1px solid #fff; + cursor: default; + z-index: 45; +} + +.ribbon .ribbon-tab-header.file +{ + padding: 5px 20px; + background: #2860b3; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4488e5), to(#2860b3)); + background: -moz-linear-gradient(#4488e5, #2860b3); + -pie-background: linear-gradient(#4488e5, #2860b3); + border: 1px solid #1f48a1; + margin: -1px 4px; + border-bottom: 1px solid #4488e5; + cursor: default; + color: #fff; +} + + +.ribbon .ribbon-tab-header.file:hover +{ + background: #3870c3; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#5498f5), to(#3870c3)); + background: -moz-linear-gradient(#5498f5, #3870c3); + -pie-background: linear-gradient(#5498f5, #3870c3); + border: 1px solid #1f48a1; + cursor: pointer; + border-bottom: 1px solid #4488e5; + z-index: 55; + position: relative; +} +.ribbon .ribbon-tab-header.file.sel +{ + background: #4488e5; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2860b3), to(#4488e5)); + background: -moz-linear-gradient(#2860b3, #4488e5); + -pie-background: linear-gradient(#2860b3, #4488e5); + border: 1px solid #1f48a1; + cursor: pointer; + border-bottom: 1px solid #4488e5; + z-index: 55; + position: relative; +} + +.ribbon .ribbon-tab +{ + height: 88px; + padding: 5px; + margin-top: 5px; + border-top: 1px solid #b6babf; + background: #FFF url('rib-back.png') repeat-x bottom; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#eaedf1)); + background: -moz-linear-gradient(#ffffff, #eaedf1); /*-pie-background: linear-gradient(#ffffff, #eaedf1);*/ + overflow: hidden; + min-width: 500px; + behavior: url(/PIE.htc); + z-index: 30; + -pie-watch-ancestors: 2; +} + +.ribbon .ribbon-tab.file +{ + padding: 0; + margin-top: 5px; + border-top: 1px solid #1f48a1; + + background-color:#4488e5; + filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#4488e5, endColorstr=#ffffff); + background-image:-moz-linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:-webkit-linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:-ms-linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:-o-linear-gradient(left, #4488e5 15%, #ffffff 100%); + background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(15%,#4488e5), color-stop(100%,#ffffff)); + + + overflow: hidden; + min-width: 500px; + z-index: 30; +} + +.ribbon .ribbon-backstage +{ + display: none; +} + + +.ribbon.backstage .ribbon-backstage +{ + display: block; + position: absolute; + top: 60px; + left: 0; + right: 0; + bottom: 0; + padding: 10px; + background-color: #FFF; +} + +.ribbon .section-title +{ + color: #5B626C; + text-align: center; + clear: left; + display: block; + position: absolute; + bottom: 0; + left: 0; + right: 0; + +} + +.ribbon .ribbon-section +{ + float: left; + position: relative; + height: 95px; +} + +.ribbon .ribbon-section-sep +{ + border-left: 1px solid #E0E0E0; + border-right: 1px solid #fff; + margin: 0 5px; + height: 75px; + position: relative; + width: 0; + float: left; +} + +.ribbon .ribbon-button +{ + padding: 4px 6px; + border: 1px solid transparent; + -webkit-border-radius: 3px 3px 3px 3px; + -moz-border-radius: 3px 3px 3px 3px; + border-radius: 3px 3px 3px 3px; + +} + +.ribbon .ribbon-button-large +{ + text-align: center; + height: 58px; + min-width: 44px; + float: left; +} + +.ribbon .ribbon-button-small +{ + height: 14px; + padding: 3px 4px; + text-align: left; + +} + +.ribbon .ribbon-button .button-help +{ + display: none; +} + +.ribbon .ribbon-button .button-title +{ + color: #444; +} + +.ribbon .ribbon-button-large .button-title +{ + clear: left; + display: block; +} + +.ribbon .ribbon-button-large .ribbon-icon +{ + margin: auto; +} + +.ribbon .ribbon-button-small .ribbon-icon +{ + width: 16px; + height: 16px; + float: left; + clear: left; + margin: -1px 5px 0px 1px; +} +.ribbon .ribbon-button .ribbon-icon.ribbon-hot, .ribbon .ribbon-button .ribbon-icon.ribbon-disabled +{ + display: none; +} + +.ribbon .ribbon-button-large .ribbon-icon.ribbon-normal +{ + display: block; +} + +.ribbon .ribbon-button:hover .ribbon-icon.ribbon-normal +{ + display: none; +} + +.ribbon .ribbon-button-large:hover .ribbon-icon.ribbon-hot +{ + display: block; +} +.ribbon .ribbon-button-small .ribbon-icon.ribbon-normal +{ + display: inline; +} + +.ribbon .ribbon-button-small:hover .ribbon-icon.ribbon-hot +{ + display: inline; +} + +.ribbon .ribbon-button:hover, .ribbon .ribbon-button.sel +{ + border: 1px solid #F1C43F; + background: #fdeeb3; + cursor: pointer; + +} +.ribbon .ribbon-button:active +{ + border: 1px solid #F1C43F; + background: #F1C43F; + cursor: pointer; +} + +.ribbon .ribbon-button.disabled .ribbon-icon, .ribbon .ribbon-button.disabled:hover .ribbon-icon +{ + display: none; +} +.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-disabled +{ + display: block; + opacity: 0.8; + +} +.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-implicit-disabled +{ + opacity: 0.4; +} + +.ribbon .ribbon-button.disabled:hover +{ + border: 1px solid transparent; + background: transparent; + cursor: default; +} +.ribbon .ribbon-button.disabled:active +{ + border: 1px solid transparent; + background: transparent; + cursor: default; +} + +.ribbon .ribbon-button.disabled .button-title +{ + color: #888; +} + +.ribbon-tooltip +{ + font-family: "Segoe UI" , Verdana, Tahoma, Helvetica, sans-serif; + font-size: 10pt; + position: fixed; + z-index: 5000; + border: 1px solid #8b9097; + background-color: #e5e5f0; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#e5e5f0)); + background: -moz-linear-gradient(#ffffff, #e5e5f0); + -pie-background: linear-gradient(#ffffff, #e5e5f0); + padding: 5px; + -webkit-box-shadow: #c6c9cd 1px 1px 3px; + -moz-box-shadow: #c6c9cd 1px 1px 3px; + box-shadow: #c6c9cd 1px 1px 3px; + -webkit-border-radius: 2px 2px 2px 2px; + -moz-border-radius: 2px 2px 2px 2px; + border-radius: 2px 2px 2px 2px; + width: 200px; + top: 150px !important; +} diff --git a/ribbon/ribbon.css b/ribbon/ribbon.css index 7fb9dff..b95579c 100644 --- a/ribbon/ribbon.css +++ b/ribbon/ribbon.css @@ -15,13 +15,12 @@ body behavior: url(/PIE.htc); } -#ribbon +.ribbon { font-family: "Segoe UI" , Verdana, Tahoma, Helvetica, sans-serif; cursor: default; font-size: 8pt; - padding-top: 10px; background-color: #eaedf1; border-bottom: 1px solid #8b9097; -webkit-box-shadow: #8b9097 0px 1px 3px; @@ -30,34 +29,33 @@ body overflow: hidden; behavior: url(/PIE.htc); z-index: 25; - position: fixed; top: 0; left: 0; right: 0; - height: 135px; + } -#ribbon.backstage +.ribbon.backstage { height: auto; bottom: 0; } -#ribbon .ribbon-window-title +.ribbon .ribbon-window-title { text-align: center; color: #000; - padding: 2px; font-size: 10pt; display: block; } -#ribbon #ribbon-tab-header-strip +.ribbon .ribbon-tab-header-strip { + display: none; margin: 5px 0 0 10px; white-space: nowrap; } -#ribbon .ribbon-tab-header +.ribbon .ribbon-tab-header { display: inline; margin: 0 5px; @@ -72,12 +70,12 @@ body z-index: 40; } -#ribbon.backstage .ribbon-tab-header +.ribbon.backstage .ribbon-tab-header { border-bottom: 1px solid #1f48a1; } -#ribbon .ribbon-tab-header:hover +.ribbon .ribbon-tab-header:hover { background: #f1f3f4; border: 1px solid #b6babf; @@ -85,12 +83,12 @@ body cursor: pointer; } -#ribbon.backstage .ribbon-tab-header +.ribbon.backstage .ribbon-tab-header { border-bottom: 1px solid #1f48a1; } -#ribbon .ribbon-tab-header.sel, #ribbon .ribbon-tab-header.sel:hover +.ribbon .ribbon-tab-header.sel, .ribbon .ribbon-tab-header.sel:hover { background: #fff; margin: -1px 4px; @@ -100,7 +98,7 @@ body z-index: 45; } -#ribbon .ribbon-tab-header.file +.ribbon .ribbon-tab-header.file { padding: 5px 20px; background: #2860b3; @@ -115,7 +113,7 @@ body } -#ribbon .ribbon-tab-header.file:hover +.ribbon .ribbon-tab-header.file:hover { background: #3870c3; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#5498f5), to(#3870c3)); @@ -127,7 +125,7 @@ body z-index: 55; position: relative; } -#ribbon .ribbon-tab-header.file.sel +.ribbon .ribbon-tab-header.file.sel { background: #4488e5; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2860b3), to(#4488e5)); @@ -140,11 +138,10 @@ body position: relative; } -#ribbon .ribbon-tab +.ribbon .ribbon-tab { - height: 80px; + height: 45px; padding: 5px; - margin-top: 5px; border-top: 1px solid #b6babf; background: #FFF url('rib-back.png') repeat-x bottom; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#eaedf1)); @@ -156,7 +153,7 @@ body -pie-watch-ancestors: 2; } -#ribbon .ribbon-tab.file +.ribbon .ribbon-tab.file { padding: 0; margin-top: 5px; @@ -177,13 +174,13 @@ body z-index: 30; } -#ribbon .ribbon-backstage +.ribbon .ribbon-backstage { display: none; } -#ribbon.backstage .ribbon-backstage +.ribbon.backstage .ribbon-backstage { display: block; position: absolute; @@ -195,7 +192,7 @@ body background-color: #FFF; } -#ribbon .section-title +.ribbon .section-title { color: #5B626C; text-align: center; @@ -208,14 +205,14 @@ body } -#ribbon .ribbon-section +.ribbon .ribbon-section { float: left; position: relative; - height: 82px; + height: 50px; } -#ribbon .ribbon-section-sep +.ribbon .ribbon-section-sep { border-left: 1px solid #E0E0E0; border-right: 1px solid #fff; @@ -226,7 +223,7 @@ body float: left; } -#ribbon .ribbon-button +.ribbon .ribbon-button { padding: 4px 6px; border: 1px solid transparent; @@ -236,7 +233,7 @@ body } -#ribbon .ribbon-button-large +.ribbon .ribbon-button-large { text-align: center; height: 58px; @@ -244,7 +241,7 @@ body float: left; } -#ribbon .ribbon-button-small +.ribbon .ribbon-button-small { height: 14px; padding: 3px 4px; @@ -252,28 +249,28 @@ body } -#ribbon .ribbon-button .button-help +.ribbon .ribbon-button .button-help { display: none; } -#ribbon .ribbon-button .button-title +.ribbon .ribbon-button .button-title { color: #444; } -#ribbon .ribbon-button-large .button-title +.ribbon .ribbon-button-large .button-title { clear: left; display: block; } -#ribbon .ribbon-button-large .ribbon-icon +.ribbon .ribbon-button-large .ribbon-icon { margin: auto; } -#ribbon .ribbon-button-small .ribbon-icon +.ribbon .ribbon-button-small .ribbon-icon { width: 16px; height: 16px; @@ -281,78 +278,78 @@ body clear: left; margin: -1px 5px 0px 1px; } -#ribbon .ribbon-button .ribbon-icon.ribbon-hot, #ribbon .ribbon-button .ribbon-icon.ribbon-disabled +.ribbon .ribbon-button .ribbon-icon.ribbon-hot, .ribbon .ribbon-button .ribbon-icon.ribbon-disabled { display: none; } -#ribbon .ribbon-button-large .ribbon-icon.ribbon-normal +.ribbon .ribbon-button-large .ribbon-icon.ribbon-normal { display: block; } -#ribbon .ribbon-button:hover .ribbon-icon.ribbon-normal +.ribbon .ribbon-button:hover .ribbon-icon.ribbon-normal { display: none; } -#ribbon .ribbon-button-large:hover .ribbon-icon.ribbon-hot +.ribbon .ribbon-button-large:hover .ribbon-icon.ribbon-hot { display: block; } -#ribbon .ribbon-button-small .ribbon-icon.ribbon-normal +.ribbon .ribbon-button-small .ribbon-icon.ribbon-normal { display: inline; } -#ribbon .ribbon-button-small:hover .ribbon-icon.ribbon-hot +.ribbon .ribbon-button-small:hover .ribbon-icon.ribbon-hot { display: inline; } -#ribbon .ribbon-button:hover, #ribbon .ribbon-button.sel +.ribbon .ribbon-button:hover, .ribbon .ribbon-button.sel { border: 1px solid #F1C43F; background: #fdeeb3; cursor: pointer; } -#ribbon .ribbon-button:active +.ribbon .ribbon-button:active { border: 1px solid #F1C43F; background: #F1C43F; cursor: pointer; } -#ribbon .ribbon-button.disabled .ribbon-icon, #ribbon .ribbon-button.disabled:hover .ribbon-icon +.ribbon .ribbon-button.disabled .ribbon-icon, .ribbon .ribbon-button.disabled:hover .ribbon-icon { display: none; } -#ribbon .ribbon-button.disabled .ribbon-icon.ribbon-disabled +.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-disabled { display: block; opacity: 0.8; } -#ribbon .ribbon-button.disabled .ribbon-icon.ribbon-implicit-disabled +.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-implicit-disabled { opacity: 0.4; } -#ribbon .ribbon-button.disabled:hover +.ribbon .ribbon-button.disabled:hover { border: 1px solid transparent; background: transparent; cursor: default; } -#ribbon .ribbon-button.disabled:active +.ribbon .ribbon-button.disabled:active { border: 1px solid transparent; background: transparent; cursor: default; } -#ribbon .ribbon-button.disabled .button-title +.ribbon .ribbon-button.disabled .button-title { color: #888; } diff --git a/ribbon/ribbon.js b/ribbon/ribbon.js index ef4a703..12dd207 100644 --- a/ribbon/ribbon.js +++ b/ribbon/ribbon.js @@ -1,17 +1,11 @@ (function( $ ){ - $.fn.ribbon = function(id) { - if (!id) { - if (this.attr('id')) { - id = this.attr('id'); - } - } - + $.fn.ribbon = function() { + ribObj = this; + var that = function() { return thatRet; }; - - var thatRet = that; that.selectedTabIndex = -1; @@ -25,16 +19,10 @@ that.returnFromBackstage = function() { ribObj.removeClass('backstage'); } - var ribObj = null; - - that.init = function(id) { - if (!id) { - id = 'ribbon'; - } - - ribObj = $('#'+id); - ribObj.find('.ribbon-window-title').after('
'); - var header = ribObj.find('#ribbon-tab-header-strip'); + + that.init = function() { + ribObj.find('.ribbon-window-title').after('
'); + var header = ribObj.find('.ribbon-tab-header-strip'); ribObj.find('.ribbon-tab').each(function(index) { var id = $(this).attr('id'); @@ -99,32 +87,12 @@ $(this).find('.ribbon-normal').addClass('ribbon-implicit-disabled'); } - $(this).tooltip({ - bodyHandler: function () { - if (!$(this).isEnabled()) { - $('#tooltip').css('visibility', 'hidden'); - return ''; - } - - var tor = ''; - - if (jQuery(this).children('.button-help').size() > 0) - tor = (jQuery(this).children('.button-help').html()); - else - tor = ''; - if (tor == '') { - $('#tooltip').css('visibility', 'hidden'); - return ''; - } - - $('#tooltip').css('visibility', 'visible'); - - return tor; - }, - left: 0, - extraClass: 'ribbon-tooltip' - }); + var tor = ''; + if ($(this).children('.button-help').size() > 0) { + tor = (jQuery(this).children('.button-help').html()); + //$(this).tooltip({"content": tor}); + } }); ribObj.find('.ribbon-section').each(function(index) { @@ -139,12 +107,12 @@ } that.switchToTabByIndex = function(index) { - var headerStrip = $('#ribbon #ribbon-tab-header-strip'); + var headerStrip = ribObj.find('.ribbon-tab-header-strip'); headerStrip.find('.ribbon-tab-header').removeClass('sel'); headerStrip.find('#ribbon-tab-header-'+index).addClass('sel'); - $('#ribbon .ribbon-tab').hide(); - $('#ribbon #'+tabNames[index]).show(); + ribObj.find(".ribbon-tab").hide(); + ribObj.find('#'+tabNames[index]).show(); } $.fn.enable = function() { @@ -185,9 +153,9 @@ } - that.init(id); + that.init(); $.fn.ribbon = that; }; -})( jQuery ); \ No newline at end of file +})( jQuery );