2

ユーザーが必要に応じてサイドバーを非表示にできるページを設定しています。私は次のjsコードでこれを行うためにjqeuryuiを使用しようとしています

// TOGGLE JS
$(function () {      
    function runEffect() {           
        var options = {};            
        $("#effect").toggle('slide', options, 500);
    };
    $("#button").click(function () {
        runEffect();
        return false;
    });
});

私はこれをJSFiddleで動作させていますhttp://jsfiddle.net/jwg4U/

ただし、JSFiddleを見ると、DIVと呼ばれるメインコンテンツ領域が#contentアニメーション化されておらず、サイドバーを切り替えると所定の位置にジャンプするだけであることがわかります。

コンテンツdivもシームレスに所定の位置にスライドし、それに接続されている場合と同じようにトグルに従います。

jquery animateを見てきましたが、スライドでこれを実装する方法がわかりませんか？

私が苦労している2番目の部分は、サイドバーが閉じているときにボタンのテキストを変更して「サイドバーを表示」と表示する方法です。現在開いているか閉じている天気では、「サイドバーを非表示」と表示されます。

ヘルプを探しています

ありがとう

4

2 に答える 2

1

この更新されたフィドルを参照してください：http：//jsfiddle.net/jwg4U/23/

HTML：

<div id="container" style="width:800px">

<div id="header">
     <h1>HEADER</h1>
</div>

<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
    <div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
        <h3>SIDEBAR</h3>
    </div>
</div>


<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes     here</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Hide Sidebar</a>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>

</div>

</ p>

JS：

// TOGGLE JS
$(function() {
var i = 0;

function runEffect() {
    var options = {};
    if (i === 0) {
        i = 1;
        $(".toggler").animate({
            left: -100
        }, {
            duration: 500
        });
    }
    else {
        i = 0;
        $(".toggler").animate({
            left: 0
        }, {
            duration: 500
        });
    }
}
$("#button").click(function() {
    if (i === 0) {
        $(this).html("Show Sidebar");
    }
    else {
        $(this).html("Hide Sidebar");
    }
    runEffect();
    return false;
});
});

// TABS JS
$(function() {
$("#tabs").tabs();
});​

CSS：

 .toggler {
    float: left;
    position: relative;
}
#button {
    padding: .5em 1em;
    text-decoration: none;
}
#effect {
    position: relative;
    float: left;
}
#content{
    position: relative;
    float: left;
    width: 500px;
}
#button{
    float: left;
    clear: both;
}
#header{
    background-color: #000;
    color: #FFF;
}​
于 2012-12-13T10:32:20.437 に答える
0

完全な答えのためのjsfiddle：http: //jsfiddle.net/jwg4U/22/

  $('#effect').animate({
   width: 'toggle',
   height: 'toggle'
    }, {
   duration: 500,
   specialEasing: {
     width: 'linear',
     height: 'linear'
   },
   complete: function() {
      $("#content").animate(
           { left: '+=100px' },
           60, 
           'easeInQuad', 
           function () 
           { 
               if(isOpen)
               {
                  isOpen=false;  
                  $("#button").html('Show Sidebar');                     
                }
                else
                {
                  isOpen=true;
                  $("#button").html('Hide Sidebar');     
                }
             });
        }
   });
于 2012-12-13T10:39:07.197 に答える