[JavaScript] GUI für Webanwendung

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Hanskopf, 2. November 2011 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 2. November 2011
    Zuletzt bearbeitet: 24. Juli 2012
    Hat sich erledigt...

    Hat sich erledigt...
     
  3. 2. November 2011
    AW: GUI für Webanwendung

    also ich denke jQuery UI ist genau das richtige für dich.
     
  4. 2. November 2011
    AW: GUI für Webanwendung

    oder extJS
     
  5. 2. November 2011
    AW: GUI für Webanwendung

    Ist es bei einem der beiden möglich in die Tabs wiederrum die Elemente einzubringen ? Oder nur reinen Text ?

    Würde gerne erreichen dass sich hinter den verschiedenen Tabs Menüs mit buttons/checkboxes usw verbergen und nicht nur Text.

    Könnt ihr mir dazu was sagen ? Sonst arbeite ich mich ein um dann festzustellen dass das garnicht geht
     
  6. 2. November 2011
    AW: GUI für Webanwendung

    Qooxdoo ist mein persoenlicher liebling. ExtJS ist mir zu kommerziell.

    qooxdoo » Demos
     
  7. 2. November 2011
    AW: GUI für Webanwendung

    ernsthaft?
    http://qooxdoo.org/about/developers

    sind beide gleich komerziell wenn man danach geht.

    -------------------------

    ich würde garkein ui-framework nutzen, sondern auf HTML5 setzen.
    da ist alles dabei

    gut, für nen slider musst dir nen fallback für firefox/msie überlegen, sonst seh ich kein problem.

    einfach schritt für schritt vorgehen und sehen was möglich und VOR ALLEM sinnvoll ist.

    ui-frameworks wie extjs oder qooxdoo schieben dir ihre eigenen controls unter.
    = mehr code, längere ladezeiten, mehr speicherverbrauch, lahme ausführungs/reaktionszeiten.

    diese ganzen nachteile wiegen die vermeidlich hübschere ui mmn. bei weitem auf.

    vergleich:
    Spoiler
    html:
    Code:
    <select>
 <option>...</option>
</select>
    jquery-ui
    Code:
    <div class="ui-widget">
 <label>Your preferred programming language: </label>
 <select id="combobox" style="display: none;">
 <option>...</option>
 </select>
 <input class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
 <button class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" type="button" tabindex="-1" title="Show All Items" role="button" aria-disabled="false">
</div>
    qooxdoo
    Code:
    <div tabindex="5" style="z-index:0;position:absolute;outline:none;cursor:default;left:105px;top:184px;width:192px;height:24px;">
 <div qxselectable="off" style="overflow-x:hidden;overflow-y:hidden;position:absolute;z-index:10;-moz-user-select:-moz-none;left:2px;top:2px;width:188px;height:20px;">
 <div style="z-index:0;position:absolute;left:0px;top:0px;width:172px;height:20px;">
 <input type="text" qxselectable="on" spellcheck="false" tabindex="-1" style="border: medium none; padding: 0pt; margin: 0pt; display: block; background: none repeat scroll 0% 0% transparent; outline: medium none; -moz-appearance: none; position: absolute; -moz-user-select: text; resize: none; z-index: 10; color: rgb(0, 0, 0); font-family: 'Segoe UI',Candara; font-size: 12px; line-height: 1.4; left: 4px; top: 2px; width: 164px; height: 17px;">
 <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; visibility: hidden; z-index: 6; position: absolute; color: rgb(203, 200, 205); font-family: 'Segoe UI',Candara; font-size: 12px; line-height: 1.4; left: 4px; top: 2px; width: 164px; height: 17px;">placeholder</div>
 </div>
 <div qxkeepactive="on" style="z-index:0;position:absolute;outline:none;cursor:default;left:172px;top:0px;width:16px;height:20px;"></div>
 </div>
</div>

+ noch mehr code für den <option>...</option> pedant
    extjs
    Code:
    <div id="ext-gen11">
 <div id="ext-gen12" class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" style="width: 160px;">
 <input id="local-states" class="x-form-text x-form-field x-form-focus" type="text" size="20" autocomplete="off" style="width: 135px;">
 <img id="ext-gen13" class="x-form-trigger x-form-arrow-trigger" alt="" src="../../resources/images/default/s.gif">
 </div>
</div>

<div id="ext-gen48" class="x-combo-list-inner" style="width: 158px; height: 300px;">
 <div class="x-combo-list-item">...</div>
</div>
     
  8. 2. November 2011
    AW: GUI für Webanwendung

    Wie Murdoc schon sagt, diese Frameworks sind Riesig und fordern mehr HTML- und CSS-Code.

    HTML5 + Modernizr + yepnopejs

    Oder direkt HTML5-Boilerplate (Hat Modernizr und yepnope mit drin)
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.