JQuery нажмите, чтобы развернуть вниз

Question

JQuery нажмите, чтобы развернуть вниз

0

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

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

Мне нужен подобный эффект здесь: themetrust.com/demos/reveal/#footloose, но я действительно хочу, чтобы серая область помещалась под каждую строку фотографий и, вероятно, ожидала реализации ajax и rails.

The questioner 19 нояб. 2011, в 17:45

Источник

0

Я хочу подобный эффект здесь: themetrust.com/demos/reveal/#footloose , но я действительно хочу, чтобы серая область помещалась под каждым рядом фотографий и, вероятно, ожидала реализации ajax и rails. заранее спасибо.
The questioner 20 нояб. 2011, в 02:08
0

Или как это: мыслиbot.com (нажав на изображения)
The questioner 20 нояб. 2011, в 08:27

Теги:

javascript

jquery

ajax

jquery-ui

ruby-on-rails-3.1

3 ответа

0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iteracitve Click</title>
<style type="text/css">
.rect
{
    border:1px solid #000;
    width: 50px;
    height:50px;
    margin-left: 50px;
    float:left
}

#container
{
    position:relative;
    display: none
}

#toggler
{
    position:absolute;
}
</style>
</head>

<body>
<div id="rect1" class="rect">Rect 1</div>
<div id="rect2" class="rect">Rect 2</div>
<div id="rect3" class="rect">Rect 2</div>
<div id="container"> 
    <div id="toogler" style="width:200px; height:50px; border:1px solid #000;top:20px; "></div>
</div>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript">
$(function(){
    function display(t) {
        var l = $(t).position().left;
        var w = $(t).width();
        var h = $(t).height();
        $('#container:hidden').animate({
            top: (h + 30) + 'px',
            left: (l + 40) + 'px'
        },50, function(){
            $('#container').show();
        });

    }
    $('.rect').click(function(){
        var that = this;
        if($('#container').is(':visible')) {
            $('#container').fadeOut(100, function(){ 
                display(that);
            });
        } else { 
            display(that);
        }
    });
});
</script>
</body>
</html>

thecodeparadox 19 нояб. 2011, в 15:17

0

var contentArray = ['content1', 'content2', 'content3'];

<div class="clickableSquare"></div>
<div class="clickableSquare"></div>
<div class="clickableSquare"></div>

<div id="contentBox">Content1</div>

$('.clickableSquare').click(function(){
    var index = $(this).index();
    $('#contentBox').slideUp('fast', function(){
        $('#contentBox').html(contentArray[index]);
        $('#contentBox').slideDown('fast');
    });
});

Tim Joyce 19 нояб. 2011, в 13:08

Ещё вопросы

Я хочу подобный эффект здесь: themetrust.com/demos/reveal/#footloose , но я действительно хочу, чтобы серая область помещалась под каждым рядом фотографий и, вероятно, ожидала реализации ajax и rails. заранее спасибо.
Или как это: мыслиbot.com (нажав на изображения)

Andrew Whitaker · Accepted Answer · 2011-11-19T14-08-00.000Z

Вы не указали много информации, но одна стратегия, которую вы могли бы использовать, - связать каждый clickable img с контейнером, который будет отображаться или скрываться:

<div id="images">
    <img src="img_src" data-target="#content1" />
    <img src="img_src" data-target="#content2" />
    <img src="imgs_src" data-target="#content3" />
</div>
<div id="contents">
    <div id="content1" class="active">Content1</div>
    <div id="content2">Content2</div>
    <div id="content3">Content3</div>
</div>

Затем вы можете подключить обработчик событий для каждого изображения, получить контент и показать его:

$("#images img").on("click", function () {
    var content = $(this).data("target");
    $("#contents .active").hide("slow", function () {
        $(this).removeClass("active");
        $(content).show("slow", function () {
            $(this).addClass("active");
        });
    });
});

Также переключает active класс на этом пути.

Пример: http://jsfiddle.net/k8zCU/

Вы можете проверить следующую документацию на наличие дополнительных эффектов:

Привет, Андрей, вопрос обновлен, и посмотри, сможешь ли ты оказать дальнейшую помощь ...
@Thequestioner: Даже если разметка будет немного отличаться и эффекты могут немного измениться, стратегия не должна сильно измениться.