【外来物种溯源码】【节奏大师源码思路】【git安装源码安装】easyui layout源码

2024-12-27 02:15:42 来源:素材模板源码资源下载站源码 分类:休闲

1.easyui 中如何删除region=‘east’
2.easyui-layout空间如何置顶,源码浏览器顶部和界面中间有一条空隙,怎么去掉这条空隙
3.有谁知道frameset与easyui 中的源码layout有什么区别,如何设计具有导航栏和主体内容的源码
4.jQuery Easyui实现左右布局

easyui layout源码

easyui 中如何删除region=‘east’

       layout有个方法叫做remove,入参就是源码region,官方文档说明 如下:

       Remove the specified panel,源码 the 'region' parameter possible values:'north','south','east','west'.

       实例:

       $("#container").layout("remove","east"); //删除east位置的布局区域面板

easyui-layout空间如何置顶,浏览器顶部和界面中间有一条空隙,怎么去掉这条空隙

       css样式写上body{ margin:0px;},源码外来物种溯源码

       如果这个没效果,说明下面重定义了margin,源码这个时候你就在整个页面的第一个div补上前面的样式style=“margin:0px”就可以了

有谁知道frameset与easyui 中的layout有什么区别,如何设计具有导航栏和主体内容的源码

       frameset是框架,被淘汰的源码东西了,只适合用于性能要求不高,源码页面不复杂的源码站点,用途还是源码有滴,只是源码没前途了

       layout是用div来做的,比较先进的源码div布局,无论是源码节奏大师源码思路性能,还是dom操作都强的多。而且layout是封装过的,提供了很简单的定义属性,即可快速生成页面

       你也可以用table+div来做,简单的多,同时也比frameset方便的多。

       左侧导航,git安装源码安装右侧内容?

       左侧就使用easyui的数,或者zTree插件来做。

       也可以你自己用ui li写死来弄。

       右侧就使用tab来做

jQuery Easyui实现左右布局

       EasyUI

       简介

       easyui是一种基于jQuery的用户界面插件集合。

       easyui为创建现代化,互动,JavaScript应用程序,思维导图中源码提供必要的功能。

       使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

       easyui是个完美支持HTML5网页的完整框架。

       easyui节省您网页开发的时间和规模。

       easyui很简单但功能强大的源码怎么变成补码

       在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架。

       1.在页面中引入easyui所需的文件

       <%--

       加载easyui的样式文件,bootstrap风格

       --%>

       <link

       href="${ ctx

       }/css/themes/bootstrap/easyui.css"

       rel="stylesheet">

       <link

       href="${ ctx

       }/css/themes/icon.css"

       rel="stylesheet">

       <%--

       加载jquery和easyui的脚本文件

       --%>

       <script

       src="${ ctx

       }/js/jquery-easyui-../jquery.min.js"></script>

       <script

       src="${ ctx

       }/js/jquery-easyui-../jquery.easyui.min.js"></script>

       <script

       src="${ ctx

       }/js/jquery-easyui-../locale/easyui-lang-zh_CN.js"></script>

       2.在页面body部分构建必要的html结构

       <body>

       <div

       id="home-layout">

       <!--

       页面北部,页面标题

       -->

       <div

       data-options="region:'north'"

       style="height:px;">

       <!--

       add

       your

       code

       -->

       </div>

       <!--

       页面西部,菜单

       -->

       <div

       data-options="region:'west',title:'菜单栏'"

       style="width:px;">

       <div

       class="home-west">

       <ul

       id="home-west-tree"></ul>

       </div>

       </div>

       <!--

       页面中部,主要内容

       -->

       <div

       data-options="region:'center'">

       <div

       id="home-tabs">

       <div

       title="首页">

       <h2

       style="text-align:

       center">欢迎登录</h2>

       </div>

       </div>

       </div>

       </div>

       </body>

       这里需要注意一点:easyui在使用layout布局的时候,north、south需要指定高度,west、east需要指定宽度,而center会自动适应高和宽。

       3.使用js初始化easyui组件

       我个人比较推荐使用js代码去初始化easyui组件,而不使用easyui标签中的data-options属性去初始化。因为对于后台开发人员来说,写js代码可能比写html标签更加熟悉,而且这样使得html代码更加简洁。

       <script>

       $(function(){

       /

*

       

*

       初始化layout

       */

       $("#home-layout").layout({

       //使layout自适应容器

       fit:

       true

       });

       /

*

       

*

       获取左侧菜单树,并为其节点指定单击事件

       */

       $("#home-west-tree").tree({

         //加载菜单的数据,必需

       url:

       "${ ctx

       }/pages/home-west-tree.json",

       method:

       "get",

         //是否有层次线

       lines:

       true,

         //菜单打开与关闭是否有动画效果

       animate:

       true,

         //菜单点击事件

       onClick:

       function(node){

       if(node.attributes

       &&

       node.attributes.url){

              //打开内容区的tab,代码在其后

       addTab({

       url:

       "${ ctx

       }/"

       +

       node.attributes.url,

       title:

       node.text

       });

       }

       }

       });

       /

*

       

*

       初始化内容区的tabs

       */

       $("#home-tabs").tabs({

       fit

       :

       true,

         //tab页是否有边框

       border

       :

       false

       });})

       </script>

       <script>

       /

*

       

*

       在内容区添加一个tab

       */

       function

       addTab(params){

       var

       t

       =

       $("#home-tabs");

       var

       url

       =

       params.url;

       var

       opts

       =

       {

       title:

       params.title,

       closable:

       true,

       href:

       url,

       fit:

       true,

       border:

       false

       };

       //如果被选中的节点对应的tab已经存在,则选中该tab并刷新内容

       //否则打开一个新的tab

       if(t.tabs("exists",

       opts.title)){

       var

       tab

       =

       t.tabs("select",

       opts.title).tabs("getSelected");

       t.tabs("update",

       {

       tab:

       tab,

       options:

       opts

       });

       }else{

       t.tabs("add",

       opts);

       }

       }

       </script>

       4.easyui-tree组件所需的json格式

       easyui使用的传输格式为json,它对json内容的格式有比较严格的限制,所以请注意查看api

       [{

       "text":"区域管理",

       "attributes":{

       "url":"pages/consume/area/areaList.jsp"

       }

       },{

       "text":"预约信息管理",

       "children":[{

       "text":"商户预约信息查询",

       "attributes":{

       "url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"

       }

       }]

       },{

       "text":"准入申请管理",

       "children":[{

       "text":"商户准入申请",

       "state":"closed",

       "children":[{

       "text":"商户待处理申请",

       "attributes":{

       "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_wait"

       }

       },{

       "text":"商户审批中申请",

       "attributes":{

       "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_current"

       }

       },{

       "text":"商户审批通过申请",

       "attributes":{

       "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_pass"

       }

       },{

       "text":"商户被拒绝申请",

       "attributes":{

       "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_refuse"

       }

       }]

       }]

       },{

       "text":"准入审批管理",

       "children":[{

       "text":"商户审批管理",

       "state":"closed",

       "children":[{

       "text":"当前任务",

       "children":[{

       "text":"商户当前初审任务",

       "attributes":{

       "url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"

       }

       },{

       "text":"商户当前复审任务",

       "attributes":{

       "url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"

       }

       }]

       },{

       "text":"商户已完成任务",

       "attributes":{

       "url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"

       }

       },{

       "text":"商户不通过任务",

       "attributes":{

       "url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"

       }

       }]

       }]

       }]

       就这样,我们使用easyui完成了简单的左右布局。

       以上所述是小编给大家分享的jQuery

       Easyui实现上左右布局的相关内容,希望对大家有所帮助。

本文地址:http://581.net.cn/news/01d285097148.html 欢迎转发