Latest web development tutorials

jQuery UI Beispiel - Menü (Menu)

Im Zusammenspiel mit der Maus und der Tastatur können das Menü Thematisierung navigiert werden.

Weitere Details über die Menükomponenten, die API - Dokumentation Menükomponenten (das Widget - Menü) .

Die Standardfunktion

Bei einer Standard-Konfiguration, deaktivieren Sie die verschachtelte Menüeinträge und Menü. Es besteht aus einer Liste von umgerechnet und addiert Themen und unterstützt Maus und Tastatur-Interaktion. Versuchen Sie, die Cursor-Tasten um das Menü zu navigieren. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI-Menü (Menü) - Die Standardfunktion </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#menu") .menu ();
  });
  </ Script>
  <Style>
  .ui-Menü {width: 150px;}
  </ Style>
</ Head>
<Body>
 
<Ul id = "Menü">
  <Li class = "ui-state-disabled"> <a href="#"> Aberdeen </a> </ li>
  <Li> <a href="#"> Ada </a> </ li>
  <Li> <a href="#"> Adams </a> </ li>
  <Li> <a href="#"> Addyston </a> </ li>
  <Li>
    <a href="#"> Delphi </a>
    <Ul>
      <Li class = "ui-state-disabled"> <a href="#"> Ada </a> </ li>
      <Li> <a href="#"> Saarland </a> </ li>
      <Li> <a href="#"> Salzburg </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Saarland </a> </ li>
  <Li>
    <a href="#"> Salzburg </a>
    <Ul>
      <Li>
        <a href="#"> Delphi </a>
        <Ul>
          <Li> <a href="#"> Ada </a> </ li>
          <Li> <a href="#"> Saarland </a> </ li>
          <Li> <a href="#"> Salzburg </a> </ li>
        </ Ul>
      </ Li>
      <Li>
        <a href="#"> Delphi </a>
        <Ul>
          <Li> <a href="#"> Ada </a> </ li>
          <Li> <a href="#"> Saarland </a> </ li>
          <Li> <a href="#"> Salzburg </a> </ li>
        </ Ul>
      </ Li>
      <Li> <a href="#"> Perch </a> </ li>
    </ Ul>
  </ Li>
  <Li class = "ui-state-disabled"> <a href="#"> Amesville </a> </ li>
</ Ul>
 
 
</ Body>
</ Html>

Symbol

Menü mit einer Standardkonfiguration, die zeigt, wie die Menüs mit Icons zu verwenden. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI-Menü (Menü) - Symbol </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#menu") .menu ();
  });
  </ Script>
  <Style>
  .ui-Menü {width: 150px;}
  </ Style>
</ Head>
<Body>
 
<Ul id = "Menü">
  <Li> <a href="#"> <span class = "ui-ui-Symbol-Symbol-disk"> </ span> speichern </a> </ li>
  <Li> <a href="#"> <span class = "ui-Symbol ui-icon-zoomin"> </ span> Vergrößern </a> </ li>
  <Li> <a href="#"> <span class = "ui-Symbol ui-icon-zoomout"> </ span> refine </a> </ li>
  <Li class = "ui-state-disabled"> <a href="#"> <span class = "ui-ui-Symbol-Symbol-print"> </ span> Drucken ... </a> </ li >
  <Li>
    <a href="#"> spielen </a>
    <Ul>
      <Li> <a href="#"> <span class = "ui-ui-Symbol-Symbol-seek-Start"> </ span> auf einem </a> </ li>
      <Li> <a href="#"> <span class = "ui-ui-Symbol-Symbol-stop"> </ span> Stop </a> </ li>
      <Li> <a href="#"> <span class = "ui-ui-Symbol-Symbol-play"> </ span> spielen </a> </ li>
      <Li> <a href="#"> <span class = "ui-ui-Symbol-Symbol-seek-end"> </ span> weiter </a> </ li>
    </ Ul>
  </ Li>
</ Ul>
 
 
</ Body>
</ Html>