1. EasyUI
EasyUI是一种基于jQuery的用户界面插件集合。easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。优势:开源免费,页面也还说的过去。
easyUI入门:
页面引入必要的js和css样式文件,文件引入顺序为:
1. <!-- 引入JQuery -->
2. <script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.min.js"></script>
3. <!-- 引入EasyUI -->
4. <script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
5. <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
6. <script type="text/javascript" src="../jquery-easyui-1.4.1/locale/easyui-lang-
zh_CN.js"></script>
7. <!-- 引入EasyUI的样式文件-->
8. <link rel="stylesheet" href="../jquery-easyui-1.4.1/themes/default/easyui.css"
type="text/css"/>
9. <!-- 引入EasyUI的图标样式文件-->
10. <link rel="stylesheet" href="../jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
然后在页面写easyUI代码就行,easyUI提供了很多样式:
实现代码如下:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Basic Dialog - jQuery EasyUI Demo</title>
6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
8. <link rel="stylesheet" type="text/css" href="../demo.css">
9. <script type="text/javascript" src="../../jquery.min.js"></script>
10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
11. </head>
12. <body>
13. <h2>Basic Dialog</h2>
14. <p>Click below button to open or close dialog.</p>
15. <div style="margin:20px 0;">
16. <a href="javascript:void(0)" class="easyui-linkbutton"
οnclick="$('#dlg').dialog('open')">Open</a>
17. <a href="javascript:void(0)" class="easyui-linkbutton"
οnclick="$('#dlg').dialog('close')">Close</a>
18. </div>
19. <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
20. The dialog content.
21. </div>
22. </body>
23. </html>
24.
2. MiniUI
基于 jquery 的框架,开发的界面功能都很丰富。jQuery MiniUI - 快速开发 WebUI。它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。使用 MiniUI,开发者可以快速创建 Ajax 无刷新、 B/S 快速录入数据、 CRUD、 Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型 WEB 应用系统界面。缺点:收费,没有源码,基于这个开发如果想对功能做扩展就需要找他们的团队进行升级!
提供以下几大类控件:
表格控件
树形控件
布局控件:标题面板、弹出面板、折叠分割器、布局器、表单布局器等 导航控件:分页导航器、导航菜单、选项卡、菜单、工具栏等。
表单控件:多选输入框、弹出选择框、文本输入框、数字输入框、日期选择框、下拉选择框、下拉树形选择框、下拉表格选择框、文件上传控件、多选框、列表框、多选框组、单选框组、按钮等
富文本编辑器
图表控件:柱状图、饼图、线形图、双轴图等。
技术亮点:
快速开发:使用Html配置界面,减少80%界面代码量。
易学易用:简单的API设计,可以独立、组合使用控件。
性能优化:内置数据懒加载、低内存开销、快速界面布局等机制。
丰富控件:包含表格、树、数据验证、布局导航等超过50个控件。
超强表格:提供锁定列、多表头、分页排序、行过滤、数据汇总、单元格编辑、详细行、Excel导出等功能。
第三方兼容:与ExtJS、jQuery、YUI、Dojo等任意第三方控件无缝集成。 浏览器兼容:支持IE6+、FireFox、Chrome等。
跨平台支持:支持Java、.NET、PHP等。
实现代码如下:
1. <ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;"
2. showTreeIcon="true" textField="text" idField="id"
3. allowDrag="true" allowDrop="true"
4. >
5. </ul>
1. jQueryUI(2017-11-23-lyq)
jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。
技术亮点:
简单易用:继承 jQuery 简易使用特性,提供高度抽象接口,短期改善网站易用性。
开源免费:采用 MIT & GPL 双协议授权,轻松满足自由产品至企业产品各种授权需求。
广泛兼容:兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。 轻便快捷:组件间相对独立,可按需加载,避免浪费带宽拖慢网页打开速度。
标准先进:支持 WAI-ARIA,通过标准 XHTML 代码提供渐进增强,保证低端环境可访问性。
美观多变:提供近 20 种预设主题,并可自定义多达 60 项可配置样式规则,提供 24 种背景纹理选择。 度娘上搜jQueryUI的api,其用法与easyUI、MiniUI都大同小异,此处将不再举例。
2. Vue.js
Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue.js起步:
引入相应文件:
1. <script src="https://unpkg.com/vue"></script>
声明式渲染:
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:
1. <!-- html文件中 -->
2. <div id="app">
3. {{ message }}
4. </div>
<!-- js 文件中 -->
5. var app = new Vue({
6. el: '#app',
7. data: {
8. message: 'Hello Vue!'
9. }
10. })
创建vue实例:
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的,当创建一个 Vue 实例时,你可以传入一个选项对象。可以使用这些选项来创建你想要的行为。
1. <!-- js 文件中 -->
2. var vm = new Vue({
3. // 选项
4. })
实例生命周期:
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。比如 created 钩子可以用来在一个实例被创建之后执行代码:
1. <!-- js文件中 -->
2. new Vue({
3. data: {
4. a: 1
5. },
6. created: function () {
7. // `this` 指向 vm 实例
8. console.log('a is: ' + this.a)
9. }
10. })
11. // => "a is: 1"
3. AngularJS (2017-11-23-lyq)
AngularJS 是google 开发者设计的一个前端开发框架,它是由是由JavaScript 编写的一个JS框架。通常它是
用来在静态网页构建动态应用不足而设计的。
AngularJS 特点如下:
1、 数据绑定: AngularJS是数据双向绑定。
2、 MVVM(Model-View-ViewModel)模式: Model 简单数据对象,View 视图(如HTML,JSP等),
ViewModel是用来提供数据和方法,和View 进行交互。这种设计模式使得代码解耦合。
3、依赖注入:AngularJS支持注入方式把需要的对象,方法等注入到指定的对象中。
4、 指令: AngularJS内部自带各种常用指令,同时也支持开发者自定义指令。
5、HTML模板和扩展HTML: AngularJS可以定义与HTML兼容的自定义模板。
AngularJS 的Api:
AngularJS 提供了很多功能丰富的组件,处理核心的 ng 组件外,还扩展了很多常用的功能组件,如ngRoute(路由),ngAnimate(动画),ngTouch(移动端操作)等,只需要引入相应的头文件,并依赖注入你的工作模块,则可使用。
ng (core module):AngularJS的默认模块,包含AngularJS的所有核心组件。
指令(directive) |
这是指令的核心集合,你可以在你的模板代码中使用它们来构建一个AngularJS应用。 一些例子包括:ngClick,ngInclude, ngRepeat,等等 |
服务(service) |
这是服务的核心集合,依赖注入后可在你的应用中使用。 文章来源:https://www.toymoban.com/news/detail-476743.html 一些例子包括: $compile,$http, $location,等等 |
过滤器(filter) |
在组件模块中的核心过滤器是用来转换模板数据。 一些例子包括: filter, date, currency,lowercase, uppercase 等等 |
全局函数 (function) |
核心的全局函数作为angularjs对象。这些核心功能在您的应用程序的原生的JavaScript操作有用。 一些例子包括: angular.copy(), angular.equals(), angular.element()等等 |
ngRoute:AgularJS的路由模块,你能使用ngRoute结合"#"定义你的地址访问。引入angular-route.js文件,然后在你当前的工作模块依赖注入ngRoute模块。
服务(service) |
下面这些服务用作AngularJS的路由管理。 $routeParams - 解析返回路由中带有的参数 |
指令(Directive) |
指令ngView 提供不同路由模板插入的视图层 |
ngAnimate:AngularJS的动画模块,使用ngAnimate各种核心指令能为你的应用程序提供动画效果。
动画可使用css或者JavaScript回调函数。引入angular-animate.js文件,然后在你当前的工作模块依赖注
入ngAnimate模块。
服务(service) |
使用$animate 来在你的指令代码中触发动画操作。 |
CSS-based animations |
按照nganimate的CSS命名结构参考CSS转换/关键帧动画在AngularJS。 一旦定义,动画可以通过引用CSS在HTML模板代码触发。 |
JS-based animations |
使用module.animation() 来注册一个 JavaScript动画。 一旦注册,动画可以通过引用CSS在HTML模板代码触发。 |
ngAria:帮助制作 AngularJS 自定义组件的新模块。引入angular-aria.js 文件,然后在你当前的工
作模块依赖注入ngAria模块。
服务(service) |
这是服务的核心集合,依赖注入后可在你的应用中使用。 一些例子包括: ngClick, ngInclude, ngRepeat等等 |
ngResource:AngularJS的动画模块,使用ngAnimate各种核心指令能为你的应用程序提供动画效
果。动画可使用css或者JavaScript回调函数。引入angular-resource.js 文件,然后在你当前的工作模块
依赖注入ngResource模块。
服务(service) |
这是服务的核心集合,依赖注入后可在你的应用中使用。 一些例子包括: ngClick, ngInclude, ngRepeat等等 |
ngCookies:ngCookies模块提供了一个方便的包用于读取和写入浏览器的cookies。
引入angular-cookies.js 文件,然后在你当前的工作模块依赖注入ngCookies模块。
服务(service) |
这是服务的核心集合,依赖注入后可在你的应用中使用。 一些例子包括: ngClick, ngInclude, ngRepeat等等 |
ngTouch:AngularJS的动画模块,使用ngAnimate各种核心指令能为你的应用程序提供动画效果。动画可使用 css 或者 JavaScript 回调函数。引入 angular-touch.js 文件,然后在你当前的工作模块依赖注入ngTouch模块。
服务(service) |
这是服务的核心集合,依赖注入后可在你的应用中使用。 一些例子包括: ngClick, ngInclude, ngRepeat等等 |
ngSanitize:使用ngSanitize可安全地解析和在你的应用程序中操作HTML数据。 引入angular-sanitize.js 文件,然后在你当前的工作模块依赖注入ngSanitize模块。
服务(service) |
这是服务的核心集合,依赖注入后可在你的应用中使用。 一些例子包括: ngClick, ngInclude, ngRepeat等等 文章来源地址https://www.toymoban.com/news/detail-476743.html |
ngMock:AngularJS的动画模块,使用ngAnimate各种核心指令能为你的应用程序提供动画效果。动画可使用css或者JavaScript回调函数。引入angular-animate.js 文件,然后在你当前的工作模块依赖注入ngMock模块。
服务(service) |
这是服务的核心集合,依赖注入后可在你的应用中使用。 一些例子包括: ngClick, ngInclude, ngRepeat等等 |
到了这里,关于常见的前端框架有哪些的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!