Плагин для jQuery: Панель управления Office 2007

Хотите, что бы меню Вашего сайта выглядело как в Microsoft Office 2007?

Теперь нет ничего проще - используйте плагин для jQuery - jquery-officebar.Пример использования:

Подключите в свой файл jQuery:

<script type="text/javascript" src="js/jquery.js"></script>

Подключите плагин:

<script type="text/javascript" src="js/jquery.officebar.js"></script>

Подключите файл css, с помощью этого файла настраиваются sin'ы:

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ribbon.css" />



Сама структура меню создается с помощью списков <ul>:

<div id="testRibbon" class="officebar">

<ul>

<li class="current">

<a href="#" rel="home">Home</a>

<ul>

<li>

<span>Clipboard</span>

<div class="button split">

<a href="#" rel="paste">

<img src="images/paste32.png" alt="" /><span>Paste</span>

</a>

<div>

<ul>

<li class="menutitle">Paste options</li>

<li><a href="#"><img src="images/paste16.gif" alt="" />Paste</a></li>

<li><a href="#">Paste special...</a></li>

<li class="separator"><a href="#"><img src="images/link16.gif" alt="" />Paste link</a></li>

<li class="menutitle">Clipboard options</li>

<li><a href="#">Clear clipboard</a></li>

<li><a href="#"><img src="images/pasteall16.gif" alt="" />View clipboard content</a></li>

<li><a href="#">Another</a></li>

</ul>

</div>

</div>

<div class="button">

<a href="#" rel="textbutton">Plain text button</a>

</div>

<div class="button list">

<ul>

<li><a href="#"><img src="images/copy16.gif" alt="" /></a></li>

<li><a href="#"><img src="images/cut16.gif" alt="" /></a></li>

<li><a href="#"><img src="images/copyformat16.gif" alt="" /></a></li>

</ul>

</div>

</li>

</ul>

</li>

</ul>

</div> Выполните команду: $("#testRibbon").officebar();