С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
 
|
 Добавлено: 13/03/12 в 18:27 |
Последний раз редактировалось: Yacc (27/01/13 в 17:20), всего редактировалось 4 раз(а)
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 13/03/12 в 18:29 |
Иерархическое вертикальное меню аля 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 раз
|
|
|
|
| |
Наставник!
С нами с 01.08.03
Сообщения: 1088
Рейтинг: 1491
|
| Добавлено: 13/03/12 в 18:36 |
Спасибо нужный топик 
А можно пример слайдера горизонтального или карусели (как он о правильно называется?)
типа такого как тут под плеером
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 14/03/12 в 15:09 |
Бесконечный анимированный слайдер (карусель)
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).
|
|
|
|
| |
С нами с 24.10.04
Сообщения: 18881
Рейтинг: 9010
|
| Добавлено: 14/03/12 в 15:26 |
реквестую, было бы неплохо с табами что-нибудь выложить 
P.S. это когда разное содержимое странички переключается кнопками в пределах одного окна
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 14/03/12 в 15:32 |
|
|
|
|
| |
Наставник!
С нами с 01.08.03
Сообщения: 1088
Рейтинг: 1491
|
| Добавлено: 14/03/12 в 15:36 |
| Yacc писал: | | Бесконечный анимированный слайдер (карусель) |
Благодарствую
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 20/03/12 в 12:27 |
Реклама в копируемом тексте
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.
|
|
|
|
| |
full-plastic programmist
С нами с 05.09.03
Сообщения: 8361
Рейтинг: 4779
|
| Добавлено: 20/03/12 в 14:37 |
Yacc: а как в карусели сделать бесконечное кол-во прокруток?
зы: и еще, как то странно он себя ведет в хроме при переключении закладок (ушел с нее а минут через 5 вернулся)
|
|
|
|
вот соскучился по мастеру...
|
8
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 20/03/12 в 14:56 |
Бесконечно - никак. Но можно сделать очень долго:
| Код: | | yacc.carousel.init({ times: 9007199254740992 }); |
Если предположить, что одна полная прокрутка происходит за секунду (т.е. очень быстро), то будет крутиться примерно 285 616 415 лет. Дольше никак.
|
|
|
|
| |
С нами с 04.03.07
Сообщения: 8931
Рейтинг: 5138
|
| Добавлено: 20/03/12 в 16:01 |
можно сделать так например?
на морде 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 и т.д.
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 20/03/12 в 17:54 |
| Код: | <?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>';
?> |
|
|
|
|
| |
С нами с 04.03.07
Сообщения: 8931
Рейтинг: 5138
|
| Добавлено: 21/03/12 в 02:29 |
спасибо большое работает супер 
|
|
|
|
| |
С нами с 29.06.06
Сообщения: 704
Рейтинг: 815
|
| Добавлено: 24/03/12 в 20:41 |
Yacc: давай ешо!
|
|
|
|
| |
Наставник!
С нами с 01.08.03
Сообщения: 1088
Рейтинг: 1491
|
| Добавлено: 19/05/12 в 16:49 |
Yacc, пока ты на форуме =)
Помоги плиз, гуру 
ДАно: jquery 1.4.1
Есть <div>some javascript</div>, нужно с помощью jquery 1.4.1 перегружать содержимое дива. Желательно с возможностью задавать время reload в секундах
Таких дивов может быть несколько на странице
Спасибо
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 20/05/12 в 15:48 |
| 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").
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 27/01/13 в 17:19 |
Куки
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); |
|
|
|
|
| |
