jQuery UI (RAD/GUI) form designer

Question

jQuery UI (RAD/GUI) form designer

2.8k Views Asked by Christian At 10 April 2025 at 17:42

Well, I'm working on a visual form designer and decided to use jQuery UI as both the end form widgetset as well as the widgetset for the designer itself.

My main concern is to make jQuery wigets "read-only". I've had the following idea:

<style type="text/css">
    .widget-wrap { position: relative; }
    .widget-overlay { position: absolute; left:0; right:0; top:0; bottom:0; /*maybe z-index as well*/ }
</style>

<div class="widget-wrap" id="wdt1">
    <button class="jquery-widget">Hello World!</button>
    <div class="widget-overlay"><!----></div>
</div>

<script type="text/javascript">

    $(function() {
        $("button.jquery-widget").button();
    });

    function widgetLock(){
        $("#wdt1 .widget-overlay").show();
    }

    function widgetRelease(){
        $("#wdt1 .widget-overlay").hide();
    }

</script>

Hope my example makes sense :)

My questions are;

does this sound good to you?
do you know of a better or another way?
do you see any possible issues with it?

Original Q&A

There are 2 best solutions below

**griegs** · Answer 1

I would say this is a very bad idea in that 1) you may find the overlay in a weird place in certain browser resolutions etc and 2) you can still tab to the item.

Much better to either;

Hide the element
Disable the element
Replace text boxes with labels, buttons with graphics etc.
Disable the click on the button

edit You can use jQuery to unbind events on elements and then you can re-bind them later on.

**DeveloperChris** · Answer 2

If I was to build a form designer I'd make all elements divs with an image of the actual widget as a css background image, that way you can drag the widget representation around the form without activating it or having any of the overlay problems.

If you really wanted to make it look like the finished product you can have the actual widget nested inside the div but invisible when the users mouse is within the div, when the user moves the mouse out of the div then set the widget visible again.

DC

Yes I was aware that the background image would look wrong when stretched. So I thought about it on the way home. A better technique would be to create a widget sandwich place the widget between 2 divs the bottom div controls the size and position the top prevents the widget from activating

<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<style type="text/css">
<!--
.widget {
    height: 100%;
    width: 100%;
}
.widget_overlay {
    border: thin solid #FF0000;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    right: 1px;
    visibility:visible
}
.sz_controller {
    position:absolute;
    width:365px;
    height:61px;
    left: 142px;
    top: 75px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function ShowHide(button,id){
    elem = document.getElementById(id)
    if (elem.style.visibility=='hidden') {
        elem.style.visibility='visible'; 
        button.value="Hide Overlay";
    } else {
        elem.style.visibility = 'hidden'; 
        button.value="Show Overlay";
    }
}
</script>


</head>

<body>
<input type="button" name="Button" value="Hide Overlay" onClick="ShowHide(this,'widget_overlay')">
<div id="draggable" class="sz_controller" style=""><select class="widget" name="test">
  <option>test 1</option>
  <option>test 2</option>
  <option>test 3</option>
</select><div id="widget_overlay" class="widget_overlay"></div></div>
<script>
    $(function() {
        $( "#draggable" ).draggable();
    });
    </script>
</body>
</html>

The above will work in firefox

Clicking the button hides the overlay div allowing testing of the widget, You can drag the object around the screen, no resizing logic has been implemented.

DC

jQuery UI (RAD/GUI) form designer

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in FORMS

Related Questions in DESIGNER

Trending Questions

Popular # Hahtags

Popular Questions