OSDN Git Service

client is version0.4.25, added combobox to pettanr.form.
[pettanr/pettanr.git] / public / assets / common.js
index 779050c..0007b34 100644 (file)
@@ -1,12 +1,12 @@
 /*\r
  * pettanR common.js\r
- *   version 0.4.24\r
+ *   version 0.4.25\r
  * \r
  * author: itozyun\r
  */\r
 \r
 /*\r
- * http://pettanr.sourceforge.jp/test/type.html
+ * http://pettanr.sourceforge.jp/test/type.html\r
  */\r
        var Type = {\r
                isObject : function(v) {\r
@@ -1202,7 +1202,7 @@ pettanr.key = ( function(){
                        overlayEnabled = pettanr.overlay.visible === true,\r
                        currentViewID = overlayEnabled === true ? pettanr.overlay.currentID : pettanr.view.currentID;\r
                if( callback === 'keypress') callback = 'keydown';\r
-               if( pettanr.form.keyEventRellay( e) === false){\r
+               if( pettanr.form.keyEventRellay( e ) === false){\r
                        var shift = e.shiftKey,\r
                                ctrl = e.ctrlKey,\r
                                l = KEYEVENT_ARRAY.length,\r
@@ -1257,12 +1257,12 @@ pettanr.key = ( function(){
 \r
                        jqWindow = pettanr.jqWindow().focus();\r
                        keyOperationChatcher = pettanr.jqDocument()\r
-                               .keydown( keyHit)\r
-                               .keyup( keyHit)\r
+                               .keydown( keyHit )\r
+                               .keyup( keyHit )\r
                                .mouseenter( function(){\r
                                        jqWindow.focus();\r
                                });\r
-                       keyPress && keyOperationChatcher.keypress( keyPress);\r
+                       keyPress && keyOperationChatcher.keypress( keyPress );\r
 \r
                        delete pettanr.key.init;\r
                },\r
@@ -1311,6 +1311,7 @@ pettanr.form = ( function(){
        var     FORM_GROUP_TABLE = {},\r
                currentID = null,\r
                currentItem = null,\r
+               CLASSNAME_COMBOBOX_OPTION = 'combobox-option',\r
                ELM_A_ORIGIN = ( function(){\r
                        var ret = document.createElement( 'a');\r
                        ret.href = '#';\r
@@ -1320,21 +1321,34 @@ pettanr.form = ( function(){
                        var ret = document.createElement( 'input');\r
                        ret.type = 'text';\r
                        return ret;\r
-               })();\r
+               })(),\r
+               ELM_COMBOBOX = ( function(){\r
+                       var ret = document.createElement( 'a'),\r
+                               elmToggle = document.createElement( 'span' ),\r
+                               elmValue = document.createElement( 'span' );\r
+                       ret.href = '#';\r
+                       ret.appendChild( elmToggle );\r
+                       ret.appendChild( elmValue );\r
+                       elmToggle.className = 'combobox-toggle';\r
+                       elmValue.className = 'combobox-value';\r
+                       \r
+                       elmToggle.appendChild( document.createTextNode( '▼' ));\r
+                       elmValue.appendChild( document.createTextNode( 'null' ));\r
+                       return ret;\r
+               })()\r
                \r
-       var InputTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater){\r
-               validater = typeof validater === 'function' ? validater : null;\r
+       var InputTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater ){\r
+               validater = Type.isFunction( validater ) === true ? validater : null;\r
                \r
                var elmValue = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'editable-value' )[ 0],\r
                        value,\r
-                       index = GROUP_ID ? FORM_GROUP_TABLE[ GROUP_ID].length : -1,\r
-                       instance,\r
+                       instance = this,\r
                        focus = false,\r
                        visible = true,\r
                        enabled = true,\r
                        elmA = ELM_A_ORIGIN.cloneNode( true );\r
                \r
-               if( elmValue === undefined){\r
+               if( elmValue === undefined ){\r
                        alert( 'error!');\r
                }\r
                value = elmValue.innerHTML;\r
@@ -1343,79 +1357,115 @@ pettanr.form = ( function(){
                try {\r
                        elmA.innerHTML = value;\r
                } catch(e){\r
-                       alert( value + elmA)\r
+                       alert( value )\r
                }\r
                \r
                elmValue.appendChild( elmA );\r
                WRAPPER_ELM.onclick = onClick;\r
                \r
-               function onClick( e){\r
+               function onClick(){\r
                        focus = true;\r
-                       start( instance);\r
+                       start( instance );\r
                        elmA.style.display = 'none';\r
-                       elmValue.appendChild( ELM_INPUT_TEXT);\r
+                       elmValue.appendChild( ELM_INPUT_TEXT );\r
                        ELM_INPUT_TEXT.value = value;\r
                        ELM_INPUT_TEXT.focus();\r
                        ELM_INPUT_TEXT.select();\r
-                       e && e.preventDefault();\r
                        return false;\r
                }\r
                \r
-               return {\r
-                       init: function(){\r
-                               instance = this;\r
-                               delete this.init;\r
-                       },\r
-                       value: function( _value){\r
-                               if( _value !== undefined){\r
-                                       elmA.innerHTML = _value;\r
-                                       value = _value;\r
-                                       \r
-                                       if( focus === true){\r
-                                               ELM_INPUT_TEXT.value = value;\r
-                                       }\r
-                               }\r
-                               currentItem === instance && this.finish();\r
-                               return value;\r
-                       },\r
-                       start: function(){\r
-                               onClick();\r
-                       },\r
-                       finish: function( keep){\r
-                               var _newValue = ELM_INPUT_TEXT.value,\r
-                                       _validated = validater !== null ? '' + validater( _newValue) : _newValue;\r
-                               _newValue = keep !== true ? _validated : value;\r
-\r
-                               elmValue.removeChild( ELM_INPUT_TEXT);\r
-                               \r
-                               elmA.innerHTML = _newValue;\r
-                               elmA.style.display = 'block';\r
+               this.value = function( _value ){\r
+                       if( _value !== undefined){\r
+                               elmA.innerHTML = _value;\r
+                               value = _value;\r
                                \r
-                               ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);\r
-                               finish( instance);\r
-                               value = _newValue;\r
-                               focus = false;\r
-                       },\r
-                       enabled: function(){\r
-                               return enabled;\r
-                       },\r
-                       visible: function( _visible){\r
-                               if( _visible === true){\r
-                                       WRAPPER_ELM.style.display = '';\r
-                                       visible = true;\r
-                               } else\r
-                               if( _visible === false){\r
-                                       WRAPPER_ELM.style.display = 'none';\r
-                                       visible = false;\r
+                               if( focus === true){\r
+                                       ELM_INPUT_TEXT.value = value;\r
                                }\r
-                               return visible;\r
-                       },\r
-                       index : index,\r
-                       groupID: GROUP_ID\r
+                       }\r
+                       currentItem === instance && instance.blur();\r
+                       return value;\r
+               }\r
+               this.focus = function(){\r
+                       onClick();\r
+               }\r
+               this.blur = function( keep ){\r
+                       var _newValue = ELM_INPUT_TEXT.value,\r
+                               _validated = validater !== null ? '' + validater( _newValue ) : _newValue;\r
+                       _newValue = keep !== 27 ? _validated : value; // 27:ESC\r
+\r
+                       elmValue.removeChild( ELM_INPUT_TEXT );\r
+                       \r
+                       elmA.innerHTML = _newValue;\r
+                       elmA.style.display = 'block';\r
+                       \r
+                       ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value );\r
+                       \r
+                       value = _newValue;\r
+                       focus = false;\r
+                       \r
+                       currentItem = null;\r
+               }\r
+               this.enabled = function(){\r
+                       return enabled;\r
                }\r
+               this.visible = function( _visible ){\r
+                       if( _visible === true){\r
+                               WRAPPER_ELM.style.display = '';\r
+                               visible = true;\r
+                       } else\r
+                       if( _visible === false){\r
+                               WRAPPER_ELM.style.display = 'none';\r
+                               visible = false;\r
+                       }\r
+                       return visible;\r
+               }\r
+               this.groupID = GROUP_ID;\r
+       }\r
+       \r
+       var ButtonClass = function( WRAPPER_ELM, ON_CLICK_FUNCTION, GROUP_ID ){\r
+               var className = WRAPPER_ELM.className || '',\r
+                       instance = this,\r
+                       focus = false,\r
+                       visible = true,\r
+                       enabled = true;\r
+                       \r
+               WRAPPER_ELM.onclick = onClick;\r
+               \r
+               function onClick(){\r
+                       focus = true;\r
+                       ON_CLICK_FUNCTION();\r
+                       return false;\r
+               }\r
+               this.focus = function(){\r
+                       focus = true;\r
+                       WRAPPER_ELM.className = className + ' button-has-focus';\r
+                       start( instance );\r
+               }\r
+               this.blur = function( keyCode ){\r
+                       keyCode === 13 && ON_CLICK_FUNCTION();\r
+                       WRAPPER_ELM.className = className;\r
+                       focus = false;\r
+                       finish( instance );\r
+               }\r
+               this.enabled = function(){\r
+                       return enabled;\r
+               }\r
+               this.visible = function( _visible ){\r
+                       if( _visible === true){\r
+                               WRAPPER_ELM.style.display = '';\r
+                               visible = true;\r
+                       } else\r
+                       if( _visible === false){\r
+                               WRAPPER_ELM.style.display = 'none';\r
+                               visible = false;\r
+                       }\r
+                       return visible;\r
+               }\r
+               this.groupID = GROUP_ID;\r
        }\r
 \r
-       var FileInputClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater, elmFileInput){\r
+       var FileInputClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater, elmFileInput ){\r
                validater = typeof validater === 'function' ? validater : null;\r
                \r
                var elmFilePath = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'file-path')[ 0],\r
@@ -1434,7 +1484,7 @@ pettanr.form = ( function(){
                \r
                function onClick( e){\r
                        focus = true;\r
-                       start( instance);\r
+                       start( instance );\r
                        elmFileInput.click();\r
                        return false;\r
                }\r
@@ -1447,10 +1497,10 @@ pettanr.form = ( function(){
                                instance = this;\r
                                delete this.init;\r
                        },\r
-                       start: function(){\r
+                       focus: function(){\r
                                onClick();\r
                        },\r
-                       finish: function( keep){\r
+                       blur: function( keep ){\r
                                focus = false;\r
                        },\r
                        enabled: function(){\r
@@ -1472,30 +1522,257 @@ pettanr.form = ( function(){
                }\r
        }\r
 \r
+       var ComboBoxClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID ){\r
+               var elmBox = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'combobox' )[ 0 ],\r
+                       elmA = ELM_COMBOBOX.cloneNode( true ),\r
+                       elmToggle = pettanr.util.getElementsByClassName( elmA, 'combobox-toggle' )[ 0 ],\r
+                       elmValue = pettanr.util.getElementsByClassName( elmA, 'combobox-value' )[ 0 ].firstChild,\r
+                       value, index = 0,\r
+                       optionList = [],\r
+                       instance = this,\r
+                       oldBodyMouseupHandler,\r
+                       focus = false,\r
+                       visible = true,\r
+                       enabled = true;\r
+                       \r
+               elmBox.appendChild( elmA );\r
+               WRAPPER_ELM.onclick = onClick;\r
+               \r
+               function onClick(){\r
+                       WRAPPER_ELM.onclick = null;\r
+                       focus = true;\r
+                       elmA.className = 'combobox-has-focus';\r
+                       start( instance );\r
+                       OptionControl.show( instance, optionList );\r
+                       return false;\r
+               }\r
+               this.elm = elmBox;\r
+               this.focus = function(){\r
+                       onClick();\r
+               }\r
+               this.blur = function( keyCode ){\r
+                       OptionControl.hide( instance );\r
+                       focus = false;\r
+                       elmA.className = '';\r
+                       finish( instance );\r
+                       WRAPPER_ELM.onclick = onClick;\r
+               }\r
+               this.enabled = function(){\r
+                       return enabled;\r
+               }\r
+               this.visible = function( _visible ){\r
+                       if( _visible === true){\r
+                               WRAPPER_ELM.style.display = '';\r
+                               visible = true;\r
+                       } else\r
+                       if( _visible === false){\r
+                               WRAPPER_ELM.style.display = 'none';\r
+                               visible = false;\r
+                       }\r
+                       return visible;\r
+               }\r
+               this.value = function( _value ){\r
+                       var i, j,\r
+                               l=optionList.length,\r
+                               _option;\r
+                       if( Type.isString( _value ) === true && value !== _value ){\r
+                               for( i=0; i<l; ++i ){\r
+                                       _option = optionList[ i ];\r
+                                       if( _value === _option.value ){\r
+                                               value = _value;\r
+                                               index = i;\r
+                                               elmValue.data = _option.displayValue;\r
+                                               if( focus === true ){\r
+                                                       OptionControl.update( instance, _value );\r
+                                               }\r
+                                               break;\r
+                                       }\r
+                               }\r
+                       }\r
+                       return value;\r
+               }\r
+               this.selectIndex = function(){\r
+                       return index;\r
+               }\r
+               this.createOption = function( displayValue, _value, isSelected ){\r
+                       var exist = false,\r
+                               option = null, _option,\r
+                               _index;\r
+                       for( var i = 0, l = optionList.length; i < l; ++i ){\r
+                               if( _value === optionList[ i ].value ){\r
+                                       option = optionList[ i ];\r
+                                       _index = i;\r
+                                       break;\r
+                               }\r
+                       }\r
+                       if( option === null ){\r
+                               option = new OptionClass( instance, displayValue, _value );\r
+                               _index = optionList.length;\r
+                               optionList.push( option );\r
+                       }\r
+                       if( isSelected === true ){\r
+                               elmValue.data = option.displayValue;\r
+                               value = _value;\r
+                               index = _index;\r
+                               for( i = 0, l = optionList.length; i < l; ++i ){\r
+                                       _option = optionList[ i ];\r
+                                       _option.current( _option.value === _value );\r
+                               }\r
+                       }\r
+                       return option;\r
+               }\r
+               this.groupID = GROUP_ID;\r
+       }\r
+       \r
+       var OptionControl = ( function(){\r
+               var ELM_OPTION_WRAPPER = ( function(){\r
+                               var ret = document.createElement( 'ul' );\r
+                               ret.className = 'option-container';\r
+                               return ret;\r
+                       })();\r
+               var currentCombobox = null,\r
+                       optionList,\r
+                       elm,\r
+                       value,\r
+                       currentOption,\r
+                       currentIndex;\r
+               \r
+               function updateCurrrentOption( _value, _updateCombobox ){\r
+                       var _option;\r
+                       for( var i=0, l=optionList.length; i<l; ++i ){\r
+                               _option = optionList[ i ]\r
+                               if( _value === _option.value ){\r
+                                       currentOption && currentOption.current( false );\r
+                                       _option.current( true );\r
+                                       currentOption = _option;\r
+                                       currentIndex = i;\r
+                                       _updateCombobox === true && currentCombobox.value( _value );\r
+                               }\r
+                       }\r
+               }\r
+               function bodyMouseupHandler(){\r
+                       currentCombobox.blur();\r
+                       OptionControl.hide( currentCombobox );\r
+               }\r
+               return {\r
+                       show: function( _combobox, _optionList ){\r
+                               if( currentItem !== _combobox || currentCombobox === _combobox ) return;\r
+                               currentCombobox && currentCombobox.blur();\r
+                               \r
+                               currentCombobox = _combobox;\r
+                               optionList = _optionList;\r
+                               elm = _combobox.elm;\r
+                               \r
+                               updateCurrrentOption( _combobox.value(), false );\r
+                               \r
+                               var position = pettanr.util.getAbsolutePosition( elm ),\r
+                                       _option;\r
+                               \r
+                               for( var i=0, l=optionList.length; i<l; ++i ){\r
+                                       ELM_OPTION_WRAPPER.appendChild( optionList[ i ].elm );\r
+                               }\r
+                               \r
+                               document.body.appendChild( ELM_OPTION_WRAPPER );\r
+                               \r
+                               ELM_OPTION_WRAPPER.style.cssText = [\r
+                                               'width:', elm.offsetWidth - 2, 'px;',\r
+                                               'left:', position.x, 'px;',\r
+                                               'top:', position.y + elm.offsetHeight, 'px;'\r
+                                       ].join('');\r
+                               \r
+                               oldBodyMouseupHandler = document.body.onmouseup;\r
+                               document.body.onmouseup = bodyMouseupHandler;\r
+                       },\r
+                       hide: function( _combobox ){\r
+                               if( currentCombobox !== _combobox ) return;\r
+\r
+                               ELM_OPTION_WRAPPER.parentNode && ELM_OPTION_WRAPPER.parentNode.removeChild( ELM_OPTION_WRAPPER );\r
+                               while( ELM_OPTION_WRAPPER.firstChild ){\r
+                                       ELM_OPTION_WRAPPER.removeChild( ELM_OPTION_WRAPPER.firstChild );\r
+                               }\r
+                               currentCombobox = null;\r
+                               currentOption = null;\r
+                               currentIndex = 0;\r
+                               \r
+                               document.body.onmouseup = oldBodyMouseupHandler;\r
+                       },\r
+                       change: function( down ){\r
+                               var l = optionList.length,\r
+                                       way = down === true ? 1 : -1;\r
+                                       i = currentIndex + way\r
+                               if( currentCombobox === false || l < 2 ) return;\r
+                               i = i < 0 ?\r
+                                               l - 1 :\r
+                                               i < l ? i : 0;\r
+                               updateCurrrentOption( optionList[ i ].value, false );\r
+                       },\r
+                       update: function( _combobox, _value ){\r
+                               if( currentCombobox !== _combobox || currentItem !== _combobox ) return;\r
+                               if( currentOption.value === _value ) return;\r
+                               updateCurrrentOption( _value, true );\r
+                       },\r
+                       decide: function(){\r
+                               currentCombobox.value( currentOption.value );\r
+                               currentCombobox.blur();\r
+                               OptionControl.hide( currentCombobox );\r
+                       }\r
+               }\r
+       })();\r
+       \r
+       var OptionClass = function( combobox, displayValue, value ){\r
+               var elm = document.createElement( 'li' ),\r
+                       a = document.createElement( 'a' ),\r
+                       isCurrent = undefined;\r
+               elm.appendChild( a );\r
+               a.appendChild( document.createTextNode( displayValue ));\r
+               elm.className = CLASSNAME_COMBOBOX_OPTION;\r
+               a.href = '#';\r
+               \r
+               a.onmousedown = onClick; // onclick では 選択ボックス 隠すように body に設定した onmouseup が先に動いてしまう!\r
+               function onClick(){\r
+                       OptionControl.update( combobox, value );\r
+                       OptionControl.hide( combobox );\r
+                       combobox.blur();\r
+                       return false;\r
+               }\r
+               this.elm = elm;\r
+               this.displayValue = displayValue;\r
+               this.value = value = value || displayValue;\r
+               this.current = function( _isCurrent ){\r
+                       if( Type.isBoolean( _isCurrent ) === true && isCurrent !== _isCurrent ){\r
+                               elm.className = CLASSNAME_COMBOBOX_OPTION + ( _isCurrent === true ? ' current-option' : '' );\r
+                               isCurrent = _isCurrent;\r
+                       }\r
+                       return !!isCurrent;\r
+               }\r
+       }\r
+       \r
 \r
-       function start( _currentItem){\r
-               currentItem !== _currentItem && currentItem && currentItem.finish();\r
+       function start( _currentItem ){\r
+               currentItem !== _currentItem && currentItem && currentItem.blur();\r
                currentItem = _currentItem;\r
        }\r
-       function finish( _currentItem){\r
-               if( currentItem !== _currentItem) return;\r
-               currentItem = null;\r
+       function finish( _currentItem ){\r
+               currentItem = currentItem === _currentItem ? null : currentItem;\r
        }\r
 \r
-       function tabShift( _groupID, _index, _way){\r
-               var GROUP_ARRAY = FORM_GROUP_TABLE[ _groupID] || [],\r
+       function tabShift( _groupID, _index, _way ){\r
+               var GROUP_ARRAY = FORM_GROUP_TABLE[ _groupID ] || [],\r
                        l = GROUP_ARRAY.length,\r
-                       i = _index +_way;\r
-               if( l < 2) return;\r
-               while( i !== _index){\r
+                       i = _index + _way,\r
+                       _item;\r
+               if( l < 2 ) return;\r
+               while( i !== _index ){\r
                        i = i < 0 ?\r
-                               l -1 :\r
-                               i === l ? 0 : i; // 0 < i < l\r
-                       if( GROUP_ARRAY[ i].enabled() === true && GROUP_ARRAY[ i].visible() === true) break;\r
+                               l - 1 :\r
+                               i < l ? i : 0; // 0 < i < l\r
+                       _item = GROUP_ARRAY[ i ];\r
+                       if( _item.enabled() === true && _item.visible() === true ){\r
+                               setTimeout( _item.focus, 0 );\r
+                               return;\r
+                       }\r
                        i += _way;\r
                }\r
-               if( i === _index) return;\r
-               setTimeout( GROUP_ARRAY[ i].start, 0);\r
        }\r
 \r
        return {\r
@@ -1503,49 +1780,67 @@ pettanr.form = ( function(){
                focus: function(){\r
                        return currentItem !== null; \r
                },\r
-               keyEventRellay: function( e){\r
-                       if( e.type === 'keyup') return false;\r
-                       if( currentItem === null) return false;\r
+               keyEventRellay: function( e ){\r
+                       if( e.type === 'keyup' ) return false;\r
+                       if( currentItem === null ) return false;\r
                        \r
                        var keyCode = e.keyCode;\r
-                       if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt\r
-                               var _groupID = currentItem.groupID,\r
-                                       _index = currentItem.index;\r
-                               currentItem.finish( keyCode === 27);\r
-                               keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);\r
-                               keyCode === 13 && _groupID && tabShift( _groupID, _index, 1);\r
+                       var _groupID = currentItem.groupID,\r
+                                       _index = pettanr.util.getIndex( FORM_GROUP_TABLE[ _groupID ], currentItem );\r
+                       if( currentItem instanceof ComboBoxClass ) {\r
+                               if( 37 <= keyCode && keyCode <= 40 ){ // ↑38 ←37 →39 ↓40\r
+                                       OptionControl.change( keyCode === 40 );\r
+                                       return true;\r
+                               } else\r
+                               keyCode === 13 && OptionControl.decide();\r
+                       }\r
+                       if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true ){ // 13.return 27.esc 9.tab 18.alt\r
+                               currentItem && currentItem.blur( keyCode );\r
+                               keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1 );\r
+                               keyCode === 13 && _groupID && tabShift( _groupID, _index, 1 );\r
                        }\r
                        return true;\r
                },\r
-               createInputText: function( _elm, _onUpdate, _groupID, _validater){\r
+               createUIGroup: function( _applicationReferance ){\r
+                       \r
+               },\r
+               createInputText: function( _elm, _onUpdate, _groupID, _validater ){\r
                        if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
                                FORM_GROUP_TABLE[ _groupID] = [];\r
                        }\r
-                       var ret = new InputTextClass( _elm, _onUpdate, _groupID, _validater);\r
-                       ret.init();\r
-                       _groupID && FORM_GROUP_TABLE[ _groupID].push( ret);\r
+                       var ret = new InputTextClass( _elm, _onUpdate, _groupID, _validater );\r
+                       _groupID && FORM_GROUP_TABLE[ _groupID ].push( ret );\r
+                       return ret;\r
+               },\r
+               createButton: function( _elm, _onClick, _groupID ){\r
+                       if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
+                               FORM_GROUP_TABLE[ _groupID ] = [];\r
+                       }\r
+                       var ret = new ButtonClass( _elm, _onClick, _groupID );\r
+                       _groupID && FORM_GROUP_TABLE[ _groupID ].push( ret );\r
                        return ret;\r
                },\r
-               createFileInput: function( _elm, _onUpdate, _groupID, _validater, _elmFileInput){\r
+               createFileInput: function( _elm, _onUpdate, _groupID, _validater, _elmFileInput ){\r
                        if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
                                FORM_GROUP_TABLE[ _groupID] = [];\r
                        }\r
-                       var ret = FileInputClass( _elm, _onUpdate, _groupID, _validater, _elmFileInput);\r
-                       ret.init();\r
+                       var ret = FileInputClass( _elm, _onUpdate, _groupID, _validater, _elmFileInput );\r
                        _groupID && FORM_GROUP_TABLE[ _groupID].push( ret);\r
                        return ret;\r
                },\r
+               createCombobox: function( _elm, _onUpdate, _groupID, _optionList ){\r
+                       if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
+                               FORM_GROUP_TABLE[ _groupID ] = [];\r
+                       }\r
+                       var ret = new ComboBoxClass( _elm, _onUpdate, _groupID );\r
+                       _groupID && FORM_GROUP_TABLE[ _groupID ].push( ret );\r
+                       return ret;\r
+               },\r
                createCheckBox: function(){\r
                        \r
                },\r
                createRadio: function(){\r
                        \r
-               },\r
-               createButton: function(){\r
-                       \r
-               },\r
-               createListBox: function(){\r
-                       \r
                }\r
        }\r
 })();\r
@@ -1965,7 +2260,7 @@ pettanr.image = ( function(){
 })();\r
 \r
 /*\r
- * bind : 製本
+ * bind : 製本\r
  */\r
 pettanr.bind = ( function(){\r
        var BIND_WORKER_ARRAY = [],\r
@@ -2193,7 +2488,7 @@ var VisualEffect = ( function(){
                 * coputedStyle と一致も削除\r
                 * updateTraget ととして記録\r
                 * 初期値を cssObject としてセット\r
-                * cssTest にセット zoom もセット
+                * cssTest にセット zoom もセット\r
                 */\r
                \r
                //\r
@@ -2205,7 +2500,7 @@ var VisualEffect = ( function(){
 \r
                        // IE has trouble with opacity if it does not have layout\r
                        // Force it by setting the zoom level\r
-                       style.zoom = 1;
+                       style.zoom = 1;\r
                 */\r
                \r
                var _currentParameters = [],\r
@@ -2255,7 +2550,7 @@ var VisualEffect = ( function(){
                                        _target = _css.substr( 0, _separate +1);\r
                                        _value = _css.substr( _separate +1);\r
                                        /*\r
-                                        * ie filter
+                                        * ie filter\r
                                         */\r
                                        if( _target === FILTER){\r
                                                for( j=0; j<_numAttributes; ++j){\r
@@ -2268,7 +2563,7 @@ var VisualEffect = ( function(){
                                                        }\r
                                                }\r
                                        /*\r
-                                        * other
+                                        * other\r
                                         */\r
                                        } else {\r
                                                _number = '' + parseFloat( _value);\r
@@ -2287,7 +2582,7 @@ var VisualEffect = ( function(){
                        return; \r
                }\r
                /*\r
-                * 一度に update する Attributes が少ない場合、cssText は使用しない.
+                * 一度に update する Attributes が少ない場合、cssText は使用しない.\r
                 */\r
        }\r
        \r