jqwidgets splitter把页面水平分割

需求：将页面水平分割成三部分，比例分别是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>

运行结果如下：

jqwidgets splitter把页面水平分割相关推荐

SilverLight：布局（2）GridSplitter（网格分割）垂直分割、水平分割
ylbtech-SilverLight-Layout: 布局(2)GridSplitter(网格分割)垂直分割.水平分割 A, Splitter(分割)对象之 GridSplitter(网格分割)1: ...
数据通信技术（七：RIP路由水平分割配置）
RIP路由水平分割配置实验报告一.知识准备掌握RIP动态路由的定义和特征. 掌握RIP路由环路的危害和解决技术. 掌握水平分割的工作原理. 二.实验目的掌握路由器中RIP动态路由水平分割功能的配 ...
为了解决伴随RIP协议的路由环路问题，可以采用水平分割法，这种方法的核心是（22），而反向毒化方法则是（23）。
为了解决伴随RIP协议的路由环路问题,可以采用水平分割法,这种方法的核心是(22),而反向毒化方法则是(23). (22) A.把网络水平地分割为多个网段,网段之间通过指定路由器发布路由信息 B.一条 ...
BGP水平分割的疑惑
今天看到一条关于BGP水平分割问题的讨论. 主要症结在这个地方: 同样是水平分割,在BGP和IGP中都有:那么: IGP的水平分割:从某个接口上学习来的路由信息将不再从该接口上通告出去.就是从那个口进 ...
详细说明通过kettke对csv文件转换的操作步骤_如何将多页面pdf分割成一页一页的PDF文件...
经常会有小伙伴问我,如何将多页面的PDF文件拆分成一个个的PDF文件?例如有5个页面的PDF文件,一次性拆分导出生成5个单页面的PDF文件? PDF文件是我们日常工作学习中经常要用到的,有时候PDF文 ...
mysql数据库水平分割_数据库的水平分割和垂直分割
在数据库操作中,我们常常会听说这两个词语:水平分割和垂直分割.那么到底什么是数据库的水平分割,什么是数据库的垂直分割呢?本文我们就来介绍一下这部分内容. 1.水平分割: 按记录进分分割,不同的记录可以 ...
BGP——本地优先级选路+BGP路由水平分割机制（讲解+配置命令）
目录一.本地优先级特性二.配置命令: 三.图解: 四.BGP路由水平分割机制一.本地优先级特性 1.1 公有属性,默认值100 1.2 只能在IBGP邻居之间传递 1.3 适用于自身AS有两个出 ...
BGP——路由通告+IBGP水平分割机制+RR路由反射器（讲解+配置命令）
目录一.通告BGP路由: (1)BGP路由的产生: (2)需注意点[通过network通告的方式把IGP路由通告进BGP里面] (3)查看BGP数据库+相关属性讲解: (4)BGP下一跳变换解析: ...
RIP协议。水平分割，毒性逆转，触发更新，抑制计时
RIP协议(Routing Information Protocol,路由信息协议) 是一种动态路由选择协议,基于距离矢量算法. 使用"跳数"(即metric)来衡量到达目标地址的 ...
5.2 BGP水平分割
5.2.2实验2:BGP水平分割 1. 实验目的熟悉BGP水平分割的应用场景掌握BGP水平分割的配置方法 2. 实验拓扑实验拓扑如图5-2所示: 图5-2:BGP水平分割 3. ...

jqwidgets splitter把页面水平分割

jqwidgets splitter把页面水平分割相关推荐

最新文章

热门文章