Подтвердить что ты не робот

Что такое хороший интерфейс пользовательского интерфейса высокого уровня для JavaScript?

Мне нужно написать временный графический интерфейс Web для пользовательской серверной системы. В этом случае производительность и масштабируемость не являются проблемами, так как не более 10 человек могут проверять систему одновременно. Также он должен быть PHP или Python (сервер) и JavaScript (клиент) (не может использовать Flex или Silverlight для очень специфических проблем, не связанных с программированием).

Итак, я знаю, что могу использовать YUI или jQuery, но задавался вопросом, есть ли что-то еще более высокоуровневое, что позволит мне написать такой маленький проект за несколько часов работы и покончить с этим. В принципе, я хочу быть как можно более ленивым (это код отбрасывания в любом случае) и выполнить работу как можно меньше времени.

Любые предложения?

4b9b3361

ОТВЕТЫ

Ответ 1

Как он еще не упоминался: jQuery.UI

Ответ 2

Вы можете посмотреть ext.js - он быстро предоставляет множество виджетов GetThingsDone.

Ответ 4

Недавно я играл с Cappuccino и нашел, что это очень простая и приятная структура для работы.

Ответ 5

Также Dojo библиотека пользовательского интерфейса с именем Dijit абсолютно значительна!

Ответ 6

как 2017 *

если вы хотите дать деньги:

если вы решите сохранить свои деньги с собой:

Если цель состоит в написании кода очень высокого уровня UI, следующие программы генерации кода просто потрясают, чтобы создать весь пользовательский интерфейс приложения за считанные минуты (для тех, кто хочет использовать Bootstrap):

Ответ 7

ExtJs, Bindows, YUI. Первые два являются коммерческими, но стоят денег.

Ответ 8

Отметьте DHTMLX.

DHTMLX Toolkit - это полный набор компонентов интерфейса DHTML с поддержкой Ajax. Профессионально разработанная сетка, древовидная структура, древовидная структура, вкладка, календарь, меню, панель инструментов, поле со списком, окна, элементы браузера, подборщик цветов и загрузчик файлов позволяют разработчикам создавать кросс-браузерные веб-приложения с высокой интерактивностью и богатым пользовательским интерфейсом. Компоненты DHTMLX предоставляют наиболее полный набор функций и позволяют вам привносить в Интернет функциональность, похожую на рабочий стол.

Ответ 9

Из всех JS-фреймворков JQuery и YUI являются моими фаворитами. Они выполняют много общего, но по-разному.

По вашему запросу (ленивому, легкому и мощному) я проголосую за JQuery. Если это то, что будет более длительным и более сложным и тяжелым, я бы проголосовал за YUI.

Я действительно не думаю, что есть что-то, что лучше, чем эти две рамки. Любой выбор - хороший.

Ответ 10

Мне что-то не хватает, не bootstrap дефактол идти на выбор?

Кроме того, и, что более круто, google полимер еще... на основе веб-компонентов:

https://www.polymer-project.org/1.0/

Ответ 11

Я бы попробовал application.js - меньше анимации пуха, много элементов управления и это оконный менеджер (кто-то упомянул Bindows.. не стоит денег за ужасный интерфейс).

используемый в этом Онлайн-текстовый процессор

Я считаю, что капучино запутано, и я не хочу изучать еще один язык, связанный с одной библиотекой.

Ответ 12

YUI, похоже, хорош, в то время как Extjs также очень близок. Существует мало различий между YUI и Extjs, хотя YUI является бесплатным, имеет гораздо большую поддержку сообщества и поддерживается гигантом вроде Yahoo. для cappuccino u вам придется потратить время на изучение наследника Objective-J, когда-то узнав, что вам не нужно писать одну строку HTML, CSS и Dom manupulation. Но если вам комфортно все это, зачем тратить время на изучение цели? Bindows снова является хорошей структурой, очень похожей на YUI и Extjs, что мне нравится в том, что у нее много готовых тем, что делает ее более привлекательной и простой в разработке вашей собственной темы. Но скажите, что через 2 года я лично считаю, что YUI пошел бы намного дальше, чем все эти.

Ответ 13

Я пришел qooxdoo некоторое время назад. Я не использовал его, но, по крайней мере, демо выглядят круто.

Ответ 14

Qooxdoo феноменально. Вы можете делать с ним мобильные, веб-и настольные компьютеры. Он абстрагирует все html и css. Это хорошо документировано и OO. Вы также можете использовать те же объекты на сервере и на стороне клиента.

http://qooxdoo.org/demos

Ответ 15

Отказ от ответственности: я являюсь автором Web Atoms JS

Web Atoms JS была создана для приведения всех концепций Flex, Silverlight и XUL. И каждая из этих технологий использовала больше разметки XML для очень высокого уровня пользовательского интерфейса. Экраны становятся сложными, и визуализация их становится болезненной, когда она продолжает меняться.

С помощью Web Atoms вы будете писать для меньшего количества кода, чем любая другая структура.

Это пример того, что все возможно в Web Atoms JS.

Вот ссылка на документацию. http://webatomsjs.neurospeech.com/docs

enter image description here

Ответ 16

ShieldUI также является хорошей коммерческой платформой.

Ответ 17

Я могу порекомендовать Controls.js с его Tools.

Ответ 18

Sproutcore будет хорошим выбором.

Если вы не знакомы с ним, вы можете обнаружить, что время, требуемое для изучения основ, слишком велико для кода выброса, но как только у вас есть основы, они довольно быстро развиваются с.

Ответ 20

Вы можете попробовать RedUI, он еще не готов к выпуску, но это должно быть хорошо для вашей цели.

Подход основан на WPF, вы описываете свой пользовательский интерфейс из предопределенных элементов управления, например Текстовое поле, Combobox, но также и более сложные элементы управления, такие как TreeView или GridView. В модели вы также объявляете привязки данных.

Библиотека отобразит для вас окно.

Затем вы привязываете его к модели представления, подписываетесь на события и добавляете настраиваемую логику, которая обрабатывает эти события (например, после "window.closed" вы можете отправить обновленную модель представления обратно на сервер).

Вы можете увидеть живые примеры в http://redui.net/

Вы также можете увидеть демонстрационное приложение на http://redui.net/mailclientdemo/. Это даст вам представление о том, что вы можете сделать.

Ответ 21

Попробуйте использовать Anijs. Это уменьшает действия пользовательского интерфейса высокого уровня до простых строк

Ответ 22

Я использовал JQuery.UI. Это не обязательно ответ на этот вопрос (тем более, что это старый пост), но думал, что я поделюсь тем, что у меня есть, в случае, если это поможет кому-то еще, поскольку я пришел в этот пост, чтобы узнать, как создать перетаскивание UI.

Обратите внимание, что это для MVC.

Обратите внимание на, что до сих пор не добавлена ​​действительная функциональность, это начальная точка, которая создает пользовательский интерфейс, который позволяет перетаскивать элементы:

Разметка:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
    ul.listRoles {
        width: 300px;
        height: auto;
        padding: 5px;
        margin: 5px;
        list-style-type: none;
        border-radius: 5px;
        min-height: 70px;
    }

        ul.listRoles li {
            padding: 5px;
            margin: 10px;
            background-color: #ffff99;
            cursor: pointer;
            border: 1px solid Black;
            border-radius: 5px;
        }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function () {
        $("#listDenyRoles, #listAllowRoles, #listAllowMoreRoles").sortable({
            connectWith: ".listRoles"
        }).disableSelection();
    });

    function submitNewRoles() {
        //Generate List of new allow roles
        var outputList = $("#listAllowRoles li").map(function () { return $(this).html(); }).get().join(',');
        $("#GrantRoles").val(outputList);
        $("#formAssignRoles").submit();
    }
</script>
</head>
<body>
<div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    }
</body>
</html>

Страница индекса (я заменил Home Index на этот код):

@{
    ViewBag.Title = "Home Page";
}

<p>
    To GRANT a user a role, click and drag a role from the left Red box to the right Green box.<br />
    To DENY a user a role, click and drag a role from the right Green box to the left Red box.
</p>

@using (Html.BeginForm("AssignRoles", "UserAdmin", FormMethod.Post, new { id = "formAssignRoles" }))
{

    String[] AllRoles = ViewBag.AllRoles;
    String[] AllowRoles = ViewBag.AllowRoles;

    if (AllRoles == null) { AllRoles = new String[] { "Test1","Test2","Test3","Test4", "Test5", "Test6", "Test7", "Test8", "Test9", "Test10", "Test11", "Test12", "Test13" }; }
    if (AllowRoles == null) { AllowRoles = new String[] { }; }

    @Html.ValidationSummary(true)
    <div class="jumbotron">
        <fieldset>
            <legend>Drag and Drop Roles as required;</legend>
            @Html.Hidden("Username", "Username")
            @Html.Hidden("GrantRoles", "")

            <table>
                <tr>
                    <th style="text-align: center">
                        Deny Roles
                    </th>
                    <th style="text-align: center">
                        Allow Roles
                    </th>
                </tr>
                <tr>
                    <td style="vertical-align: top">
                        <ul id="listDenyRoles" class="listRoles" style="background-color: #cc0000;">
                            @foreach (String role in AllRoles)
                            {
                                if (!AllowRoles.Contains(role))
                                {

                                    <li>@role</li>
                                }
                            }
                        </ul>
                    </td>
                    <td style="vertical-align: top">

                        <ul id="listAllowRoles" class="listRoles" style="background-color: #00cc00;">
                            @foreach (String hasRole in AllowRoles)
                            {
                                <li>@hasRole</li>
                            }
                        </ul>
                    </td>
                    <td style="vertical-align: top">

                        <ul id="listAllowMoreRoles" class="listRoles" style="background-color: #000000;">
                            @foreach (String hasRole in AllowRoles)
                            {
                                <li>@hasRole</li>
                            }
                        </ul>
                    </td>
                </tr>
            </table>
            <p><input type="button" onClick="submitNewRoles()" value="Assign Roles" /></p>
        </fieldset>


    </div>
}

Надеюсь, это поможет кому-то в правильном направлении.