r2797 - - add forgotten css file + bug correction on ie6 vertical rendering
Author: malk0.phpgtk
Date: Tue Jun 16 15:43:46 2009
New Revision: 2797
Added:
branches/labs/button/ui-button.css
Modified:
branches/labs/button/demo.html
branches/labs/button/ui.button.js
Log:
- add forgotten css file + bug correction on ie6 vertical rendering
- make some properties private as they should have been from the start
Modified: branches/labs/button/demo.html
==============================================================================
--- branches/labs/button/demo.html (original)
+++ branches/labs/button/demo.html Tue Jun 16 15:43:46 2009
@@ -11,7 +11,7 @@
<script src="ui.classnameoptions.js"></script>
<script src="ui.button.js"></script>
<script src="ui.buttonset.js"></script>
- <link rel="stylesheet" type="text/css" href="jquery-ui-button.css" />
+ <link rel="stylesheet" type="text/css" href="ui-button.css" />
<style>
body{
Added: branches/labs/button/ui-button.css
==============================================================================
--- (empty file)
+++ branches/labs/button/ui-button.css Tue Jun 16 15:43:46 2009
@@ -0,0 +1,92 @@
+.ui-buttonset{
+ display:inline-block;
+ margin:0 1em;
+ vertical-align:bottom;
+ white-space:nowrap;
+}
+
+.ui-button-inlineBlockFix{
+ display:inline !important;
+}
+
+.ui-button, button.ui-button{
+ position:relative;
+ zoom:1; /** ie hasLayout trigger */
+ text-decoration:none;
+ cursor:pointer;
+ margin:0 0.1em;
+ padding: 0.2em 0.8em;
+ text-align:center;
+ display:inline-block;
+ vertical-align:bottom;
+ white-space:nowrap;
+ outline:none;
+ font-size:1em;
+}
+/*button.ui-button{
+ padding:0.1525em 0.6em; /* this look offer pretty good consistency for
firefox but will broke opera and perhaps midori/chrome/safari ie still a
problem * /
+}*/
+.ui-buttonset .ui-button,.ui-buttonset button.ui-button{
+ margin:0;
+}
+
+.ui-button-size-tiny, button.ui-button-size-tiny
{font-size:0.75em !important;}
+.ui-button-size-small, button.ui-button-size-small
{font-size:0.9em !important;}
+.ui-button-size-normal,
button.ui-button-size-normal{font-size:1em !important;}
+.ui-button-size-big, button.ui-button-size-big
{font-size:1.1em !important;}
+.ui-button-size-huge, button.ui-button-size-huge
{font-size:1.25em !important;}
+
+/** labels **/
+.ui-button-label{
+ font-size:1em;
+ display:inline-block;
+ padding:0.2em;
+ vertical-align:middle;
+ white-space:nowrap;
+ margin:auto;
+}
+
+.ui-button-label.ui-button-label-empty{
+ width:0px;
+ zoom:1;
+ overflow:visible;
+ white-space:nowrap;
+ padding:0.2em 0;
+ margin:0 !important;
+}
+
+/** icons **/
+.ui-button-icon {
+ position:relative;
+ zoom:1;
+ font-size:1em;
+ vertical-align:middle;
+ margin:auto;
+ text-align:center;
+}
+
+.ui-button-icon img{
+ border:none;
+ display:block;
+ margin:0 auto;
+}
+
+.ui-button-orientation-t .ui-button-icon { display:block !important;
margin:0 auto;}
+.ui-button-orientation-b .ui-button-icon { display:block !important;
margin:0 auto;}
+.ui-button-orientation-l .ui-button-icon {
display:inline-block !important;}
+.ui-button-orientation-r .ui-button-icon {
display:inline-block !important;}
+
+.ui-button-orientation-t .ui-icon, .ui-button-orientation-b .ui-icon{
margin:0 auto;}
+.ui-button-orientation-b .ui-icon-none, .ui-button-orientation-t .ui-icon-none
{
background:none !important;}
+.ui-button-orientation-r .ui-icon-none, .ui-button-orientation-l .ui-icon-none
{
width:0;background:none;}
+.ui-button-inlineBlockFix.ui-button-orientation-t .ui-button-icon {
width:16px;}
+.ui-button-inlineBlockFix.ui-button-orientation-b .ui-button-icon {
width:16px;}
+
+
+/*
+.ui-button-size-tiny .ui-icon {zoom:0.5;}
+.ui-button-size-small .ui-icon {zoom:0.75;}
+.ui-button-size-normal .ui-icon {zoom:1;}
+.ui-button-size-big .ui-icon {zoom:1.5;}
+.ui-button-size-huge .ui-icon {zoom:2;}
+*/
Modified: branches/labs/button/ui.button.js
==============================================================================
--- branches/labs/button/ui.button.js (original)
+++ branches/labs/button/ui.button.js Tue Jun 16 15:43:46 2009
@@ -14,11 +14,11 @@
// base ui-button plugin
$.widget("ui.button",$.extend({},$.ui.classnameoptions,{
- elmt_icon:null,
- elmt_iconContainer:null,
- elmt_label:null,
- iconIsImage:false,
- iconBeforeLabel:true,
+ _elmt_icon:null,
+ _elmt_iconContainer:null,
+ _elmt_label:null,
+ _iconIsImage:false,
+ _iconBeforeLabel:true,
_isToggleCB:null,
_buttonset:null,
_cornersValue:'',
@@ -56,9 +56,9 @@
if(! $.support.style){
this.element.addClass('ui-button-inlineBlockFix');
- this.elmt_iconContainer.css({margin:0});
- if(null !== this.elmt_icon){
- this.elmt_icon.css({margin:0});
+ this._elmt_iconContainer.css({margin:0});
+ if(null !== this._elmt_icon){
+ this._elmt_icon.css({margin:0});
}
}
// auto initialisation of button set on last buttonset element
@@ -81,55 +81,55 @@
},
_setIcon:function(){
var ico = this._getData('icon');
- this.iconIsImage =( ico.match(/\.(jpe?g|png|gif|ico)$/i) )?true:false;
- if(null !== this.elmt_icon){
- this.elmt_icon.remove();
+ this._iconIsImage =( ico.match(/\.(jpe?g|png|gif|ico)$/i) )?true:false;
+ if(null !== this._elmt_icon){
+ this._elmt_icon.remove();
}
if( '' === ico || null === ico){
- this.elmt_icon = null;
- this.elmt_iconContainer.hide();
+ this._elmt_icon = null;
+ this._elmt_iconContainer.hide();
ico='none';
}
- if( this.iconIsImage){
- this.elmt_icon=$('<img src="'+escape(ico)+'" />');
+ if( this._iconIsImage){
+ this._elmt_icon=$('<img src="'+escape(ico)+'" />');
}else{
- this.elmt_icon=$('<span class="ui-icon ui-icon-'+ico+'"></span>');
+ this._elmt_icon=$('<span class="ui-icon ui-icon-'+ico+'"></span>');
}
- if(this.elmt_icon.length && ! $.support.style){
- this.elmt_icon.css({margin:0});
+ if(this._elmt_icon.length && ! $.support.style){
+ this._elmt_icon.css({margin:0});
}
- this.elmt_iconContainer.append(this.elmt_icon);
- this.elmt_iconContainer.show();
+ this._elmt_iconContainer.append(this._elmt_icon);
+ this._elmt_iconContainer.show();
},
_wrapLabel:function(){
- if( null!==this.elmt_label ){
+ if( null!==this._elmt_label ){
return;
}
- var elmt_label=$('<span class="ui-button-label"></span>');
+ var _elmt_label=$('<span class="ui-button-label"></span>');
if( this.element.html().replace(/\s/,'').length > 0){
- this.element.wrapInner(elmt_label);
+ this.element.wrapInner(_elmt_label);
}else{
-
this.element.append(elmt_label.append(' ').addClass('ui-button-label-empty'));
+
this.element.append(_elmt_label.append(' ').addClass('ui-button-label-empty'));
}
- this.elmt_label = this.element.find('>.ui-button-label');
+ this._elmt_label = this.element.find('>.ui-button-label');
},
_wrapIcon:function(){
- if( null!==this.elmt_iconContainer){
+ if( null!==this._elmt_iconContainer){
return;
}
- this.elmt_iconContainer=$('<span class="ui-button-icon"></span>');
- this.element.append(this.elmt_iconContainer);
+ this._elmt_iconContainer=$('<span class="ui-button-icon"></span>');
+ this.element.append(this._elmt_iconContainer);
},
_checkElmtPos: function(){
var actual =
this.element.find('span:first').is('.ui-button-icon')?true:false;
- if( actual==this.iconBeforeLabel)
+ if( actual==this._iconBeforeLabel)
return this;
- if( this.iconBeforeLabel){
- this.element.prepend(this.elmt_iconContainer);
+ if( this._iconBeforeLabel){
+ this.element.prepend(this._elmt_iconContainer);
}else{
- this.element.append(this.elmt_iconContainer);
+ this.element.append(this._elmt_iconContainer);
}
return this;
},
@@ -148,9 +148,9 @@
case 'label':
if( null!==value){
if( ''===value){
- self.elmt_label.addClass('ui-button-label-empty').html(' ');
+ self._elmt_label.addClass('ui-button-label-empty').html(' ');
}else{
- self.elmt_label.removeClass('ui-button-label-empty')
+ self._elmt_label.removeClass('ui-button-label-empty')
.empty().append(value);
}
}
@@ -163,7 +163,7 @@
self._setData('label','');
}
self._rmExpClass(self.element,'ui-button-orientation-*','ui-button-orientation-'+self._orientationValue);
- self.iconBeforeLabel=( self._orientationValue=='b' ||
self._orientationValue=='r')?false:true;
+ self._iconBeforeLabel=( self._orientationValue=='b' ||
self._orientationValue=='r')?false:true;
self._checkElmtPos();
break;
case 'size':