效果图如下:
源码:
<!DOCTYPE html> <html> <head> <title>Collapsed text</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/> <script src="../../../codebase/dhtmlx.js"></script> <style> div#layoutObj { position: relative; margin-top: 20px; margin-left: 20px; width: 600px; height: 400px; } </style> <script> var myLayout; var sel; function doOnLoad() { myLayout = new dhtmlXLayoutObject({ parent: "layoutObj", pattern: "3L", cells: [ {id: "a", text: "Main Page", collapsed_text: "Expand to view main page"}, {id: "b", text: "Site Navigation", collapsed_text: "Expand to navigae"}, {id: "c", text: "Support & Feedback"} ] }); myLayout.cells("a").attachHTMLString("Custom collapsed text here"); myLayout.cells("b").attachHTMLString("Custom collapsed text here"); myLayout.cells("c").attachHTMLString("Collapsed text not changed here"); } </script> </head> <body οnlοad="doOnLoad();"> <div id="layoutObj"></div> </body> </html>