Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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" xml:lang="en" lang="en">
- <head>
- <title>title</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="description" content="" />
- <meta name="keywords" content="" />
- <meta name="robots" content="index,follow" />
- <!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script type="text/javascript">
- var num = 0;
- function form_select(name,options) {
- var s = "";
- for (var i=0;i<options.length;i++) {
- s = s + '<option selected="selected">' + options[i] + '</option>';
- }
- return '<select name="' + name + '">' + s + '</select>';
- }
- function form_text(name,value,size,onchange) {
- if (onchange)
- return '<input type="text" id="' + name + '" name="' + name + '" value="' + value + '" size="' + size + '" onchange="'+ onchange +'"/>';
- else
- return '<input type="text" id="' + name + '" name="' + name + '" value="' + value + '" size="' + size + '"/>';
- }
- function form_checkbox(name,caption) {
- return '<input type="checkbox" name="' + name + '" checked="checked" value="' + caption + '" />';
- }
- function div_table(html) {
- return '<table>' + html + '</table>';
- }
- function table_tr(html,id) {
- if (!id)
- return '<tr>' + html + '</tr>';
- else
- return '<tr id="'+id+'">' + html + '</tr>';
- }
- function tr_td(html) {
- return '<td>' + html + '</td>';
- }
- function onWidgetResize(id) {
- //console.log(w);
- //console.log(id);
- var x = document.forms["properties-form"]["pos-x" + id].value;
- var y = document.forms["properties-form"]["pos-y" + id].value;
- var w = document.forms["properties-form"]["pos-w" + id].value;
- var h = document.forms["properties-form"]["pos-h" + id].value;
- $("#w" + id).css("width",w);
- $("#w" + id).css("height",h);
- $("#w" + id).css("top",y);
- $("#w" + id).css("left",x);
- }
- //type name id position anchors
- function widget(n) {
- var types = ['form','button','edit','label'];
- return table_tr(
- tr_td(form_select('type'+n,types)) +
- tr_td(form_text('name'+n,'',10)) +
- tr_td(form_text('id'+n,'',10)) +
- tr_td(form_text('pos-x'+n,'0',3)) +
- tr_td(form_text('pos-y'+n,'0',3)) +
- tr_td(form_text('pos-w'+n,'0',3)) +
- tr_td(form_text('pos-h'+n,'0',3)) +
- tr_td(form_checkbox('anc-l'+n,'l')) +
- tr_td(form_checkbox('anc-t'+n,'t')) +
- tr_td(form_checkbox('anc-r'+n,'r')) +
- tr_td(form_checkbox('anc-b'+n,'b')) +
- '',
- 'r'+n
- );
- }
- function createWidget() {
- var tr = $( widget(1) );
- $("#properties-table").append( tr );
- $('#pos-x' + 1).bind('change', function() { onWidgetResize(1); } );
- $('#pos-y' + 1).bind('change', function() { onWidgetResize(1); } );
- $('#pos-w' + 1).bind('change', function() { onWidgetResize(1); } );
- $('#pos-h' + 1).bind('change', function() { onWidgetResize(1); } );
- $("#widgets").append( $('<div id="w'+1+'" style="background-color: ' + lightColor() + '; position: relative; border: 1px solid black;"></div>') );
- }
- $(document).ready( function() {
- $("#properties-form").css("background-color",lightColor());
- createWidget();
- });
- function lightColor() {
- function c() {
- var d = 20;
- return Math.floor(Math.random()*d+256-d).toString(16);
- }
- return "#"+c()+c()+c();
- }
- </script>
- <style type="text/css">
- #properties-form {
- position: absolute;
- width: 600px;
- height: 400px;
- bottom: 0;
- right: 0;
- }
- </style>
- </head>
- <body>
- <div id="widgets">
- </div>
- <form id="properties-form">
- <table id="properties-table">
- <tr>
- <!-- type name id position anchors -->
- <th>widget</th><th>name</th><th>id</th><th colspan="4">position</th><th colspan="4">anchors</th>
- </tr>
- </table>
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement