Question

我需要为自定义服务器系统编写一个基于Web的临时图形前端。在这种情况下，性能和可扩展性不是问题，因为最多10个人可以同时检查系统。它也应该是PHP或Python（服务器）＆amp; JavaScript（客户端）（不能将Flex或Silverlight用于非特定的非编程相关问题）。

所以我知道我可以使用YUI或jQuery，但是想知道是否有更高级别的内容可以让我在几个小时的工作中编写这样一个小项目，并完成它。基本上我想尽可能地懒惰（无论如何这都是丢失代码）并在尽可能短的时间内完成工作。

有什么建议吗？

Answer 1

您可以查看ext.js - 它可以快速为GetThingsDone提供大量小部件。

Answer 2

尚未提及：jQuery.UI

Answer 3

另见这个问题

What are alternatives to ExtJS?

这是2016年

Polymer
http://angular-ui.github.io/

这是一些（旧的）

ampleSDK（有趣的方法）
DojoToolkit和他们精彩的widgets
jQuery UI
Cappuccino
rialto
Echo
简单的用户界面工具包UKI请参阅demo
vaadin（需要Java）
jxlib.org
livepipe.net
dhtmlx.com

Answer 4

我最近一直在玩Cappuccino，发现它是一个非常简单易用的框架。

Answer 5

2017年*

如果你想给钱：

如果你决定自己存钱：

如果目标是编写非常高级别的UI代码，以下代码生成器程序在几分钟内构建应用程序的整个UI（对于想要使用Bootstrap的人）来说是非常棒的：< / p>

Answer 6

Dojo的名为Dijit的UI库也非常可观！

Answer 7

ExtJs，Bindows，YUI。前两个是商业性的，但物有所值。

Answer 8

查看DHTMLX。

DHTMLX Toolkit是一套全面的支持Ajax的DHTML UI组件。专业开发的网格，treegrid，treeview，tabbar，日历，菜单，工具栏，组合框，窗口，项目浏览器，颜色选择器和文件上传器使开发人员能够构建具有高交互性和丰富用户体验的跨浏览器Web应用程序。 DHTMLX组件提供了最完整的功能集，允许您将类似桌面的功能引入Web。

Answer 9

我是否遗漏了某些东西，不是bootstrap事实上的选择？

此外，相当凉爽的谷歌聚合物......基于网络组件：

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

Answer 10

在所有JS框架中，JQuery和YUI是我的最爱。他们以非常不同的方式完成了很多相同的事情。

对于你的请求（懒惰，简单和强大），我会投票给JQuery。如果这是一个更长期的东西，更多的是一个非常冗长和代码繁重的应用程序，我会投票给YUI。

我真的不认为那里有比这两个框架更好的东西。两种选择都是好的。

Answer 11

我会尝试使用application.js - 减少动画绒毛，控制很多，而且它是一个窗口管理器（有人提到Bindows ..不值得用于可怕的用户界面）。

用于此Online Word Processor

我发现卡布奇诺令人困惑，我不想学习另一种与单一图书馆相关的语言。

Answer 12

我可以推荐Controls.js及其Tools。

Answer 13

ShieldUI也是一个很好的商业框架。

Answer 14

免责声明：我是Web Atoms JS的作者

Web Atoms JS旨在实现Flex，Silverlight和XUL的所有概念。这些技术中的每一种都使用了更多的XML标记来实现非常高级的UI控件。屏幕变得复杂，当它不断变化时，它们的可视化变得痛苦。

使用Web Atoms，您将编写更少的代码，然后编写任何其他框架。

这是Web Atoms JS中所有可能的内容示例。

这是文档的链接。 http://webatomsjs.neurospeech.com/docs

enter image description here

Answer 15

Qooxdoo非常出色。您可以使用它来执行移动，Web和桌面。它抽象出所有的html和css。它有详细记录和OO。您也可以在服务器端和客户端使用相同的对象。

http://qooxdoo.org/demos

Answer 16

我前一段时间来过qooxdoo。我没有用它，但至少演示看起来很酷。

Answer 17

YUI似乎很好，而Extjs也非常接近。 YUI和Extjs之间没有什么区别，虽然YUI是免费的，有更大的社区支持，并得到像雅虎这样的巨头的支持。对于卡布奇诺你将不得不花时间学习继承人Objective-J，一旦得知你不需要写一行HTML，CSS和Dom manupulation。但如果你对所有这些都感到满意，为什么要花时间学习Objective-J？ Bindows再次是一个非常类似于YUI和Extjs的好框架，我喜欢它的是它有许多现成的主题，使得设计自己的自定义主题更具吸引力和简单。但是说2年后，我个人觉得YUI会比所有这些都要远得多。

Answer 18

列表的最新成员将是WIJMO和KendoUI。

http://www.wijmo.com

http://www.kendoui.com

Answer 19

您可以尝试 RedUI ，尚未准备好投放，但它应该对您的目标有利。

该方法受到WPF的启发，您可以使用预定义的控件来描述您的UI，例如 Textbox ， Combobox ，还有一些更复杂的控件，例如 TreeView < / strong>或 GridView 。在模型中，您还声明了数据绑定。

图书馆将为您呈现一个窗口。

然后将它绑定到视图模型，订阅事件，并添加处理这些事件的自定义逻辑（例如，在“window.closed”上，您可以将更新的视图模型发送回服务器）。

您可以在http://redui.net/
查看实时示例
您还可以在http://redui.net/mailclientdemo/查看演示应用程序。这将让您了解自己可以做些什么。

Answer 20

尝试使用Anijs。它将高级UI操作简化为简单的行

Answer 21

Sproutcore将是一个不错的选择。

如果您对此不熟悉，您可能会发现学习基础知识所需的时间对于丢失的代码来说太长了，但是一旦掌握了基础知识，就可以很快开发出来。

Answer 22

我使用了JQuery.UI。这不一定是这个问题的答案（特别是因为它是一个旧帖子），但我想我会分享我所拥有的，以防它帮助其他人，因为我来到这个帖子搜索如何创建一个拖放和拖动UI。

请注意，这是针对MVC的。

请注意尚未添加任何实际的功能，它是一个起点，它创建了一个允许删除和拖动项目的UI：

布局：

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

希望这可以帮助其他人朝着正确的方向前进。

什么是JavaScript的非常高级UI框架？

22 个答案: