真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

xmlplus中如何實(shí)現(xiàn)文本框TextBox

這篇文章主要介紹了xmlplus中如何實(shí)現(xiàn)文本框TextBox,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司主營懷遠(yuǎn)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),懷遠(yuǎn)h5小程序設(shè)計(jì)搭建,懷遠(yuǎn)網(wǎng)站營銷推廣歡迎懷遠(yuǎn)等地區(qū)企業(yè)咨詢

文本框是頁面中最常用的輸入組件,它的默認(rèn)使用方式如下:

當(dāng)然,這里的 `type='text' 可以略去不寫。大部分情況下,使用默認(rèn)的文本框作為輸入組件是沒什么問題的,但在具體的項(xiàng)目中,難免會有功能擴(kuò)展的需求。這里僅以如何增加文本框數(shù)據(jù)的格式化輸入輸出能力為例說明如何擴(kuò)展原生的文本框組件。除了本章的內(nèi)容,你也可以參考官方文檔中的 參數(shù)映射 一章。

目標(biāo)組件的功能分析

對于原生的文本框,我們獲取到的值是文本類型的,就像下面的示例所展示的:

Example: {
  xml: "",
  fun: function (sys, items, opts) {
    console.log(typeof this.prop("value")); // string
  }
}

如果需要其它類型的數(shù)值,就需要對獲取到的數(shù)據(jù)進(jìn)行格式化操作。比如,如果需要整型數(shù),就需要用到 parseInt 函數(shù);如果需要浮點(diǎn)型數(shù),就需要用到 parseFloat 函數(shù)。如果我們能夠?qū)⒏袷交瘮?shù)據(jù)的操作封裝起來,那使用起來一定會相當(dāng)?shù)姆奖恪榱嗣鞔_我們的預(yù)期,不妨先給出目標(biāo)組件的使用示例。

Index: {
  xml: "\
       \
       \
     
",   fun: function (sys, items, opts) {     items.foo.value = "hello, world";     items.bar.value = 27.1828;     console.log("foo", items.foo.value);     console.log("bar", items.bar.value);   } }

此示例實(shí)例化了兩個組件 Input。組件 Input 允許接收一個 format 參數(shù)作為其靜態(tài)接口輸入,并提供一個屬性 value 作為其動態(tài)輸入輸出接口。format 參數(shù)有三種可能的值:string (默認(rèn))、int 以及 float。這三種值分別對應(yīng)三種數(shù)據(jù)類型:字符串型、整型和浮點(diǎn)型。屬性 value 根據(jù) format 的值來進(jìn)行格式化輸入輸出。示例的輸出結(jié)果應(yīng)該會是下面這樣子:

hello, world
227

目標(biāo)組件的實(shí)現(xiàn)

為了完成上面的目標(biāo)組件,我們先給出一個文本框的組件框架。

TextBox: {
  xml: "",
  opt: { format: "string" },
  fun: function (sys, items, opts) {
    var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format];
    function getValue() {
      // 這里需要獲取 input 的值并根據(jù) opts.format 值選擇適當(dāng)?shù)母袷交瘮?shù),
    }
    function setValue(value) {
      // 這里需要根據(jù) opts.format 值選擇適當(dāng)?shù)母袷交瘮?shù),對 value 進(jìn)行格式化后同去賦值
    }
    return Object.defineProperty({}, "value", { get: getValue, set: setValue });
  }
}

上面關(guān)鍵的地方在于格式化函數(shù)的選取,為了簡單化,我們采用的是表查詢方式。在組件初始化階段該函數(shù)就已經(jīng)準(zhǔn)備就緒了,上述的 parse 函數(shù)即所需的格式化函數(shù)。不過需要注意的是,該組件的格式化函數(shù)類型在組件初始化時就固定了。如果需要可變的格式化函數(shù),你需要對組件做些修正。好了,下面可以給出完整的的文本框組件了。

TextBox: {
  xml: "",
  opt: { format: 'string' },
  map: { attrs: { input: "disabled value placeholder readonly" } },
  fun: function (sys, items, opts) {
    var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format];
    function getValue() {
      return parse(sys.input.prop("value"));
    }
    function setValue(value) {
      sys.input.prop("value", parse(value));
    }
    return Object.defineProperty({}, "value", { get: getValue, set: setValue });
  }
}

另外請注意,上面組件添加了部分屬性映射的內(nèi)容,這可以在具體的項(xiàng)目中根據(jù)需要進(jìn)行增刪。

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“xmlplus中如何實(shí)現(xiàn)文本框TextBox”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!


當(dāng)前題目:xmlplus中如何實(shí)現(xiàn)文本框TextBox
URL地址:http://weahome.cn/article/jgjcio.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部