一些页面表单包装类-JavaSript-爱易网页

一些页面表单包装类

日期：2014-05-16　浏览次数：20446 次

【分享】一些页面表单包装类
众所周知我们经常需要给页面的表单赋值或设置,有时候需要批量设置.
但是一些表单的赋值操作可能不一样,利用jquery或者其他工具可以统一解决这个问题

另外的办法就是把这些表单控件用一个类包装起来,然后提供统一的方法来调用,这样就可以直接操作这些包装类了.

下面是我的实现方法:
测试文件:test.html

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript" src="FormView.js"></script>
<script>
    // 测试
    window.onload = function(){
        var inputView = new FormInput('txt1');
        inputView.setValue('world')
        //alert("input value:"+inputView.getValue())
        
        var formRadio = new FormRadio('radioId');
        var items = [{value:'1',text:'男'},{value:'0',text:'女'}]
        formRadio.setItems(items);
        formRadio.setValue(0);
        //alert("radio value:"+formRadio.getValue())
        
        var fromCheckBox = new FormCheckBox('checkboxId');
        var items2 = [{value:'1',text:'足球'},{value:'0',text:'篮球'},
                     {value:'2',text:'羽毛球'}]
        fromCheckBox.setItems(items2);
        fromCheckBox.setValue([1,2]);
        //alert(fromCheckBox.getValue())
        
        var select = new FormSelect('selectId');
        var selectItems = [{value:0,text:'上海'},
                           {value:1,text:'北京'},{value:2,text:'天津'}];
        select.setItems(selectItems);
        select.setValue(1)
        //alert("select value:"+select.getValue())
        
        var formTextArea = new FormTextArea('textAreaId');
        formTextArea.setValue("<b>hello world</b>");
        //alert("textarea value:"+formTextArea.getValue());
        
        var controls = [];
        controls.push(inputView);
        controls.push(formRadio);
        controls.push(select);
        controls.push(fromCheckBox);
        controls.push(formTextArea);
        // 这里实现了接口的统一
        for(var i in controls) {
            var control = controls[i];
            alert(control.id + ": " + control.getValue())
        }
    }
    
</script>
</head>
<body>
    input
    <input id="txt1" value="hello"><br>
    radio
    <div id="radioId"></div><br>
    checkbox
    <div id="checkboxId"></div><br>
    select
    <select id="selectId"></select><br>
    textArea
    <textarea rows="3" cols="20" id="textAreaId"></textarea>
    
</body>
</html>

lib.js 这是一个工具类

JScript code

;(function() {
    var util = {
         /**
         * Usage:
         * 
         * format('{y}年{m}月{d}日',{y:'2010',m:'09',d:'15'});
         * return: 2010年09月15日
         */
        format:function(str,obj){
            for(var key in obj){
                str = str.replace(new RegExp("\\{" + key + "\\}", "g"), obj[key]);   
            }
            return str;
        }
         

    };

    var lib = {
        extend:function(subClass,superClass){
            var F = function(){};
            F.prototype = superClass.prototype;
            subClass.prototype = new F();            
            subClass.prototype.constructor = subClass;
            
            subClass.superclass = supe

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

一些页面表单包装类

相关资料更多>

推荐阅读更多>