Конструктор форм jQuery UI (RAD / GUI)

Ну, я работаю над визуальным дизайнером форм и решил использовать jQuery UI как в качестве набора виджетов конечной формы, так и как набор виджетов для самого дизайнера.

Моя основная задача - сделать виджеты 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>

Надеюсь, мой пример имеет смысл :)

Мои вопросы:

  • это звучит хорошо для вас?
  • ты знаешь лучший или другой способ?
  • вы видите какие-либо возможные проблемы с этим?

javascript forms jquery designer
person Christian    schedule 31.01.2011    source источник
comment
попробуйте отключить кнопки или сделать контент только для чтения через HTML, а не вставлять div поверх   -  person Raynos    schedule 31.01.2011
comment
@Raynos - я не совсем понял; Мое решение должно работать со всеми возможными виджетами, а не только с теми, у которых случайно отключено свойство.   -  person Christian    schedule 31.01.2011
comment
@ChristianSoberras, тогда я рекомендую обнаружение функции при отключении с этими виджетами и деградацию до скрытых div, где нет собственного отключения.   -  person Raynos    schedule 31.01.2011
comment
@Raynos - Я боюсь, что его отключение может изменить стиль, и я действительно не хочу, чтобы это произошло. Однако я оставляю такой вариант.   -  person Christian    schedule 31.01.2011

Ответы (2)


arrow_upward
2
arrow_downward

Я бы сказал, что это очень плохая идея, так как 1) вы можете найти оверлей в странном месте при определенных разрешениях браузера и т. Д. И 2) вы все еще можете перейти к элементу.

Гораздо лучше;

  1. Скрыть элемент
  2. Отключить элемент
  3. Замените текстовые поля ярлыками, кнопки - графикой и т. Д.
  4. Отключить нажатие на кнопку

edit Вы можете использовать jQuery для отмены привязки событий к элементам, а затем вы можете повторно привязать их позже.

person griegs    schedule 31.01.2011
comment
Мне нужно, чтобы элемент был видимым, как если бы он был реальным, в этом суть инструмента RAD UI. Поэтому [1] не может работать, а [2], [3] трудно достичь без настройки каждого элемента управления отдельно, чтобы сделать CSS Работа. [4] более реалистичен, однако мне все еще нужен оверлей в качестве заполнителя для обнаружения движения мыши (для изменения размера и перетаскивания). - person Christian; 31.01.2011
comment
В качестве дополнительной мысли, могу ли я, в случае вкладок, каким-то образом найти способ отключить это? может быть, через фильтрацию нажатия клавиш? Поскольку сами виджеты пользовательского интерфейса должны быть выбираемыми, в конечном итоге мне придется это поддерживать. - person Christian; 31.01.2011
comment
Вы можете оставить HTML-код элементов управления в покое и просто добавить еще одно событие щелчка к кнопке или вкладке. тогда вы можете поймать это событие и предотвратить запуск других событий. затем вы можете отключить свое событие, когда будете готовы снова принимать события на элементах управления. это может помочь. stackoverflow.com/questions/652495 / и api.jquery.com/stop - person griegs; 01.02.2011

arrow_upward
1
arrow_downward

Если бы мне нужно было создать конструктор форм, я бы сделал все элементы div с изображением фактического виджета в качестве фонового изображения css, таким образом вы можете перетаскивать представление виджета по форме, не активируя его и не имея каких-либо проблем с наложением.

Если вы действительно хотите, чтобы он выглядел как готовый продукт, вы можете иметь фактический виджет, вложенный в div, но невидимый, когда пользовательская мышь находится внутри div, когда пользователь перемещает мышь из div, затем снова установите виджет видимым.

DC

Да, я знал, что при растяжении фоновое изображение будет выглядеть неправильно. Я подумал об этом по дороге домой. Лучшим методом было бы создать сэндвич с виджетами, поместив виджет между двумя 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

person DeveloperChris    schedule 31.01.2011
comment
[1] Использование изображения очень плохо в случае, если размер виджета изменен. Особенно хуже с фоном css, так как он не растягивается. [2] Второй вариант звучит более реалистично. Я бы использовал этот трюк как при изменении размера, так и при перетаскивании. - person Christian; 31.01.2011
comment
смотрите мои дополнения для улучшенной версии и примера - person DeveloperChris; 01.02.2011
comment
Кстати думал о создании визуального дизайнера форм на github. Вот почему я нашел ваш вопрос. если вам интересно, возможно, мы могли бы сотрудничать? - person DeveloperChris; 01.02.2011