Главная » 2012 » Сентябрь » 21 » Desktop (рабочий стол) на jQuery (Javascript)
21.09.2012, 00:34

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




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

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

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

и вставьте:
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
<div class="abs" id="bar_bottom">
  <a class="float_left" href="#" id="show_desktop" title="Свернуть все окна">
  <img src="assets/images/icons/icon_22_desktop.png" />
  </a>
  <ul id="dock">

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

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

Перевод на русский by sold93 специально для http://infoscript.ru
Материал взят с сайта infoscript.ru
Теги: Скачать Desktop (рабочий стол) на jQuery
Скачать "Desktop (рабочий стол) на jQuery"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: htmldrive.net
Категория: JavaScript's | Просмотров: 3862 | Добавил: sold93 | Рейтинг: 5.0/5 |
Теги: jQuery, (рабочий, стол), Desktop, На
Всего комментариев: 15
1 2 »
0  
1 Sini26   (21.09.2012 01:35) [Материал]
Аватар пользователя
очень круто smile

0  
2 -=WaMpIr=-   (21.09.2012 12:53) [Материал]
Аватар пользователя
Не плохо, ждём вторую версию.

0  
3 sold93 -Infoscript Team-  (21.09.2012 19:57) [Материал]
Аватар пользователя
wacko вторую? ......а хотя..

0  
4 -=WaMpIr=-   (21.09.2012 20:40) [Материал]
Аватар пользователя
Ну да. Без верхней панели, но в тоже время без пуска (что-то необычное), перетаскивание ярлыков на "печеньках" и т.п.

0  
5 sold93 -Infoscript Team-  (21.09.2012 20:52) [Материал]
Аватар пользователя
ну делал то не я (я нашел на англоязычном сайте и переводил на русский все, что можно было + инструкции по настройке делал сам, т.к. там ее не было). а вообще была мысль 7софтовскую панель стилизовать под это и поставить. да и попробовать на страницу юкоз влепить (не пытался даже)

+1  
6 7soft -Infoscript Team-  (25.09.2012 14:41) [Материал]
Аватар пользователя
Когда я начинал делать сайт, мне очень хотелось сделать что-то вроде вебтопа (по-моему, это даже заметно). Когда доделаю его (а когда-нибудь это всё-таки произойдёт), может быть займусь веб-десктопом biggrin
Вообще сделать что-нибудь вроде CloudMe, но с более красивым интерфейсом, было бы неполохо happy

0  
7 sold93 -Infoscript Team-  (25.09.2012 17:25) [Материал]
Аватар пользователя
biggrin ну если честно, пока я первый раз не зашел к тебе на сайт, я думал, что он там стоит

+1  
8 Сай_22 -Infoscript Team-  (26.09.2012 12:37) [Материал]
Аватар пользователя
А за такое и наказать могу biggrin

0  
9 sold93 -Infoscript Team-  (26.09.2012 13:46) [Материал]
Аватар пользователя
biggrin не смог удержаться

+1  
10 sold93 -Infoscript Team-  (13.10.2012 23:03) [Материал]
Аватар пользователя
happy готовится к выпуску новая версия. уже понял как подключить доступ к некоторым модулям, правда пока в режиме чтения (без комментирования).
На страницу юкоза ввинтить не удалось (остается статической страницей, т.к. CSS почему-то через "Редактор страниц" непролезает).

0  
11 MaSTerGuiTar -Infoscript Team-  (14.10.2012 15:00) [Материал]
Аватар пользователя
На сайте источнике ещё много чего прикольного есть) Надо лишь всё переводить)

1-6 7-10
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]