|
本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属，感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。 jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 jQuery MiniUI - 专业WebUI控件库。使用MiniUI，开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。 一、miniUI 3．部署： 下载后，解压缩，会有如下文件结构： 各目录文件解释如下： · dbsql：示例数据库sql文件。 · demo：页面示例。 · docs：api文档、开发指南。 · scripts/miniui：MiniUI产品的javascript和css。 · scripts/miniui/locale：语言资源文件。 · scripts/miniui/themes：多套皮肤样式。 · index.html：开发包导航页面。 · miniui_commercial_license.doc：授权说明文档。 · miniui_tryform.doc：试用申请表文档。 · 安装部署.txt：安装部署说明文档。 Note：开发者只需要引用jquery.js、miniui.js、miniui.css即可。 为更好演示DataGrid相关示例，以及提供可参考的数据交互代码，我们提供了示例数据库和一定的服务端代码。 标准页面模板如下： <!DOCTYPE html />
<html>
<head>
<title>Hello MiniUI!</title>
<!--jQuery js-->
<script src="../jquery.js" type="text/javascript"></script>
<!--MiniUI-->
<link href="../themes/default/miniui.css" rel="stylesheet" type="text/css" />
<script src="../miniui.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
二、easyUI 3．部署： 1) 引用Jquery的Js文件<script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script> 2) 引用Easy UI的Js文件<script src="jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script> 3) 导入Easy UI的主题Css文件<link href="jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" /> 4) 导入Easy UI的图标Css文件<link href="jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" /> 5) 引用Easy UI的国际化文件以下为让它显示中文<script src="jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> 6) 页面上加上UTF-8编码 防止jquery.easyui.min.js 内容乱码
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 三、extJS 3．部署： <html> <head> <title>Welcome to Ext JS!</title> <link rel="stylesheet" type="text/css" href="ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script type="text/javascript" src="ext-5.0.0/build/ext-all.js"></script> <script type="text/javascript" src="ext-5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <script type ="text/javascript" src="app.js"></script> </head> <body></body> </html>
四、Bootstrap 2．部署： <html> <head> <title>Welcome to Ext JS!</title> <link rel="stylesheet" type="text/css" href="ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script type="text/javascript" src="ext-5.0.0/build/ext-all.js"></script> <script type="text/javascript" src="ext-5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <script type ="text/javascript" src="app.js"></script> </head> <body></body> </html>
| 
发表于 2015-4-28 22:57:12
|
查看: 1533|
回复: 0
|小黑屋| 码途山海.智隐长卷
渝ICP备15002301号-2
渝公网安备50011202504426
回复
支持
反对