jQuery UI (RAD/GUI) form designer

Question

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?

try disabling buttons or making content readonly through HTML rather then pasting divs ontop — Raynos, Jan 31 '11 at 01:08
@Raynos - I wasn't clear enough; my solution needs to work on all widgets possible, not just those that by coincidence have a disabled property. — Christian, Jan 31 '11 at 01:11
@ChristianSoberras then I recommend feature detection on "disable" with these widgets and degrading to hidden divs where there is no "native" disable. — Raynos, Jan 31 '11 at 01:12
@Raynos - I'm afraid that disabling it might change the style, and I really don't want that to happen. However, I'm keeping this an option. — Christian, Jan 31 '11 at 07:50

score 2 · Answer 1 · edited May 24 '14 at 00:05

2

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.

edited May 24 '14 at 00:05

BenMorel

34,448
50
182
322

answered Jan 31 '11 at 01:14

griegs

22,624
33
128
205

I need the element to be visible as if it were real, that's the point of the RAD UI tool. Therefore **[1]** can't work and **[2]**, **[3]** are difficult to achieve without tweaking each control separately to make the css work. **[4]** is more realistic, however I still need the overlay as a placeholder to detect mouse movement (for resizing and dragging). – Christian Jan 31 '11 at 07:47
As a further thought, can't I, in the case of tabs, somehow find a way to disable that? maybe through key stroke filtering? Since the UI widgets themselves need to be selectable, eventually I'll have to support this. – Christian Jan 31 '11 at 07:52
You cna leave the html of the controls alone and simply add another click event to the button or tab. then you can trap that event and prevent the other events from firing. then you can unbinf your event when you are ready to accept events on the controls again. these might help. http://stackoverflow.com/questions/652495/jquery-multiple-event-handlers-how-to-cancel and http://api.jquery.com/stop/ – griegs Feb 01 '11 at 00:16

DeveloperChris · Answer 2 · 2011-02-01T02:11:37.970

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

**[1]** Using an image is really bad in case where the widget is resized. It gets especially worse with css backgrounds, since it can't be stretched. **[2]** The second option sounds more realistic. I would use that trick while resizing as well as dragging. — Christian, Jan 31 '11 at 07:49
By the way I was thinking about creating a visual form designer on github. That's why I found your question. if you are interested perhaps we could collaborate? — DeveloperChris, Feb 01 '11 at 02:18

jQuery UI (RAD/GUI) form designer

2 Answers2