wangdaping
/
wp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!-- 树组件start -->
<script type="text/javascript" src="../../libs/js/tree/ztree/ztree.js"></script>
<link type="text/css" rel="stylesheet" href="../../libs/js/tree/ztree/ztree.css"></link>
<!-- 树组件end -->

<!-- 树形下拉框start -->
<script type="text/javascript" src="../../libs/js/form/selectTree.js"></script>
<!-- 树形下拉框end -->

<!-- 日期控件start -->
<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
<!-- 日期控件end -->

<!-- 条件过滤器 start -->
<script type="text/javascript" src="../../libs/js/form/filter.js"></script>
<!-- 条件过滤器 end -->

<!-- 数字步进器start -->
<script type="text/javascript" src="../../libs/js/form/stepper.js"></script>
<!-- 数字步进器end -->

<!-- 软键盘控件start -->
<script type="text/javascript" src="../../libs/js/form/keypad.js"></script>
<!-- 软键盘控件end -->

<!-- 双向选择器start -->
<script type="text/javascript" src="../../libs/js/form/lister.js"></script>
<!-- 双向选择器end -->

<!--自动提示框start-->
<script type='text/javascript' src='../../libs/js/form/suggestion.js'></script>
<!--自动提示框end-->

<!-- 树形双选器start -->
<script type="text/javascript" src="../../libs/js/form/listerTree.js"></script>
<!-- 树形双选器end -->

<!-- 组合下拉框start -->
<script type="text/javascript" src="../../libs/js/form/selectCustom.js"></script>
<!-- 组合拉框end -->

<!-- 颜色选择器 start -->
<script type="text/javascript" src="../../libs/js/form/color.js"></script>
<!-- 颜色选择器 end -->

<!-- 评星级 start -->
<script type="text/javascript" src="../../libs/js/form/rating.js"></script>
<!-- 评星级 end -->

<!-- 表单验证start -->
<script src="../../libs/js/form/validationRule.js" type="text/javascript"></script>
<script src="../../libs/js/form/validation.js" type="text/javascript"></script>
<!-- 表单验证end -->
</head>
<body>
<div id="scrollContent">
	
	
</div>
<script type="text/javascript">
     //上传组件使用
    var upload;
    var catalogId = "1340271126861_2";
    
     var $form;
     function initComplete(){
		
		//获取多功能容器内容区域
		var $content=$("#scrollContent");
		
		//创建表单
		$form=$('<form></form>')
		
		//将表单添加到多功能容器内容区域
		$content.append($form);
		
		//创建表格
		var $table=$('<table class="formTable"><tr><td class="ali03" width="150">文本框：</td><td></td></tr>'+
		'<tr><td class="ali03">单选按钮：</td><td></td></tr>'+
		'<tr><td class="ali03">多选按钮：</td><td></td></tr>'+
		'<tr><td class="ali03">单选下拉框：</td><td></td></tr>'+
		'<tr><td class="ali03">树形下拉框：</td><td></td></tr>'+
		'<tr><td class="ali03">自动完成框：</td><td></td></tr>'+
		'<tr><td class="ali03">日期选择框：</td><td></td></tr>'+
		'<tr><td class="ali03">双向选择器：</td><td></td></tr>'+
		'<tr><td class="ali03">树形双选器：</td><td></td></tr>'+
		'<tr><td class="ali03">条件过滤器：</td><td></td></tr>'+
		'<tr><td class="ali03">颜色选择器：</td><td></td></tr>'+
		'<tr><td class="ali03">数字步进器：</td><td></td></tr>'+
		'<tr><td class="ali03">软键盘控件：</td><td></td></tr>'+
		'<tr><td class="ali03">评星级控件：</td><td></td></tr>'+
		'<tr><td class="ali03">文本域：</td><td></td></tr>'+
		'<tr><td class="ali02" colspan="2"></td></tr>'+
		'</table>');
		
		//将表格添加到表单中
		$form.append($table);
		
		//创建文本框并赋值
		var $input=$('<input type="text" class="validate[required]">');
		$input.val("张三");
		
		
		//创建单选按钮并赋值
		var $radio1 =$('<input type="radio" id="radio-1" name="bo.radio" value="男" />');
		var $radiolabel1 =$('<label for="radio-1">男</label>');
		var $radio2 =$('<input type="radio" id="radio-2" name="bo.radio" value="女"/>');
		var $radiolabel2 =$('<label for="radio-2">女</label>');
		$radio2.attr("checked",true);
		
		//创建复选按钮并赋值
		var $check1 =$('<input type="checkbox" id="checkbox-1" name="bo.checkboxs" value="唱歌"/>');
		var $checklabel1 =$('<label for="checkbox-1" >唱歌</label>');
		var $check2 =$('<input type="checkbox" id="checkbox-2" name="bo.checkboxs" value="跳舞" />');
		var $checklabel2 =$('<label for="checkbox-2">跳舞</label>');
		$check2.attr("checked",true);
		
		//创建单选下拉框并赋值
		var $select = $('<select mode="ajax" prompt="请选择省份"></select>');
		var selData={"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}]};
		//赋给data
		$select.data("data",selData);
		$select.attr("selectedValue","2");
		
		
		//创建树形下拉框并赋值
		var $selTree = $('<div class="selectTree"></div>');
		var defaultNodes = {"treeNodes":[
			{ id:1, parentId:0, name:"部门1", open: true},
			{ id:11, parentId:1, name:"员工1"},
			{ id:12, parentId:1, name:"员工2"},
			{ id:13, parentId:1, name:"员工3"},
			{ id:2, parentId:0, name:"部门2", open: true},
			{ id:21, parentId:2, name:"员工4"}
		]};
		$selTree.data("data",defaultNodes); 
		
		//创建自动完成框并赋值
		var $auto = $('<input type="text" class="autoComplete"/>');
		$auto.attr("url","<%=path%>/autoComplateAction.do?method=getListByEmail");
		$auto.attr("params",'{"userAge": "26", "userSex": "1"}');
		$auto.attr("matchName","userName");
		$auto.val("北京");
		
		//创建日期选择框并赋值
		var $date=$('<input type="text" class="date"/>');
		$date.val("2012-07-16");
		 
		
		//创建双向选择器并赋值
		var $lister=$('<div class="lister" listerWidth="120" listerHeight="120" ></div>');
		var listerData={fromList:[{value:"1",key:"员工1"},{value:"2",key:"员工2"},{value:"3",key:"员工3"},{value:"4",key:"员工4"}],"toList":[]};
		$lister.data("data",listerData)
		$lister.attr("selectedValue",'1,2');
		
		
		//创建树形双选器并赋值
		var $listerTree=$('<div class="listerTree" listerWidth="120" listerHeight="180" ></div>');
		var listerTreeData={"toList":[],"fromList":[{"id":"1","parentId":"0","open":"true","name":"部门1","oldParentId":"null","drag":"false"},{"id":"11","parentId":"1","name":"员工1","oldParentId":"1"},{"id":"12","parentId":"1","name":"员工2","oldParentId":"1"},{"id":"13","parentId":"1","name":"员工3","oldParentId":"1"}]}
		$listerTree.data("data",listerTreeData)
		$listerTree.attr("selectedValue",'11,12');
		
		
		//创建条件过滤器并赋值
		var $filter = $('<div class="filter"></div>');
		var filterData= {"list":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}]};
		$filter.data("data",filterData)
		$filter.attr("selectedValue","2");
		
		
		//创建颜色选择器并赋值
		var $color=$('<input type="text" class="color"/>');
		$color.val("#00ff00");
		
		 
		 //创建数字步进器并赋值    
		 var $stepper = $('<input id="step1" type="text" class="stepper"/>');
        $stepper.val(10);
		
		
		 //创建软键盘控件并赋值    
		var $keypad = $('<input type="text" class="keypad"/>');
		$keypad.val(1234);
		
		
		//创建星级控件并赋值   
		//动态生成星级控件需要设置id
		var $rating = $('<div class="rating" id="rating9"></div>');
		$rating.attr("value",2);
		
		
		//创建文本域并赋值  
		var $ta=$('<textarea class="textarea"></textarea>');
		$ta.html("备注信息");
		
		//创建按钮 
		var $input1=$('<input type="button" value="提交"/>' );
		var $input2=$('<input type="button" value="取消"/>' );
		
		 //提交触发表单验证
        $input1.click(function(){ 
		   var valid = $form.validationEngine({returnIsValid: true});
			if(valid == true){
				top.Dialog.alert("验证通过，表单提交处理");
			}
			else{
				top.Dialog.alert("表单填写不正确，请按要求填写！");
			}
		});
		
		
		//将元素添加到表格中
		$table.find("tr").eq(0).find("td").eq(1).append($input);
		$table.find("tr").eq(1).find("td").eq(1).append($radio1);
		$table.find("tr").eq(1).find("td").eq(1).append($radiolabel1);
		$table.find("tr").eq(1).find("td").eq(1).append($radio2);
		$table.find("tr").eq(1).find("td").eq(1).append($radiolabel2);
		$table.find("tr").eq(2).find("td").eq(1).append($check1);
		$table.find("tr").eq(2).find("td").eq(1).append($checklabel1);
		$table.find("tr").eq(2).find("td").eq(1).append($check2);
		$table.find("tr").eq(2).find("td").eq(1).append($checklabel2);
		$table.find("tr").eq(3).find("td").eq(1).append($select);
		$table.find("tr").eq(4).find("td").eq(1).append($selTree);
		$table.find("tr").eq(5).find("td").eq(1).append($auto);
		$table.find("tr").eq(6).find("td").eq(1).append($date);
		$table.find("tr").eq(7).find("td").eq(1).append($lister);
		$table.find("tr").eq(8).find("td").eq(1).append($listerTree);
		$table.find("tr").eq(9).find("td").eq(1).append($filter);
		$table.find("tr").eq(10).find("td").eq(1).append($color);
		$table.find("tr").eq(11).find("td").eq(1).append($stepper);
		$table.find("tr").eq(12).find("td").eq(1).append($keypad);
		$table.find("tr").eq(13).find("td").eq(1).append($rating);
		$table.find("tr").eq(14).find("td").eq(1).append($ta);
		$table.find("tr").eq(15).find("td").eq(0).append($input1);
		$table.find("tr").eq(15).find("td").eq(0).append("&nbsp;");
		$table.find("tr").eq(15).find("td").eq(0).append($input2);
		
		//渲染一律放在最后
		$input.render();
		$select.render(); 
		$selTree.render(); 
		$auto.render(); 
		$date.render();   
        $lister.render(); 
        $listerTree.render(); 
        $filter.render();   
        $color.render(); 
        $stepper.render();
        $keypad.render();
        $rating.render();
        $ta.render();   
        $input1.render();
		$input2.render(); 
       
        
		
		
		//动态添加验证
		$form.validationEngine();
    }

</script>
</body>
</html>