<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>В лабиринте извилин &#187; plugin</title>
	<atom:link href="http://www.charnad.com/blog/tag/plugin/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.charnad.com</link>
	<description>Блог-центр им. CharnaD</description>
	<lastBuildDate>Wed, 18 Jan 2012 14:52:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Symfony: иерархический URL</title>
		<link>http://www.charnad.com/blog/symfony-hierarcial-url/</link>
		<comments>http://www.charnad.com/blog/symfony-hierarcial-url/#comments</comments>
		<pubDate>Wed, 15 Sep 2010 12:04:17 +0000</pubDate>
		<dc:creator>CharnaD</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Программирование]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[routing]]></category>
		<category><![CDATA[symfony]]></category>

		<guid isPermaLink="false">http://www.charnad.com/?p=1202</guid>
		<description><![CDATA[Наверняка многие имеют некие иерархические данные в своем проекте, будь то категории с подкатегориями, страницы с подстраницами и все такое прочее. Как подобные объекты выводятся пользователю? Обычно с помощью роута типа /category/1, или /page/28, где число - это id объекта, или даже /page/delivery, где используется slug. Но все это не отражает иерархичность наших данных. Иногда [...]]]></description>
			<content:encoded><![CDATA[<p><img class="oppic" src="http://www.charnad.com/blog/wp-content/uploads/pictures/symfony_logo.gif" alt="" />Наверняка многие имеют некие иерархические данные в своем проекте, будь то категории с подкатегориями, страницы с подстраницами и все такое прочее. Как подобные объекты выводятся пользователю? Обычно с помощью роута типа /category/1, или /page/28, где число - это id объекта, или даже /page/delivery, где используется slug. Но все это не отражает иерархичность наших данных. Иногда же хочется /page/delivery/small-items и /page/delivery/large-items. Никто не мешает сделать дополнительный роут с двумя слагами, но ведь их может быть не два, а три, и не три, а пять.<br />
<span id="more-1202"></span></p>
<p>Сразу оговорюсь, речь опять пойдет о плагине. Всю функциональность проекта я стараюсь реализовывать в плагинах, если есть хоть малейший намек на то, что это может потребоваться где-то еще. В конкретном случае модуль для статических страниц (в схеме: заголовок, текст, слаг, метаполя). И вот важный момент, для плагинов можно создать файл PLUGINNAMEConfiguration.class.php. Нам это пригодится тем, что мы будем создавать роуты на лету, начиная как раз с этого файла.</p>
<p>Обычно я убираю названия плагинов/модулей из листингов, но в данном случае ради наглядности и простоты понимания я их оставлю. Плагин называется wePages, модуль wePages_frontend. И вот значит что мы будем делать в конфигурации:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> initialize<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wePages_frontend'</span><span style="color: #339933;">,</span> sfConfig<span style="color: #339933;">::</span><span style="color: #004000;">get</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'sf_enabled_modules'</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">dispatcher</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">connect</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'routing.load_configuration'</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wePagesRouting'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'listenToRoutingLoadConfigurationEvent'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Если наш модуль числится в списке подключенных, то подключаем listener по имени listenToRoutingLoadConfigurationEvent из файла wePagesRouting к событию routing.load_configuration. Проще говоря, когда загрузится конфигурация роутов будет вызвана наша функция.
</p>
<p>Создадим файл /lib/routing/wePagesRouting.class.php, куда поместим нашу функцию.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">class</span> wePagesRouting <span style="color: #009900;">&#123;</span>
&nbsp;
  <span style="color: #009933; font-style: italic;">/**
   * Listens to the routing.load_configuration event.
   *
   * @param sfEvent An sfEvent instance
   * @static
   */</span>
  static <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> listenToRoutingLoadConfigurationEvent<span style="color: #009900;">&#40;</span>sfEvent <span style="color: #000088;">$event</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000088;">$r</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$event</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getSubject</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// Узнаем максимальную глубину дерева</span>
    <span style="color: #000088;">$maxlvl</span> <span style="color: #339933;">=</span> Doctrine_Query<span style="color: #339933;">::</span><span style="color: #004000;">create</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span>
              <span style="color: #004000;">select</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'MAX(level) as maxlvl'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span>
              <span style="color: #004000;">from</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wePages'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span> 
              <span style="color: #004000;">execute</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span>
              <span style="color: #004000;">getFirst</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span>
              <span style="color: #004000;">getMaxlvl</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// В конфигурации мы можем указать префикс для роута, </span>
    <span style="color: #666666; font-style: italic;">// например '/page', начинаться же он должен со слеша, </span>
    <span style="color: #666666; font-style: italic;">// что мы и проверяем</span>
    <span style="color: #666666; font-style: italic;">// prefix must have '/' </span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">trim</span><span style="color: #009900;">&#40;</span>sfConfig<span style="color: #339933;">::</span><span style="color: #004000;">get</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'app_we_pages_plugin_route_prefix'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000088;">$route_pattern</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'/'</span><span style="color: #339933;">.</span><span style="color: #990000;">trim</span><span style="color: #009900;">&#40;</span> sfConfig<span style="color: #339933;">::</span><span style="color: #004000;">get</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'app_we_pages_plugin_route_prefix'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'/'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000088;">$route_pattern</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// Здесь мы создаем строчку, на соответствие которой в роутинге </span>
    <span style="color: #666666; font-style: italic;">// будет проверятся URL, тут-то и кроется вся магия. </span>
    <span style="color: #666666; font-style: italic;">// Мы создаем роут с количеством слагов равным максимальной </span>
    <span style="color: #666666; font-style: italic;">// глубине дерева, чтобы охватить все страницы, а в качестве </span>
    <span style="color: #666666; font-style: italic;">// значения по умолчанию ставим false, чтобы роут срабатывал </span>
    <span style="color: #666666; font-style: italic;">// и на меньшем количестве слагов</span>
    <span style="color: #000088;">$defaults</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$i</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #000088;">$i</span> <span style="color: #339933;">&lt;=</span> <span style="color: #000088;">$maxlvl</span><span style="color: #339933;">;</span> <span style="color: #000088;">$i</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000088;">$route_pattern</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'/:slug'</span><span style="color: #339933;">.</span><span style="color: #000088;">$i</span><span style="color: #339933;">;</span>
      <span style="color: #000088;">$defaults</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'slug'</span><span style="color: #339933;">.</span><span style="color: #000088;">$i</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// осталось теперь только подключить роут к уже загруженным, </span>
    <span style="color: #666666; font-style: italic;">// важно чтобы он был первым</span>
    <span style="color: #666666; font-style: italic;">// preprend our routes</span>
    <span style="color: #000088;">$route</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> wePagesRoute<span style="color: #009900;">&#40;</span>
        <span style="color: #000088;">$route_pattern</span><span style="color: #339933;">,</span> 
        <span style="color: #990000;">array_merge</span><span style="color: #009900;">&#40;</span> 
            <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'module'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'wePages_frontend'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'action'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'show'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> 
            <span style="color: #000088;">$defaults</span> 
        <span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000088;">$r</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">prependRoute</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wePages_frontend'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$route</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Надеюсь, что в комментариях я обьяснил достаточно подробно что мы делаем. Создали роут, который охватывает все страницы сразу, с большим и маленьким количеством слагов.</p>
<p>Обратите внимание, что мы создали объет не sfRoute, а wePagesRoute. Этот класс лежит в соседнем файле wePagesRoute.class.php. Нам ведь надо проверять довольно специфические условия, поэтому стандартный класс не подходит.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">class</span> wePagesRoute <span style="color: #000000; font-weight: bold;">extends</span> sfRoute <span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">// функция проверяет подходит ли данный роут под указанный URL</span>
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> matchesUrl<span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #339933;">,</span> <span style="color: #000088;">$context</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">// если шаблон роута не совпадает - дальше даже не смотрим</span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">false</span> <span style="color: #339933;">===</span> <span style="color: #000088;">$parameters</span> <span style="color: #339933;">=</span> parent<span style="color: #339933;">::</span><span style="color: #004000;">matchesUrl</span><span style="color: #009900;">&#40;</span> <span style="color: #990000;">rtrim</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'/'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> <span style="color: #000088;">$context</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #b1b100;">return</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #666666; font-style: italic;">// преобразуем наши сгенерированные слаги в массив, </span>
    <span style="color: #666666; font-style: italic;">// где ключи - это глубина элемента в дереве,</span>
    <span style="color: #666666; font-style: italic;">// а значения - сами слаги.</span>
    <span style="color: #666666; font-style: italic;">// почему так? у нас же рекурсивный роут и начинается </span>
    <span style="color: #666666; font-style: italic;">// с верхнего уровня, который имеет level = 0</span>
    <span style="color: #666666; font-style: italic;">// соответственно следующие слаги имеют level = 1,2,3..</span>
    <span style="color: #666666; font-style: italic;">// make slug1, slug2.. into array [0] =&gt; 'slug1', [1] =&gt; 'slug2'</span>
    <span style="color: #000088;">$i</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
    <span style="color: #000088;">$pages</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">isset</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$parameters</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'slug'</span><span style="color: #339933;">.</span><span style="color: #000088;">$i</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #990000;">strlen</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">trim</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$parameters</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'slug'</span><span style="color: #339933;">.</span><span style="color: #000088;">$i</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000088;">$pages</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$i</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$parameters</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'slug'</span><span style="color: #339933;">.</span><span style="color: #000088;">$i</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
      <span style="color: #000088;">$i</span><span style="color: #339933;">++;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// если выяснилось, что слагов не указано - бросаем это дело</span>
    <span style="color: #666666; font-style: italic;">// If we dont have any slugs - we dont want this anymore</span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">empty</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$pages</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #b1b100;">return</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #666666; font-style: italic;">// Второй важный момент</span>
    <span style="color: #666666; font-style: italic;">// Мы берем слаги и уровни, и ищем страницы подходящие под условия. </span>
    <span style="color: #666666; font-style: italic;">// Данный способ не работает, если slug не уникальны.</span>
    <span style="color: #666666; font-style: italic;">// Groupby объединяет элементы с одинаковым уровнем</span>
    <span style="color: #666666; font-style: italic;">// Get pages with these slugs and levels</span>
    <span style="color: #000088;">$data</span> <span style="color: #339933;">=</span> Doctrine_Query<span style="color: #339933;">::</span><span style="color: #004000;">create</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">-&gt;</span><span style="color: #004000;">from</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wePages'</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">-&gt;</span><span style="color: #004000;">andWhereIn</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'slug'</span><span style="color: #339933;">,</span> <span style="color: #990000;">array_values</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$pages</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">-&gt;</span><span style="color: #004000;">andWhereIn</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'level'</span><span style="color: #339933;">,</span> <span style="color: #990000;">array_keys</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$pages</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">-&gt;</span><span style="color: #004000;">orderBy</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'level ASC, lft ASC'</span><span style="color: #009900;">&#41;</span>
        <span style="color: #666666; font-style: italic;">// this group by removes entries with same level</span>
        <span style="color: #339933;">-&gt;</span><span style="color: #004000;">groupBy</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'level'</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">-&gt;</span><span style="color: #004000;">execute</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// теперь внимательно смотрим, если нашли страниц меньше, </span>
    <span style="color: #666666; font-style: italic;">// чем было указано слагов то URL не совпадает с иерархией в БД, </span>
    <span style="color: #666666; font-style: italic;">// а значит, извините, но вы не по адресу.</span>
    <span style="color: #666666; font-style: italic;">// искали 3 слага - надо найти 3 страницы, и чтобы их level </span>
    <span style="color: #666666; font-style: italic;">// были равны 0,1,2 и не повторялись</span>
    <span style="color: #666666; font-style: italic;">// проблемы начнутся, если слаги могут совпадать, </span>
    <span style="color: #666666; font-style: italic;">// но другого быстрого и простого способа проверить я не придумал</span>
    <span style="color: #666666; font-style: italic;">// If some url parts dont fit - dont want this anymore</span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">count</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$data</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;</span> <span style="color: #990000;">count</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$pages</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #b1b100;">return</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// если мы не указали в конфигурации префикс </span>
    <span style="color: #666666; font-style: italic;">// и страницы вызываются, как www.site.com/page1</span>
    <span style="color: #666666; font-style: italic;">// то этот роут будет выполнятся довольно часто, </span>
    <span style="color: #666666; font-style: italic;">// поэтому раз уж мы выполнили поиск страниц</span>
    <span style="color: #666666; font-style: italic;">// было бы глупо не передать уже найденный id в метод show,</span>
    <span style="color: #666666; font-style: italic;">// или что там у вас для показа</span>
    <span style="color: #000088;">$parameters</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'page_id'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$data</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getLast</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">getId</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #b1b100;">return</span> <span style="color: #000088;">$parameters</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span></pre></div></div>

</p>
<p>У меня этот метод прекрасно заработал, хотя и не является идеальным решением. Если я хочу создать страницы /team/men, /team/women, то мне придется создавать и страницу /team, и она будет открываться, хотя я, например, хотел бы чтобы она редиректила на /team/men. То есть надо было бы создавать тип страниц "редирект". Что порядком костыльно. Так же, вероятно, будут проблемы с link_to и url_for. Стоит написать свой хелпер для генерации урлов.</p>
<p>Что еще можно сделать? Можно при создании страницы указывать URL напрямую, и хранить его в БД. И точно так же в роуте проверять не соответствие слагов и уровней, а просто искать по полю url. Позволяет обойти проблему с /team/men, хотя и не очень красиво, страница /team, будет выдавать 404. Хотя как я понимаю, проблему с link_to оно все равно не решит.</p>
<p>Все описанные способы являются экспериментальными, где-то может вылезти проблема о которой я не догадывался. Так что воспринимайте это как концепцию, а если вы найдете более удачный способ и напишете мне - я буду благодарен. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.charnad.com/blog/symfony-hierarcial-url/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Модальное окно на jQuery blockUI</title>
		<link>http://www.charnad.com/blog/modalnoe-okno-na-jquery-blockui/</link>
		<comments>http://www.charnad.com/blog/modalnoe-okno-na-jquery-blockui/#comments</comments>
		<pubDate>Thu, 04 Feb 2010 18:53:35 +0000</pubDate>
		<dc:creator>CharnaD</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[blockUI]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[модальное окно]]></category>

		<guid isPermaLink="false">http://www.charnad.com/?p=930</guid>
		<description><![CDATA[Создание модального диалога с помощью jquery плагина blockUI.]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.charnad.com/blog/wp-content/uploads/pictures/blockui/blockui-modal.png" style="float: left; margin-right: 10px;">Я уже писал про создание модальных окон на jQuery с помощью Simplemodal, на этот раз я решил попробовать другой плагин и нашел для себя blockUI. Он потребует jQuery версии не ниже 1.2.3. Итак приступим.<span id="more-930"></span></p>
<p>Данные плагина:</p>
<ul>
<li>название: blockUI v2</li>
<li>размер: 15,6 кб без сжатия</li>
<li><a href="http://www.malsup.com/jquery/block/">сайт плагина</a>, <a href="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31">скачать</a>, <a href="http://www.malsup.com/jquery/block/#demos">демо</a></li>
</ul>
<p>На сайте разработчика он выглядит так:<br />
<img class="size-medium wp-image-79" src="http://www.charnad.com/blog/wp-content/uploads/pictures/blockui/blockui-demo.png" alt="" /></p>
<p>Для себя я подобрал определенные настройки, которые делают окна красивее. Во-первых, я хотел, чтобы модальное окно располагалось по центру экрана, а по умолчанию оно находится чуть левее. Во-вторых, я хотел сделать его похожим на модальные окна и дилалоги в Windows.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$.<span style="color: #660066;">blockUI</span>.<span style="color: #660066;">defaults</span>.<span style="color: #660066;">css</span>.<span style="color: #660066;">border</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'0px'</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//убираем серую границу</span>
$.<span style="color: #660066;">blockUI</span>.<span style="color: #660066;">defaults</span>.<span style="color: #660066;">fadeIn</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">100</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">//ускоряем появление</span>
$.<span style="color: #660066;">blockUI</span>.<span style="color: #660066;">defaults</span>.<span style="color: #660066;">fadeOut</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">100</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//и исчезновение</span>
$.<span style="color: #660066;">blockUI</span>.<span style="color: #660066;">defaults</span>.<span style="color: #660066;">css</span>.<span style="color: #660066;">left</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'40%'</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//окно будет в центре</span></pre></div></div>

<p>Этот код нужно вставить в страницу после подключения плагина. Параметр left:40% зависит от ширины окна, в моем случае оно 275 пикселей.</p>
<p>Что же сделать, чтобы окно выглядело как в Windows? Я конечно не мастер верстки, но результат мне вполне подходит. Сначала делаем макет окна и даем ему стили.</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;modal_dialog&quot;</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">&quot;display:none; cursor: default&quot;</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;dialog&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;dialog_title_bar&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;dialog_caption&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>www.charnad.com<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;rotes_kreuz&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
   <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;dialog_pane&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Наше модальное окошко<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">&quot;margin-top: 10px;&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
     <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;form</span> <span style="color: #000066;">action</span>=<span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #000066;">method</span>=<span style="color: #ff0000;">&quot;POST&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
       <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;input</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;button&quot;</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;yes&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;Да&quot;</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;dialog_button&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
       <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;input</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;button&quot;</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;no&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;Нет&quot;</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;close_dialog dialog_button&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
     <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/form<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
 <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Почему display: none? Потому что плагин автоматически переключит видимость. Теперь CSS:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.dialog</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">default</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#000000</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.dialog</span> form <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">/* Контейнер с заголовком */</span>
<span style="color: #6666ff;">.dialog</span> <span style="color: #6666ff;">.dialog_title_bar</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">17px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">dialog-caption-bg.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">/* Стиль текста заголовка */</span>
<span style="color: #6666ff;">.dialog</span> <span style="color: #6666ff;">.dialog_title_bar</span> <span style="color: #6666ff;">.dialog_caption</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">9pt</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">/* Панель диалога */</span>
<span style="color: #6666ff;">.dialog</span> <span style="color: #6666ff;">.dialog_pane</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> buttonface<span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10%</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10%</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">/* Кнопки диалога */</span>
<span style="color: #6666ff;">.dialog</span> <span style="color: #6666ff;">.dialog_button</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">80px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">25px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">/* Красный крест, закрывающий окно */</span>
<span style="color: #6666ff;">.dialog</span> <span style="color: #6666ff;">.rotes_kreuz</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">rotes_kreuz.png</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">28px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">pointer</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Пути к картинкам, конечно же, поставьте свои. Сами картинки можно взять: <a href="http://www.charnad.com/blog/wp-content/uploads/pictures/blockui/dialog-caption-bg.png">фон заголовка</a>, <a href="http://www.charnad.com/blog/wp-content/uploads/pictures/blockui/rotes_kreuz.png">крест</a>.</p>
<p>Теперь Javascript, чтобы все у нас прыгало и бегало.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">//По этим кнопкам модальное окно закрывается</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.rotes_kreuz, .close_dialog'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $.<span style="color: #660066;">unblockUI</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">//Эта кнопка будет вызывать наше окно</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#show_modal'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $.<span style="color: #660066;">blockUI</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>message<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#modal_dialog'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> css<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">'275px'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">//По кнопке &quot;Да&quot; будет отправляться форма </span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#modal_dialog #yes'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#modal_dialog form'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">submit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Можно скачать:[filebase:file:file=3:tpl=simple] или посмотреть прямо здесь.<br />
<input type="button" id="show_modal" value="Показать модальное окно">
<script type="text/javascript" src="http://www.charnad.com/files/blockui-modal-demo/jquery.blockUI.js"></script><script type="text/javascript">$.blockUI.defaults.css.border = '0px';$.blockUI.defaults.fadeIn = 100;$.blockUI.defaults.fadeOut = 100;$.blockUI.defaults.css.left = '40%';$(document).ready(function() {$('.rotes_kreuz, .close_dialog').click(function() {$.unblockUI();return false;});$('#show_modal').click(function() {$.blockUI({message: $('#modal_dialog'), css: {width: '275px'}});});$('#modal_dialog #yes').click(function() {alert('Да!');});});</script></p>
<style type="text/css">.dialog {cursor: default;border: 1px solid #000000;}.dialog form {margin: 0px;}.dialog .dialog_title_bar {height: 17px;padding: 1px;background-image: url(http://www.charnad.com/files/blockui-modal-demo/dialog-caption-bg.png) ;}.dialog .dialog_title_bar .dialog_caption {color: black;font-family: sans-serif;font-size: 9pt;text-align: left;padding-left: 5px;padding-top: 1px;}.dialog .dialog_pane {background: buttonface;text-align: center;padding-left: 10%;padding-right: 10%;padding-top: 10px;padding-bottom: 10px;}.dialog .dialog_button {width: 80px;height: 25px;}.dialog .rotes_kreuz {background-image: url(http://www.charnad.com/files/blockui-modal-demo/rotes_kreuz.png);width: 28px;height: 15px;position: absolute;right: 3px;top: 3px;float: right;display: block;cursor: pointer;}</style>
<div id="modal_dialog" style="display:none; cursor: default" class="dialog">
<div class="dialog_title_bar">
<div class="dialog_caption">www.charnad.com</div>
<div class="rotes_kreuz"></div>
</div>
<div class="dialog_pane">
<div>Наше модальное окошко</div>
<div style="margin-top: 10px;">
<form action="" method="POST">
<input type="button" id="yes" value="Да" class="dialog_button"/>
<input type="button" id="no" value="Нет" class="close_dialog dialog_button" /></form>
</div>
</div>
</div>
<p>При желании, вы легко можете добавлять поля в форму диалога. У этого плагина есть еще одна интересная черта - оповещения типа Growl (оповещение вверху справа), о котором я надеюсь написать в следующий раз.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.charnad.com/blog/modalnoe-okno-na-jquery-blockui/feed/</wfw:commentRss>
		<slash:comments>36</slash:comments>
		</item>
	</channel>
</rss>

