在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些功能选项的控件.比如下面这两个比较典型的例子:   EasyUI 提供了一种非常简单方便的实现该效果的方法,可以让用户很方便的在页面上实现矩形区域划分的功能,这就是 EasyUI 的布局组件(Layout). EasyUI 布局组件Layout EasyUI 的布局组件允许用户在一个主工作区的四周各…

jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广告有点多,凑合能用,可以参考..但是,广告真的实在的确是有点非常碍眼. 现在最新的 EasyUI 是 1.4.2 版本,本系列教程都会基于该版本.没有的可以去EasyUI 官网http://www.jeasyui.com/ 下载,或者点击该链接 jquery-easyui-1.4.2下载.不过因为我…

几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是另一个“牛人”搭建的,后来被这个 PM 直接拿来用了. 因为搭框架的“牛人”已经不在了,整个 Team 没有对框架非常精通的人,开发过程中遇到不少问题. 后台还好,没用什么复杂的组件或框架,都是最基本的 ASP.NET 页面和 C# 代码,所以没有什么问题.关键是前端,当时整个 Team 里没有一个…

项目背景:靠近浏览器窗口的各个方向(左上.下.左.右)都有不同的模态框悬浮于窗口,这里针对于底部组件定位的选择(主要针对pc端垂直方向上的定位) 1.百分比:easyui的window窗口定位方式:设置left和top的值即可:(left可直接写指定值px:top不能写px,因为各个分辨率下的浏览器窗口距离上面的值是不固定的.考虑到此top值写成百分数,原以为百分数可以解决此问题了,结果在不同屏幕大小的浏览器窗口中依然有细微差距) 2.js:easyui的window窗口只能设置left和top…

使用Easyui1.引入必要的文件 1).jquery核心库 2).easyui核心库 3).easyui中文提示信息 4).自己开发的js文件 5).easyui核心UI文件css 6).easyui图标文件引入完毕就可以开始写代码了 加载UI组件的方式 1.使用class方式加载 使用class加载,格式为:easyui-组件名 <div id="box" class="easyui-dialog" title="标题" style=&…

所谓放置,就是将一个物体放入一个物体内,当然对于easyui来说触发各种效果是必不可少的,同时这个组件也不会依赖于其他组件. Droppable的加载方式 1,class  加载   一直不太喜欢class方式的加载  浪费一个位置,代码一多还看着乱七八糟的. <div id='dd' class="easyui-droppable" data-options="accept:'#box,#pox'"></div> 2,js 加载调用 $(&…

很不习惯这种强迫式的学习,但谁叫我不是老师了,所以还是决定坚持练习,顺带为博客加点东西.虽然我还是很反感短时间内惯性的去熟悉一个工具. easyui做为一个封装了JQusey的UI插件,其实还是蛮好用的,至少省了像我这种渣渣很多时间. Draggable的加载方式有两种: 1,通过class加载,如下: <div id="box" class="easyui-draggable"></div> 1,通过JS加载,如下: $('#box').d…

ps:先来一波美图 Tooltip的加载方式: 1,class加载 <a href="#" title="tooltip">hello word</a> 2,js 加载调用 $('#box').tooltip({ content : 'tooltip', }); Tooltip的属性列表 $('#box').tooltip({ position : 'top', //消息框在当前元素的位置 left? right ? 默认是bootom co…

Resizable  动态调整元素大小  不依赖其他组件 Resizable的加载方法 <div class="easyui-resizable"></div> //class加载 $("#box").resizable({}); //js 加载 Resizable属性列表 $("#box").resizable({ disabled : true, //默认为false,设置为true则禁用调整大小 handles :…

居然还有button组件 - - linkButton组件的加载方式 1,class加载 <a class='easyui-linkbtuton'>按钮<a> 2,js加载 $('#box').linkbutton({ ...... }); linkButton 组件的属性列表 $('#box').linkbutton({ id : 'pox', //组件的ID属性 disabled : true, //设置true则禁止按钮 toggle : true, //设置true则可以被…