发表新帖
发表新帖

What is a good Very-High level UI framework for JavaScript?

后端 未结
关注
22 2045
佛祖请我去吃肉
佛祖请我去吃肉 2020-12-07 17:20

I need to write a temporary Web-based graphical front-end for a custom server system. In this case performance and scalability aren\'t issues, since at most 10 people may ch

相关标签:
22条回答
  • 轮回少年
    2020-12-07 17:41

    I used JQuery.UI. This is not necessarily an answer to this question(Especially since it is an old post), but thought I would share what I have, in case it helps anyone else, as I came to this Post searching for how to create a drop and drag UI.

    Please note that this is for MVC.

    Please note that there is no actual Functionality added to this yet, it is a starting point, which creates a UI that allows drop and drag items:

    Layout:

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

    Index Page(I replaced the Home Index with this code):

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

    Hopefully this can help someone else in the right direction.

    0 讨论(0)
  • Happy的楠姐
    2020-12-07 17:42

    Also Dojo's UI library named Dijit is absolutely considerable!

    0 讨论(0)
  • 悲&欢浪女
    2020-12-07 17:42

    Disclaimer: I am author of Web Atoms JS

    Web Atoms JS was built to bring all concepts of Flex, Silverlight and XUL. And each of these technologies used more of XML markup for very high level UI controls. Screens become complex and visualizing them becomes painful when it keeps on changing.

    With Web Atoms you will write for less code then any of other frameworks.

    This is a Sample of what all things are possible in Web Atoms JS.

    Here is link to documentation. http://webatomsjs.neurospeech.com/docs

    enter image description here

    0 讨论(0)
  • 天命终不由人
    2020-12-07 17:43

    You could look at ext.js - it provides lots of widgets to GetThingsDone quickly.

    0 讨论(0)
  • 逝去的感伤
    2020-12-07 17:44

    YUI seems to be good while Extjs also comes very close. There is little difference between YUI and Extjs, though YUI is free has a much larger community support and is backed by a giant like Yahoo. for cappuccino u will have to spend time learning heir Objective-J, once learnt that you need not write a single line of HTML,CSS and Dom manupulation.But if you are comfortable with all these why spend time learning objective-J ? Bindows again is a good framework very similar to YUI and Extjs, what I like about it is that it has many ready made themes that makes it more attractive and simple to design your own custom theme. But say 2 years down the line I personally feel that YUI would have gone much farther than all these.

    0 讨论(0)
  • 遇见更好的自我
    2020-12-07 17:45

    I would try application.js - less animation fluff, lots of controls and it's a window manager (someone mentioned Bindows.. not worth the money for a terrible UI).

    used in this Online Word Processor

    I find cappuccino confusing, and I don't want to learn yet another language tied to a single library.

    0 讨论(0)
 看不清?
提交回复
热议问题