середу, 3 липня 2013 р.

Створення HTML-спойлерів

На багатьох форумах, порталах, блогах використовуються спойлери для приховування частини тексту, яку не хотілося б виносити в основний текст. Туди, наприклад, можна заховати код програм, фото тощо.

Наведена функція дозволяє згенерувати спойлери для власних потреб:
function GetSpoilerTag(aCaption, aText: string): string;
begin
  if (Trim(aText) <> '') then
    Result := Concat(
                   '<td class="msgBody">',
                     '<table width="95&#37;" border="1" bordercolor="gray" bgcolor="#85ACE3" cellspacing="0" cellpadding="2">',
                       '<tr>',
                         '<td>',
                           '<span style="font-family:monospace;padding:1px;cursor:pointer;background-color:#DDECFE;border:1px solid #gray;txt-align:center;" ',
                             'onclick="var el=this.parentNode.parentNode.parentNode.rows[1]; el.style.display=el.style.display==''none''?'''':''none'';this.innerHTML=this.innerHTML==''+''?''-'':''+'';">+</span> ',
                           aCaption,
                         '</td>',
                       '</tr>',
                       '<tr style="display:none">',
                         '<td bgcolor="#E8E8E8">',
                           aText,
                         '</td>',
                      '</tr>',
                    '</table>',
                   '</td>');
end;

В результаті роботи функції отримаємо щось подібне:

+ Some Caption
select name 
from employee e  
join (select department_id, max(salary) as max_salary 
/*
Comment 1
*/
            from employee e2 
         group by department_id) d
  on d.department_id=e.department_id
--Comment 2
where e.salary = d.max_salary

Можна створити же одну функцію, що буде аналогічна за оформленням, але без спойлера. Інколи потрібно показати шматок якогось коду, оформленого відповідним стилем. Весь код можна заховати під спойлер:

function GetSrcTag(aCaption, aText: string): string;
begin
  if (Trim(aText) <> '') then
    Result := Concat(
                     '<table width="95&#37;" border="1" bordercolor="gray" bgcolor="#85ACE3" cellspacing="0" cellpadding="2">',
                       '<tr>',
                         '<td>',
                           aCaption,
                         '</td>',
                       '</tr>',
                       '<tr>',
                         '<td bgcolor="#E8E8E8">',
                           '<pre>',
                             aText,
                           '</pre>',
                         '</td>',
                      '</tr>',
                    '</table>');
end;

Результат роботи:

Some Caption
select name 
from employee e  
join (select department_id, max(salary) as max_salary 
/*
Comment 1
*/
            from employee e2 
         group by department_id) d
  on d.department_id=e.department_id
--Comment 2
where e.salary = d.max_salary

Для виведення тексту програм варто цей текст взяти в тег <pre> і виконати підсвічування синтаксису.

Немає коментарів :

Дописати коментар