jQuery UI（RAD / GUI）表单设计器

好吧，我正在研究一个可视化表单设计器，并决定使用jQuery UI作为最终表单widgetset以及设计器本身的widgetset。我主要担心的是让jQuery wigets“只读”。我有以下想法：

<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>

希望我的榜样有道理:) 我的问题是; 这听起来对你好吗？你知道更好还是其他方式？你看到它有什么问题吗？

已邀请:

2 个回复

佬棠

我会说这是一个非常糟糕的主意1）你可能会在某些浏览器分辨率中找到一个奇怪的地方，以及2）你仍然可以选择项目。两者都好得多; 隐藏元素禁用该元素用标签，带图形的按钮等替换文本框。禁用按钮上的单击编辑您可以使用jQuery取消绑定元素上的事件，然后您可以在以后重新绑定它们。

良阑纠苫

如果我要构建一个表单设计器，我会将所有元素div与实际窗口小部件的图像作为css背景图像，这样您就可以在窗体周围拖动窗口小部件表示而不激活它或有任何叠加问题。如果你真的想让它看起来像成品，你可以将实际的小部件嵌套在div中，但是当用户鼠标在div中时不可见，当用户将鼠标移出div时，再次将小部件设置为可见。 DC 是的我知道拉伸时背景图像看起来不对劲。所以我在回家的路上想到了它。更好的技术是创建一个小部件三明治将小部件放在2个div之间，底部div控制大小和位置顶部阻止小部件激活

<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>

以上将在Firefox中工作单击该按钮会隐藏覆盖div以允许测试窗口小部件，您可以在屏幕上拖动对象，不会实现调整大小逻辑。 DC

要回复问题请先登录或注册

jQuery UI（RAD / GUI）表单设计器

2 个回复

发起人

问题状态

jQuery UI（RAD / GUI）表单设计器

与内容相关的链接

2 个回复

发起人

问题状态