Ответ 1
Как он еще не упоминался: jQuery.UI
Что такое хороший интерфейс пользовательского интерфейса высокого уровня для JavaScript?
Мне нужно написать временный графический интерфейс Web для пользовательской серверной системы. В этом случае производительность и масштабируемость не являются проблемами, так как не более 10 человек могут проверять систему одновременно. Также он должен быть PHP или Python (сервер) и JavaScript (клиент) (не может использовать Flex или Silverlight для очень специфических проблем, не связанных с программированием).
Итак, я знаю, что могу использовать YUI или jQuery, но задавался вопросом, есть ли что-то еще более высокоуровневое, что позволит мне написать такой маленький проект за несколько часов работы и покончить с этим. В принципе, я хочу быть как можно более ленивым (это код отбрасывания в любом случае) и выполнить работу как можно меньше времени.
Любые предложения?
Ответы
Ответ 2
Вы можете посмотреть ext.js - он быстро предоставляет множество виджетов GetThingsDone.
Ответ 3
См. также этот вопрос
Это 2016
Вот несколько (старых)
- ampleSDK (интересный подход)
- DojoToolkit и их хороший набор widgets
- jQuery UI
- Cappuccino
- rialto
- Echo
- Простой набор пользовательского интерфейса UKI см. demo
- vaadin (требуется Java)
- jxlib.org
- livepipe.net
- dhtmlx.com
Ответ 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 полимер еще... на основе веб-компонентов:
Ответ 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. Вы также можете использовать те же объекты на сервере и на стороне клиента.
Ответ 15
Отказ от ответственности: я являюсь автором Web Atoms JS
Web Atoms JS была создана для приведения всех концепций Flex, Silverlight и XUL. И каждая из этих технологий использовала больше разметки XML для очень высокого уровня пользовательского интерфейса. Экраны становятся сложными, и визуализация их становится болезненной, когда она продолжает меняться.
С помощью Web Atoms вы будете писать для меньшего количества кода, чем любая другая структура.
Это пример того, что все возможно в Web Atoms JS.
Вот ссылка на документацию. http://webatomsjs.neurospeech.com/docs
Ответ 16
ShieldUI также является хорошей коммерческой платформой.
Ответ 17
Я могу порекомендовать Controls.js с его Tools.
Ответ 18
Sproutcore будет хорошим выбором.
Если вы не знакомы с ним, вы можете обнаружить, что время, требуемое для изучения основ, слишком велико для кода выброса, но как только у вас есть основы, они довольно быстро развиваются с.
Ответ 19
Последние дополнения к списку будут WIJMO и KendoUI.
Ответ 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>© @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>
}
Надеюсь, это поможет кому-то в правильном направлении.