title: jQuery UI (RAD/GUI) form designer
body: <p>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.</p>
  
  <p>My main concern is to make jQuery wigets "read-only". I've had the following idea:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .widget-wrap { position: relative; }
      .widget-overlay { position: absolute; left:0; right:0; top:0; bottom:0; /*maybe z-index as well*/ }
  &lt;/style&gt;
  
  &lt;div class="widget-wrap" id="wdt1"&gt;
      &lt;button class="jquery-widget"&gt;Hello World!&lt;/button&gt;
      &lt;div class="widget-overlay"&gt;&lt;!----&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(function() {
          $("button.jquery-widget").button();
      });
  
      function widgetLock(){
          $("#wdt1 .widget-overlay").show();
      }
  
      function widgetRelease(){
          $("#wdt1 .widget-overlay").hide();
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Hope my example makes sense :)</p>
  
  <p>My questions are;</p>
  
  <ul>
  <li>does this sound good to you?</li>
  <li>do you know of a better or another way?</li>
  <li>do you see any possible issues with it?</li>
  </ul>