close panorama

Combobox Plugin combobox.swf / combobox.js Version 1.16
for Flash and HTML5
Select Version:

  • A combobox / dropdown-list / selectbox plugin.
  • The combobox items can be defined statically or dynamically.
  • The position and size of it can by adjusted with the standard plugin attributes.
  • The Flash CS4 source code (.fla) is available here (750kB).
  • The HTML5 default combobox base-image is available here.
  • Note - the old <action name="combobox:..."> syntax is officially not longer supported and shouldn't be used in new projects, but it is still there for backward compatibility!

Syntax

With static item definitions:
<plugin name="cb" url="combobox.swf" alturl="combobox.js"
        align="leftbottom" x="10" y="10"
        >
    <item name="item1" caption="Item 1" onclick="..." />
    <item name="item2" caption="Item 2" onclick="..." />
    <item name="item3" caption="Item 3" onclick="..." />
    ...
</plugin>

Or with dynamically added items:
<plugin name="cb"
        url="combobox.swf"
        alturl="combobox.js"
        align="leftbottom" x="10" y="10"
        onloaded="fillbox();"
        />

<action name="fillbox">       
    addIdItem(item1, 'Item 1', trace(Item 1 clicked) );
    addIdItem(item2, 'Item 2', trace(Item 2 clicked) );
    addIdItem(item3, 'Item 3', trace(Item 3 clicked) );
    ...
</action>

Plugin Attributes Flash

  • dropdownwidth  (optionally)
    • The width of the drop-down bar in pixels, default=0 which means automatic.
  • rowcount  (optionally)
    • The number of items without scrollbar, default=5.

Plugin Attributes HTML5 / iPhone / iPad

  • native
    • Should the native browser combobox element be used.
    • Settings: "false" (default), "true" or "auto"
    • With "auto" the native element will be used on Desktop and the not-native iPad-style one on iPhone and iPad. Using the native one on iPhone/iPad would cause rendering problems and instability.
    • With native="false" it is possible to use the iPad-style combobox also on Desktop.
  • cbdesignscale
    • Scaling of the combobox design (1 - 2).
    • Defaultvalue: auto ⇒ 1 for iPad and Desktop, 2 for iPhone
    • That means the comobox is by default twice as large on the iPhone (in kind of krpano coordinates) for better and easier touch usage.
  • cbfont
    • Font of the combobox text.
    • Defaultvalue: Arial
  • cbfontsize
    • Fontsize of the combobox text.
    • Defaultvalue: auto ⇒ 14 for iPad and Desktop, 16 for iPhone
  • cbfontstyle
    • Fontstyle of the combobox text.
    • Settings: normal, bold, italic, bolditalic
    • Defaultvalue: normal
  • cbpadding
    • Padding around the comobox text.
    • Defaultvalue: 8
  • cbtoosmallfix
    • Automatic fix for too small comobox elements.
    • That means when the combobox element is very small, then a special smaller design and a smaller fontsize will be used.
    • Settings: true or false
    • Defaultvalue: true
  • itemfont
    • Font of the combobox items.
    • Defaultvalue: Arial
  • itemfontsize
    • Fontsize of the combobox items.
    • Defaultvalue: 16
  • itemfontstyle
    • Fontstyle of the combobox items.
    • Settings: normal, bold, italic, bolditalic
    • Defaultvalue: normal
  • itempadding
    • Padding around the comobox items.
    • Defaultvalue: 10
  • customstyle
    • Use a custom image and style for the combobox.
    • Syntax:
      customstyle="url|cbtextcolor|itemtextcolor|markeditemtextcolor|highlightitemtextcolor|gradientcolor1|gradientcolor2|bordercolor"
      Settings:
      • url - an url to an image which will be used to draw the combobox.
        Get the default combobox base-image here: combobox.png.
      • cbtextcolor - the color of the combobox title text.
      • itemtextcolor - the color of the items text.
      • markeditemtextcolor - the color of the marked item text.
      • highlightitemtextcolor - the highlight item text color.
      • gradientcolor1 - the highlight background gradient 'from' color.
      • gradientcolor2 - the highlight background gradient 'to' color.
      • bordercolor - the border / spacer color.

Sub-Node <item> Attributes

  • name
    • An unique identification name for the item.
    • Note - the krpano name notes need to be respected here.
  • caption
    • The caption of the item.
  • onclick
    • The onclick event, will be called when selecting the item.

Plugin Actions

Local actions of the combobox plugin object.

Examples

Corfu Tour with Scene Combobox and Settings Combobox (with html5=auto)
CLICK TO VIEW THE EXAMPLE

Corfu Tour with Scene Combobox and Settings Combobox (with html5=only)
CLICK TO VIEW THE EXAMPLE