r2753 - - splitting things, start for joining attempts
Author: malk0.phpgtk
Date: Sun Jun 14 17:32:44 2009
New Revision: 2753
Added:
branches/labs/button/demo.html
branches/labs/button/ui.button.js (contents, props changed)
branches/labs/button/ui.buttonset.js (contents, props changed)
branches/labs/button/ui.classnameoptions.js (contents, props changed)
Log:
- splitting things, start for joining attempts
Added: branches/labs/button/demo.html
==============================================================================
--- (empty file)
+++ branches/labs/button/demo.html Sun Jun 14 17:32:44 2009
@@ -0,0 +1,150 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+ <!--link rel="stylesheet" type="text/css"
href="css/redmond/jquery-ui-1.7.1.custom.css" /-->
+ <!--link rel="stylesheet" type="text/css"
href="css/trontastic/jquery-ui-1.7.1.custom.css" /-->
+ <link type="text/css" rel="stylesheet"
href="http://jqueryui.com/themes/base/ui.all.css" />
+ <script type="text/javascript"
src="http://jqueryui.com/js/jquery.js"></script>
+ <script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+ <!--script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script-->
+ <script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
+ <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" />
+ <style>
+
+ body{
+ font-family:Arial, helvetica;
+ text-align:left;
+ }
+ div{
+ text-align:left;
+ }
+ td,th{
+ vertical-align:middle;
+ text-align:center;
+ }
+ table{
+ border:solid black 1px;
+ }
+ th{
+ border-right:solid silver 1px;
+ border-bottom:solid silver 1px;
+ }
+ p,li{
+ font-size:1em;
+ }
+ h1 {font-size:1.25em;}
+ h2 {font-size:1.1em;}
+
+
+ </style>
+ <script>
+ jQuery().ready(function(){
+ var icon = "info";
+
$('[class*=ui-button]').button({checkButtonset:true,toggle:function(event,ui){alert('toggle
button '+(ui.isActive()?'on':'off'))}});
+
+ $('#settingBar select').change(function(){
+ if($(this).is('#bodySizeSelector'))
+ return $('body').css('fontSize',$(this).val());
+
$('.ui-button:gt(18)').button('option',$(this).attr('name'),$(this).val());
+ });
+
$('select[class*=ui-buttonset]').selectbuttonset().filter(':gt(0)').change();
+ $('#switcher').themeswitcher();
+ });
+ </script>
+</head>
+<body>
+<h1>Jquery-ui-button proposal</h1>
+
+<div id="demo1">
+ <h2>Testing single buttons</h2>
+ Play with selectors here to change settings
+ <div id="settingBar">
+
+ <label>Set Icon:
+ <select id="iconSelector" class="ui-buttonset-small" name="icon">
+ <option value="">no icon</option>
+ <option class="ui-icon-info" value="info">info</option>
+ <option class="ui-icon-wrench" value="wrench">wrench</option>
+ <option class="ui-icon-lightbulb" value="lightbulb">lightbulb</option>
+ <option class="ui-icon-image" value="go-home.png">image file</option>
+ </select>
+ </label>
+ <br />
+ <br />
+ <label>Play with size:
+ <select id="sizeSelector" class="ui-buttonset-small" name="size">
+ <option>tiny</option>
+ <option selected="selected">small</option>
+ <option>normal</option>
+ <option>big</option>
+ <option>huge</option>
+ </select>
+ </label>
+ <br />
+ <br />
+ <label>Change icon position
+ <select id="orientationSelector" name="orientation"
class="ui-buttonset-small">
+ <option class="ui-icon-arrowthick-1-n" value="t">top</option>
+ <option class="ui-icon-arrowthick-1-w" value="l"
selected="selected">left</option>
+ <option class="ui-icon-arrowthick-1-s" value="b">bottom</option>
+ <option class="ui-icon-arrowthick-1-e" value="r">right</option>
+ </select>
+ </label>
+ <br />
+ <br />
+ <label>change body police size:
+ <select id="bodySizeSelector" class="ui-buttonset-small" name="size">
+ <option value="">no size specified</option>
+ <option>10px</option>
+ <option selected="selected">12px</option>
+ <option>14px</option>
+ <option>16px</option>
+ </select>
+ </label>
+ <br />
+ <br />
+ Or switch theme: <div id="switcher" style="display:inline-block;"></div>
+ </div>
+ <h3>Using A element</h3>
+
+ <a href="javascript:" class="ui-button">standard button starting with no
icon</a>
+ <a href="javascript:" class="ui-button-info">standard button</a>
+ <a href="javascript:" class="ui-button-info toggle">toggle button</a>
+ <h3>Using SPAN element</h3>
+ <span class="ui-button-info">standard button</span>
+ <span class="ui-button-info toggle">toggle button</span>
+ <h3>Using DIV element</h3>
+
+ <div class="ui-button-info">standard button</div>
+ <div class="ui-button-info toggle">toggle button</div>
+ <h3>Using BUTTON element</h3>
+ <button type="button" class="ui-button-info">standard button</button>
+ <button type="button" class="ui-button-info toggle">toggle button</button>
+</div>
+
+<div id="demo2">
+ <h2>Testing button sets</h2>
+
+ <h3>Using A element (start small size)</h3>
+ <div class="ui-buttonset-small">
+ <a href="javascript:" class="ui-button">standard button</a><a
href="javascript:" class="ui-button-info">standard button</a><a
href="javascript:" class="ui-button-info toggle">toggle button</a><a
href="javascript:" class="ui-button-info toggle">toggle button</a>
+ </div>
+
+ <h3>Using SPAN element (start with icon on the right )</h3>
+ <div class="ui-buttonset-r">
+ <span class="ui-button-l">standard with icon on the left</span><span
class="ui-button-info">standard button</span><span class="ui-button-info
toggle">toggle button</span><span class="ui-button-info toggle">toggle
button</span>
+ </div>
+ <h3>Using DIV element (start with no labels at all even if they're in the
original markup)</h3>
+ <div class="ui-buttonset-i">
+
+ <div class="ui-button-info">standard button</div><div
class="ui-button-info toggle">toggle button</div><div class="ui-button-info
toggle">toggle button</div>
+ </div>
+ <h3>Using BUTTON element</h3>
+ <div class="ui-buttonset">
+ <button type="button" class="ui-button-info">standard
button</button><button type="button" class="ui-button-info">standard
button</button><button type="button" class="ui-button-info toggle">toggle
button</button>
+ </div>
+</body>
+</html>
Added: branches/labs/button/ui.button.js
==============================================================================
--- (empty file)
+++ branches/labs/button/ui.button.js Sun Jun 14 17:32:44 2009
@@ -0,0 +1,252 @@
+/**
+* jQuery UI Labs - buttons
+* - for experimental use only -
+* this is the core of all ui-button plugins
+* Copyleft (l) 2009 Jonathan gotti aka malko < jgotti at jgotti dot org >
+* Dual licensed under the MIT and GPL licenses.
+* http://docs.jquery.com/License
+* Depends:
+* ui.core.js
+* ui.classnameoptions.js
+*/
+(function($){
+
+ // base ui-button plugin
+ $.widget("ui.button",$.extend({},$.ui.classnameoptions,{
+
+ elmt_icon:null,
+ elmt_iconContainer:null,
+ elmt_label:null,
+ iconIsImage:false,
+ iconBeforeLabel:true,
+ _isToggleCB:null,
+ _buttonset:null,
+ _cornersValue:'',
+ _orientationValue:'',
+ _sizeValue:'',
+ _init:function(){
+ var self = this;
+ //-- should think about aborting or not init when ui-button-none,
ui-buttonset are used.
+ if( this.element.attr('class').match(/(?:^|\s+)ui-button(set|-none(\s|
$))/) ){
+ return $.widget.prototype.destroy.apply(this, arguments);
+ }
+
+ // read inline options from class attribute (that can't be null!!!)
+ var inlineOptions=self._readClassNameOpts('ui-button',{size:'|auto|tiny|
small|normal|big|huge',orientation:'|auto|[trbli]',icon:'|[a-zA-Z0-9_-]+'})
+ self._mergeOpts(inlineOptions);
+
+ self.element.addClass('ui-button ui-widget ui-state-default')
+ .hover(self._hover,self._blur);
+
+ // preapre wrapers elements
+ self._wrapLabel();
+ self._wrapIcon();
+
+ // detect some toggle markup options
+ if( self.element.hasClass('toggle') ){
+ self.options.isToggle = true;
+ }
+ if( self.element.hasClass('active') ||
self.element.hasClass('ui-state-active')){
+ self.options.active = true;
+ }
+
+ // apply some settings
+ self._applyOpts(['size','orientation','icon','corners'])
+ ._applyOpts(['toggle','active','label','isToggle'],true);
+
+ 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});
+ }
+ }
+ // auto initialisation of button set on last buttonset element
+ if( self.options.checkButtonset){
+ var buttonset = self.element.parent('[class*=ui-buttonset]');
+ if( buttonset.length > 0){
+ self._buttonset = buttonset;
+ if( this.element.is(':last-child')){
+ buttonset.buttonset();
+ }
+ }
+ }
+ return this;
+ },
+ _hover: function(){
+ $(this).addClass('ui-state-hover');
+ },
+ _blur: function(){
+ $(this).removeClass('ui-state-hover');
+ },
+ _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();
+ }
+ if( '' === ico || null === ico){
+ this.elmt_icon = null;
+ this.elmt_iconContainer.hide();
+ ico='none';
+ }
+ if( this.iconIsImage){
+ this.elmt_icon=$('<img src="'+escape(ico)+'" />');
+ }else{
+ this.elmt_icon=$('<span class="ui-icon ui-icon-'+ico+'"></span>');
+ }
+ if(this.elmt_icon.length && ! $.support.style){
+ this.elmt_icon.css({margin:0});
+ }
+ this.elmt_iconContainer.append(this.elmt_icon);
+ this.elmt_iconContainer.show();
+ },
+
+ _wrapLabel:function(){
+ if( null!==this.elmt_label ){
+ return;
+ }
+ var elmt_label=$('<span class="ui-button-label"></span>');
+ if( this.element.html().replace(/\s/,'').length > 0){
+ this.element.wrapInner(elmt_label);
+ }else{
+
this.element.append(elmt_label.append(' ').addClass('ui-button-label-empty'));
+ }
+ this.elmt_label = this.element.find('>.ui-button-label');
+ },
+
+ _wrapIcon:function(){
+ if( null!==this.elmt_iconContainer){
+ return;
+ }
+ 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)
+ return this;
+ if( this.iconBeforeLabel){
+ this.element.prepend(this.elmt_iconContainer);
+ }else{
+ this.element.append(this.elmt_iconContainer);
+ }
+ return this;
+ },
+ _setData:function(key,value){
+ var self = this;
+ switch(key){
+ case 'icon':
+ var res = $.widget.prototype._setData.apply(self, arguments);
+ this._setIcon();
+ return res;
+ break;
+ case 'corners':
+ self._cornersValue = value=='auto'?'all':value;
+
self._rmExpClass(self.element,'ui-corner-*','ui-corner-'+self._cornersValue);
+ break;
+ case 'label':
+ if( null!==value){
+ if( ''===value){
+ self.elmt_label.addClass('ui-button-label-empty').html(' ');
+ }else{
+ self.elmt_label.removeClass('ui-button-label-empty')
+ .empty().append(value);
+ }
+ }
+ break;
+ case 'orientation':
+ if( value=='')
+ value = 'auto';
+ self._orientationValue = (value=='auto'||value=='i')?'l':value;
+ if( value==='i'){
+ 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._checkElmtPos();
+ break;
+ case 'size':
+ self._sizeValue = value=='auto'?'normal':value;
+
self._rmExpClass(self.element,'ui-button-size-*','ui-button-size-'+self._sizeValue);
+ break;
+ case 'isToggle':
+ if(! self.isToggleCB){
+ self._isToggleCB = function(event){return self.toggle(event);};
+ }
+ if( value){
+ self.element.bind('click',self._isToggleCB);
+ }else{
+ self.element.unbind('click',self._isToggleCB);
+ }
+ break;
+ case 'active':
+ if(! self._getData('isToggle'))
+ return false;
+ self.element.toggleClass('ui-state-active active',value?true:false);
+ self._trigger('setactive',0,self);
+ break;
+ }
+ return $.widget.prototype._setData.apply(this, arguments);
+ },
+ isActive:function(){
+ return this._getData('active');
+ },
+ importButtonSetSettings:function(buttonSet){
+ var self=this;
+ var buttonSetSize = buttonSet._getData('size');
+ var buttonSetOrientation = buttonSet._getData('orientation');
+ if( self._getData('size')==='auto' && buttonSetSize !== 'auto'){
+ self._setData('size',buttonSetSize);
+ self.options.size='auto';
+ }
+ if( self._getData('orientation')==='auto' &&
buttonSetOrientation !== 'auto'){
+ self._setData('orientation',buttonSetOrientation);
+ self.options.orientation='auto';
+ }
+
+ if( 'auto' == self._getData('corners')){
+ var isOnlyChild = self.element.is(':only-child');
+ if( self.element.is(':first-child') && ! isOnlyChild ){
+ self._setData('corners','left');
+