Kalendář

To je samo o sobě opravdu problém, protože datum a čas se dá napsat mnoha rozličnými způsoby. Toto se občas řeší tak, že každý prvek v zadávané hodnotě, má svůj vlastní select i s možnými hodnotami. Například měsíc 1 - 12 (případně jména), nebo hodiny 0-23 a podobně. Druhý vyřešený problém je usnadnění uživateli orientaci v zadávané hodnotě. Přesněji řečeno, uživatel při použití kalendáře má vizuální představu o datu případně času, ví o jaký den v týdnu se jedná, o jaký týden v měsíci a podobně.

JavaScriptový kalendář z knihovny JAK.

<label for="datum">Datum:</label>
<input type="text" id="datum" name="datum" value=""/>

<script type="text/javascript">
        JAK.Calendar.setup("calendar_icon.gif", "[vybrat datum]", {}, "datum");
</script>

Wysiwyg editor

JavaSriptový WYSIWYG html editor z knihovny JAK.

<label for="text">Text:</label>
<textarea id="text" name="text"></textarea>

<script type="text/javascript">
    var formatOpt = [
        {innerHTML:"<h1 style='font-size: 30px;color: #6d675e;'>Nadpis 1</h1>", value:"h1"},
        {innerHTML:"<h2 style='font-size: 25px;'>Nadpis 2</h2>", value:"h2"},
        {innerHTML:"<h3 style='font-size: 20px;'>Nadpis 3</h3>", value:"h3"},
        {innerHTML:"<p style='text-align: justify;'>Odstavec</p>", value:"p"}
    ];

    var controls = [
        {type:"undo",text: ['Zpět']},     // toto je plugin undoredo
        {type:"redo",text: ['Znovu']},     // toto je plugin undoredo
        {type:"separator"},
        {type:"bold",text:"Tučné"},
        {type:"italic",text:"Kurzíva"},
        {type:"underline",text:"Podtržené"},
        {type:"strikethrough",text:"Přeškrtnuté"},
        {type:"separator"},
        {type:"format",text:"Formát", options: formatOpt},
        {type:"separator"},
        {type:"link",text:["Link","Target URL:"]},
        {type:"unlink",text:"Remove Link"},
        {type:"separator"},
        {type:"html",text:"Editovat HTML"}
    ];

    var opts = { controls:controls, imagePath:"/editor-img/" };
    var e = new JAK.Editor("text",opts);
</script>

Galerie obrázků - LightBox

var data = [
    {alt: 'Západ slunce', small: {url: '/img/gallery/tn01.jpg'}, big: {url: '/img/gallery/01.jpg'} },
    {alt: 'Praděd', small: {url: '/img/gallery/tn02.jpg'}, big: {url: '/img/gallery/02.jpg'} },
    {alt: 'Klaustrofobie', small: {url: '/img/gallery/tn03.jpg'}, big: {url: '/img/gallery/03.jpg'} },
    {alt: 'Přehlídka armády', small: {url: '/img/gallery/tn04.jpg'}, big: {url: '/img/gallery/04.jpg'} }
];

opt = {
    useShadow: false,
    galleryId: 'lightBox',
    usePageShader: true,
    zIndex: 5,
    imagePath: '/lightbox-img/shadow-',
    components: {
         strip: JAK.LightBox.Strip.Scrollable,
         navigation: JAK.LightBox.Navigation.Basic,
         anchorage: JAK.LightBox.Anchorage.Fixed,
         main: JAK.LightBox.Main.CenteredScaled,
         description: JAK.LightBox.Description.Basic
    }
};

galerie = new JAK.LightBox(data, opt);

JavaScriptová galerie obrázků LightBox z knihovny JAK.

Závěr

PS