• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: dotbot  
Сообщество uCoz » Архивариус » Корзина » Мануал: стилизация ajax-окон
Мануал: стилизация ajax-окон
Wens
Сообщений: 8
Репутация: 43

Сообщение # 1 | 17:29:40
Стилизация ajax-окон в системе uCoz

В данном мануале я расскажу вам как можно изменять внешний вид ajax-окошек

Итак, приступим:

1. Скачиваем этот архив

  • Из папки "Изображения" все картинки заливаем на сайт строго в папку /images/ajax

  • Файл ajax-win.css заливаем куда хотим, напимер в директорию /css

    2. Устанавливааем

  • Сразу после </head> пишем:

    Code

    <style type="text/css">     
    @import url('ссылка на ajax-win.css') all;     
    </style>



    Вот и всё, 100% будет работать если вы всё правильно сделали и у вас нормальный браузер

  • Все файлы обязательно залейте на свой сайт
  • Вы можете менять картинки на свои (ссылки прописаны в ajax-win.css)
  • Если что-то не получается или вы нашли ошибку - стучим мне в ЛС c пометкой "Стилизация ajax-окон"
  • Должно работать во всех браузерах, даже в IE
  • Возможно, скоро сделаю ещё несколько других стилей

    С Уважением, Wens

  • Сообщение отредактировал Wens - Пятница, 21 Авг 2009, 16:40:23
    Selena
    Сообщений: 15657
    Репутация: 1100

    Сообщение # 2 | 18:00:14
    Сначала проверить надо.

    Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
    Victor
    Сообщений: 1141
    Репутация: 576

    Сообщение # 3 | 18:08:19
    Wens, подключаем jQuery убери, она и так подключена по умолчанию.

    Wens
    Сообщений: 8
    Репутация: 43

    Сообщение # 4 | 18:12:26
    uCoz-XPert, если убрать, то не будет работать
    Скрипты работают на jQ

    Victor
    Сообщений: 1141
    Репутация: 576

    Сообщение # 5 | 18:19:53
    Инструкцию проверил. Работает.
    Одно НО, в админ(юзер)-баре тоже эти стили применяются:
    Прикрепления: 1928432.png(15.3 Kb)

    Сообщение отредактировал uCoz-XPert - Среда, 19 Авг 2009, 18:20:11
    Victor
    Сообщений: 1141
    Репутация: 576

    Сообщение # 6 | 18:20:14
    Quote (Wens)
    если убрать, то не будет работать
    Будет. А если JQ оставить, то может произойти конфликт JQ библиотек.
    Quote (Wens)
    Скрипты работают на jQ
    Я же написал выше что по умолчанию JQ и так подключен. В файле u.js

    Сообщение отредактировал uCoz-XPert - Среда, 19 Авг 2009, 18:21:44
    klimenkо
    Сообщений: 4
    Уровень замечаний:

    Сообщение # 7 | 18:28:09
    Что-бы работало без подключения jQ
    Нужно скрипты размещать после </head>
    Victor
    Сообщений: 1141
    Репутация: 576

    Сообщение # 8 | 18:31:06
    Quote (klimenkо)
    Нужно скрипты размещать после </head>

    Я разместил до. Работает нормально.

    Wens
    Сообщений: 8
    Репутация: 43

    Сообщение # 9 | 18:31:45
    Quote (uCoz-XPert)
    Будет. А если JQ оставить, то может произойти конфликт JQ библиотек.

    uCoz-XPert, да, посмотрел на u.js, там есть jQ, но тогда надо будет размещать скрипты после </head>, иначе, скорее всего, не будет работать

    Quote (uCoz-XPert)
    Одно НО, в админ(юзер)-баре тоже эти стили применяются:

    В окнах и админ баре используются общие классы, которые отвечает за рамку окна
    Исправить врядли получится


    Сообщение отредактировал Wens - Среда, 19 Авг 2009, 18:42:14
    Victor
    Сообщений: 1141
    Репутация: 576

    Сообщение # 10 | 18:36:14
    Quote (Wens)
    надо будет размещать скрипты после </head>, иначе, скорее всего, не будет работать
    Quote (uCoz-XPert)
    Я разместил до. Работает нормально.

    Сообщение отредактировал uCoz-XPert - Среда, 19 Авг 2009, 18:37:05
    djekky
    Сообщений: 122
    Репутация: 111
    Уровень замечаний:

    Сообщение # 11 | 18:42:30
    Wens, стилизация окон отображается во всех браузерах?
    То есть работает ли в IE и старых версиях Оперы, Мозиллы?

    Сообщение отредактировал djekky - Среда, 19 Авг 2009, 18:44:00
    Wens
    Сообщений: 8
    Репутация: 43

    Сообщение # 12 | 18:45:00
    djekky, пока что в трех: Chrome (Safari), Opera, FireFox

    Какие ещё можно добавить?


    Сообщение отредактировал Wens - Среда, 19 Авг 2009, 18:45:40
    djekky
    Сообщений: 122
    Репутация: 111
    Уровень замечаний:

    Сообщение # 13 | 18:46:53
    Wens, к сожалению IE пока тоже браузер, как на счёт него?

    Wens
    Сообщений: 8
    Репутация: 43

    Сообщение # 14 | 18:55:15
    djekky, в IE я не пробовал, а в старых версиях оперы, мазилы работать должно
    PS если не поддерживается, то будет отображаться стандартное окно, как обычно

    Сейчас протестирую как это будет в IE 8 и отпишусь

    Добавлено (19-Авг-2009, 18:55:15)
    ---------------------------------------------
    На мое большое удивление в IE все работает cool
    Только не работает прозрачность окна, ну это нормально для IE biggrin

    добавляю в мануал скрипт:

    <script type="text/javascript">
    $(document).ready(function(){
    if($.browser.msie){$('#ajaxcss').html('<link type="text/css" rel="StyleSheet" href="ссылка на ajax-win.css" />');};
    });
    </script>


    Ну что, тестируем, ищем ошибки, предлагаем варианты улудшения smile


    Сообщение отредактировал Wens - Среда, 19 Авг 2009, 22:20:44
    rsod
    Сообщений: 324
    Репутация: 231

    Сообщение # 15 | 22:58:51
    Quote (Wens)
    <script type="text/javascript">          $(document).ready(function(){          if($.browser.mozilla){$('#ajaxcss').html('<link type="text/css" rel="StyleSheet" href="ссылка на ajax-win.css" />');};          });      </script>      <script type="text/javascript">          $(document).ready(function(){          if($.browser.opera){$('#operaajax').html('<link type="text/css" rel="StyleSheet" href="ссылка на ajax-win.css" />');};          });      </script> <script type="text/javascript">          $(document).ready(function(){          if($.browser.safari){$('#operaajax').html('<link type="text/css" rel="StyleSheet" href="ссылка на ajax-win.css" />');};          });      </script> <script type="text/javascript">   $(document).ready(function(){   if($.browser.msie){$('#ajaxcss').html('<link type="text/css" rel="StyleSheet" href="ссылка на ajax-win.css" />');};   });   </script> <span id="ajaxcss"></span>      <span id="operaajax"></span>

    зачем, зачем всё это?
    Code
    <link type="text/css" rel="StyleSheet" href="ссылка на ajax-win.css" />

    ипотом, если файлы даже и разные, то можно сделать проверку u.кодами

    Zip file! Zip file!
    Сообщество uCoz » Архивариус » Корзина » Мануал: стилизация ajax-окон
    • Страница 1 из 2
    • 1
    • 2
    • »
    Поиск: