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

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

Moderator: mindphp

ภาพประจำตัวสมาชิก
jataz2
PHP Super Member
PHP Super Member
โพสต์: 230
ลงทะเบียนเมื่อ: 22/02/2011 11:48 am

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

โพสต์โดย jataz2 » 02/07/2019 2:10 pm

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

โค้ด: เลือกทั้งหมด

<!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/
แนบไฟล์
split panel left right.gif
split panel left right.gif (40.18 KiB) เปิดดู 171 ครั้ง

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 10 และ บุคคลทั่วไป 0 ท่าน