2017-05-25 5 views
0

Ich überprüfe jQuery ui und während der Code funktioniert, wie ich es will, frage ich mich, ob es verkürzt werden könnte. Ich habe versucht, es selbst zu tun, konnte es aber nicht. Ich würde mich über jede Hilfe hier freuen.Wie kann ich diesen jQuery Code verkürzen?

Wie kann ich diesen Code verkürzen?

JQUERY: 

    $(function() { 
     $("#accordion").accordion({ 
      collapsible: true, 
      active: 'none' 
     }); 
    }); 

    $(function() { 
     var icons = { 
      header: "ui-icon ui-icon-plus", 
      activeHeader: "ui-icon ui-icon-minus" 
     }; 
     $("#accordion").accordion({ 
      icons: icons 
     }); 
     $("#toggle").button().on("click", function() { 
      if ($("#accordion").accordion("option", "icons")) { 
       $("#accordion").accordion("option", "icons", null); 
      } else { 
       $("#accordion").accordion("option", "icons", icons); 
      } 
     }); 
    }); 

    $("#tabs").tabs({ 
     disabled: [2, 3] 
    }); 

    $("#tabs").tabs({ 
     hide: { 
      effect: "drop", 
      duration: 750 
     } 
    }); 

    $("#tabs").tabs({ 
     show: { 
      effect: "drop", 
      duration: 750 
     } 
    }); 

    $("#tabs").tabs({ 
     heightStyle: "auto" 
    }); 
+0

können Sie den HTML-Code und die Funktionalität des Codes hinzufügen. es ist gut, ein Geigenbeispiel zu haben –

+0

Sie müssen nur Ihren Code in eine '$ (function() {});'. Also gibt es eine Sache. – Twisty

+0

Wenn Sie Optionen für '.tabs()' zuweisen, verwenden Sie den gleichen Selektor, also die gleichen Elemente, fügen Sie alles in eins ein. Es sei denn, Sie planen, 3 verschiedene Registerkarten zu erstellen. – Twisty

Antwort

0

Hier finden Sie alle Artikel, die ich in den Kommentaren vorgeschlagen:

https://jsfiddle.net/Twisty/ywx0yrub/

JavaScript

$(function() { 
    var icons = { 
    header: "ui-icon ui-icon-plus", 
    activeHeader: "ui-icon ui-icon-minus" 
    }; 
    $("#accordion").accordion({ 
    collapsible: true, 
    active: 'none', 
    icons: icons 
    }); 
    $("#toggle").button().click(function() { 
    if ($("#accordion").accordion("option", "icons")) { 
     $("#accordion").accordion("option", "icons", null); 
    } else { 
     $("#accordion").accordion("option", "icons", icons); 
    } 
    }); 
    $("#tabs").tabs({ 
    disabled: [2, 3], 
    hide: { 
     effect: "drop", 
     duration: 750 
    }, 
    show: { 
     effect: "drop", 
     duration: 750 
    }, 
    heightStyle: "auto" 
    }); 
}); 
  1. Wrap den gesamten Code in einer
  2. Definieren Sie alle Teile Ihrer Initialisierung in einer einzelnen Anweisung
  3. Da Ihre Schaltfläche statisch ist, müssen Sie .on() nicht verwenden. Das ist nicht falsch, aber Sie können es kürzer machen, indem Sie einfach .click() verwenden.

Hoffe, dass hilft.

+0

Danke, das war sehr hilfreich – Zevothan