TypeScript dom.input函数代码示例

  render(): void {
    super.render()

    if (this._picker != null)
      this._picker.destroy()
    empty(this.el)

    this.labelEl = label({}, this.model.title)
    this.el.appendChild(this.labelEl)

    this.inputEl = input({type: "text", class: "bk-widget-form-input", disabled: this.model.disabled})
    this.el.appendChild(this.inputEl)

    this._picker = new Pikaday({
      field: this.inputEl,
      defaultDate: new Date(this.model.value),
      setDefaultDate: true,
      minDate: this.model.min_date != null ? new Date(this.model.min_date) : undefined,
      maxDate: this.model.max_date != null ? new Date(this.model.max_date) : undefined,
      onSelect: (date) => this._on_select(date),
    })

    // move date picker's element from body to bk-root
    this._root_element.appendChild(this._picker.el)
  }

  render(): void {
    super.render()
    empty(this.el)

    const active = this.model.active
    const labels = this.model.labels

    for (let i = 0; i < labels.length; i++) {
      const text = labels[i]

      const inputEl = input({type: `checkbox`, value: `${i}`})
      inputEl.addEventListener("change", () => this.change_input())

      if (this.model.disabled)
        inputEl.disabled = true

      if (includes(active, i))
        inputEl.checked = true

      const labelEl = label({}, inputEl, text)
      if (this.model.inline) {
        labelEl.classList.add("bk-bs-checkbox-inline")
        this.el.appendChild(labelEl)
      } else {
        const divEl = div({class: "bk-bs-checkbox"}, labelEl)
        this.el.appendChild(divEl)
      }
    }
  }

  render(): void {
    // BokehJS Views create <div> elements by default, accessible as @el.
    // Many Bokeh views ignore this default <div>, and instead do things
    // like draw to the HTML canvas. In this case though, we change the
    // contents of the <div>, based on the current slider value.
    super.render()

    if (this.model.title != null) {
      if (this.model.title.length != 0) {
        this.title_el = label({}, `${this.model.title}: `)
        this.el.appendChild(this.title_el)
      }

      this.value_el = input({type: "text", readonly: true})
      this.el.appendChild(this.value_el)
    }

    this.slider_el = input({type: "text", class: "bk-slider"})
    this.el.appendChild(this.slider_el)

    // Set up parameters
    const max = this.model.end
    const min = this.model.start
    const [from, to] = this.model.range || [max, min]
    const opts = {
      type: "double",
      grid: this.model.grid,
      min,
      max,
      from,
      to,
      step: this.model.step || (max - min)/50,
      disable: this.model.disabled,
      onChange: (data: SliderData) => this.slide(data),
      onFinish: (data: SliderData) => this.slidestop(data),
    }

    jQuery(this.slider_el).ionRangeSlider(opts)
    if (this.value_el != null)
      this.value_el.value = `${from} - ${to}`
  }

  render(): void {
    super.render()

    this.input_el = input({
      type: "color",
      class: "bk-input",
      name: this.model.name,
      value: this.model.color,
      disabled: this.model.disabled,
    })
    this.input_el.addEventListener("change", () => this.change_input())
    this.group_el.appendChild(this.input_el)
  }

  render(): void {
    super.render()

    this.input_el = input({
      type: "number",
      class: "bk-input",
      name: this.model.name,
      min: this.model.low,
      max: this.model.high,
      value: this.model.value,
      step: this.model.step,
      disabled: this.model.disabled,
    })
    this.input_el.addEventListener("change", () => this.change_input())
    //this.input_el.addEventListener("input", () => this.change_input())
    this.group_el.appendChild(this.input_el)
  }

  render(): void {
    super.render()

    empty(this.el)
    const divEl = div({class: "bk-bs-btn-group"})
    this.el.appendChild(divEl)

    const active = this.model.active
    for (let i = 0; i < this.model.labels.length; i++) {
      const text = this.model.labels[i]
      const inputEl = input({type: `checkbox`, value: `${i}`, checked: i in active})
      inputEl.addEventListener("change", () => this.change_input())
      const labelEl = label({class: [`bk-bs-btn`, `bk-bs-btn-${this.model.button_type}`]}, inputEl, text)
      if (includes(active, i))
        labelEl.classList.add("bk-bs-active")
      divEl.appendChild(labelEl)
    }
  }

  render(): void {
    if (this._picker != null)
      this._picker.destroy()

    super.render()

    this.input_el = input({type: "text", class: "bk-input", disabled: this.model.disabled})
    this.group_el.appendChild(this.input_el)

    this._picker = new Pikaday({
      field: this.input_el,
      defaultDate: new Date(this.model.value),
      setDefaultDate: true,
      minDate: this.model.min_date != null ? new Date(this.model.min_date) : undefined,
      maxDate: this.model.max_date != null ? new Date(this.model.max_date) : undefined,
      onSelect: (date) => this._on_select(date),
    })

    this._root_element.appendChild(this._picker.el)
  }

  render(): void {
    super.render()

    const group = div({class: ["bk-input-group", this.model.inline ? "bk-inline" : null]})
    this.el.appendChild(group)

    const name = uniqueId()
    const {active, labels} = this.model

    for (let i = 0; i < labels.length; i++) {
      const radio = input({type: `radio`, name, value: `${i}`})
      radio.addEventListener("change", () => this.change_active(i))

      if (this.model.disabled)
        radio.disabled = true
      if (i == active)
        radio.checked = true

      const label_el = label({}, radio, span({}, labels[i]))
      group.appendChild(label_el)
    }
  }

  render(): void {
    super.render()

    const group = div({class: ["bk-input-group", this.model.inline ? "bk-inline" : null]})
    this.el.appendChild(group)

    const {active, labels} = this.model

    for (let i = 0; i < labels.length; i++) {
      const checkbox = input({type: `checkbox`, value: `${i}`})
      checkbox.addEventListener("change", () => this.change_active(i))

      if (this.model.disabled)
        checkbox.disabled = true

      if (includes(active, i))
        checkbox.checked = true

      const label_el = label({}, checkbox, span({}, labels[i]))
      group.appendChild(label_el)
    }
  }

  render(): void {
    super.render()

    empty(this.el)
    const divEl = div({class: "bk-bs-btn-group"})
    this.el.appendChild(divEl)

    const name = uniqueId()

    const active = this.model.active
    const labels = this.model.labels

    for (let i = 0; i < labels.length; i++) {
      const text = labels[i]
      const inputEl = input({type: `radio`, name: name, value: `${i}`, checked: i == active})
      inputEl.addEventListener("change", () => this.change_input())
      const labelEl = label({class: [`bk-bs-btn`, `bk-bs-btn-${this.model.button_type}`]}, inputEl, text)
      if (i == active)
        labelEl.classList.add("bk-bs-active")
      divEl.appendChild(labelEl)
    }
  }