Tag: jQuery

jQuery слайдер

Вот таким методом я исполнил слайдер контента jquery. Внутри блока несколько банеров для автоматического слайда.

<style type="text/css">
    div#rotator div { position:absolute;}
    div#rotator { height:207px;}
</style>
<script type="text/javascript">
    function theRotator() {
        $('div#rotator div').css({opacity: 0.0});
        $('div#rotator div:first').css({opacity: 1.0});
        setInterval('rotate()',4000);
    }
        
    function rotate() {
        var current = ($('div#rotator div.show')? $('div#rotator div.show') : $('div#rotator div:first'));
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator div:first') :current.next()) : $('div#rotator div:first'));
        next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);
        current.animate({opacity: 0.0}, 1000)
        .removeClass('show');
    };
    $(document).ready(function() {
        theRotator();
    });
</script>

<div id="rotator">
    <div class="show"><a href="#"><img alt="" src="/images/new/head_banner_1.jpg" /></a></div>
    <div><a href="#"><img alt="" src="/images/new/head_banner_2.jpg" /></a></div>
    <div><a href="#"><img alt="" src="/images/new/head_banner_3.jpg" /></a></div>
</div>

Плавающий блок с помощью jQuery

В одно время сталкивался с такой задачей, но до постинга так и не доходило дело, а сегодня старый добрый товарищь натолкнулся на данную вещицу=) Так что пришло время постить. В общем как это делается:

CSS

.left {
	width: 70%;
	float: left;
	height: 1500px;
}
.right {
	margin-top: 10px;
	float: right;
	width: 20%;
}
#fixed {
	background: #CCC;
	padding: 20px;
}

Подключение jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

JavaScript

Добавляем в <head> тег

<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").stop().animate({marginTop: 0});};});
	});
</script>

HTML

<div class="left">
	<!-- Содержание -->
</div>
<div class="right">
	<div id="fixed">Текст фиксированного блока.</div>
</div>

Выпадающее меню на wordpress

Реализовать выпадающее меню на wordpress довольно таки просто. Я буду показывать как реализовано на моем блоге. Блог сверстан на html5.

В файл header.php оформляем меню в соответствующем виде

<nav id="nav">
    <ul>
        <li>
            <a href="<?php echo home_url() ?>" rel="home"><?php echo __('Home') ?></a>
        </li>
        <?php wp_list_pages('title_li=') ?>
        <li class="rss">
            <a href="<?php bloginfo('rss_url') ?>" rel="alternate"><?php echo __('RSS') ?></a>
        </li>
    </ul>
</nav>

В style.css добавляем стили для меню

/* НАВИГАЦИЯ */
#nav {
    float: right;
    margin-top: 1em
}
    #nav ul {
    }
        #nav ul a:hover{
            color:#333;
        }
        #nav ul li {
            list-style: none;
            float:left;
        }
            #nav ul li a {
                display: block;
                text-decoration: none;
                margin:0 10px;
                letter-spacing: 0.2em;
            }
                #nav ul .children {
                    display:none;
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    border-left:1px solid #DFDFDF;
                    border-right:1px solid #DFDFDF;
                    background:url(/wp-content/themes/ghostwriter/images/bg-body.png) no-repeat;
                }
                    #nav ul .children li{
                        float: none;
                        display: inline;
                    }
        #nav .rss {
        }
        #nav .rss a {
            display: block;
            background: url(images/icon_rss.png) no-repeat 100% 50%;
            padding-right: 22px
        }

В head страницы добавляем обработку меню на jQuery

<script type='text/javascript' src='http://yandex.st/jquery/1.5.2/jquery.js'></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#nav li").hover(
            function(){
                jQuery(this).find('ul').show('slow');
            },
            function(){
                jQuery(this).find('ul').hide();
            }
        );
    });
</script>


Конвертация валюты cbr.ru на Python и jQuery

Задача: конвертировать валюту (USD, EUR) вводимую пользователем в рубли. При смене вида валюты уже введенные данные конвертируем тоже.

Решение:

Python функция которая принимает GET запросом вид валюты и сумму.

import json
import urllib
from xml.etree import ElementTree as ET

def ajax_convert_valuta(request):
    # Пропускаем проверку принимаемых данных, выполните ее сами
    valuta = request.GET['valuta']
    summa = request.GET['sum']
    root = ET.parse(urllib.urlopen('http://www.cbr.ru/scripts/XML_daily.asp')).getroot()
    for x in root:
        if x.attrib['ID'] == 'R01239': valueEUR = x.find('Value').text.replace(',', '.')
        if x.attrib['ID'] == 'R01235': valueUSD = x.find('Value').text.replace(',', '.')
    if valuta == '1':
        convert_valuta = float(valueUSD) * float(summa)
    if valuta == '2':
        convert_valuta = float(valueEUR) * float(summa)
    response = HttpResponse()
    response['Content-Type'] = "text/javascript"
    response.write(json.dumps({'Value': convert_valuta}))
    return response

jQuery у меня примерно такой (в Вашем случае все должно отличаться;]).

$("#valuta_convert").hide();
function initLocal(){
	var localId = $('select[name=type_of_currency]').val();
	var summa = $("input[name=price]").val();
	if(localId != 0){
		var valueLocal = $('select[name=type_of_currency] option:selected').val();
		$.getJSON('/ajax/convert_valuta.json?valuta='+valueLocal+'&='+summa, function(data) {
			$("#valuta_convert").show();
			$("#valuta_convert").text('~ '+data.Value+' руб');
		});
	}else{
		$("#valuta_convert").hide();
	}
}
$('select[name=type_of_currency]').change(initLocal);
$("#price").keyup(function(){
	initLocal();

});

Данные примерные и у всех будут отличаться в том числе и у меня, лишнее я отрезал за ненадобностью.