[zork]

So to sum this up. When trying to create config menus the following UI elements come in handy.

Frame

A normal frame that can hold all your config elements. (buttons, checkboxes, etc.)
FrameType: Frame
Template: BasicFrameTemplate
Widget: http://wowprogramming.com/docs/widgets/Frame

ScrollFrame

A frame that is scrollable inside.. The best example for this is the keybind setup frame.
FrameType: ScrollFrame
Template: FauxScrollFrameTemplate
Widget: http://wowprogramming.com/docs/widgets/ScrollFrame

EditBox

A small input element that lets you input data into a field.
FrameType: EditBox
Template: InputBoxTemplate
Widget: http://wowprogramming.com/docs/widgets/EditBox

CheckButton / CheckBox

A checkbox like input element. Basically switch values between 0 and 1.
FrameType: CheckButton
Template: UICheckButtonTemplate
Widget: http://wowprogramming.com/docs/widgets/CheckButton

--Example:
local name = "MyExampleCheckButton"
local template = "UICheckButtonTemplate"
local checkButton = CreateFrame("Button",name,UIParent,template) --frameType, frameName, frameParent, frameTemplate    
checkButton:SetPoint("CENTER",0,0)
checkButton.text = _G[name.."Text"]
checkButton.text:SetText("Hello World")
checkButton:SetScript("OnClick", function(self,event,arg1) 
  if self:GetChecked() then
    print("Button is checked")
  else
    print("Button is unchecked")
  end
end)

--Example2:
local name = "MyExampleCheckButton"
local template = "OptionsBaseCheckButtonTemplate"
local checkButton = CreateFrame("Button",name,UIParent,template) --frameType, frameName, frameParent, frameTemplate    
checkButton:SetPoint("CENTER",0,0)
checkButton.text = _G[name.."Text"]
checkButton.text:SetText("Hello World")
local callback = function(setting) print("callback") end
checkButton.setFunc = callback

CheckButton / RadioButton

A list of radiobuttons. Lets you choose one of "n" options.
FrameType: CheckButton
Template: UIRadioButtonTemplate
Widget: http://wowprogramming.com/docs/widgets/CheckButton

Slider

Sliders are elements intended to allow the user to choose a value in a range.
FrameType: Slider
Template: UIPanelScrollBarTemplate
Widget: http://wowprogramming.com/docs/widgets/Slider

--Example:
local name = "MyExampleSlider"
local template = "OptionsSliderTemplate"
local slider = CreateFrame("Slider",name,UIParent,template) --frameType, frameName, frameParent, frameTemplate   
slider:SetPoint("CENTER",0,0)
slider.textLow = _G[name.."Low"]
slider.textHigh = _G[name.."High"]
slider.text = _G[name.."Text"]
slider:SetMinMaxValues(1, 100)
slider.minValue, slider.maxValue = slider:GetMinMaxValues() 
slider.textLow:SetText(slider.minValue)
slider.textHigh:SetText(slider.maxValue)
slider.text:SetText(name)
slider:SetValue(50)
slider:SetValueStep(1)
slider:SetScript("OnValueChanged", function(self,event,arg1) print(event) end)

Button

A clickable frame that calls an action OnClick. Blizzard provides tons of button templates.
FrameType: Button
Template: UIPanelButtonTemplate
Widget: http://wowprogramming.com/docs/widgets/Button

--Example:
local name = "MyExampleButton"
local template = "UIPanelButtonTemplate"
local button = CreateFrame("Button",name,UIParent,template) --frameType, frameName, frameParent, frameTemplate    
button:SetSize(150,80)
button:SetPoint("CENTER",0,0)
button.text = _G[name.."Text"]
button.text:SetText("Hello World")

UIDropDownMenu

Depending on setup this can be both a selectbox or a context menu.
FrameType: Frame
Template: UIDropDownMenuTemplate
WriteUps: [1] [2] [3] [4]

--EasyMenu Example:
local dropdown = CreateFrame("Frame", "MyMenuFrame", nil, "UIDropDownMenuTemplate")
local menuTable = {}
local line, data, submenu = nil, nil, nil
 
local function createMenuLine(data)
  local line = {}
  if not data then return line end
  line.text = data.text or nil
  line.isTitle = data.isTitle or nil
  line.notCheckable = data.notCheckable or nil
  line.notClickable = data.notClickable or nil
  line.keepShownOnClick = data.keepShownOnClick or nil
  line.hasArrow = data.hasArrow or nil 
  line.func = data.func or nil
  line.menuList = data.menuList or nil
  return line
end
 
local function createDelimLine()
  --split line
  local delim = "~~~~~~~~~~~~~~~~~~~~~~~"
  data = { text = delim, notCheckable = true, notClickable = true }
  line = createMenuLine(data)
  return line
end
 
local function createMenu()
 
  --title
  data = { text = "MyMenuTitle", isTitle = true, notCheckable = true, notClickable = true }
  line = createMenuLine(data)
  table.insert(menuTable,line)
 
  --add delimiter
  line = createDelimLine()
  table.insert(menuTable,line)
 
    --generate sub menu
    submenu = {}      
    data = { text = "General", isTitle = true, notCheckable = true, notClickable = true }
    line = createMenuLine(data)
    table.insert(submenu,line)
    line = createDelimLine()
    table.insert(submenu,line)
    data = { text = "MyOption1", func = myGlobalFunction1, notCheckable = true, keepShownOnClick = true, }
    line = createMenuLine(data)
    table.insert(submenu,line)
    data = { text = "MyOption2", func = myGlobalFunction2, notCheckable = true, keepShownOnClick = true, }
    line = createMenuLine(data)
    table.insert(submenu,line)
    data = { text = "MyOption3", func = myGlobalFunction3, notCheckable = true, keepShownOnClick = true, }
    line = createMenuLine(data)
    table.insert(submenu,line)
 
  --add submenu to menuTable
  data = { text = "General", notCheckable = true, hasArrow = true, menuList = submenu }
  line = createMenuLine(data)
  table.insert(menuTable,line)
 
  --add delimiter
  line = createDelimLine()
  table.insert(menuTable,line)
 
  --close menu
  data = { text = "Close", func = function() CloseDropDownMenus() end, notCheckable = true }
  line = createMenuLine(data)
  table.insert(menuTable,line)
 
end
 
--INIT
createMenu()
 
--CALL
local function SlashCmd(cmd)
  EasyMenu(menuTable, dropdown, "cursor", 10 , -15, "MENU")
end
SlashCmdList["menu"] = SlashCmd
SLASH_menu1 = "/menu"

ColorSelect / ColorPicker

In many cases you want to recolor textures. All you have to do is to call the ColorPicker and apply a callback function that handles the colors returned by the ColorPicker. Normally you have a small frame with a texture and once you change the color in the ColorPicker the texture color updates via the callback function.
FrameType: Frame (with an applied texture)
WriteUps: [1] [2]

local function showColorPicker(r,g,b,a,callback)
  ColorPickerFrame:SetColorRGB(r,g,b)
  ColorPickerFrame.hasOpacity, ColorPickerFrame.opacity = (a ~= nil), a
  ColorPickerFrame.previousValues = {r,g,b,a}
  ColorPickerFrame.func, ColorPickerFrame.opacityFunc, ColorPickerFrame.cancelFunc = callback, callback, callback
  ColorPickerFrame:Hide() -- Need to run the OnShow handler.
  ColorPickerFrame:Show()
end
 
local function createMyFrame()
  --frame
  local f = CreateFrame("FRAME",nil,UIParent)
  f:SetSize(150,150)
  f:SetPoint("CENTER",0,0)
  --texture
  f.tex = f:CreateTexture(nil,"BACKGROUND",nil,-7)
  f.tex:SetAllPoints(f)
  f.tex:SetTexture(1,0,0,1)
  --recolor callback function
  f.recolorTexture = function(color)
    local r,g,b,a
    if color then
      r,g,b,a = unpack(color)
    else
      r,g,b = ColorPickerFrame:GetColorRGB()
      a = OpacitySliderFrame:GetValue()
    end
    f.tex:SetVertexColor(r,g,b,a)
  end
  f:EnableMouse(true)
  f:SetScript("OnMouseDown", function(self,button,...)
    if button == "LeftButton" then
      local r,g,b,a = self.tex:GetVertexColor()
      showColorPicker(r,g,b,a,self.recolorTexture)
    end
  end)
end
 
--init
createMyFrame()

StatusBar

Sometimes it can be helpful to display data in a statusbar. They are similar to sliders, just without the option to edit. Like a progressbar or healthbar.
FrameType: StatusBar
Template: ???
Widget: http://wowprogramming.com/docs/widgets/StatusBar

--Example:
local color = {0,1,0}
local statusbar = CreateFrame("StatusBar",nil,UIParent) --frameType, frameName, frameParent  
statusbar:SetPoint("CENTER",0,0)
statusbar:SetSize(200,20)
--statusbar background
statusbar.bg = statusbar:CreateTexture(nil,"BACKGROUND",nil,-8)
statusbar.bg:SetAllPoints(statusbar)
statusbar.bg:SetTexture(unpack(color))
statusbar.bg:SetAlpha(0.2)
--statusbar texture
local tex = statusbar:CreateTexture(nil,"BACKGROUND",nil,-6)
tex:SetTexture(unpack(color))
statusbar:SetStatusBarTexture(tex)
statusbar:SetStatusBarColor(unpack(color))
--values
statusbar:SetMinMaxValues(1, 100)
statusbar.minValue, statusbar.maxValue = statusbar:GetMinMaxValues()
statusbar:SetValue(50)