首先思路明确：生成的元素是一个完整的DOM对象；这些DOM对象的属性可以是字符串，xml文件，也可以是json格式的数据，存储在后台或者其它位置；通过层层解析，顺着DOM层级关系动态创建在html文档流中；这些html文档放于不同的模板文件中相应生成不同样式的效果。
以下就json格式存储的数据，简单示例一下：
第一步：获取attribute数据
var url = window.android.getCurrentDataUrl();
var data = window.android.getDataBody(url);
var dataJson = JSON.parse(data);
var jsonData = JSON.parse(dataJson['data']);
var jsonData = [] //自主创建（可选）第二步：创建元素类数据并分别解析
$(function () {
//alert(url);
var cls = {};
AnalyJson(jsonData, cls, data_toggle, $('#main'));
});
//创建JSON解析函数
function AnalyJson(data,cls,data_toggle,div){
if('id' in data){
AnalyJson(data.values,cls,data_toggle,div);
}else{
if('name' in data){
CreateInputViewer(data.name,cls,data_toggle,div);
AnalyJson(data.values,cls,data_toggle,div);
}else{
if('type' in data){
CreateInputViewer(data,cls,data_toggle,div);
}else{
for(var p in data){
CreateInputViewer(data[p],cls,data_toggle,div);
}
}
}
}
//针对不同的解析情况，调用下边函数
function CreateInputViewer(data,cls,data_toggle,div){
attr = {};
//alert(data.type);
switch(data.type){
case 'text':{
//alert(attr['name']);
CreateInput(data,cls.text,data_toggle.text,div);
break;
}
case 'radio':{
//alert(attr['name']);
CreateRadio(data,cls.radio,data_toggle.radio,div);
break;
}
case 'select':{
//alert(attr['name']);
CreateSelect(data,cls.select,data_toggle.select,div);
break;
}
case 'checkbox':{
//alert(attr['name']);
CreateCheckBox(data,cls.checkbox,data_toggle.checkbox,div);
break;
}
case 'photo':{
CreatePhoto(data,cls,data_toggle,div);
//alert("takePhoto");
break;
}
case 'gps' :{
CreateLocation(data,cls,data_toggle,div);
break;
}
default:{
CreateKeyValue(data,attr,div);
}
}
}
//封装一个用于存储ＤＯＭ属性的函数
function GetAttr(p,cls,data_toggle){
var attr={};
if(p in cls){
attr["class"]=cls[p];
}
if(p in data_toggle){
attr["data-toggle"]=data_toggle[p];
}
return attr;
}最后一步：根据不同的ＤＯＭ对象，创建不同对象
function CreateInput(data,cls,data_toggle,div){
var attr1=GetAttr("p1",cls,data_toggle);
var row = $('<div/>').attr(attr1);
var attr2=GetAttr("p2",cls,data_toggle);
attr2['name']=data.key;
attr2['placeholder']=data.keyname;
attr2['type']='text';
var input= $('<input />').attr(attr2);
row.append(input);
div.append(row);
}
function CreateLocation(data,cls,data_toggle,div){
var attr1=GetAttr('p1',cls.button,data_toggle.button);
var row= $('<div />').attr(attr1);
var spattr=GetAttr('sp',cls.button,data_toggle.button);
var span=$('<span/>').attr(spattr);
span.append(data.keyname+":");
var btnattr=GetAttr('p2',cls.button,data_toggle.button);
btnattr['id']=data.key;
btnattr['name']=data.key;
btnattr['onclick']="takeLocation(this.name)";
var button = $('<button />').attr(btnattr);
button.html('获取定位');
row.append(button);
div.append(row);
}
function CreateButton(data,cls,data_toggle,onclick,div){
var attr1=GetAttr('p1',cls,data_toggle);
var row= $('<div />').attr(attr1);
var spattr=GetAttr('sp',cls,data_toggle);
var span=$('<span/>').attr(spattr);
span.append(data.keyname+":");
var btnattr=GetAttr('p2',cls,data_toggle);
btnattr['name']=data.key;
//btnattr['onclick']=onclick.onclick;
btnattr['onclick']=SetScanToActive();
var button = $('<button />').attr(btnattr);
button.html(data.value);
row.append(button);
div.append(row);
}
function CreateImage(data,cls,data_toggle,div){
var attr1=GetAttr('p1',cls,data_toggle);
var row= $('<div />').attr(attr1);
var imgattr=GetAttr('p2',cls,data_toggle);
imgattr['id']=data.key;
imgattr['height']="70";
imgattr['width']="100";
var img = $('<img />').attr(imgattr);
row.append(img);
div.append(row);
}
function CreatePhoto(data,cls,data_toggle,div){
var attr1=GetAttr('p1',cls.button,data_toggle.button);
var row= $('<div />').attr(attr1);
var spattr=GetAttr('sp',cls.button,data_toggle.button);
var span=$('<span/>').attr(spattr);
span.append(data.keyname+":");
var btnattr=GetAttr('p2',cls.button,data_toggle.button);
btnattr['name']=data.key;
btnattr['onclick']="takePhoto(this.name)";
var button = $('<button />').attr(btnattr);
button.html("拍照");
row.append(button);
div.append(row);
var attr=GetAttr('p1',cls.img,data_toggle.img);
var imgrow= $('<div />').attr(attr);//..
var imgattr=GetAttr('p2',cls.img,data_toggle.img);
imgattr['id']=data.key;
imgattr['height']="70";
imgattr['width']="100";
var img = $('<img />').attr(imgattr);
imgrow.append(img);
div.append(imgrow);
}
function CreateRadio(data,cls,data_toggle,div){
var attr1=GetAttr('p1',cls,data_toggle);
var row = $('<div />').attr(attr1);
var spattr=GetAttr('sp',cls,data_toggle);
var span=$('<span/>').attr(spattr);
span.append(data.keyname+':');
row.append(span);
var attr2=GetAttr('p2',cls,data_toggle);
var attr3=GetAttr('p3',cls,data_toggle);
attr3['name']=data.key;
attr3['type']=data.type;
for(var json in data.values){
var label=$('<label />').attr(attr2);
attr3['value'] = data.values[json].key;
var input= $('<input />').attr(attr3);
label.append(input);
label.append(data.values[json].value);
row.append(label);
}
div.append(row);
}
function CreateSelect(data,cls,data_toggle,div){
var attr1=GetAttr('p1',cls,data_toggle);
var row=$('<div />').attr(attr1);
var spattr=GetAttr('sp',cls,data_toggle);
var span=$('<span />').attr(spattr);
span.append(data.keyname+':');
row.append(span);
var attr2=GetAttr('p2',cls,data_toggle);
attr2['name'] = data.key;
var select=$('<select />').attr(attr2);
var attr3=GetAttr('p3',cls,data_toggle);
for(var option in data.values){
attr3['value']=data.values[option].key;
var opt = $('<option />').attr(attr3);
opt.html(data.values[option].value);
select.append(opt);
}
row.append(select);
div.append(row);
}
function CreateCheckBox(data,cls,data_toggle,div){
var attr1=GetAttr('p1',cls,data_toggle);
var row=$("<div />").attr(attr1);
var spattr=GetAttr('sp',cls,data_toggle);
var span=$('<span />').attr(spattr);
span.append(data.keyname+':');
row.append(span);
var attr2=GetAttr('p2',cls,data_toggle);
var attr3=GetAttr('p3',cls,data_toggle);
attr3['name']=data.key;
attr3['type']='checkbox';
for(var checkbox in data.values){
var label=$("<label />").attr(attr2);
attr3['value'] = data.values[checkbox].key;
var input=$("<input />").attr(attr3);
label.append(input);
label.append(data.values[checkbox].value);
row.append(label);
}
div.append(row);
}
function CreateKeyValue(data,attr,div){
if(data.key)
div.append($('<div class="row"/>').append(data.key+':'+data.value+' '));
else{
div.append($('<div class="row"/>').append(data));
}
}
function CreatePhotoFromAndroid(data){
var jsonObject = JSON.parse(data);
//alter(jsonObject.id);
//alter(jsonObject.data);
$('#'+jsonObject.id).attr({"src":jsonObject.data});
}
function CreateLocationFromAndroid(data,cls,data_toggle){
var jsonObject = JSON.parse(data);
var attr1=GetAttr("p1",cls,data_toggle);
var row = $('<div/>').attr(attr1);
var attr2=GetAttr("p2",cls,data_toggle);
attr2['name']="longitude";
attr2['placeholder']="经度";
attr2['type']='text';
attr2['value']=jsonObject.longitude;
var input= $('<input />').attr(attr2);
var id = jsonObject.id;
$('#'+id).after(row.append(input));
var attr3=GetAttr("p2",cls,data_toggle);
attr3['name']="latitude";
attr3['placeholder']="纬度";
attr3['type']='text';
attr3['value']=jsonObject.latitude;
var linput= $('<input />').attr(attr3);
var lrow = $('<div/>').attr(attr1);
$('#'+id).after(lrow.append(linput));
//var lrow = $('<div class="row" />');
//var linput = $('<input />');
//linput.attr({"name":"latitude","value":jsonObject.latitude,"placeholder":"纬度"});
//lrow.append("纬度");
//input.attr({"name":"altitude","value":jsonObject.altitude,"placeholder":"高程"});
//$('#'+id).after(row.append(input));
//input.attr({"name":"address","value":jsonObject.address,"placeholder":"地址"});
//$('#'+id).after(row.append(input));
}
function SetScanToActive(result){
//alert($(document.activeElement).val(result));
$(document.activeElement).val(result);
随时随地看视频
