jqwidgets splitter把页面水平分割

最新推荐文章于 2025-02-08 08:04:53 发布

qq_33744949

最新推荐文章于 2025-02-08 08:04:53 发布

阅读量1k

点赞数

分类专栏： Html 文章标签： html sqlitter java

本文链接：https://blog.youkuaiyun.com/qq_33744949/article/details/88716749

版权

Html 专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何使用jqwidgets库将HTML页面水平分割为三个部分，详细步骤包括下载jqwidgets库，引入所需JS和CSS文件，并展示了具体的HTML和JavaScript代码实现。最终实现了50%、25%、25%的比例分割。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：将页面水平分割成三部分，比例分别是50%, 25%, 25%

设计步骤：

第一步：下载jqwidget https://www.jqwidgets.com/download/

第二步：将需要的js和css文件（jquery.min.js, jqxcore.js, jqxsplitter.js, jqxbuttons.js, jqxscrollbar.js, jqxpanel.js, demos.js, jqx.base.css ）放到自定义的目录下。例如：***/plugins/jqwidgets/

第三步：引入所需的js和css文件，构建html代码如下：

<body>
   <div id='jqxWidget'>
       <div id="topSplitter">
           <div class="splitter-panel">
               panel1
           </div>
           <div class="splitter-panel">
               <div id="bottomSplitter">
                   <div class="splitter-panel" style="overflow: auto;">
                       panel2
                   </div>
                   <div class="splitter-panel" style="overflow: auto;">
                       panel3
                   </div>
               </div>
           </div>
       </div>
   </div>

   </script>
   <script type="text/javascript" src="../../scripts/jquery.min.js"></script>
   <script th:src="@{/assets/plugins/jqwidgets/jqxcore.js}"></script>
   <script th:src="@{/assets/plugins/jqwidgets/jqxsplitter.js}"></script>
   <script th:src="@{/assets/plugins/jqwidgets/jqxbuttons.js}"></script>
   <script th:src="@{/assets/plugins/jqwidgets/jqxscrollbar.js}"></script>
   <script th:src="@{/assets/plugins/jqwidgets/jqxpanel.js}"></script>
   <script th:src="@{/assets/plugins/jqwidgets/demos.js}"></script>
</body>
</html>

运行结果如下：