Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Страница добавления материалов в модуль доска объявленй
Скрипты

Всем привет! давно нечего не публиковал так как не было времени вот появилась минутка и я решил опубликовать данный материал
Суть скрипта очень проста он открывает страницу добавления материала в модуль доска объявлений
в окошке на той же странице где находится пользователь

Задача была максимально упростить работу со скриптом при этом сохранить все функции стандартной страницы добавления
над чем я долго думал как лучше поступить
с начало пробивал написать свой скрипт для добавления материалов
но столкнулся с проблемой при добавлении картинок
затем по пробивал подгружать страницу в iframe но и тут было много трудностей таких как размер iframe
не как не хотел подгоняться под размер страницы которая в него загружалась
я конечно же писал скрипт который получал размер той страницы и присваивал его iframe но это не сильно помогло
так как при выборе нескольких картинок для добавления страница увеличивалась и у iframe появлялась вертикальная прокрутка
и тогда я решил найти новый вариант и нашел естественно
теперь страницу мы будем подгружать гед запросом это позволит нам сделать всё как надо и сохранить все стандартные функции страницы

Пару слов о скрипте
Скрипт написан по просьбе пользователя на сайте зорнет
Скрипт редактировать не нужно все действия такие как добавления полей или их исключение делаются стандартно через админ панель настройку модуля
адаптация под мобильные телефоны мной не делалась
Перед установкой смотрим ДЕМО

Установка



Для начало зайдём на страницу добавления материала модуля доска объявлений и заменим

Код
$BODY$

на
Код
<span class="plusOb">$BODY$</span>


теперь зайдём в верхнюю часть и вставим туда само окно
Код


<div class="kanavas-body"></div>  
<div class="kanavas-okno">  
<div class="kanavas-fon"><a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);" title="Закрыть окно" style="text-decoration:none; outline:none;"><div class="kanavas-close"></div></a>

<h1>Добавление объявления</h1>
<h5>Все поля с <font color="red" class="manStar">*</font> обязательны к заполнению</h5>
</div>  

<div class="kanavas_pad_body">
<div class="body_pad">
  <style>.form-fields .x-unselectable:hover #uCatsMenu7 {
  display: block;
}

#uCatsMenu7 {
  display: none;
}</style>  
   
<span id="plusOb"></span>

  <script type="text/javascript">
$('#plusOb').load('/board/0-0-0-0-1 .plusOb');
</script>

  </div>  
  </div>  
   
</div>  
   


Теперь подключим его стили в таблицу стилей в самый конец
Код

/*okno*/
.kanavas-body {background: rgba(0,0,0,0.7); width:100%; height:100%; position:fixed; left: 0px; top: 0px; z-index: 9;display:none;}  
  .kanavas-okno {margin-left:-35%;background:#fff; position:absolute; top: 50px; left:50%; z-index: 10; width:70%; height:auto; border-radius:9px; box-shadow: 0 0 10px 1px rgba(0,0,0,0.3); display:none;}  
  .kanavas-fon {background: url("../img/KU273L0WTW.jpg") no-repeat center; background-size: 100%; border-top-left-radius:7px; border-top-right-radius:7px; width:100%; height:100px;}  

.kanavas-fon h1 {
  color: #FFF;
  display: block;
  text-align: left;
  padding: 25px 20px 0;
}
.kanavas-fon h5 {
  color: #FFF;
  display: block;
  text-align: left;
  padding: 0 20px;
}

  .kanavas-close {background:url("../img/close_ajax.png") no-repeat; width:24px; height:24px; float:right; margin:10px 10px 0 0; opacity: 0.5;}  
.kanavas-close:hover {opacity: 1.0; cursor:pointer;}  
.kanavas_pad_body {background:#fff; width:100%; height:auto;}  
.manFlSbm {border: none;background: #1F5B88; border-radius:20px; color:#fff; font-size:14px;top: 40px; text-shadow:0 -1px 0 rgba(0, 0, 0, .2); text-align:center; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); padding:8px 30px; opacity: 0.8;}  
.manFlSbm:hover {opacity: 1.0;}
.body_pad {padding: 25px 55px;}
/****/
/*login*/
div#uidLogButton {display: none;}
div#baseLogForm {display:block !important;}
.email_v {height: 60px;}
.pass_v {height: 60px;margin-top: 18px;}
.ewLabel {position: relative;display: block;text-align: left;line-height: 25px;color: #646464;font-weight: 100;font-size: 14px;margin-bottom: 8px;}
#ewTemporalSession {position: relative;display: block;width: 100%;height: 33px;padding: 20px 0px 5px 0px;}
.label_left {float: left;}
.loginButton {width: 100%;color: #FFF !important;padding: 10px 0px;}
#ewRemindPassword {text-align: center;padding: 15px 0px 15px 0px;;}
/*****/


Ну и конечно же кнопка для вызова окна в нужное место
Код
<?if($ADD_ENTRY_LINK$)?> <a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);">Добавить объявление</a><?endif?>


Теперь нам нужно подключить скрипт который нам и даст возможность загружать картинки
разместить его нужно перед /head на всех страницах или попробуйте добавить его в верхнюю часть сайта у меня там сайт и работает
Код
<script src="/js/foto_ob.js"></script>


Теперь скачиваем архив и заливаем всё к себе на сайт в соответствующие папки

на этом всё

Особености:

Тематика
Доска оявлений
Браузеры
Все последней версии
Адаптация
Не полная
Архив
Всё что нужо для работы скрипта
Размер
13.9Kb

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

waak 02.03.2017 в 17:14
Для тех кому нужна будет адаптация под моб. устройства пишите в мастерской
habib 02.03.2017 в 17:51
Брал себе спасибо )))
waak 02.03.2017 в 17:57
Не за что!

Добавлять комментарии могут только зарегистрированные пользователи, Войдите на сайт под своим именем.