xmlplus 是一個JavaScript框架,用於快速開發前後端專案。這篇文章主要介紹了xmlplus元件設計系列之文本框,具有一定的參考價值,有興趣的小夥伴們可以參考一下
文字框是頁面中最常用的輸入元件,它的預設使用方式如下:
9887ef52099b93ef81a4073036326c37
當然,這裡的`type='text' 可以略不寫。大部分情況下,使用預設的文字方塊作為輸入元件是沒什麼問題的,但在具體的專案中,難免會有功能擴展的需求。這裡僅以如何增加文字方塊資料的格式化輸入輸出能力為例說明如何擴充原生的文字方塊元件。除了本章的內容,你也可以參考官方文件中的 參數映射 一章。
目標元件的功能分析
對於原生的文字框,我們得到的值是文字類型的,就像下面的範例所展示的:
Example: { xml: "<input id='input' value='text'/>", fun: function (sys, items, opts) { console.log(typeof this.prop("value")); // string } }
如果需要其它類型的數值,就需要對取得到的資料進行格式化操作。例如,如果需要整數型數,就需要用到 parseInt 函數;如果需要浮點型數,就需要用到 parseFloat 函數。如果我們能夠將格式化資料的操作封裝起來,那使用起來一定會相當的方便。為了明確我們的預期,不妨先給出目標元件的使用範例。
Index: { xml: "<p id='index'>\ <TextBox id='foo'/>\ <TextBox id='bar' format='int'/>\ </p>", 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); } }
此範例實例化了兩個元件 Input。元件 Input 允許接收一個 format 參數作為其靜態介面輸入,並提供一個屬性 value 作為其動態輸入輸出介面。 format 參數有三種可能的值:string (預設)、int 以及 float。這三種值分別對應三種資料型別:字串型、整數型和浮點型。屬性 value 根據 format 的值來進行格式化輸入輸出。範例的輸出結果應該會是下面這樣子:
hello, world
227
目標元件的實作
TextBox: { xml: "<input id='input' type='text'/>", opt: { format: "string" }, fun: function (sys, items, opts) { var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format]; function getValue() { // 这里需要获取 input 的值并根据 opts.format 值选择适当的格式化函数, } function setValue(value) { // 这里需要根据 opts.format 值选择适当的格式化函数,对 value 进行格式化后同去赋值 } return Object.defineProperty({}, "value", { get: getValue, set: setValue }); } }上面關鍵的地方在於格式化函數的選取,為了簡化,我們採用的是表格
TextBox: { xml: "<input id='input' type='text'/>", 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 }); } }另外請注意,上面元件添加了部分屬性映射的內容,這可以在具體的項目中根據需要進行增刪。 本系列文章是基於 xmlplus 框架。如果你對 xmlplus 沒有太多了解,可以造訪 www.xmlplus.cn。這裡有詳盡的入門文件可供參考。
以上是JavaScript框架(xmlplus)元件的介紹(三)文字方塊(TextBox)的詳細內容。更多資訊請關注PHP中文網其他相關文章!