0

正常に動作するスプリッターがあります。ここで、クライアントはスプリッターを水平ビューから垂直ビューに変更したいと考えています。つまり、スプリッターは最初に2 divに水平方向に分割され、ボタンをクリックすると、同じ2divが垂直方向に分割されるように変更されます。

私はこれを試しました

     <script type="text/javascript">
        $(function () {
        $('.LeftPane').attr('id', 'LeftPane');
        $('.RightPane').attr('id'`enter code here`, 'RightPane');
        $("#MySplitter").splitter({
            type: "v"
        });
        $('#Button1').click(function () {
            $('#LeftPane').attr('id', 'TopPane');
            $('#RightPane').attr('id', 'BottomPane');
            $("#MySplitter").splitter({
                type: "h"
            });
        });
    });
    </script>

<style type="text/css" media="all">
   #MySplitter
    {
        height: 400px;
        width: 600px;
        margin: 1em 2em;
        background: #def;
        border: 2px solid #039; /* No padding allowed */
    }
   #LeftPane
    {
        background: #def;
        overflow: auto;
        width: 200px; /* optional, initial splitbar position */
        min-width: 50px; 
    }

    #RightPane
    {
        background: #def;
        overflow: auto;
        min-width: 100px; /* No margin or border allowed */
    }

   #MySplitter .vsplitbar
    {
        width:8px;
        cursor: e-resize; /* in case col-resize isn't supported */
        cursor: col-resize;
        background-color:Black;
    }
    #MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover
    {
         background-color:Black;
    }


     #TopPane
    {
       background: #def;
        overflow: auto;
        width: 200px; 
        min-width: 50px; /
    }

    #BottomPane
    {
       background: #def;
        overflow: auto;
        min-width: 100px; /* No margin or border allowed */
    }

     #MySplitter .hsplitbar
    {
        height: 2px;
        background: #487BA4;
    }
    #MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover
    {
        background: #487BA4;
    }
</style>

</head>
<body>
<div id="MySplitter">
    <div class="LeftPane">
        <p>
            This is the left side of the vertical splitter.</p>
        </p>
    </div>
    <div class="RightPane">
         This is the right side of the vertical splitter.</p>
    </div>
</div>
<p>
    <input id="Button1" type="button" value="splitchange" /></p>
</body>
</html>
4

1 に答える 1

0

ついに私は私のonw質問の解決策を見つけました。私はそれをasp.netで設計しているので、asp.netを使用してjqueryでソリューションを提供しています

<head id="Head1" runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
 <script src="../Js/js/splitter.js" type="text/javascript"></script>
enter code here
 <style type="text/css" media="all">
  #MySplitter
  {
    height: 400px;
    width: 600px;
    margin: 1em 2em;
    background: #def;
    border: 2px solid #039;
}

#LeftPane {背景：#def; オーバーフロー：自動; 幅：200px; 最小幅：50px; }

#RightPane
{
    background: #def;
    overflow: auto;
    min-width: 100px;
}

#MySplitter .vsplitbar {width：8px; カーソル：e-サイズ変更; カーソル：col-サイズ変更; 背景色：黒; }

#MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover
{
     background-color:Black;
}


 #TopPane
{
   background: #def;
    overflow: auto;
    width: 200px; 
    min-width: 50px; 
}

#BottomPane
{
   background: #def;
    overflow: auto;
    min-width: 100px; 
}

 #MySplitter .hsplitbar
{
    height: 2px;
    background: #487BA4;
}
#MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover
{
    background: #487BA4;
}
</style>


 <script type="text/javascript">
     $(document).ready(function () {
         // var result = function () {
        // alert('fired');
       var val =  $('#<%=HiddenField1.ClientID %>').val();
         if (val == 1) {
             $('.LeftPane').attr('id', 'LeftPane');
             $('.RightPane').attr('id', 'RightPane');

             $("#MySplitter").splitter({
                 type: "v"
             });
         }
         else {
             $('#LeftPane').attr('id', 'TopPane');
             $('#RightPane').attr('id', 'BottomPane');
             $(' #MySplitter .vsplitbar').css('width', '');
             $("#MySplitter").splitter({
                 type: "h"
             });
         }
         // }
     });
</script>

</head>
<body>
 <form runat="server" >
<asp:HiddenField ID="HiddenField1" runat="server"  Value="1"/>
<asp:Button ID="Button1" runat="server" Text="change" OnClick="Button1_Click" />

 <div id="MySplitter">
    <div class="LeftPane">
        <p>
            This is the left side of the vertical splitter.</p>
        <p>
            Note what happens when you move the splitbar as far left as you can to make this
            pane very thin. A scrollbar appears and it is flush against the splitbar, just the
            way it should be.</p>
    </div>
    <div class="RightPane">
        <p>
            The splitbar needs to be wide enough to grab with the mouse, but a thick splitbar
            may be visually distracting in a design. This example shows how to make a splitbar
            that looks skinny but has a wider grabbing area. It also demonstrates the use of
            an alternate resize cursor. (Not all browsers support alternate cursors and only
            IE seems to support animated cursors.)</p>
        <p>
            A background image in the splitbar provides the visual marker but the splitbar area
            extends further right, appearing as padding on the right pane. The splitbar's hot
            zone is "biased" to the right so that it will not have a gap against any left-side
            scrollbar when it appears. If you know the left pane will never have a scroll bar,
            you could make the hot zone centered on the skinny splitbar.</p>
    </div>
</div>
</form>

ボタンの後ろのコードは次のとおりです

 protected void Page_Load(object sender, EventArgs e)
    {
        if (HiddenField1.Value == "2")
        {
            HiddenField1.Value = "1";
        }
        else
        {
            HiddenField1.Value = "2";
        }
    }
于 2012-04-16T08:26:21.080 に答える