Blog webdeveloperski Patryk yarpo Jar

Menu kontekstowe w dijit z formularzem

Autor wiadomości Lipiec 24, 2011

Widget dijit.Menu jest bardzo przydatny w wielu przypadkach. Można za jego pomocą zbudować rozwijane menu (opierając całość o dijit.MenuBar), można też zrobić menu kontekstowe, pojawiające się, gdy użytkownik kliknie PPM na jakimś węźle DOM (przykładowe zastowanie tego widgetu jako menu kontekstowego pokazałem we wpisie o menu kontekstowym na drzewie).

W tym wpisie pokażę, jak umieścić w takim menu fragment formularza.

Na początek

Zwykłe menu

Przykładowy kod prostego menu. Będzie ono widoczne od razu na stronie. W sumie nic ciekawego, ale zaraz się to zmieni.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.Menu");
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
</head>
<body>
    <ul dojoType="dijit.Menu" id="menu">
        <li dojoType="dijit.MenuItem" onClick="alert('Wybrałeś ' + this.label);">Pozycja 1</li>
        <li dojoType="dijit.MenuItem" onClick="alert('Wybrałeś ' + this.label);">Pozycja 2</li>
    </ul>
</body>
</html>

demo online

Póki co chyba wszystko jest jasne.

Aby móc dodać formularz do menu trzeba najpierw dodać zagnieżdżone menu (ang. submenu). Do tego celu służy specjalny widget `dijit.PopupMenuItem'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.Menu");
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
</head>
<body>
    <ul dojoType="dijit.Menu" id="menu">
        <li dojoType="dijit.MenuItem" onClick="alert('Kliknąłeś ' + this.label);">Pozycja 1</li>
        <li dojoType="dijit.MenuSeparator"></li>
        <li dojoType="dijit.PopupMenuItem"><span>Pozycja 2</span>
            <ul dojoType="dijit.Menu">
                <li dojoType="dijit.MenuItem" onClick="alert('Kliknąłeś ' + this.label);">Pozycja 2.1</li>
                <li dojoType="dijit.MenuItem" onClick="alert('Kliknąłeś ' + this.label);">Pozycja 2.2</li>
            </ul>
        </li>
    </ul>
</body>
</html>

demo online

Z kwestii istotnych warto wiedzieć, że znacznik <span/>obejmujący "Pozycja 2" jest potrzebny. Inaczej widget zostanie nieprawidłowo wyrenderowany. Sama zasada tworzenia zagnieżdżonych menu jest bardzo prosta i przypomina tworzenie zagnieżdżonych list - należy dodawać jedynie odpowiednie niestandardowe atrybuty z informacją o używanym widgecie.

Dodanie formularza w submenu

Wiedząc już, jak się dodaje zagnieżdżone menu (poprzez `PopupMenuItem'), można umieścić w nim inny widget niż tylko dijit.Menu. Np. `dijit.ToolkitDialog'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.Menu");
        dojo.require("dijit.TooltipDialog");
        dojo.require("dijit.form.TextBox");
        dojo.require("dijit.form.Button");
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
</head>
<body>
    <ul dojoType="dijit.Menu" id="menu">
        <li dojoType="dijit.MenuItem" onClick="alert('Kliknąłeś ' + this.label);">Pozycja 1</li>
        <li dojoType="dijit.MenuSeparator"></li>
        <li dojoType="dijit.PopupMenuItem"><span>Pozycja 2</span>
            <ul dojoType="dijit.Menu">
                <li dojoType="dijit.MenuItem" onClick="alert('Kliknąłeś ' + this.label);">Pozycja 2.1</li>
                <li dojoType="dijit.MenuItem" onClick="alert('Kliknąłeś ' + this.label);">Pozycja 2.2</li>
            </ul>
        </li>
        <li dojoType="dijit.MenuSeparator"></li>
        <li dojoType="dijit.PopupMenuItem"><span>Pozycja 3</span>
             <div dojoType="dijit.TooltipDialog">
                <label for="formName">
                    Nowa nazwa:
                </label>
                <input dojoType="dijit.form.TextBox" id="formName" name="formName">
                <button dojoType="dijit.form.Button" type="submit">
                    Save
                </button>
            </div>
        </li>
    </ul>
</body>
</html>

demo online

Jak można znaleźć w dokumentacji "A TooltipDialog can only be opened as a drop down from another widget, usually dijit.form.DropDownButton". Zatem niestety używając tego widgetu nie uda się nam osiągnąć odpowiedniego efektu wizualnego. Poszukajmy zatem dalej :).

Wykorzystanie dijit.layout.ContentPane

Sama idea jest bardzo prosta - zastepujemy jedynie widget `dijit.ToolkitDialog' na `dijit.layout.ContentPane'. ContentPane jest po prostu prostokątem, do którego możemy wrzucić, co tylko chcemy (w wolnym tłumaczeniu nazwy "pojemnik na treść").

<li dojoType="dijit.PopupMenuItem"><span>Pozycja 3</span>
    <div dojoType="dijit.layout.ContentPane">
        <label for="formName">Nowa nazwa:</label>
        <input dojoType="dijit.form.TextBox" id="formName" name="formName">
        <button dojoType="dijit.form.Button" type="submit">Zapisz</button>
    </div>
</li>

demo online

Na powyższym listingu przedstawiłem tylko fragment kodu. Jeśli chcesz zobaczyć całość zobacz do kodu przykładu online.

Inne przykłady:

Oczywiście nadal można takie menu wykorzystać na drzewie dijit.tree. Z resztą, miejsc, gdzie można wykorzystać widget menu jest ta wiele, że nawet wszystkich nie jestem w stanie sobie wyobrazić 🙂

Więcej nt. formularzy dojo możesz przeczytać w osobnym wpisie:

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.