TypeScript dom.input函数代码示例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中core/dom.input函数的典型用法代码示例。如果您正苦于以下问题：TypeScript input函数的具体用法？TypeScript input怎么用？TypeScript input使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了input函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: render

  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)
  }

开发者ID:Zyell，项目名称:bokeh，代码行数:25，代码来源:date_picker.ts

示例2: render

  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)
      }
    }
  }

开发者ID:Zyell，项目名称:bokeh，代码行数:29，代码来源:checkbox_group.ts

示例3: render

  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}`
  }

开发者ID:jsignell，项目名称:bokeh，代码行数:41，代码来源:extensions_ion_range_slider.ts

示例4: render

  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)
  }

开发者ID:digitalsatori，项目名称:Bokeh，代码行数:13，代码来源:color_picker.ts

示例5: render

  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)
  }

开发者ID:digitalsatori，项目名称:Bokeh，代码行数:17，代码来源:spinner.ts

示例6: render

  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)
    }
  }

开发者ID:FourtekIT-incubator，项目名称:bokeh，代码行数:18，代码来源:checkbox_button_group.ts

示例7: render

  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)
  }

开发者ID:digitalsatori，项目名称:Bokeh，代码行数:20，代码来源:date_picker.ts

示例8: render

  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)
    }
  }

开发者ID:digitalsatori，项目名称:Bokeh，代码行数:22，代码来源:radio_group.ts

示例9: render

  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)
    }
  }

开发者ID:digitalsatori，项目名称:Bokeh，代码行数:22，代码来源:checkbox_group.ts

示例10: render

  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)
    }
  }

开发者ID:Zyell，项目名称:bokeh，代码行数:22，代码来源:radio_button_group.ts

注：本文中的core/dom.input函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。