split panel ซ้ายขวา แบ่ง content บนหน้าเว็บ


HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

User avatar
jataz2
PHP Super Member
PHP Super Member
Posts: 238
Joined: 22/02/2011 11:48 am

split panel ซ้ายขวา แบ่ง content บนหน้าเว็บ

Post by jataz2 » 02/07/2019 2:10 pm

ลองใช้ dojo ดูสิครับ

Code: Select all

<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="https://dojotoolkit.org/reference-guide/1.10/_static/js/dijit/themes/claro/claro.css">
	<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow:hidden;
}

#borderContainer {
    width: 100%;
    height: 100%;
}
	</style>
	<script>dojoConfig = {parseOnLoad: true}</script>
	<script src="https://dojotoolkit.org/reference-guide/1.10/_static/js/dojo/dojo.js" type="text/javascript"></script>
	
	<script>
require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer"]);
	</script>
</head>
<body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">
	<!--<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'leading'" style="width: 100px;">Hi, I'm leading pane</div> -->
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'left'" style="width: 100px;">Hi, I'm left menu</div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">Hi, I'm center content pane</div>
</div>
</body>
</html>

drag ย่อ/ขยายขนาด left menu ได้ดังรูปครับ เอาไป implement ต่อได้เลย ใส่ link menu และ html ได้ตามสบายครับ
อ่านเพิ่มเติมได้เต็มๆที่นี่ https://dojotoolkit.org/documentation/t ... it_layout/
Attachments
split panel ซ้ายขวา แบ่ง content บนหน้าเว็บ split panel left right.gif
split panel left right.gif (40.18 KiB) Viewed 307 times

Return to “HTML CSS”

Users browsing this forum: No registered users and 6 guests