jQuery拆分器更改为垂直拆分器单击按钮 [英] jquery splitter change to vertical splitter on button click
问题描述
我有一个工作良好的分离器.现在，客户希望将拆分器从水平视图更改为垂直视图.我的意思是首先将拆分器水平拆分为2个div，然后单击按钮将对其进行更改，以便将其垂直拆分为2个div.
I have a splitter that works fine. Now the client wants to change the splitter from horizontal view to vertival view. I mean that the splitter is first split int the 2 divs horizontally and when I click the button it will change so that it's split the same 2 divs vertically.
我尝试过
<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>
推荐答案
最后，我找到了onw问题的解决方案. 我正在asp.net中设计它，所以我正在使用asp.net在jquery中提供解决方案
at last i find the solution of my onw question. I am designing it in asp.net so i am providing the solution in jquery with asp.net
<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; 溢出:自动； 宽度:200像素； 最小宽度:50像素； }
#LeftPane { background: #def; overflow: auto; width: 200px; min-width: 50px; }
#RightPane
{
background: #def;
overflow: auto;
min-width: 100px;
}
#MySplitter .vsplitbar { 宽度:8px; 光标:电子调整大小； 游标:col-resize; 背景颜色:黑色； }
#MySplitter .vsplitbar { width:8px; cursor: e-resize; 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;
}
#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";
}
}
这篇关于jQuery拆分器更改为垂直拆分器单击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
