このコードでは、構造化されていない String を取り込み、それを JS オブジェクトに解析します。これを Web フォームに適用する必要があります。
これがデモです。解析済み/構造化されたオブジェクト階層が示され、ターゲット アイテムの例が警告されます。
キー項目のクリック可能なリストを作成します (つまり、ボタン、画像、ラベルなど)
リスト項目をクリックして、フォームに値を入力します
値を変更してオブジェクトに保存します
いくつかの注意事項があります:
- 重複したキーがあります。データの整合性を維持しながら、それらを一意にする方法がわかりません。それらをネストすることはできません。私が考えることができる唯一のことは、それらに一意のIDを追加することです
- 理想的には、フォームはオブジェクトのフィールドに基づいてフィールドを動的に生成します。(つまり、「ボタン」には幅、高さ、トランジション、および名前があり、「ラベル」には異なるフィールド セットがあります。
- 一部の要素はネストされています (つまり、'Scroll' には独自の 'Buttons' と 'Labels' があります)。
どんな助けでも大歓迎です。以下のコードは要素のリストを作成しますが、クリックに基づいて値をフォームにロードすることはできません。
ここにコードがあります
//Parse String
var str = 'View\n{\n Name: View1;\n Image\n {\n BackgroundImage: Image.gif;\n Position: 0, 0;\n Width: 320;\n Height: 480;\n }\n\n Button\n {\n BackgroundImage: Button.gif;\n Transition: View2;\n Position: 49, 80;\n Width: 216;\n Height: 71;\n }\n\n Button\n {\n BackgroundImage: Button2.gif;\n Position: 65, 217;\n Width: 188;\n Height: 134;\n }\n\n Label\n {\n Position: 106, 91;\n Width: 96;\n Height: 34;\n Text: "Button";\n FontSize: 32;\n Color: 0.12549, 0.298039, 0.364706, 1;\n }\n Scroll\n {\n Position: 106, 91;\n Width: 96;\n Height: 34;\n Button{\n BackgroundImage: Button2.gif;\n Position: 65, 217;\n Width: 188;\n Height: 134;\n }\n Button{\n BackgroundImage: Button2.gif;\n Position: 65, 217;\n Width: 188;\n \n Height: 134;\n }\n\n }\n\n}';
str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object
str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object
str = str.replace(/;/g, ","); // swap out semicolons with commas
str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas
str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays
str = str.replace(/"/g, ""); // get rid of all double quotes
str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"'); // create strings
$("#parseList").html(str);
var objStr;
eval("objStr={" + str + "};");
//console.log(objStr.View.Button)
//alert(objStr.View.Scroll.Button.Width);
//End Parse String
$(document).ready(function () {
//Build Initial Object LIst
var initObjectList = '<div id="prePop">';
$.each(objStr.View, function (k, v) {
initObjectList += '<div class="inLineObjects">' + '<div class="key">' + k + '</div>' + '</div>';
});
initObjectList += '</div>';
$('#code').append(initObjectList)
オブジェクト出力の例:
View:{
Name:"View1",
Image:{
BackgroundImage:"Image.gif",
Position: [0, 0],
Width: 320,
Height: 480
},
Button:{
BackgroundImage:"Button.gif",
Transition:"View2",
Position: [49, 80],
Width: 216,
Height: 71
},
Button:{
BackgroundImage:"Button2.gif",
Position: [65, 217],
Width: 188,
Height: 134
},
Label:{
Position: [106, 91],
Width: 96,
Height: 34,
Text:"Button",
FontSize: 32,
Color: [0.12549, 0.298039, 0.364706, 1]
},
Scroll:{
Position: [106, 91],
Width: 96,
Height: 34,
Button:{
BackgroundImage:"Button2.gif",
Position: [65, 217],
Width: 188,
Height: 134
},
Button:{
BackgroundImage:"Button2.gif",
Position: [65, 217],
Width: 188,
Height: 134
}
}
}