AJAX с cl-closure-template. Часть 2.

Предыдущее сообщение

Вообще-то, я тут планировал рассказать про организацию редактируемых списков в стиле github, но посреди недели совершенно случайно наткнулся на, как мне кажется, очень красивое приложение. Например, мне очень понравились плавающие панельки, настолько, что я захотел добавить их в свое основное приложение.

Тут хотел бы обратить внимание, что подобной красоты нельзя добиваться с помощью тем jquery UI, при чём, это принципиальный момент. jquery UI в некоторых случаях модифицирует оригинальную разметку, добавляя к ней несколько своих элементов, в других вообще её никак не изменяет, полагаясь полностью на использование CSS. Но для создания подобных красивых вещей необходимо создавать достаточно сложную разметку фактически ещё в момент генерации страницы. Таким образом нельзя на сервере создать каркас, а потом доработать его с помощью jquery UI до подобного уровня. Как бы факт, что приложения на базе jquery UI не хватает элегантности.

Вот, теперь я хочу иметь возможность создавать подобные панельки простым и эффективным способом, ведь ручное создание подобной разметки для каждой панели будет весьма трудоёмким. С помощью cl-closure-template проблема решается тривиально.

Сначала нужен шаблона для каркаса панели:

{template panel}
   <table class="panel">
       <tbody>
           <tr>
               <td class="TL"></td>
               <td class="TM">
                   <span class="TML">{$title |noAutoescape}</span>
                   {if $close}
                       <div class="TRx"></div>
                   {/if}
               </td>
               <td class="TR"></td>
           </tr>

           <tr>
               <td class="ML"></td>
               <td class="MM">{$body |noAutoescape}</td>
               <td class="MR"></td>
           </tr>

           <tr>
               <td class="BL"></td>
               <td class="BM"></td>
               <td class="BR"></td>
           </tr>
       </tbody>
   </table>
{/template}

Данный шаблон принимает три параметра:

• close - признак того, надо ли создавать кнопку для закрытия панели.
• title - заголовок панели, в данном параметре можно передать не только текст, но и вообще произвольную разметку
• body - разметка для основного содержимое панели

CSS для данного шаблона можно посмотреть здесь (.panel). В оригинальном варианте автор использовал разметку на базе элементов div, но в этом случае требуется доработка панели после загрузки с помощью JavaScript-напильника, поэтому я выбрал вариант разметки на базе table.

В предыдущем сообщении я ввёл шаблон editable-text и с помощью него создавал пару простейших элементов управления. Использовался он следующим образом:

{call editable-text data="$name" /}

Теперь, поместить результат работы этого шаблоны в красивую панельку можно следующим образом:

{call panel}
   {param title: 'Name' /}
   {param close: true /}
   {param body}
       {call editable-text data="$name" /}
   {/param}
{/call}

Из чего видно, что результат вызова шаблона можно использовать как параметр для другого шаблона. Теперь можно не особо напрягаясь плодить подобные панельки в неограниченных колличествах :)

Продолжение следует.