我需要为自定义服务器系统编写一个临时的基于 Web 的图形前端。在这种情况下，性能和可扩展性不是问题，因为最多 10 个人可以同时检查系统。它也应该是 PHP 或 Python（服务器）和 JavaScript（客户端）（不能使用 Flex 或 Silverlight 来解决非常具体的非编程相关问题）。
所以我知道我可以使用 YUI 或 jQuery，但想知道是否有更高级的东西可以让我在几个小时内编写这样一个小项目，并完成它。基本上我想尽可能地懒惰（无论如何这都是一次性代码），并在尽可能短的时间内完成工作。
有什么建议吗？
【问题讨论】：
您可以查看ext.js - 它提供了许多快速完成GetThingsDone 的小部件。
【讨论】：
尚未提及：jQuery.UI
【讨论】：
另请参阅此问题
What are alternatives to ExtJS?
现在是 2016 年
这里有几个（旧的）
【讨论】：
我最近一直在使用Cappuccino，发现它是一个非常简单且令人愉快的框架。
【讨论】：
2017 年*
如果你想给钱：
如果您决定自己保管自己的钱：
如果目标是编写非常高级的 UI 代码，那么以下代码生成器程序可以在几分钟内构建您的应用程序的整个 UI（对于那些想要使用 Bootstrap 的人来说）：
【讨论】：
Dojo 的 UI 库 Dijit 也非常可观！
【讨论】：
查看DHTMLX。
DHTMLX Toolkit 是一套全面的支持 Ajax 的 DHTML UI 组件。专业开发的网格、树形网格、树形视图、标签栏、日历、菜单、工具栏、组合框、窗口、项目浏览器、颜色选择器和文件上传器，使开发人员能够构建具有高交互性和丰富用户体验的跨浏览器 Web 应用程序。 DHTMLX 组件提供了最完整的功能集，并允许您将类似桌面的功能引入网络。
【讨论】：
在所有的 JS 框架中，JQuery 和 YUI 是我的最爱。他们完成了很多相同的工作，但方式却截然不同。
对于您的请求（懒惰、简单且功能强大），我会投票给 JQuery。如果这是一个更长期的东西，并且更多的是一个非常冗长和代码繁重的应用程序，我会投票给 YUI。
我真的认为没有什么比这两个框架更好的了。任何一种选择都是不错的选择。
【讨论】：
【讨论】：
我会尝试 application.js - 更少的动画绒毛，很多控件，它是一个窗口管理器（有人提到 Bindows.. 不值得为糟糕的 UI 花钱）。
我发现卡布奇诺令人困惑，我不想再学习与单个库相关的另一种语言。
【讨论】：
YUI 似乎不错，而 Extjs 也非常接近。 YUI 和 Extjs 之间几乎没有区别，尽管 YUI 是免费的，拥有更大的社区支持，并且得到了雅虎这样的巨头的支持。 对于卡布奇诺，你将不得不花时间学习继承 Objective-J，一旦了解到你不需要编写一行 HTML、CSS 和 Dom 操作。但如果你对所有这些都感到满意，为什么还要花时间学习 Objective-J？ Bindows 又是一个很好的框架，与 YUI 和 Extjs 非常相似，我喜欢它的是它有许多现成的主题，这使得设计自己的自定义主题更加有吸引力和简单。 但是说 2 年后，我个人认为 YUI 会比所有这些走得更远。
【讨论】：
我不久前来到qooxdoo。我没用过，但至少演示看起来很酷。
【讨论】：
Qooxdoo 非常出色。你可以用它做移动、网络和桌面。它抽象出所有的 html 和 css。它有据可查且面向对象。您还可以在服务器端和客户端使用相同的对象。
【讨论】：
免责声明：我是 Web Atoms JS 的作者
Web Atoms JS 旨在引入 Flex、Silverlight 和 XUL 的所有概念。这些技术中的每一个都使用了更多的 XML 标记来实现非常高级的 UI 控件。屏幕变得复杂，并且在不断变化时将其可视化变得很痛苦。
使用 Web Atoms，您编写的代码将少于任何其他框架。
这是 Web Atoms JS 中一切皆有可能的示例。
这里是文档的链接。 http://webatomsjs.neurospeech.com/docs
【讨论】：
ShieldUI也是一个不错的商业框架。
【讨论】：
我可以推荐Controls.js 及其Tools。
【讨论】：
Sproutcore 将是一个不错的选择。
如果您不熟悉它，您可能会发现学习基础知识所需的时间对于一次性代码来说太长了，但是一旦您掌握了基础知识，就可以很快地进行开发。
【讨论】：
【讨论】：
你可以试试 RedUI，它还没有准备好投入生产，但它应该对你的目标有好处。
该方法受到 WPF 的启发，您可以使用预定义的控件来描述您的 UI，例如 Textbox、Combobox，以及一些更复杂的控件，例如 TreeView 或 GridView。 在模型中，您还声明了数据绑定。
库将为您呈现一个窗口。
然后将其绑定到视图模型，订阅事件，并添加处理这些事件的自定义逻辑（例如，在“window.close”时，您可以将更新的视图模型发送回服务器）。
您可以在http://redui.net/查看实时示例
您还可以在http://redui.net/mailclientdemo/ 上查看演示应用程序。这将使您了解自己可以做什么。
【讨论】：
尝试使用Anijs。它将高级 UI 操作简化为简单的线条
【讨论】：
我使用了 JQuery.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>© @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>
}
希望这可以帮助其他人朝着正确的方向前进。
【讨论】：