jQuery用戶界面（RAD/GUI）表單設計

好吧，我工作的一個可視化表單設計器，並決定使用jQuery UI的兩端形式視窗元件，以及作爲設計師本身的視窗元件。jQuery用戶界面（RAD/GUI）表單設計

我最關心的是讓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>

希望我的例子是有道理的:)

我的問題是;

這聽起來好給你？
你知道更好的或者另一種方式？
您是否看到任何可能的問題？

來源

2011-01-31 Christian

嘗試禁用按鈕或使內容只讀通過HTML而不是粘貼的div ontop的 – Raynos 2011-01-31 01:08:31

@Raynos - 我還不夠清楚;我的解決方案需要在所有可能的小部件上工作，而不僅僅是那些巧合的擁有禁用的財產。 – Christian 2011-01-31 01:11:36

@ChristianSoberras然後我推薦使用這些小部件的「禁用」功能檢測，並降級到沒有「本機」禁用的隱藏div。 – Raynos 2011-01-31 01:12:55

我會說這是一個非常糟糕的主意，因爲1）您可能會發現在某些瀏覽器的分辨率等奇怪的地方覆蓋和2）你仍然可以選擇項目。

好多要麼;

隱藏元素
禁用元素
用標籤帶圖形等
替換文本框，按鈕禁用點擊按鈕

編輯你可以使用jQuery去除元素上的事件，然後你可以重新綁定它們。

來源

2011-01-31 01:14:37 griegs

如果我是建立一個表格設計師，我會想辦法讓所有元素與實際部件的CSS背景圖像的圖像的DIV，這樣你可以拖動窗體小部件表示不激活，或有任何的覆蓋問題。

如果您真的想讓它看起來像成品一樣，您可以將實際的小部件嵌套在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，您可以在屏幕上拖動該對象，但不調整大小邏輯。

來源

2011-01-31 06:30:34 DeveloperChris

jQuery用戶界面（RAD/GUI）表單設計

回答

相關問題