jQuery UI (RAD/GUI)表单设计器
嗯，我正在研究一个可视化表单设计器，并决定使用jQuery UI作为结束表单widgetset以及设计器本身的widgetset。
我主要关心的是让jQuery的妻子“只读”。我有以下想法：
<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
Stack Overflow用户
发布于 2011-01-31 01:14:37
我会说，这是一个非常糟糕的想法，1)你可能会发现覆盖在一个奇怪的地方，在某些浏览器分辨率等；2)你仍然可以标签到项目。
无论是哪一个，都好得多；
element
- Disable
- 隐藏带有标签的
- 文本框、带有图形的按钮等。
- 禁用对按钮
的单击
编辑您可以使用jQuery来解除元素上的事件绑定，然后可以在稍后重新绑定它们。
Stack Overflow用户
发布于 2011-01-31 06:30:34
如果我要构建一个表单设计器，我会让所有元素都以实际小部件的图像作为css背景图像，这样您就可以在表单周围拖动小部件表示，而不需要激活它或出现任何重叠问题。
如果你真的想让它看起来像成品，你可以让实际的小部件嵌套在div里面，但是当用户鼠标在div内时，当用户将鼠标移出div，然后再次设置小部件可见时，这个小部件是不可见的。
数据中心
是的，我知道背景图像在拉伸时会看上去不对。所以我在回家的路上想了想。一种更好的方法是创建一个小部件三明治，将小部件放在两个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，允许测试小部件，您可以在屏幕周围拖动对象，没有实现调整大小的逻辑。
数据中心
https://stackoverflow.com/questions/4846788
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号