JS / JQuery How To > Master-X.com

Master-X

Регистрация | Вход

Форум | Новости | Статьи

Главная » Форум » Программинг, Скрипты, Софт, Сервисы »

Тема: JS / JQuery How To

Новая тема Ответить

цитата
13/03/12 в 18:27

Yacc

Последний раз редактировалось: Yacc (27/01/13 в 17:20), всего редактировалось 4 раз(а)

цитата
13/03/12 в 18:29

Yacc
Иерархическое вертикальное меню аля jQuery Accordion

http://jsfiddle.net/yacc/GVq9d/

<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script>
      window.yacc = {
         menu: {
            current: null,
            select: (function( li ) {
               if( yacc.menu.current == null ) {
                  yacc.menu.current = jQuery( '#yacc-menu-content div' + li.find( 'a' ).attr( 'href' ) )
                  return
               }
               else {
                  yacc.menu.current.hide()
                  yacc.menu.current = jQuery( '#yacc-menu-content div' + li.find( 'a' ).attr( 'href' ) )
                  yacc.menu.current.show()
                  yacc.menu.current.find( '*' ).each( function() {
                     jQuery( this ).show()
                  })
               }
            }),
            toggle: (function( li ) {
               jQuery( li )
                  .find( '>ul' )
                  .stop( true, true )
                  .show()
                  .end()
                  .siblings()
                  .find( 'ul' )
                  .hide()
            }),
            init: (function() {
               jQuery( '#yacc-menu-nav li' ).each( function() {
                  yacc.menu.toggle( this )
               })
               jQuery( '#yacc-menu-content div' ).each( function() {
                  jQuery( this ).hide()
               })
               jQuery( '#yacc-menu-nav li' ).click( function( e ) {
                  yacc.menu.toggle( this )
                  e.stopPropagation()
                  yacc.menu.select( jQuery( this ) )
               })
               var li = jQuery( '#yacc-menu-nav li' )
               var lif = li.first()
               li.each( function() {
                  jQuery( this ).find( 'a' ).attr( 'onClick', 'return false' )
               })
               yacc.menu.select( lif )
               lif.click()
            })
         }
      }
      jQuery(document).ready(function(){
         yacc.menu.init()
      })
   </script>
<head>
<body>
   <div id="yacc-menu-nav">
      <ul>
         <li><a href="#zero">Zero</a></li>
         <li><a href="#first">First</a>
            <ul>
               <li><a href="#first-1">First 1</a>
                  <ul>
                     <li><a href="#first-1-1">First 1 1</a></li>
                     <li><a href="#first-1-2">First 1 2</a>
                        <ul>
                           <li><a href="#first-1-2-1">First 1 2 1</a></li>
                           <li><a href="#first-1-2-2">First 1 2 2</a></li>
                        </ul>
                     </li>
                     <li><a href="#first-1-3">First 1 3</a></li>
                  </ul>
               </li>
               <li><a href="#first-2">First 2</a></li>
            </ul>
         </li>
         <li><a href="#second">Second</a></li>
         <li><a href="#third">Third</a></li>
      </ul>
   </div>
   <div id="yacc-menu-content">
      <div id="zero">
         <h2>Zero</h2>
      </div>
      <div id="first">
         <h2>First</h2>
      </div>
      <div id="first-1">
         <h2>First 1</h2>
      </div>
      <div id="first-2">
         <h2>First 2</h2>
      </div>
      <div id="first-1-1">
         <h2>First 1 1</h2>
      </div>
      <div id="first-1-2">
         <h2>First 1 2</h2>
      </div>
      <div id="first-1-3">
         <h2>First 1 3</h2>
      </div>
      <div id="first-1-2-1">
         <h2>First 1 2 1</h2>
      </div>
      <div id="first-1-2-2">
         <h2>First 1 2 2</h2>
      </div>
      <div id="second">
         <h2>Second</h2>
      </div>
      <div id="third">
         <h2>Third</h2>
      </div>
   </div>
</body>
</html>

Без эффектов - просто концепт.

Последний раз редактировалось: Yacc (14/03/12 в 15:15), всего редактировалось 1 раз

цитата
13/03/12 в 18:36

A.Brain
Спасибо нужный топик

А можно пример слайдера горизонтального или карусели (как он о правильно называется?)

типа такого как тут под плеером

цитата
14/03/12 в 15:09

Yacc
Бесконечный анимированный слайдер (карусель)

http://jsfiddle.net/yacc/azyWe/

<!DOCTYPE html>
<html>
<head>
<style>
/* Обязатеьные стили */
#carousel, #carousel .frame, #carousel .wrapper, #carousel .content {
pading: 0;
position: relative;
}
#carousel .wrapper, #carousel .content {
margin: 0;
}
#carousel {
margin: 0 auto;
width: 300px;
height: 100px;
overflow: hidden;
border: 1px solid #999;
}
#carousel .frame {
width: 100%;
margin: 0 auto;
}
#carousel .content {
width: 100px;
height: 100px;
float: left;
}

/* Не обязатеьные стили */
#a { background: #f33; }
#b { background: #d99; }
#c { background: #dd3; }
#d { background: #3d3; }
#e { background: #39d; }
#f { background: #33d; }
#g { background: #93d; }
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
window.yacc = {
carousel: {
direction: 'left',
times: 1,
speed: 5,
init: function( params ) {
var direction = params && params.direction || yacc.carousel.direction,
times = params && params.times || yacc.carousel.times,
speed = params && params.speed || yacc.carousel.speed;
var contentWidth = jQuery( '.content:first' ).width()
times = times * jQuery( '.content' ).length * contentWidth
speed = speed * times
if( direction == 'right' ) {
var cssMap = { left: times },
directionRight = true
}
else if( direction == 'left' ) {
var cssMap = { right: times },
directionRight = false
}
else return
var carouselWidth = jQuery( '#carousel' ).width()
var contentWidth = jQuery( '.content:first' ).width()
var contentShift = contentWidth
if( directionRight ) jQuery( '#carousel .frame' ).css( 'left', -contentWidth + 'px' )
jQuery( '#carousel .wrapper' ).css( 'width', carouselWidth + contentWidth + 'px' )
var wrapper = jQuery( '#carousel .wrapper' )
wrapper.mouseover( function() {
jQuery( this ).stop()
})
wrapper.mouseout( function() {
jQuery( '#carousel .wrapper' ).animate(
cssMap,
{
duration: speed,
easing: 'linear',
step: function( now, fx ){
var wrapper = jQuery( this )
if( now > contentShift ) {
if( directionRight ) var content = wrapper.find( '.content' ).last()
else var content = wrapper.find( '.content' ).first()
var contentClone = content.clone()
content.remove()
if( directionRight ) wrapper.prepend( contentClone )
else wrapper.append( contentClone )
wrapper.css( 'margin-left', ( directionRight ? -contentShift : contentShift ) + 'px' )
contentShift += contentWidth
}
}
}
)
})
wrapper.mouseout()
}
}
}
jQuery( document ).ready( function(){
yacc.carousel.init({
times: 10,
direction: 'left',
speed: 50
})
})
</script>
</head>
<body>
<div id="carousel">
<div class="frame">
<div class="wrapper">
<div class="content" id="a">
<div style="margin: 5px; padding: 5px; border: 5px solid white;">1</div>
</div>
<div class="content" id="b"></div>
<div class="content" id="c">3</div>
<div class="content" id="d">4</div>
<div class="content" id="e">5</div>
<div class="content" id="f">6</div>
<div class="content" id="g">7</div>
</div>
</div>
</div>
</body>
</html>

1. Входные параметры:

direction - направление скрола;
times - количество полных прокруток;
speed - скорость (меньше - быстрее).

2. Ширина блока #carousel (здесь 300px) определяет сколько блоков .content (здесь шириной 100px) будет видно: 300 / 100 = 3 блока.

3. В стилях можно менять ширину/высоту блоков #carousel и .content, остальное - критично для работоспособности скрипта. Не назначайте padding/margin/border блокам .content, вместо этого создавайте в них новые блоки и назначайте padding/margin/border им (пример в блоке #a).

цитата
14/03/12 в 15:26

ibiz
реквестую, было бы неплохо с табами что-нибудь выложить

P.S. это когда разное содержимое странички переключается кнопками в пределах одного окна

цитата
14/03/12 в 15:32

Yacc
http://jqueryui.com/demos/tabs

цитата
14/03/12 в 15:36

A.Brain
Yacc писал:

Бесконечный анимированный слайдер (карусель)

Благодарствую

цитата
20/03/12 в 12:27

Yacc
Реклама в копируемом тексте

http://jsfiddle.net/yacc/vPwVm/

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
window.yacc = {
adder: {
id: 'p',
min: 3,
html: '<br/><br/>Source: <a href="' + location.href + '">' + location.href + '</a>',
add: function(){
var notie = !jQuery.browser.msie;
var selection = notie ? window.getSelection() : document.selection.createRange();
var selectionText = notie ? selection.toString() : selection.text;
if(selectionText.match(/\b/g).length / 2 > yacc.adder.min){
var range = notie ? selection.getRangeAt(0) : selection;
var oldRange = notie ? range.cloneRange() : range.duplicate();
var newRange;
var div = jQuery('<div>')
.css({width:'1px',height:'1px',position:'absolute',top:'-100px',left:'-100px',overflow:'hidden'})
.append(range.cloneContents ? range.cloneContents() : oldRange.text, yacc.adder.html);
jQuery('body').append(div);

if(notie){
selection.removeAllRanges();
newRange = document.createRange();
newRange.selectNode(div.get(0));
selection.addRange(newRange);
} else {
newRange = document.body.createTextRange();
newRange.moveToElementText(div.get(0));
newRange.select();
}
window.setTimeout(function(){
if(notie) {
selection.removeAllRanges();
selection.addRange(oldRange);
} else {
oldRange.select();
}
div.remove();
}, 0);
}
},
init: function(p){
yacc.adder.id = p && p.id || yacc.adder.id;
yacc.adder.min = p && p.min || yacc.adder.min;
yacc.adder.html = p && p.html && p.html.length > 0 || yacc.adder.html;
jQuery(yacc.adder.id).bind('copy', yacc.adder.add);
}
}
}

jQuery(document).ready(function(){
yacc.adder.init({
id: '.content p',
html: ''
});
});
</script>
</head>
<body>
<h2>Copy more than 3 words here</h2>
<div class="content">
<p>
There is a way to use one single clip object for multiple buttons, but you have to "move it into place" on each mouseover. Remember, the most important thing is that the Flash movie "intercepts" the click before the browser can get it. So the Flash movie has to be already "under" the mouse when the button goes down.
</p>
</div>
<h2>and paste here</h2>
<textarea cols="40" rows="10"></textarea>
</body>
</html>


Когда пользователь выделяет и копирует (нажимая ctrl+C или через контекстное меню) текст в указанных блоках (по-умолчанию все теги p) и с количеством слов больше, чем указано (по-умолчанию 3), то к этому тексту добавляется рекламное сообщение (по-умолчанию ссылка на источник).

Гарантировано работает в последних версиях Chrome, FF и IE.

цитата
20/03/12 в 14:37

Kors
Yacc: а как в карусели сделать бесконечное кол-во прокруток?

зы: и еще, как то странно он себя ведет в хроме при переключении закладок (ушел с нее а минут через 5 вернулся)

цитата
20/03/12 в 14:56

Yacc
Бесконечно - никак. Но можно сделать очень долго:

Код:

yacc.carousel.init({ times: 9007199254740992 });

Если предположить, что одна полная прокрутка происходит за секунду (т.е. очень быстро), то будет крутиться примерно 285 616 415 лет. Дольше никак.

цитата
20/03/12 в 16:01

mickey
можно сделать так например?

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

т.е. при каждом рефреше будут новые 6 тумб рандомно показываться на морде из указанной папки

html получится вот такой:
<p><a href=""><img src="" /></a></p>
<p><a href=""><img src="" /></a></p>
<p><a href=""><img src="" /></a></p>
<p><a href=""><img src="" /></a></p>
<p><a href=""><img src="" /></a></p>
<p><a href=""><img src="" /></a></p>

тумбы в папке будут просто по цифрам лежать, т.е. в корне будет папку /preview/
в ней тумбы 001.jpg, 002.jpg, 003.jpg и т.д.

цитата
20/03/12 в 17:54

Yacc
Код:

<?php
$n = 7; // Если в карусели видно 6 тумб, то всего их должно быть минимум 7
$m = 100; // Файлы тумб имеют имена 1.jpg, 2.jpg,... 100.jpg
$f = array();
while( count( $f ) < $n )
while( ! isset( $f[ ( $r = rand( 1, $m ) ) ] ) )
if( count( $f ) < $n ) $f[ $r ] = TRUE;
else break;
foreach( $f as $i => $j )
// class="content" тегу P - обязательно
echo '<p class="content"><a href=""><img src="/preview/'.$i.'.jpg"/></a></p>';
?>

цитата
21/03/12 в 02:29

mickey
спасибо большое работает супер

цитата
24/03/12 в 20:41

Sem2
Yacc: давай ешо!

цитата
19/05/12 в 16:49

A.Brain
Yacc, пока ты на форуме =)
Помоги плиз, гуру

ДАно: jquery 1.4.1

Есть <div>some javascript</div>, нужно с помощью jquery 1.4.1 перегружать содержимое дива. Желательно с возможностью задавать время reload в секундах
Таких дивов может быть несколько на странице

Спасибо

цитата
20/05/12 в 15:48

Yacc
Sanman писал:

Yacc, пока ты на форуме =)

Да, я всегда здесь. Просто свободного времени мало. По этой же причине как-то так: http://jsfiddle.net/yacc/vbCNM/

<html>
<head>
<script>
jQuery.fn.setInterval = function(){
var id = this.context.id;
var delay = 1000 * jQuery('#' + id).attr('delay');
var callback = window[id];
callback();
setInterval(callback, delay);
}

jQuery(document).ready(function(){
jQuery('.content').each(function(){
jQuery(this).setInterval();
});
});

function a(){
jQuery('#a').html('x = ' + ++x);
}

function b(){
jQuery('#b').html('y = ' + ++y);
}

function c(){
jQuery('#c').html('z = ' + ++z);
}

var x, y, z;
x = y = z = 0;
</script>
</head>
<body>
<div id="a" delay="1" class="content"></div>
<div id="b" delay="2" class="content"></div>
<div id="c" delay="3" class="content"></div>
</body>
</html>

В результате, например второй div, будет обновляться функцией b() (id="b") каждые 2 секунды (delay="2").

цитата
27/01/13 в 17:19

Yacc
Куки

http://jsfiddle.net/yacc/wySxT/

function cookie(key, value, attributes) {
if(typeof key != 'undefined') {
if(typeof value == 'undefined')
return (document.cookie.match('(^|; )' + key + '=([^;]*)')||0)[2];
else {
var attr = {domain:null, expires:0, path:'/', secure:false, httpOnly:false};
if(value === null)
attr.expires = -1;
else if(typeof attributes == 'object')
for(var i in attributes)
if(typeof attr[i] != 'undefined')
attr[i] = attributes[i];
if(attr.expires !== 0) {
var date = new Date();
date.setTime(date.getTime() + attr.expires * 86400000);
attr.expires = date.toGMTString();
}
document.cookie = key + '=' + value + '; expires=' + attr.expires + (attr.domain !== null ? '; domain=' + attr.domain : '') + '; path=' + attr.path + (attr.secure ? '; secure' : '') + (attr.httpOnly ? '; httponly' : '');
}
}
}

// Установить

// На время сессии.
cookie('test', 'test');

// На 7 дней.
cookie('test', 'test', {expires:7});

// Атрибуты по умолчанию.
cookie('test', 'test', {domain:null, expires:0, path:'/', secure:false, httpOnly:false});

// Получить

alert(cookie('test'));

// Проверить наличие
alert(typeof cookie('test') != 'undefined' ? 'есть' : 'нету');

// Удалить

cookie('test', null);

Новая тема Ответить

Эта страница в полной версии