コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
//ページ表示時に設定を変更する。
$(window).load(function () {
ResizeTrvArea();
});
//孫DIVの横幅を全て加算し、子DIVの横幅を設定する
function ResizeTrvArea() {
var boxes = $(".trv-area .wrapper-area .box")
var width = 0;
for (var i = 0; i < boxes.length - 1; i++) {
if (boxes[i] != null && boxes[i] != undefined) {
//boxの幅 + boxの余白 + 50px?←要調整
width += boxes[i].clientWidth + 90
}
}
$(".trv-area .wrapper-area").css({
"width": width,
});
}
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TreeViewTest.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TreeViewTest</title>
<link rel="stylesheet" type="text/css" href="~/Scripts/Style.css" media="all" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function PostBackForTreeView()
{
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox")
{
__doPostBack("","");
}
}
//ページ表示時に設定を変更する
$(window).load(function () {
ResizeTrvArea();
});
//孫DIVの横幅を全て加算し、子DIVの横幅を設定する
function ResizeTrvArea() {
var boxes = $(".trv-area .wrapper-area .box")
var width = 0;
for (var i = 0; i < boxes.length - 1; i++) {
if (boxes[i] != null && boxes[i] != undefined) {
width += boxes[i].clientWidth + 90
}
}
$(".trv-area .wrapper-area").css({
"width": width,
});
}
</script>
<div class="trv-area">
<div class="wrapper-area">
<div class="box">
<asp:TreeView ID="trvTest1" runat="server" onclick="PostBackForTreeView();" >
<ParentNodeStyle CssClass="" />
<LeafNodeStyle CssClass="RedFont"/>
</asp:TreeView>
</div>
<div class="box">
<asp:TreeView ID="trvTest2" runat="server" onclick="PostBackForTreeView();" >
<ParentNodeStyle CssClass="" />
<LeafNodeStyle CssClass="BlueFont"/>
</asp:TreeView>
</div>
<div class="box">
<asp:TreeView ID="trvTest3" runat="server" onclick="PostBackForTreeView();" >
<ParentNodeStyle CssClass="" />
<LeafNodeStyle CssClass="BlueFont"/>
</asp:TreeView>
</div>
<div class="box">
<asp:TreeView ID="trvTest4" runat="server" onclick="PostBackForTreeView();" >
<ParentNodeStyle CssClass="" />
<LeafNodeStyle CssClass="BlueFont"/>
</asp:TreeView>
</div>
<div class="box">
<asp:TreeView ID="trvTest5" runat="server" onclick="PostBackForTreeView();" >
<ParentNodeStyle CssClass="" />
<LeafNodeStyle CssClass="BlueFont"/>
</asp:TreeView>
</div>
<div class="box">
<asp:TreeView ID="trvTest6" runat="server" onclick="PostBackForTreeView();" >
<ParentNodeStyle CssClass="" />
<LeafNodeStyle CssClass="BlueFont"/>
</asp:TreeView>
</div>
</div>
</div>
</form>
</body>
</html>
body {
}
.RedFont {
color:#FF0000;
font: bold 12px;
}
.BlueFont {
color:#0000FF;
font: bold 12px;
}
.trv-area {
overflow :auto;
height : 300px;
width : 800px;
}
.wrapper-area{
min-width : 1200px;
min-height : 500px;
}
.box {
float: left;
margin : 20px;
}
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。