Co to jest dobry Framework UI na bardzo wysokim poziomie dla JavaScript?

Możesz spojrzeć na ext.js - zapewnia wiele widżetów, aby szybko uzyskać Thingsdone.

Zobacz też to pytanie

Jakie są alternatywy dla ExtJS?

It ' s 2016

1. Polimer
2. http://angular-ui.github.io/

Oto kilka (starych)

1. ampleSDK (ciekawe podejście)
2. DojoToolkit i ich ładny zestaw widgetów
3. jQuery UI
4. Cappuccino
5. rialto
6. Echo
7. Simple UI kit UKI Zobacz demo
8. vaadin (wymaga Javy)
9. jxlib.org
10. livepipe.net
11. dhtmlx.com

Ostatnio bawiłem się Cappuccino i uważam, że jest to bardzo prosty i przyjemny framework do pracy.

As 2017*

Jeśli chcesz dać pieniądze:

• Kendo UI
• Wijmo
• ExtJs
• DHTMLX
• Webix
• JQWidgets
• SmartClient
• jQueryEasyUi

Jeśli zdecydujesz się zatrzymać swoje pieniądze z yourself:

• Dojo
• Fundacja
• jQueryUi
• Material-UI
• jonowe
• Semantic-UI

Jeśli celem jest napisanie bardzo bardzo wysokiego poziomu kodu UI, następujące programy generatora kodu są po prostu niesamowite, aby zbudować cały interfejs aplikacji w ciągu kilku minut (dla tych, którzy chcą użyć Bootstrap):

• Bootstrapstudio
• Pingendo

Również biblioteka interfejsu Dojo o nazwie Dijit jest absolutnie znaczna!

ExtJs, Bindownice, YUI . Pierwsze dwa są komercyjne, ale warte swojej ceny.

Sprawdź DHTMLX .

Dhtmlx Toolkit jest kompleksowym zestawem komponentów interfejsu DHTML obsługujących Ajax. Profesjonalnie opracowane grid, treegrid, treeview, tabbar, kalendarz, menu, pasek narzędzi, combobox, windows, przeglądarka elementów, próbnik kolorów i przesyłanie plików umożliwiają programistom tworzenie aplikacji internetowych między przeglądarkami z wysoką interaktywnością i bogatym doświadczeniem użytkownika. Komponenty DHTMLX zapewniają najbardziej kompletny zestaw funkcji i umożliwiają korzystanie z funkcji przypominających pulpit do sieci.

Spośród wszystkich frameworków JS, JQuery i YUI są moimi ulubionymi. Osiągają one wiele tego samego, ale na bardzo różne sposoby.

Za Twoją prośbę (leniwa, łatwa i potężna) zagłosowałbym na JQuery. Jeśli jest to coś, co będzie bardziej długoterminowe i bardziej aplikacja, która jest bardzo gadatliwa i ciężka w kodzie, zagłosowałbym na YUI.

Naprawdę nie sądzę, aby było coś lepszego niż te dwa frameworki. Wybór jest dobry.

Czy coś mi umyka, czy bootstrap defacto idzie do wyboru ?

Również, i raczej fajniejszy, polimer google jeszcze ... na podstawie web components:

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

Spróbowałbym aplikacji.animacja bez js, dużo kontrolek i jest to menedżer okien (ktoś wspomniał Bindows.. nie warto płacić za straszny UI).

Używany w tym edytorze tekstu online

Wydaje mi się, że cappuccino jest mylące i nie chcę uczyć się kolejnego języka związanego z jedną biblioteką.

YUI wydaje się być dobry, podczas gdy Extjs również jest bardzo blisko. Nie ma małej różnicy między YUI i Extjs, chociaż YUI jest wolny ma znacznie większe wsparcie społeczności i jest wspierany przez giganta takiego jak Yahoo. dla cappuccino u będzie musiał spędzić czas na nauce heir Objective-J, kiedy dowiedział się, że nie trzeba pisać jednej linii HTML, CSS i Dom manupulation.Ale jeśli czujesz się dobrze z tym wszystkim, po co spędzać czas na nauce cel-J ? Bindows znowu jest dobrym frameworkiem bardzo podobnym do YUI i Extjs, podoba mi się to, że ma wiele gotowych motywów, które sprawiają, że jest bardziej atrakcyjny i prosty w projektowaniu własnego niestandardowego motywu. Ale powiedzmy 2 lata w dół linii osobiście czuję, że YUI poszłoby znacznie dalej niż wszystkie te.

Wpadłem qooxdoo jakiś czas temu. Nie używałem go, ale przynajmniej dema wyglądają fajnie.

Qooxdoo jest fenomenalny. Możesz to zrobić na urządzeniach mobilnych, internetowych i komputerach stacjonarnych. To abstrakcja z dala od wszystkich html i css. Jest dobrze udokumentowany i OO. Można również używać tych samych obiektów po stronie serwera i klienta.

Http://qooxdoo.org/demos

Zastrzeżenie: jestem autorem Web Atoms js

Web Atoms JS został zbudowany, aby przynieść wszystkie koncepcje Flex, Silverlight i XUL. Każda z tych technologii wykorzystywała więcej znaczników XML do kontroli interfejsu użytkownika na bardzo wysokim poziomie. Ekrany stają się złożone, a wizualizacja ich staje się bolesna, gdy ciągle się zmienia.

Z Web atomami będziesz pisać za mniej kodu niż jakikolwiek inny Framework.

Jest to próbka tego, co wszystko jest możliwe w atomach sieci JS.

Oto link do dokumentacja. http://webatomsjs.neurospeech.com/docs

ShieldUI to również dobre ramy handlowe.

Mogę polecić Sterowanie.js z narzędziami .

Sproutcore byłby dobrym wyborem.

Jeśli nie jesteś z nim zaznajomiony, może się okazać, że czas potrzebny na nauczenie się podstaw jest zbyt długi na wyrzucenie kodu, ale gdy już opanujesz podstawy, możesz go szybko rozwinąć.

Ostatnimi dodatkami do listy będą WIJMO i KendoUI.

Http://www.wijmo.com

Http://www.kendoui.com

Możesz spróbować RedUI , nie jest jeszcze gotowy do produkcji, ale powinien być dobry dla Twojego celu.

Podejście jest inspirowane WPF, opisujesz swój UI z predefiniowanych kontrolek, jak Textbox, Combobox , ale także kilka bardziej skomplikowanych kontrolek, takich jak TreeView lub GridView. W modelu deklarujesz również powiązania danych.

Biblioteka wyrenderuje dla Ciebie okno.

Następnie powiązujesz go z modelem widoku, subskrybujesz zdarzenia, oraz dodać niestandardową logikę obsługującą te zdarzenia (np. na " window.zamknięty " możesz wysłać zaktualizowany model widoku z powrotem na serwer).

Możesz zobaczyć przykłady na http://redui.net/

Możesz również zobaczyć aplikację demo na http://redui.net/mailclientdemo / . To da ci wyobrażenie, co możesz zrobić.

Spróbuj użyć Anijs . Redukuje działania interfejsu wysokiego poziomu do prostych linii

Użyłem JQuery.UI. Niekoniecznie jest to odpowiedź na to pytanie (zwłaszcza, że jest to stary post), ale pomyślałem, że podzielę się tym, co mam, na wypadek, gdyby pomogło to komuś innemu, ponieważ przyszedłem do tego postu szukając sposobu tworzenia interfejsu upuść i przeciągnij.

Należy pamiętać, że jest to dla MVC.

Należy pamiętać, że nie dodano jeszcze żadnej rzeczywistej funkcjonalności, jest to punkt wyjścia, który tworzy interfejs, który umożliwia upuszczanie i przeciąganie items:

Układ:

<!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>

Strona indeksu (zamieniłem indeks domowy na ten kod):

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