Desktop (рабочий стол) на jQuery

Опубликовано: 22.09.2012, 22:24

Представляю вам любопытный скрипт: Рабочий стол на jQuery. Из функционала там присутствуют не все возможности обычного десктопа: нету меню пуск (вместо него вверху панель с выпадающим меню), перетаскивания значков с места на место и использования правой кнопки мыши. Чтобы лучше поняли возможности, вот DEMO.

Установка:
Загрузите все файлы из архива в ваш файловый менеджер

Настройка:
Для того, чтобы сделать новое окно:
1. Откройте файл index.html, найдите элемент (сразу после <body>):

Code

и вставьте:

Code

<a class="abs icon" style="left:20px;top:20px;" href="#ID значка">
  <img src="СЫЛКА НА ИКОНКУ" />
  Окошко 1
  </a>

С помощью left и top укажите положение значка на рабочем столе.
2. Далее, после

Code

<div id="ID окна" class="abs window">
  <div class="abs window_inner">
  <div class="window_top">
  <span class="float_left">
  <img src="assets/images/icons/icon_16_computer.png" />
  Название окна
  </span>
  <span class="float_right">
  <a href="#" class="window_min"></a>
  <a href="#" class="window_resize"></a>
  <a href="#icon_dock_computer" class="window_close"></a>
  </span>
  </div>
  <div class="abs window_content">
  <div class="window_aside">
  надпись сбоку
  </div>
  <div class="window_main">
  содержимое окна
  </div>
  </div>
  <div class="abs window_bottom">
  Надпись в низу окна
  </div>
  </div>
  <span class="abs ui-resizable-handle ui-resizable-se"></span>
  </div>

ID окна НЕ должно совпадать с ID значка, которое указывали в шаге 1.
3. Затем (внизу) найдите:

Code

и после этого ставьте:

Code

<li id="ID окна">
  <a href="#ID значка">
  <img src="Ссылка на иконку" />
  Название окна
  </a>
  </li>

ID значка и ID окна указывать тоже самое, что и в шагах 1 и 2.

Перевод на русский by sold93 специально для http://infoscript.ru