:
Forum2x2 !

,
, ( ) .


,
!


!


! :

, mail.ru, bk.ru, inbox.ru, list.ru - !
yandex.ru, rambler.ru, gmail.com ..
» ?
 Kuzbas63 1:54

»
 Dana Domirani 0:30

» " "
 Lory 18:27

»
 Leyxen 16:15

»
 Lory 7:36

» "" - 2
 Aster 0:29

»
 irina27 19 - 16:30

»
 Lory 19 - 11:01

» .
 Lory 19 - 8:45

»
  17 - 12:15

: j-p-g.net

"" ( / )

:  ::  Forum2x2 ::  :: 

    

"" ( / )

  Luz 21 - 14:30

!

: / c , , "", .

?



, , : http://stitchui.com/liteaccordion/

- , ( , , ....)
CSS!




1. Javascript



HTML & Javascript | Javascript C javascript
:



:
/*************************************************
  *
  * project: liteAccordion - horizontal accordion plugin for jQuery
  * author: Nicola Hibbert
  * url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
  * demo: http://www.nicolahibbert.com/demo/liteAccordion
  *
  * Version: 1.1.3
  * Copyright: (c) 2010-2011 Nicola Hibbert
  *
  /*************************************************/
  (function($) {
 
  $.fn.liteAccordion = function(options) {
 
  // defaults
  var defaults = {
  containerWidth : 960,
  containerHeight : 320,
  headerWidth : 48,
 
  firstSlide : 1,
  onActivate : function() {},
  slideSpeed : 800,
  slideCallback : function() {},
 
  autoPlay : false,
  pauseOnHover : false,
  cycleSpeed : 6000,

  theme : 'basic', // basic, light*, dark, stitch*
  rounded : false,
  enumerateSlides : false
  },
 
  // merge defaults with options in new settings object
  settings = $.extend({}, defaults, options),
 
  // define key variables
  $accordion = this,
  $slides = $accordion.find('li'),
  slideLen = $slides.length,
  slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
  $header = $slides.children('h2'),
 
  // core utility and animation methods
  utils = {
  getGroup : function(pos, index) {
  if (this.offsetLeft === pos.left) {
  return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
  } else if (this.offsetLeft === pos.right) {
  return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) });
  }
  },
  nextSlide : function(slideIndex) {
  var slide = slideIndex + 1 || settings.firstSlide;

  // get index of next slide
  return function() {
  return slide++ % slideLen;
  }
  },
  play : function(slideIndex) {
  var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
  start = function() {
  $header.eq(getNext()).click();
  };
 
  utils.playing = setInterval(start, settings.cycleSpeed);
  },
  pause : function() {
  clearInterval(utils.playing);
  },
  playing : 0,
  sentinel : false
  };
 
  // set container heights, widths, theme & corner style
  $accordion
  .height(settings.containerHeight)
  .width(settings.containerWidth)
  .addClass(settings.theme)
  .addClass(settings.rounded && 'rounded');
 
  // set tab width, height and selected class
  $header
  .width(settings.containerHeight)
  .height(settings.headerWidth)
  .eq(settings.firstSlide - 1).addClass('selected');
 
  // ie :(
  if ($.browser.msie) {
  if ($.browser.version.substr(0,1) > 8) {
  $header.css('filter', 'none');
  } else if ($.browser.version.substr(0,1) < 7) {
  return false;
  }
  }
 
  // set initial positions for each slide
  $header.each(function(index) {
  var $this = $(this),
  left = index * settings.headerWidth;
 
  if (index >= settings.firstSlide) left += slideWidth;
 
  $this
  .css('left', left)
  .next()
  .width(slideWidth)
  .css({ left : left, paddingLeft : settings.headerWidth });
 
  // add number to bottom of tab
  settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');

  });
 
  // bind event handler for activating slides
  $header.click(function(e) {
  var $this = $(this),
  index = $header.index($this),
  $next = $this.next(),
  pos = {
  left : index * settings.headerWidth,
  right : index * settings.headerWidth + slideWidth,
  newPos : 0
  },
  $group = utils.getGroup.call(this, pos, index);
 
  // set animation direction
  if (this.offsetLeft === pos.left) {
  pos.newPos = slideWidth;
  } else if (this.offsetLeft === pos.right) {
  pos.newPos = -slideWidth;
  }
 
  // check if animation in progress
  if (!$header.is(':animated')) {

  // activate onclick callback with slide div as context
  if (e.originalEvent) {
  if (utils.sentinel === this) return false;
  settings.onActivate.call($next);
  utils.sentinel = this;
  } else {
  settings.onActivate.call($next);
  utils.sentinel = false;
  }

  // remove, then add selected class
  $header.removeClass('selected').filter($this).addClass('selected');
 
  // get group of tabs & animate
  $group
  .animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
  .next()
  .animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
 
  }
  });
 
  // pause on hover
  if (settings.pauseOnHover) {
  $accordion.hover(function() {
  utils.pause();
  }, function() {
  utils.play($header.index($header.filter('.selected')));
  });
  }
 
  // start autoplay, call utils with no args = start from firstSlide
  settings.autoPlay && utils.play();
 
  return $accordion;
 
  };
 
  })(jQuery);


2. Javascript ( )


javascript

HTML & Javascript | Javascript C javascript
:


:
$(document).ready(function(){
  $('#one').liteAccordion({
  onActivate : function() {
  this.find('figcaption').fadeOut();
  },
  slideCallback : function() {
  this.find('figcaption').fadeIn();
  },
  autoPlay : true,
  pauseOnHover : true,
  theme : 'dark',
  rounded : true,
  enumerateSlides : true
  }).find('figcaption:first').show();
  });

3. ""



|


:
<div id="one" class="accordion">
  <ol>
  <li>
  <h2><span> 1</span></h2>
  <div id="s1"></div>
  </li>
  <li>
  <h2><span> 2</span></h2>
  <div id="s2"></div>
  </li>
  <li>
  <h2><span> 3</span></h2>
  <div id="s3"></div>
  </li>
  <li>
  <h2><span> 4</span></h2>
  <div id="s4"></div>
  </li>
  <li>
  <h2><span> 5</span></h2>
  <div id="s4"></div>
  </li>
  </ol>
  <noscript>
  <p>Please enable JavaScript to get the full experience.</p>
  </noscript>
</div>

: id="s1", id="s2" .. ( , ! ) CSS ( ).

- , , 4 5:

:
<li>
  <h2><span> 4</span></h2>
  <div></div>
  </li>
  <li>

4. CSS

CSS

| CSS

:
.accordion {
 text-align:left;
 font:'Helvetica Neue', Verdana, Arial, sans-serif;
}
.accordion ol {
 position: relative;
 overflow: hidden;
 height: 100%;
 margin: 0;
 padding: 0;
 list-style-type: none;
}
.accordion li > h2 {
 color: black;
 font-weight: normal;
 margin: 0;
 z-index: 2;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transform: translateX(-100%) rotate(-90deg);
 -webkit-transform-origin: right top;
 -moz-transform: translateX(-100%) rotate(-90deg);
 -moz-transform-origin: right top;
 -o-transform: translateX(-100%) rotate(-90deg);
 -o-transform-origin: right top;
 -ms-transform: translateX(-100%) rotate(-90deg);
 -ms-transform-origin: right top;
 transform: translateX(-100%) rotate(-90deg);
 transform-origin: right top;
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }
 
/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }
 
/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #353535\9; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #434343\9; }
.dark li > div { background: #030303; margin-left: 5px; }
 
/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 
/***************************************** Light */
/**************************************** Stitch */

#s1 {
 background:url("http://url_image_1") no-repeat #030303;
}
#s2 {
 background:url("http://url_image_2") no-repeat #030303;
}
#s3 {
 background:url("http://url_image3") no-repeat #030303;
}

http://url_image_1 , http://url_image_2, http://url_image3 . , .

, (. 3):

<li>
<h2><span> 1</span></h2>
<div id="s1"></div>
</li>


, CSS:

#s1 {
background:url("http://url_image_1") no-repeat #030303;
}



CSS?
> > > CSS


?
> > >



> > Javascript


| |
avatar
Luz





: 16467
: 43
: 2005-03-01
: 2563



http://help.forum2x2.ru

   

    


:  ::  Forum2x2 ::  :: 

 
: