Архив за Декабрь 2008

Страница 4 из 4«1234

Модальные окна: Simple Modal для jQuery. Часть 2

5 Декабрь 2008, 12:10

Добавляем стиль элементов через внешний CSS-файл:

#modalOverlay {
  background-color:#000;
  cursor:wait;
}

#modalContainer {
  height:400px;
  width:600px;
  left:50%;
  top:15%;
  margin-left:-300px; /* half the width, to center */
  background-color:#fff;
  border:3px solid #ccc;
}

#modalContainer a.modalCloseImg {
  background:url(../img/x.png) no-repeat;
  width:25px;
  height:29px;
  display:inline;
  z-index:3200;
  position:absolute;
  top:-14px;
  right:-18px;
  cursor:pointer;
}

Для того, чтобы MS IE 6 стал учитывать альфа-канал PNG для кнопки закрытия окна, необходимо задействовать фильтр AlphaImageLoader:

<!--[if lt IE 7]>
<style type='text/css'>
  #modalContainer a.modalCloseImg{
    background:none;
    right:-14px;
    width:22px;
    height:26px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/x.png', sizingMethod='scale'
      );
  }
  #modalContainer {
    top: expression((document.documentElement.scrollTop
        || document.body.scrollTop) + Math.round(15 *
        (document.documentElement.offsetHeight
        || document.body.clientHeight) / 100) + 'px');
  }
</style>
<![endif]-->

Функции modal() может быть передан объект настроек модального окна:

  • overlay: прозрачность; от 0 до 100; 0 - прозрачный, 100 - непрозрачный; по умолчанию - 50;
  • overlayId: ID overlay div-элемента; по умолчанию - ‘modalOverlay’;
  • overlayCss: CSS-стиль для overlay div-элемента; по умолчанию - {} (пусто);
  • containerId: ID div-элемента окна; по умолчанию ‘modalContainer’;
  • containerCss: CSS-стиль для div-элемента окна; по умолчанию - {} (пусто);
  • close: показывать (true) или нет (false) кнопку закрытия окна; по умолчанию true;
  • closeTitle: значение атрибута title для кнопки закрытия окна; по умолчанию ‘Close’;
  • closeClass: CSS класс, привязанный к событию закрытия окна; по умолчанию ‘modalClose’;
  • onOpen: функция, которая будет вызвана при открытии окна; по умолчанию null;
  • onShow: функция, которая будет вызвана после открытия окна; по умолчанию null;
  • onClose: функция, которая будет вызвана при закрытии окна; по умолчанию null;

Ссылки по теме:

Рубрика: JavaScript, Разное  |  Отзывов: 10

Модальные окна: Simple Modal для jQuery. Часть 1

4 Декабрь 2008, 17:44

Я уже писал о создании модального окна в одной из предыдущих заметок. Но там мы создавали окно сами, а сегодня рассмотрим готовое решение. SimpleModal v1.1.1 — легкий (2.8 Кб в сжатом виде) и простой в использовании jQuery плагин для создания диалоговых окон.

Как обычно, подключаем в разделе head HTML-документа необходимые файлы:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.simplemodal.js" type="text/javascript"></script>

Модальное окно создается при вызове функции modal():

1. вызов функции modal() для объекта jQuery:

data.modal([options]);

Например:

$('<div>my data</div>').modal({options});
$('#myDiv').modal({options});
jQueryObject.modal({options});

2. вызов stand-alone jQuery-функции, где data — jQuery-объект, элемент DOM или строка (которая может содержать HTML):

$.modal(data, [options]);

Например:

$.modal('<div>my data</div>', {options});
$.modal('my data', {options});
$.modal($('#myDiv'), {options});
$.modal(jQueryObject, {options});
$.modal(document.getElementById('myDiv'), {options});

Внутри плагина SimpleModal определены CSS-классы:

  • modalOverlay: стиль для overlay div-элемента
  • modalContainer: стиль для div-элемента окна
  • modalCloseImg: стиль для кнопки закрытия окна

Продолжение следует…

Рубрика: JavaScript  |  Ваш отзыв

Coda Slider эффект. Часть 2

3 Декабрь 2008, 13:17

Важный момент — после прокрутки с помощью кнопок влево и вправо надо сделать активным соответствующий пункт верхнего меню. Для этого после завершения прокрутки надо вызвать функцию trigger() и передать ей в качестве аргумента ID кадра (панели). Например, если после прокрутки стала активной панель div#sites, функции trigger() будет передана строка ’sites’: функция найдет элемент навигации <a href=”#sites”>Sites</a> и сделает его активным.

// bind the navigation clicks to update the selected nav:
$('#slider .navigation').find('a').click(selectNav);

// handle nav selection - lots of nice chaining :-)
function selectNav() {
  $(this)
    .parents('ul:first') // find the first UL parent
      .find('a') // find all the A elements
        .removeClass('selected') // remove from all
      .end() // go back to all A elements
    .end() // go back to 'this' element
    .addClass('selected');
}

function trigger(data) {
  // within the .navigation element, find the A element
  // whose href ends with ID ($= is ends with)
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
 
  // we're passing the actual element, and not the jQuery instance.
  selectNav.call(el);
}

selectNav() выделена в отдельную функцию, потому что она нам потребуется еще раз - в момент щелчка по элементам верхнего меню.

Если URL запрашиваемой браузером страницы содержит якорь, например http://www.panic.com/coda/index.html#sites, надо сделать активным соответствующий пункт верхнего меню. Если URL не содержит якоря, активным будет первый пункт верхнего меню:

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1)});
} else {
  $('#slider .navigation a:first').click();
}

Далее, мы должны позаботиться о том, чтобы все ссылки на странице, имеющие якорь #sites, #files, #editor, #preview, #css и т.п. вызывали эффект прокрутки. В этом нам поможет плагин localScroll.

Теперь осталось только объединить все рассмотренные выше фрагменты кода в единое целое:

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });
 
  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
$scroll
  .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
  .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.navigation a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ?
  $container.css('paddingTop') :
  $container.css('paddingLeft'))
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow
 
  // can be a selector which will be relative to the target
  items: $panels,
 
  navigation: '.navigation a',
 
  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left',
  next: 'img.right',
 
  // allow the scroll effect to run both directions
  axis: 'xy',
 
  onAfter: trigger, // our final callback
 
  offset: offset,
 
  // duration of the sliding effect
  duration: 500,
 
  // easing - can be used with the easing plugin:
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it
// supports// the indexed next and previous scroll along with hooking
// in to our navigation.
$('#slider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position,
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

Ссылки по теме:

Рубрика: JavaScript  |  1 отзыв
Страница 4 из 4«1234