==b-widget

===Описание
Виджетный блок, используемый сервисом в рамках виджетного API либо для выделения отдельных блоков в «псевдо-виджеты»

{{TOC}}

===Использование в HTML

%%(html)
<div class="b-widget"
     onmouseout="this.className=this.className.replace(' b-widget-over', '')"
     onmouseover="this.className+=' b-widget-over'">
    <table class="b-widget-head">
    <tr>
        <td class="b-widget-head-l"><b><i></i></b></td>
        <td class="b-widget-title">
            <!--
                TODO: В заголовке может быть иконка и заголовок может быть ссылкой.
                А ещё он может быть серым, как нарисовано для тизера над поисковой строкой.
                В HTML это всё уже реализовано.
            -->
            <div>
                <span>Заголовок</span>
            </div>
        </td>
        <td class="b-widget-control b-widget-control-setup">
            <a href="" onclick="return false"><b><i></i></b></a>
        </td>

        <td class="b-widget-control b-widget-control-close">
            <a href="" onclick="return false"><b><i></i></b></a>
        </td>
        <td class="b-widget-head-r"><b><i></i></b></td>
    </tr>
    </table>

    <table class="b-widget-frame">
    <tr>
        <!-- левый верхний уголок тени -->
        <td><i class="b-widget-lt"><i></i></i></td>
        <td></td>
        <!-- правый верхний уголок тени -->
        <td><i class="b-widget-rt"><i></i></i></td>
    </tr>
    <tr>
        <!-- левая сторона тени -->
        <td class="b-widget-l"></td>
        <td width="100%">
            <div class="b-widget-body">
                <img class="b-widget-bg" src="http://img.yandex.net/i/widget/widget-bg.png" alt="" />
                <div class="b-widget-data">
                    <!-- тело виджета -->
                    <p>Тело виджета.</p>
                    <!-- / тело виджета -->
                </div>
            </div>
        </td>
        <!-- правая сторона тени -->
        <td class="b-widget-r"></td>
    </tr>
    <tr>
        <!-- левый нижний уголок тени -->
        <td><i class="b-widget-lb"><i></i></i></td>
        <td></td>
        <!-- правый нижний уголок тени -->
        <td><i class="b-widget-rb"><i></i></i></td>
    </tr>
    </table>
</div>
%%
