Print модального окна точнее его содержимого

Обсуждаются вопросы использования плагинов для jQuery, созданных сторонними разработчиками.

Модераторы: TRAHOMOTO, tuareg

Print модального окна точнее его содержимого

Сообщение CrashX » 11 ноя 2010, 12:45

связка jquery + tools.overlay


Код: выделить все
/**
   * Создание модального окна
   * загрузка данных хранящихся в ссылке с rel='#overlay'
   */
$(document).ready(function(){ 
  $("a[rel^='#overlay']").overlay({
    mask: {
      color: '#fff',
      loadSpeed: 200,
      opacity: 0.5
    },
    effect: 'apple',
    closeOnClick: false,
    onBeforeLoad: function() {
      // grab wrapper element inside content
      var wrap = this.getOverlay().find("#modalbox");
      // load the page specified in the trigger
      wrap.load(this.getTrigger().attr("href"));
    }
  });
});
/**
   * Печать страницы
   *  с rel='#print'
   */
$(document).ready(function() {
  $("a[rel^='#print']").click(function() { 
    window.print();
    return false;
  });
});




код данных с кнопкой для печати
Код: выделить все
<div id='title'><h2>Новости</h2></div>
<div id='content' valign='top'><div id='container'>
  <div id='bar'>{bar}</div>
  <div class='title'><h4 id='4'><a href='http://extreme.ru/news/SubAll/print-4-novost_2.html' title='Новость 2'>Новость 2</a></h4></div>
  <div class='content'>Новость Содержание дата 2</div>
  <div class='legend'> 
    <span class='left'><a rel='#overlay' href='http://extreme.ru/news/SubAll/print-4-novost_2.html' title='Печать' target='_blank'>Печать</a> | <a href='' title='Источник' target='_blank'>Источник</a> | <a href='http://extreme.ru/users/4/index.html' title='Автор'>crashx</a> |   Кликов: 16</span>
    <span class='right'>15 сентября 2010 15:40</span>
  </div>
</div>



код станицы загружаемой в модальное окно


Код: выделить все
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Expires" content="Mon, 03 Jan 2000 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate">
<meta http-equiv="Last-Modified" content="Thu, 11 Nov 2010 08:41:33 GMT">
<meta http-equiv="Reply-to" content="info@extreme-studio.ru">
<meta name="title" content="] X-Site [ :: Новости" >
<meta name="keywords" content="X-Site, ][-Site">
<meta name="generator" content="X-Site CMS version 1.00 - Copyright 2005-2010 by eXtreme Studio">
<meta name="resource-type" content="document">
<meta name="document-state" content="dynamic">
<meta name="distribution" content="global">
<meta name="robots" content="all">
<meta name="revisit" content="7 days">
<meta name="revisit-after" content="7 days">
<meta name="owner" content="http://extreme.ru/">
<meta name="home_url" content="http://extreme.ru/">
<meta name="verify-v1" content="yQwd1S1IlXfCzSwyMMI7ZVNKaxLy/857xuNcgGVoqXw=" />
<meta name="yandex-verification" content="7e5f0bc45f01d267" />
<meta name="webmoney.attestation.label" content="webmoney attestation label#3FBC2A48-0C86-4DB6-9DEF-778F56D7CC0A">
<link rel="alternate" type="application/rss+xml" title="Press Releases RSS Feed" href="http://extreme.ru/index.html?x=rss">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == "undefined") {
    document.write(unescape('%3Cscript src="http://extreme.ru/core/jscript/jquery.js" type="text/javascript"%3E%3C/script%3E'));
}
</script>
<script language="Javascript" type="text/javascript" src="http://extreme.ru/core/jscript/jquery.pngFix.js"></script>
<script language="Javascript" type="text/javascript" src="http://extreme.ru/core/jscript/jquery.overlay.js"></script>
<script language="Javascript" type="text/javascript" src="http://extreme.ru/core/jscript/jquery.overlay.apple.js"></script>
<script language="Javascript" type="text/javascript" src="http://extreme.ru/core/jscript/jquery.form.js"></script>
<script language="Javascript" type="text/javascript" src="http://extreme.ru/core/jscript/jquery.engine.js"></script>
<link rel="stylesheet" type="text/css" href="http://extreme.ru/core/jscript/jquery.overlay.css">
<link rel="stylesheet" type="text/css" href="http://extreme.ru/templates/default/print.css">
<title>] X-Site [ :: Новости</title>
</head>
<body>
  <table border='0' cellspacing='0' cellpadding='0' width='100%' class='fullscreen' summary='general'>
    <tr>
      <td align='center' valign='top'>
        <div id='title'><h2>Новости</h2></div>
<div id='content' valign='top'><div id='container'>
  <div id='bar'>{bar}</div>
  <div class='title'><h4 id='4'><a href='#print' title='Новость 2'>Новость 2</a></h4></div>
  <div class='content'>Новость Содержание дата 2</div>
  <div class='legend'> 
    <span class='left'><a rel='#print' href='#print' title='Печать'>Печать</a> | <a href='' title='Источник' target='_blank'>Источник</a> | <a href='http://extreme.ru/users/4/index.html' title='Автор'>crashx</a> |   Кликов: 16</span>
    <span class='right'>15 сентября 2010 15:40</span>
  </div>
</div>
      </td>
    </tr>
    <tr>
      <td height='33px' colspan='3' align='center' valign='bottom'>
        <div align='center' class='copyright'>&copy; <a href='http://www.eXterme-Studio.ru/'  title='eXtreme Studio: Design & Innovation Development' target='_blank'>eXtreme Studio</a> &#8482; 2005-2010, Все права сохранены.&nbsp;Работает под управлением: <b>X-Site CMS</b></div>
        <div align='center' class='copyright'>Время генерации страницы: 0.165 сек.</div>
      </td></tr>
  </table>
 
  <div class="overlay" id="overlay">
    <div class="modalbox" id="modalbox"></div>
  </div>
</body>
</html>



при открытии в отдельном окне не в модальном все норм печатает

при нажатии в модальном окне нет действия

при добавлении оnClick='javascript:window.print();return false;' печатает основную страницу с модальным окном а нужно
что бы при открытии в отдельно окне печать была возможна, и при открытии в модальном печатались данные из модельного окна...
Последний раз редактировалось CrashX 12 ноя 2010, 06:25, всего редактировалось 1 раз.
остаться в живых, отчаянный псих, не свой не чужой, последний ... иной
Аватар пользователя
CrashX
 
Сообщений: 32
Зарегистрирован: 13 сен 2010, 06:16
Откуда: undefine

Re: Print модального окна точнее его содержимого

Сообщение zandroid » 11 ноя 2010, 16:17

Что-то я не понял - это вопрос в разделе "примеры кода с готовым решением"? что оно тут делает?
(И как-то странно чередуется у вас вид окна между модАльным и модЕльным :) )

поливинилхлорида пластиковые окна zandroid » 11 ноя 2010, 16:17

Пластиковые окна сегодня zandroid » 11 ноя 2010, 16:17

синхронизации Логический анализатор zandroid » 11 ноя 2010, 16:17

торкретирование бетона zandroid » 11 ноя 2010, 16:17

цемент купить набережные челны zandroid » 11 ноя 2010, 16:17

остекление балконов и лоджий - вся актуальная информация zandroid » 11 ноя 2010, 16:17

Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Print модального окна точнее его содержимого

Сообщение CrashX » 12 ноя 2010, 06:26

да возможно промахнулся с разделом, просто это не плагин...
а снипет да только что то не могу заставить его работать...
остаться в живых, отчаянный псих, не свой не чужой, последний ... иной
Аватар пользователя
CrashX
 
Сообщений: 32
Зарегистрирован: 13 сен 2010, 06:16
Откуда: undefine

Re: Print модального окна точнее его содержимого

Сообщение zandroid » 12 ноя 2010, 10:45

Хм... попробовал я тут печать через window.print() на модальном окне в одном из рабочих проектов - печатается вполне ожидаемо, содержимое только модального окна. пробовал в IE8.
Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Print модального окна точнее его содержимого

Сообщение CrashX » 12 ноя 2010, 12:55

_http://www.crashx.is.com/news/SubAll/read-4-novost_2.html

все там

я хочу что бы по определенному rel было это я и сделал
но не работает, модальные окна tools.overlay


возможно
нужно что то по другому сделать...

браузер не IE )
остаться в живых, отчаянный псих, не свой не чужой, последний ... иной
Аватар пользователя
CrashX
 
Сообщений: 32
Зарегистрирован: 13 сен 2010, 06:16
Откуда: undefine

Re: Print модального окна точнее его содержимого

Сообщение zandroid » 12 ноя 2010, 21:05

А, блин! дык это ж не модальные окна! тут просто нужно понимать логику работы браузера. Начнём с ликбеза: модальное окно (без дополнительных оговорок) - это отдельное окно браузера, открытое скриптом из основного окна и блокирующее доступ к основному окну. В твоём случае, "модальное окно" - это всего лишь кусок разметки, его можно назвать так только в кавычках. К слову "overlay" переводится "наружный слой". Дык вот и подумай, что должен печатать браузер по команде window.print(), если ты по событию на кнопку всего-то добавляешь несколько дивов с внутренней разметкой в текущий документ.

По поводу печати отдельных кусков разметки - я ничего сказать не могу, попробуй погуглить, но сомнительно, что оно есть. Обычно запихивают его именно в модальное окно (или вообще на другой вкладке) и печатают уже оттуда.

А клик внутри твоего "модального" окна не отрабатывает, потому что контент в него грузится аяксом, а событие ты прицепляешь обычным способом при загрузке страницы. Тут надо посмотреть в сторону .delegate() (можно ещё .live(), но .delegate() более современное решение и уместное)
Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Print модального окна точнее его содержимого

Сообщение EGORR » 12 ноя 2010, 22:13

zandroid писал(а):По поводу печати отдельных кусков разметки - я ничего сказать не могу, попробуй погуглить, но сомнительно, что оно есть.

Я пару раз в проектах применял такой алгоритм:
Основной контент всегда в диве #content
По клику на кнопку "Распечатать" забираем содержимое дива #content и еще забираем весь body
Весь body заменяем содержимым дива #content и я ещё менял в файл css. Таким образом перед нами страница без менюшек, футеров и прочее. Да,.. я еще вставлял кнопку закрытия
Код: выделить все
  var rec = "<p class=\"close-print-view\"><img src=\"img/cpv.png\" alt=\"Закрыть версию для печати\" height=\"27\" width=\"212\"></p>";

При клике на нее делаем обратный процесс.
Life is very short, and there's no time
For fussing and fighting, my friend...
Аватар пользователя
EGORR
Модератор
 
Сообщений: 720
Зарегистрирован: 22 янв 2010, 01:44
Откуда: Ярославль

Re: Print модального окна точнее его содержимого

Сообщение zandroid » 12 ноя 2010, 23:30

Это тоже вариант, я его видел, но чревато ещё бОльшими глюками, чем с модальным окном, особенно при разметке со скриптом в пермешку. Уж лучше тогда css media screen/print использовать, но тут надо просто очень сильно повозиться с разметкой.

Я вот в своём текущем рабочем проекте применяю такой метод: в конец body добавляю див, который белый и накрывает всю страницу, а содержимое выводится поверх этого дива, т.о. все меню, логтипы и т.п. скрыты под белым фоном. Но там своя специфика, переделывать разметку не охота и нецелесообразно, а возврат со страницы печать не нужен. Нажали "печать", распечатали, потом можно и кнопку "назад" у браузера кликнуть самостоятельно :)
Аватар пользователя
zandroid
Модератор
 
Сообщений: 1164
Зарегистрирован: 21 янв 2010, 22:16
Откуда: Нижний Новгород

Re: Print модального окна точнее его содержимого

Сообщение CrashX » 13 ноя 2010, 05:52

ну настоящее модальное окно не составляет труда

как вариант остается из спевдоокна это iframe, реализация jprint смотрите кому интересно, только там немного кривовато но идея ясна,
я же думаю подменить область ифреймом

у меня эффект затенения есть, просто у меня прозрачность стоит)
буду ломать голову дальше как сделать так что бы было так как хочется)
остаться в живых, отчаянный псих, не свой не чужой, последний ... иной
Аватар пользователя
CrashX
 
Сообщений: 32
Зарегистрирован: 13 сен 2010, 06:16
Откуда: undefine

Re: Print модального окна точнее его содержимого

Сообщение EGORR » 13 ноя 2010, 09:05

zandroid писал(а):Я вот в своём текущем рабочем проекте применяю такой метод: в конец body добавляю див, который белый и накрывает всю страницу, а содержимое выводится поверх этого дива, т.о. все меню, логтипы и т.п. скрыты под белым фоном.

Здорово! Возьму на вооружение!
zandroid писал(а): чревато ещё бОльшими глюками

Не... Никаких глюков...
Life is very short, and there's no time
For fussing and fighting, my friend...
Аватар пользователя
EGORR
Модератор
 
Сообщений: 720
Зарегистрирован: 22 янв 2010, 01:44
Откуда: Ярославль

След.

Вернуться в Плагины jQuery

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

Кухни наши работы ремонт карданов спб расценки на ремонтные работы