php迷你技巧_前端MiniUi入门进修及简单例子

用于网站页面的开拓，专业的WebUi控件库。

不依赖高等措辞，可支持 Java、.Net、PHP.

快速开拓：利用Html配置界面，减少80%界面代码量。

易学易用：大略的API设计，可以独立、组合利用控件。

性能优化：内置数据

丰富控件：包含表格、树、数据验证、布局导航等超过50个控件。

超强表格：供应锁定列、多表头、分页排序、行过滤、数据汇总、单元格编辑、详细行、Excel导出等功能。

第三方兼容：与ExtJS、jQuery、YUI、Dojo等任意第三方控件无缝集成。

浏览器兼容：支持IE6+、FireFox、Chrome等。

作为一个后台开拓职员，我们理解一些前真个知识也是必不可少的，以是本日在这里紧张讲解一下MiniUi的利用。
在后面也会演示一个大略的例子。

第一步，我们须要去MiniUi官网（http://www.miniui.com/download/）下载一个压缩包，根据自己用到的开拓工具来选择性下载，我用的开拓工具是Eclipse,以是我就下载了一个Eclipse的。
解压后导入自己的工程中。
导入完成后工程目录如下图所示：

工程目录图

第二步，我们须要把项目发布到tomcat中，并且运行启动。
打开浏览器输入http://localhost:8080/miniui_java/就会进入到MiniUi官网界面。

第三步，实在第二步只是作为一个演示，在实际当中用到的实在紧张用到的便是工程目录图当中的scripts这个文件夹中的资源。
以是我们只须要把这个scripts文件夹导入到自己webapp文件下，就可以放心利用了。

上述步骤完成后我们就可以利用它了。
在这里我就以MiniUi框架布局为例来讲一讲。

MiniUi框架的布局紧张有四种分别是：OutlookTree、OutlookMenu、Tree 、Menu，就拿OutlookMenu布局为例。
首先我们须要找到这个布局的HTML页面，这个页面的是在demo/outlookmenu.html中。
我们把这个页面粘到自己的webapp文件夹目录下，当然你也可以在webapp文件夹下自己创建一个文件夹放进去。
在这里我是把outlookmenu.html放到了webapp下，在这个页面上我们须要修正获取资源的路径 ：<script src=\公众scripts/boot.js\公众 type=\"大众text/javascript\"大众></script> ，如果放到了自己建的的文件夹下，请按照自己的目录构造自行修正，在这里就不在赘述。

先不要焦急运行项目，我们还须要在outlookmenu.html页面中把获取左边菜单数据资源的url的路径修正本钱身的（第42行），还要把获取右边的数据表页面修正本钱身的页面，就可以运行了。
运行结果如下图所示：

OutlookMenu布局图