jQuery UI (RAD/GUI) 表单设计器答案

【问题标题】：jQuery UI (RAD/GUI) form designerjQuery UI (RAD/GUI) 表单设计器
【发布时间】：2023-03-09 00:17:01
【问题描述】：

嗯，我正在开发一个可视化表单设计器，并决定使用 jQuery UI 作为最终表单小部件集以及设计器本身的小部件集。

我主要关心的是让 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>

希望我的例子有意义:)

我的问题是；

这听起来不错吗？
您知道更好的方法还是其他方法？
您认为它有任何可能的问题吗？

【问题讨论】：

尝试禁用按钮或通过 HTML 将内容设为只读，而不是将 div 粘贴到顶部
@Raynos - 我不够清楚；我的解决方案需要适用于所有可能的小部件，而不仅仅是那些碰巧具有禁用属性的小部件。
@ChristianSoberras 然后我建议使用这些小部件“禁用”功能检测，并降级为没有“本机”禁用的隐藏 div。
@Raynos - 我担心禁用它可能会改变风格，我真的不希望这种情况发生。但是，我保留了这个选项。

标签： javascript jquery forms designer

【解决方案1】：

我会说这是一个非常糟糕的主意，因为 1）您可能会在某些浏览器分辨率等中发现覆盖在一个奇怪的地方，并且 2）您仍然可以标签到该项目。

两者都好得多；

隐藏元素
禁用该元素
用标签替换文本框，用图形替换按钮等。
禁止点击按钮

编辑您可以使用 jQuery 取消绑定元素上的事件，然后您可以稍后重新绑定它们。

【讨论】：

我需要让元素像真实一样可见，这就是 RAD UI 工具的重点。因此 [1] 无法工作，而 [2]、[3] 很难在不单独调整每个控件以使 css 实现的情况下实现工作。 [4] 更真实，但是我仍然需要覆盖层作为占位符来检测鼠标移动（用于调整大小和拖动）。
再想一想，在标签的情况下，我不能以某种方式找到禁用它的方法吗？也许通过击键过滤？由于 UI 小部件本身需要是可选择的，最终我将不得不支持这一点。
您可以单独保留控件的 html，只需将另一个单击事件添加到按钮或选项卡。然后您可以捕获该事件并防止其他事件触发。然后，当您准备好再次接受控件上的事件时，您可以取消绑定您的事件。这些可能会有所帮助。 stackoverflow.com/questions/652495/… 和 api.jquery.com/stop

【解决方案2】：

如果我要构建一个表单设计器，我会将所有元素 div 与实际小部件的图像作为 css 背景图像，这样您就可以在表单周围拖动小部件表示，而无需激活它或使用任何叠加问题。

如果您真的想让它看起来像成品，您可以将实际小部件嵌套在 div 内，但当用户鼠标在 div 内时不可见，当用户将鼠标移出 div 时，然后设置小部件再次可见。

直流

是的，我知道背景图像在拉伸时会看起来不对。所以我在回家的路上想了想。更好的技术是创建一个小部件三明治将小部件放在 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 允许测试小部件，您可以在屏幕上拖动对象，没有实现调整大小的逻辑。

直流

【讨论】：

[1] 在调整小部件大小的情况下，使用图像确实很糟糕。 css 背景会变得特别糟糕，因为它不能被拉伸。 [2] 第二个选项听起来更现实。我会在调整大小和拖动时使用这个技巧。
查看我添加的改进版本和示例
顺便说一句，我正在考虑在 github 上创建一个可视化表单设计器。这就是我发现你的问题的原因。如果您有兴趣，也许我们可以合作？