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

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

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

ExtJs, Окна, Юй. Первые два являются коммерческими, но стоят своих денег.

Недавно я играл с Капучино и считаю, что это очень простой и приятный фреймворк.

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

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

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

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

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

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

Проверьте DHTMLX.

DHTMLX Toolkit is a comprehensive set of Ajax-enabled DHTML UI components. Professionally developed grid, treegrid, treeview, tabbar, calendar, menu, toolbar, combobox, windows, items browser, color picker and file uploader empower developers to build cross-browser web applications with high interactivity and rich user experience. DHTMLX components provide the most complete set of features and allow you to bring desktop-like functionality to the web.

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

Из всех фреймворков JS мне больше всего нравятся JQuery и YUI. Они достигают того же, но очень разными способами.

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

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

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

См. Также этот вопрос

Какие есть альтернативы ExtJS?

2016 год

1. Полимер
2. http://angular-ui.github.io/

Вот несколько (старых)

1. ampleSDK (интересный подход)
2. DojoToolkit и их красивый набор виджеты
3. jQuery UI
4. Капучино
5. риальто
6. Эхо
7. Простой комплект пользовательского интерфейса UKI см. демонстрация
8. ваадин (требуется Java)
9. jxlib.org
10. livepipe.net
11. dhtmlx.com

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

http://qooxdoo.org/demos

Последними дополнениями к списку будут WIJMO и KendoUI.

http://www.wijmo.com

http://www.kendoui.com

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

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

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

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

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

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

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

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

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

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

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

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

как 2017 *

если хочешь дать деньги:

• Кендо UI
• Wijmo
• ExtJs
• DHTMLX
• Webix
• JQWidgets
• SmartClient
• jQueryEasyUi

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

• Додзё
• фундамент
• jQueryUi
• Материал-UI
• Ионный
• Семантический интерфейс

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

• Bootstrapstudio
• Пингендо

Я что-то упустил, разве бутстрап не является выбором deacto?

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

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

ShieldUI - также хороший коммерческий фреймворк.

Могу порекомендовать Controls.js с его Инструменты.

Я использовал 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>

Индексная страница (я заменил Домашний индекс этим кодом):

@{
    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>
}

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