建站达人
探索云世界
建站达人
暂无个人介绍
提交了问题
2019-03-19
我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。
目录 一、EasyUI 二、DWZ JUI 三、HUI 四、BUI 五、Ace Admin 六、Metronic 七、H+ UI 八、Admin LTE 九、INSPINIA 十、LigerUI 十一、其它UI 十二、总结 最近要做一个企业的OA系统，以前一直使用EasyUI，一切都好，但感觉有点土了，想换成现在流行的Bootstrap为基础的后台UI风格，想满足的条件应该达到如下几个： 1、美观、大方、简洁 2、兼容IE8、不考虑兼容IE6/IE7，因为现在还有很多公司在使用Win7系统，系统内置了IE8 3、能通过选项卡打开多个页面，不想做单页，iframe也没关系 4、性能好，不要太笨重 5、最好以Bootstrap为基础 6、还希望在以后别的系统中能够复用。 一次次反复纠结的选择开始了，给大家介绍下我考虑过的UI，也给大家一个参考。 一、EasyUI easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的。 优点：轻量、功能强大、免费、兼容性好、帮助详细、使用的人多生态好 缺点：非响应式布局、某些系统看起来有点土（客户与老板的感觉、确实与最新的那些UI有差距） 获得：上网搜索、网盘搜索大把被搭建好了基础功能的框架。下载 下载后大家可以替换成最新的1.5版的easyui 官网：http://www.jeasyui.com/，有免费版，有商业版，商业版收费，帮助非常详尽 资源：http://www.jeasyui.net/，easyui是国人的的作品，但服务器在国外，官网也是英文的，这个网站类似官网的中文版 二、DWZ JUI 特点：DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本。 官网：http://jui.org/ 下载：https://github.com/dwzteam/ 三、HUI H-ui前端框架是在bootstrap的思想基础上基于 HTML、CSS、JAVASCRIPT开发的轻量级web前端框架,开源免费,简单灵活,兼容性好,满足大多数中国网站。分了前端UI与后端UI。 官网：http://www.h-ui.net/H-ui.admin.shtml 后台，http://www.h-ui.net/ 前台 下载：https://github.com/jackying/ 缺点：感觉用的人少，名气小，资料不全，配套组件不多，但国人的产品符合国人的口味。 四、BUI BUI她是基于jQuery,兼容KISSY的UI类库，专致于解决后台系统的框架方案，BUI提供了丰富的DPL含有强大的控件库对业务做了精细的分析。 官网：http://www.builive.com/ 下载：https://github.com/dxq613/bui 感觉也比较冷、与HUI有点类似的优点整体框架符合我的要求，但风格有种说不出的感觉。 五、Ace Admin 响应式Bootstrap网站后台管理系统模板ace admin，非常不错的轻量级易用的admin后台管理系统，基于Bootstrap3，拥有强大的功能组件以及UI组件，基本能满足后台管理系统的需求，而且能根据不同设备适配显示，而且还有四个主题可以切换。以前收费，好像最新版不再收费了。 下载：https://github.com/bopoda/ace 官网：http://ace.jeka.by/ 感觉比较全，功能强大,组件多，美观，只是用了很多不同的插件，兼容性不错。 兼容的浏览器： Internet Explorer 10 Internet Explorer 11 Internet Explorer 8 Internet Explorer 9 Latest Chrome Latest Firefox Latest Opera Latest Safari 使用的插件： View Code 使用到的插件并没有分开存放，使用起来会麻烦一些。 另外该插件也被很多人简化、修改成选项卡+iframe风格了。 六、Metronic Metronic 是一套精美的响应式后台管理模板，基于强大的 Twitter Bootstrap 框架实现。Metronic 拥有简洁优雅的 Metro UI 风格界面，6 种颜色可选，76 个模板页面，包括图表、表格、地图、消息中心、监控面板等后台管理项目所需的各种组件。 页面规范、精致、细腻、美观大方；功能强大、非常全；在所有我看到过的基于Bootstrap的网站模版中，Metronic是我认为最优秀的之一，其外观之友好、功能之全面让人惊叹。Metronic 是一个自适应的HTML模版，提供后台管理模版和前端内容网页模版两种风格。 优点： 支持HTML5 和 CSS3 自适应，基于响应式 Twitter Bootstrap框架，同时面向桌面电脑、平板、手机等终端。 整合AngularJS 框架。 可自定义管理面板，包括灵活的布局、主题、导航菜单、侧边栏等。 提供了部分电子商务模块：CMS, CRM, SAAS。 多风格，提供了3个前端风格，7个后端管理面板风格。 简洁扁平风格设计。 700多个网页模版，1500多个UI小组件，100多个表单，80多个jQuery插件。 提供说明文档。 缺点： 太大了，真的不知道从那里开始 对IE的兼容不好，虽然官方声称支持IE8，但我测试结果不支持 收费，今天的价格是$28 七、H+ UI 官网的介绍：H+是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.4)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。 官网：http://www.zi-han.net/theme/hplus/ 与Metronic与INSPINIA非常像，插件非常多，收费998人民币。 八、Admin LTE AdminLTE 是一个基于Bootstrap 3.x的免费主题，它是一个完全响应式管理模板。高度可定制的，易于使用。适合从小型移动设备到大的台式机很多的屏幕分辨率。 下载：https://github.com/almasaeed2010/AdminLTE （目前star 11652+） 预览: http://almsaeedstudio.com/preview/ 官网：Free Bootstrap Admin Template 浏览器支持： IE 9+ Firefox (latest) Chrome (latest) Safari (latest) Opera (latest) 插件： View Code 特点： 响应式布局，支持多种设备 打印增强 丰富可排序的面板组件 18个插件与3个自定义插件 轻量、快速 兼容主流浏览器，IE8不兼容 支持Glyphicons, Fontawesome和Ion图标 整体感觉与Metronic类似、功能强大，UI精致，被许多公司使用。 评论中感谢网友（dotNetDR_、醉丶千秋）推荐，确定是值得关注的一个UI。 九、INSPINIA INSPINIA是平面设计理念的管理模板。它是充分响应的由Bootstrap3 +框架开发的模板,HTML5和CSS3。它有很多可重用的UI组件和集成了最新的jQuery插件。它可以用于所有类型的web应用程序自定义管理面板中,项目管理系统,管理仪表板,应用程序的后端,CMS或CRM。 与Metronic一样，风格也比较像，个人认为比Metronic还要强大一些，页面规范、精致、细腻、美观大方；功能强大、非常全；在所有我看到过的基于Bootstrap的网站模版中，Metronic是我认为最优秀的之一，其外观之友好、功能之全面让人惊叹。Metronic 是一个自适应的HTML模版，提供后台管理模版和前端内容网页模版两种风格。 浏览器兼容： IE 9, 10, 11 Latest Chrome Latest Firefox Latest Opera Latest Safari 收费，今天的价格是$18。 演示地址：http://wrapbootstrap.com/preview/WB0R5L90S 特点： 相对Metronic他准备了很多个版本，比如： Static version, AngularJS, ASP.NET MVC5/MVC6, Meteor and Ruby on Rails version 插件很多，但都按引用分文件夹存放了，静态版本中我看了就是48个插件，有PSD源文件，提供的文件包含： View Code 详细介绍：https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S 十、LigerUI LigerUI 是基于jQuery 的UI框架，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大，致力于快速打造Web前端界面解决方案，可以应用于.net,jsp,php等等web服务器环境。 官网：http://www.ligerui.com/ 演示：http://www.ligerui.com/demo.html 特点： 使用简单，轻量级 控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景 快速开发，使用LigerUI可以比传统开发减少极大的代码量 易扩展，包括默认参数、表单/表格编辑器、多语言支持等等 支持Java、.NET、PHP等web服务端 支持 IE6+、Chrome、FireFox等浏览器 开源，源码框架层次简单易懂。 下载：http://pan.baidu.com/s/1o83vRZk API: http://api.ligerui.com/ 演示地址: http://demo.ligerui.com/ 源码下载: http://git.oschina.net/ligerui/LigerUI/ (源码托管) http://pan.baidu.com/s/1D0AVO (V1.2.3) 技术支持： http://www.cnblogs.com/leoxie2011/ 个人感觉文档比较全，也有公司的信息系统使用了该UI（去年我去一家公司培训他们就使用该UI，后面上头说要换漂亮些的，他们纠结好久），但整合感觉比不上EasyUI，与DotNet亲一点感觉，DWZ则与Java新一些。 LigerUI中国人开发的、免费。 十一、其它UI 十二、总结 没有形式就没有内容、UI重要，特别是当客户与老板不懂太多关于代码、功能、性能的时候。 上面的UI你也许可以通过各种途径获得，但商业应用请慎重。 想来想去还是拿不定主意，不过有点想法： 1、使用HUI和bootstrap 2、使用EasyUI的框架，内容页使用HUI+BootStrap，iframe选项卡 3、从各个功能强大的页面中拿一些插件过来
站在巨人的肩上是我们走的更快更远的必要选择，如果您想把后台管理系统开发的更快更好那就试试下边的bootstrap后端模板吧！ 这是本人经常使用到的一些bootstrap后端模板推荐给大家 第一名 inspinia bootstrap 演示地址 http://cn.inspinia.cn 效果图 cn.inspinia.cn 第二名 nifty admin 演示地址 http://www.niftyadmin.cn 效果图 www.niftyadmin.cn 第三名 smartadmin 演示地址 http://smartadmin.com.cn 效果图 http://smartadmin.com.cn 第四名 color admin 演示地址 http://www.coloradmin.cn http://www.coloradmin.cn 第五名 quillpro 演示地址 http://cn.inspinia.cn/quillpro/index.html 效果图
序言： ngx-bootstrap包含了由Angular提供支持的所有核心的Bootstrap组件。我们可以直接通过命令行安装后使用，同时使用该系列的组件不需要包含原始的JS组件。但是我们需要引入bootstrap的css样式。 步骤： 1、安装 1.1 通过npm安装ngx-bootstrap npm install ngx-bootstrap --save 1.2 通过cnpm 安装ngx-bootstrap cnpm install ngx-bootstrap --save 2、添加bootstrap样式到index.html中 2.1 bootstrap3的样式 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 2.2 bootstrap4的样式 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"> 3、对应组件的用法，如Accordion组件 // RECOMMENDED (doesn't work with system.js) import { AccordionModule } from 'ngx-bootstrap/accordion'; // or import { AccordionModule } from 'ngx-bootstrap'; @NgModule({ imports: [AccordionModule.forRoot(),...] }) export class AppModule(){} 具体的组件请参考http://ngx-bootstrap.com/#/
ngx-bootstrap里面可以复制你想要的样式组件，官方有介绍怎么使用，不过本人稍微修改了下 使用ngx-bootstrap的步骤 1、npm install ngx-bootstrap –save 2、npm install bootstarap –save-dev 3、在angular-cli.json文件中添加bootstrap为全局样式 "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], 1 2 3 4 4、根据官方文档中你需要使用什么样式就要在app.module.ts注入 import { AccordionModule,AlertModule,ButtonsModule } from 'ngx-bootstrap'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, AccordionModule.forRoot(), AlertModule.forRoot(), ButtonsModule.forRoot() ], 1 2 3 4 5 6 7 8 9 10 11 12 13 14 5、直接官网复制代码
转载自 http://www.ngui.cc/index.html angular 使用bootstrap ngx-bootstrap 文档地址 http://ngx-bootstrap.com/#/ 如何使用 (1),安装 ngx-bootstrap 和 bootstrap: npm install ngx-bootstrap bootstrap --save (2),打开 src/app/app.module.ts 文件并且添加以下内容 import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... })(3),打开 angular-cli.json 并且插入以下内容 "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], （4），打开 src/app/app.component.html 文件 添加 <alert type="success">hello</alert> 好了大功告成！ angular 教程网 http://www.ngui.cc
转载自 http://www.ngui.cc/index.html 我正在编写一个Angular应用程序，并且我想要显示一个HTML响应。我怎么做？如果我简单地使用绑定语法 ，{{myVal}}会显示所有html标签。 我需要以某种方式将div的内部html绑定到变量值。 那就是以下这种方式 <div [innerHTML]="theHtmlString"></div> angular 教程网 http://www.ngui.cc
转载自 http://www.ngui.cc/index.html Constructor 是当类被实例化时，确保在类及其子类字段正确初始化时所执行的类的默认方法。 ngOnInit是Angular调用的声明周期钩子，表示Angular 创建了组件。 我们必须导入OnInit才能这样使用（实际执行OnInit不是强制性的，但被认为是最佳实践）： import {Component,OnInit} from '@angular/core'; 那么就用这样的方法OnInit来实现我们在类中的实现。 export class App implements OnInit{ constructor(){ //called first time before the ngOnInit() } ngOnInit(){ //called after the constructor and called after the first ngOnChanges() } } 在你的指令的数据绑定属性被初始化之后，实现这个接口来执行自定义的初始化逻辑。ngOnInit在第一次检查伪指令的数据绑定属性之后，以及在其任何子项被检查之前调用。当指令被实例化时，它只被调用一次。 大多数情况下，我们使用ngOnInit所有的初始化/声明，并避免在构造函数中工作。构造函数只能用于初始化类成员，不应该做实际的“工作”。 所以你应该使用constructor()设置依赖注入，而不是其他的。ngOnInit（）是“开始”的好地方 - 它是解析组件绑定的地方。 angular 教程网 http://www.ngui.cc
转载自 http://www.ngui.cc/index.html 怎样把项目中的angular-cli升级到最新版？ 方法一 为了更新系统中全局安装的angular-cli软件包，您需要运行 npm uninstall -g angular-cli npm cache clean npm install -g @angular/cli@latest 方法二 为了更新系统中全局安装的angular-cli软件包，您需要运行 rm -rf node_modules npm uninstall --save-dev angular-cli npm install --save-dev @angular/cli@latest npm install angular 教程网 http://www.ngui.cc
演示地址：英文版 http://www.inspinia.cn 中文版 http://cn.inspinia.cn 介绍 inspinia admin 最新版 bootstrap 完全响应式后台管理模板，采用扁平化设计。使用Bootstrap 3+ Framework，HTML5和CSS3，等技术开发而成。 inspinia admin 包含大量的可重复使用的UI组件的集合，并与最新的jQuery插件集成。 可以用于所有类型的Web应用程序，如自定义管理面板，项目管理系统，管理仪表板，应用程序后端，CMS或CRM。 长期包更新，许多新功能将在不久的将来更新。一旦您购买INSPINIA，您将有权免费下载所有更新。 Inspinia包装内容 静态完整版本 静态种子项目 MVC5完整版 MVC5种子项目 .NET Core 1.0完整版本 .NET Core 1.0种子项目 ReactJS种子项目 Ruby on Rails完整版 Ruby on Rails种子项目 流星完整版 流星种子项目 Angular2种子项目 角色完整版 角种子项目 角种子项目咕噜 角种子计画 角种子项目MEANJS Laravel5种子项目 文档 登陆页面 减 上海社会科学院 SCSS PSD文件（超过50个主视图和组件全分层） 静态版本，AngularJS，ASP.NET MVC5 / MVC6 / .NET Core 1.0，Meteor和Ruby on Rails版本 Inspinia主题包括六个版本。一个具有所有静态html / css / js文件，非常适合任何php，java或其他编程语言应用程序。AngularJS版本包含一些专门用于支持角度框架的控制器和指令。Visual Studio的ASP.NET MVC5 / MVC6和.NET核心1.0项目，node.js开发人员的Meteor版本和Ruby on Rails版本。另外，我们还为ReactJS，Angular 2和Laravel 5提供了三个特别启动项目。未来，所有这三个框架都将拥有自己的Inspinia完整版本。但是，如果您不想等待完整版本，并且想要跳转到代码并开始使用最新技术开发应用程序，则可以使用这三个特殊启动程序项目。 特征 响应式布局（台式机，平板电脑，移动设备） 搭配新的Bootstrap 3.3.7 平面UI与干净的审美风格 盒装视图，流体视图 HTML5和CSS3 响应式视频 7个不同的图表库 动画CSS3 各种款式的桌子 结构良好的代码 删除区域文件上传 论坛视图 截断功能 两个时间线设计 谷歌地图 资料地图 降价 敏捷板 复制到剪贴板 Outlook视图 博客视图 社会饲料 旅游特色 代码编辑器 Foo表 投票表页面 小聊天 定制模态视图 可嵌套列表 验证 登陆页面 PDF查看器 SeedProject的所有版本 加载按钮 邮箱 文件管理器 i18支持 石工 团队板 圆滑的旋转木马 关画布菜单 指标/分析视图 标签输入 右侧栏 定制材质设计皮肤 针板带黄色笔记 发票 差异特征 双选 空闲计时器 用户资料 小部件页面 电子商务 时钟选择器 项目细节 表单验证 信用卡形式 项目列表 购车视图 常见问题解答 日历视图 画廊视图 c3图表 本地存储 自动完成 锁定屏幕视图 登录，注册，错误页面 可拆卸面板 还有很多... 积分 Bootstrap css前端框架。 jQuery快速，小巧，功能丰富的JavaScript库。 DataTables任何HTML表格中的高级交互控件 DropzoneJS库，通过图像预览提供拖放文件上传 幻想简单但强大的图表插件 FullCalendar是一个jQuery插件，提供了一个全尺寸的拖放日历 Gritter通知插件 iCheck自定义收音机和复选框按钮 IonRangeSlider轻松轻便的滑块插件 Jasny用于引导框架的其他组件。 jeditable可编辑的编辑插件 jQueryUI集合的用户界面构建在jQuery之上 bootstrapdatepicker datepicker 选择的插件，使得长而笨重的选择框更加人性化 jsKnob尼斯，向下兼容，可触摸，jQuery拨号。 metisMenu Easy菜单jQuery插件的Twitter引导 Morris.js好看的图表库 nouislider轻量级JavaScript范围滑块 步速自动页面加载进度条 Peer简单的jQuery插件，将元素的内容转换为简单的 人力车工具包，用于创建交互式时间序列图 Sparkline jQuery内联图表库 步骤智能UI组件，允许您轻松创建类似向导的界面 Summernote超级简单的所见即所得WYSIWYG编辑器 iOS 7风格开关中的切换复选框输入。 验证 jQuery验证插件 jvectormap Java脚本插件用于矢量地图 从Unsplash中取消所有图片 - 免费高分辨率照片 UiFaces的所有头像面孔 UIrouter Angular解决方案灵活路由嵌套视图 UICalendar DirectCalendar指令 用于Angular的UIBootstrap Bootstrap指令 旋钮 jsKnob指令角度 NgSwitchery切换台输入风格为角度 AngularPeity Peity图指令 NgEasyPieChart Easy Pie图表指令 AngularFlot Flot图表指令 AngularRickshaw人力车图表指令 AngularSummernote Angent的Summernote指令 AngularNouiSlider NouiSlider指令 AngularDatapicker数据选择器指令 AngularDatatables DataTable指令 AngularSelect选择插件指令 AngularChartJS ChartJs指令 可嵌套嵌套列表jQuery插件 codeMirror代码编辑器jQuery插件 GoogleMapsApi Google Maps API EmailTemplate事务电子邮件模板 ngGrid NgGrid指令 uiTree AngularJS可嵌套列表 uiCodeMirror代码镜像指令 uiMap Google mpas指令 jqGrid jqGrid jQuery插件 ClassHelper类助手 AnimatedHeader动画头插件 MockupMacBookPro MackBookPro模型 BrowserWindow Chrome浏览器模型 时间表：垂直时间轴灵感 iPhoneMockup iPhone模型 iPhonePicture iPhone样机图片 PerspectiveMockup透视iPad模型 ImageCrop：用于图像裁剪功能的插件 Toastr：通知插件 通知：Angular native通知插件 AngularColorPicker：角色本机颜色选择器插件 BootstrapColorPicker：jQuery颜色选择器插件 WOW：向下滚动页面的动画 Meanjs：MEANJS全栈JavaScript 灯箱图库：触摸式图像和视频库 GulpGen：角瓜产生器 GruntGen：角度发电机 jsTree：jsTree是jQuery插件，它提供交互式树 RTLbootstrap：Bootstrap从右到左的功能3 AngularTranslate：Angular翻译指令 ocLazyLoad：角度的ocLazyLoad模块 ngImgCrop：角度的图像裁剪插件 angularDiff：围绕Google的diff_match_patch库的角度包装 ngIdle：角空闲定时器 googleDiff：差异匹配和补丁库 tinycon：一个用于操纵图标的小图书馆 idletimer：jQuery空闲计时器 旋转器：采用CSS动画化的加载指示器集合 uiSortable：用于jQuery UI的AngularJS绑定可排序 流星：构建高品质网络应用的开源平台 meteorDropZone：流行文件选择器的流星包 prettyTextDiff：围绕Google的diff_match_patch库的包装 clockPicker：专用时钟选择器 图表：JavaScript图表库 ngChartist：angleJS中的图表指令 dateRangePicker：Bootstra的日期范围选择器 ngDateRange：日期范围选择器的角度指令 awesomeBootstrapCheckbox：自定义复选框和无线电控制 fooTable：表jQuery插件 angularFootable：FooTable的角度指令 sweetAlert：自定义javascript警报 ngSweetAlert：SweetAlert的角度指令 砖石：层叠网格布局库 wuMasonry：砌体的角度指令 光滑：自定义轮播功能 ngSlick：Slick的角度指令 烤面包机：Toastr通知的角度指令 select2：选择框的jQuery替换 uiSelect：AngularJS-本机版本的Select2 i18next：i18next是一个国际化框架 ladda：带有内置加载指示灯的按钮。 angularladda：对Ladda的角度指令 dotdotdot：跨浏览器省略号用于多行内容 touchspin：为Bootstrap输入微调器组件3 ngTouchSpin：TuchSpin的角度指令 旅游：带自行车游览的旅游。 angularTour：Tour的角度指令 flags：图像标志集 剪贴板：将文本复制到剪贴板库 ngClipboard：剪贴板的角度指令 c3：基于D3的图表 d3：用于使用HTML，SVG和CSS可视化数据的JavaScript库。 c3angular：c3的角度指令 markdown：Bootstrap插件，用于降价编辑。 ngTree：jsTree的角度指令 数据贴图：使用D3.js的SVG映射可视化 ngDatamaps：数据映射的角度指令 ngTagsInput：用于AngularJS的标签输入指令 tagsinput：标签输入控件 dualListBox：Bootstrap Dual Listbox bsDualListbox：引导双列表框的角度指令 socialButtons：社会登录按钮 pdfjs：用于解析和呈现PDF的通用的基于Web标准的平台。 angularPdfjs：pdfjs的角度指令 flowRouter：Meteor的客户端路由器 类型头：头版的灵活JavaScript库 textSpinners：css旋转器 passwortMeter：Twitter Bootstrap的密码强度表 每个新版本没有任何破坏性的变化。我们始终全力支持以前的版本。每个新版本也是免费的，一旦您购买Inspinia，您有权免费下载所有更新/版本。
演示地址 http://angle.dtmao.cc o ANGLE Overview Support Getting started Tips Starting the app Customizing Structure Custom code Build Javascript LESS Vendor Usage Layout Lazy Load RTL Routes Translation Dynamic Sidebar Markdown Docs Icons Themes Directives Bootstrap Constants Colors Media Queries Requires Credits Angle Overview 概述 This document aims to explain the best way to work with the product and its components. 本文档的目的在于说明与产品及其组件工作最好的方式。 Support 支持 In case you have questions Contact Support 万一你遇到问题，联系技术支持。 Getting started入门 Tips 提示 • Do not start from scratch, use an existing asset and modify it to learn how it works. 不从头开始,利用现有的资源并加以研究，学习它是如何工作的。 • Explore the sources for ideas and sample code. 探索思想的来源和示例代码 • Use Firebug or Chrome Developer Tools to find bugs on your website. Using one of those tools will help you to save time analyzing the site and finding elements structure, like classes, id or tags o Quick tip: open your site with Chrome, press F12 and go to console tab, reload your page and if something goes wrong you will see your page errors in red text. 使用Firebug或者Chrome开发者工具在你的网站上找到bug。使用这些工具中的任一个分析站点或查找元素结构，如类、ｉｄ或标签将帮助您节省时间。 快速提示: 用Chrome打开你的网站,按F12，去控制台选项卡,重新加载页面,如果出现问题你会看到红色的文本页面错误。 • In case of error messages, someone might have seen it too, so you can try a Google search for a quick fix. 在错误消息的情况下，有人可能已经看到了它，所以你可以尝试谷歌搜索一个快速修复。 Starting the app 开启应用 Since this is AngularJS based application you need a server (Apache, IIS, xampp, etc)to serve the html files and perform http request to load all views. AngularJS基础应用程序需要一个服务器(xampp Apache,IIS等)，为html文件执行http请求加载所有视图。 Important! Opening the index.html with a double click (i.e. using file:// protocol) will show you only a blank page because there’s no server that response to the requests made for each view in order to display the app interface. 注意！双击打开首页，（即使用：//协议）只会给您显示一个空白页，因为没有服务器提供为每个视图响应的应用程序的接口请求。 Customizing 定制 Structure结构 Before starting to customize the template, here are the project files organization structure: 开始定制模板之前,项目文件组织结构如下: +-- app/ | +-- css/ | +-- documentation/（文档） | +-- img/ | +-- js/ | +-- i18n/ | +-- pages/ | +-- vendor/ | +-- views/ +-- master/ | +-- jade/ | | +-- pages/ | | +-- views/ | +-- js/ | | +-- modules/（模块） | | | +-- controllers/ | | | +-- directives/ | | | +-- services/ | | +-- custom/ | +-- less/ | | +-- app/ | | +-- bootstrap/ | | +-- themes/ | +-- gulpfile.js | +-- package.json | +-- bower.json +-- server/ | +-- *.json +-- vendor/ +-- index.html ________________________________________ Main folders explanation 主要文件夹的介绍 app/ folder This folder contains the compiled files. This files are ready to deploy on your server. 此文件夹包含编译后的文件。这个文件是要部署在你的服务器上。 Pages（页面） This folder contains the compiled html files for the single pages (out of the app). 此文件夹包含HTML文件单页。 views This folder contains the compiled html files for the views and partials used for the app. 此文件夹包含应用程序的视图和局部视图的HTML文件。 i18n This folder contains the json files use for translation. 此文件夹包含翻译用的json文件 Vendor（第三方提供的文件） This folder contains vendor files not managed via bower 此文件夹包含不被本地软件包管理器管理的第三方文件 master/ folder This folder contains the source files. You will find the following folders inside 此文件夹包含所有源文件，在master中你会发现以下文件： • jade/ This folder contains JADE files. This files need to be compiled into html files to be displayed by a browser jade/文件夹中包含jade文件。这些文件最终被编译为html文件，由浏览器显示出来。 less/ This folder contains the LESS files for the core styles and bootstrap styles. less/文件夹中包含less文件主要为样式文件和bootstrap样式文件。 • js/ Here you will find pure JS files. All this files are concatenated into the file app.js. js/这里都是纯js文件。所有这些文件都将对应到app.js文件中 vendor/ folder This folder contains the vendor files used to include plugins and other components. This folder is handled via bower so optionally you can remove or upgrade the vendor components using such tool. 此文件夹包含第三方插件和其他第三方组件。通过客户端软件包管理器，你可以删除或更新第三方插件和组件。 server/ folder This folder contains server side files used for demonstration and guide for the flot chart and file upload components. 此文件夹包含用于演示和指导在图表和文件上传组件的服务器端文件。 • sidebar-menu.json This file is important and required because it contains the sidebar menu definition. sidebar-menu.json这个文件是很重要的，不能缺少，因为它包含工具demonstration栏菜单的定义。 Custom code 自定义代码 To add your own code you can follow this instructions: 你可以依照这些操作指南来增加您自定义的代码： Working with css and js 使用css和js • Create a file app/css/custom.css and add your own styles 创建一个app/css/custom.css样式文件，定义您自己的样式 • Create a file app/js/custom.js and add your own javascript 创建一个app/js/custom.js文件, 定义您自己的javascript • Edit the file index.html and include custom.css after all other css files and custom.js after all other js files. 编辑文件index.html，放置custom.css文件在所有其他的CSS文件之后，放置custom.js文件在所有其他的JS文件后。 Working with source files 使用源文件 • For JS, go to folder master/js/custom and start editing the file custom.js. After compile the source again with gulp, your own code will included at th bottom of file app/js/app.js. 对于JS，在master/js中编辑custom.js文件。通过gulp编译之后，您自己的代码将会包含在app/js/app.js文件的底部。 • For LESS, go to folder master/less and create a folder called custom and add your won less files. Then edit file app.less and downloaded@import all your stylesheets at the bottom (overrides all app default styles) 对于LESS，在master/less中新建一个您自己的custom.less文件，然后在文件app.less底部导入您的样式表(这一过程将覆盖所有应用程序默认样式) A note on updating 更新时请注意 The premise is, the less you change the downloaded code, the easier will be to apply any updates. Try always to keep your own code the most separated as possible from the package code to easily apply new updates when necessary. 您改变下载的代码越少，您应用任何更新就越容易。必要时，尽量保持你自己的代码与软件包代码的分离，这样可以方便地应用新的更新。 Build 构建 Important! You only need to follow this instructions in case you want to work with JADE, LESS and concatenate all JS modules. 重要提示！你只需要遵循这一指示，如果您想用JADE, LESS连接所有js模块。 Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js 是一个建立在Chrome的JavaScript运行时容易快速构建可扩展的网络应用平台。 Gulp is a task manager, you can define different tasks to run certain commands. Those commands does the compilation job for JADE and LESS, and concatenates the JS files. Gulp 是一个任务管理器。您可以定义不同的任务来运行某些命令。这些命令编译JADE and LESS,并将JS文件连接起来。 Bower is a dependency manager, it works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. Bower是一个依赖管理器，它的工作原理是从所有的获取和安装包，搜索、发现、下载，并保存你要寻找的东西。依赖管理器跟踪这些包在一个清单文件，bower.json中。 The package includes under the master/ folder the file gulpfile.js, package.json and bower.json to install the required components to compile the source files. 展开master下的gulpfile.js, package.json and bower.json去安装所需要的组件来编译源文件。 Installing tools 安装工具 The following steps are intended to be an orientation guide, if you are not experienced with this you will need to learn more about it from Google 以下步骤旨在给出一些指导方向，如果你不是很熟练，你可以在Google上学习更多相关知识。 • To install node and npm, go to http://nodejs.org/ 安装node and npm，请参照网址http://nodejs.org/ • Run npm install -g bower to install bower to manage dependencies 执行npm install -g bower 安装依赖管理器来管理依懒性 • Download and install GIT for your platform http://git-scm.com/downloads 在您的电脑上下载和安装GIT 网址：http://git-scm.com/downloads Once you have all tools installed 一旦你已经安装了所有的工具 • Open a terminal, go the package master/ folder, then run the command npm install. This command will install gulp and all project dependencies. 打开一个终端，打开master文件夹，然后执行 npm install命令，此命令将安装gulp和所有的项目依赖。 • Then, to install vendor dependencies, run bower install 然后安装第三方依赖，运行bower install • Finally run gulp to start the task manager 最后执行gulp, 启动任务管理器 If everything goes fine, you should see the messages in the terminal telling you that most the task are done ok. The task will watch for files to compile them automatically all files when change. 如果一切顺利，你可以在终端上看到大部分的任务执行成功的消息。该任务将监视文件在更改时自动编译所有文件。 To enable the automatic page reload there is also included a LiveReload task that requires the Chrome plugin Livereload 启用自动重新载入页面还包括一个livereload任务需要Chrome插件livereload Javascript The Javascript source is divided in two main files that controls the app JS是分为两个主要文件控制程序 base.js: contains the scripts to start the application base.js: 包含启动应用程序的脚本 app.js: contains the modules used in the application (controllers, directive, etc) app.js: 包含应用程序中使用的模块（控制器、指令等） Note The edit the scripts included in base.js open the file vendor.base.json located under the master folder 注解：编辑脚本包含在base.js vendor.base.json位于主文件夹下 The app.js script build (concatenation) order is app.js脚本构造顺序如下： 'js/app.init.js' 'js/modules/*.js' 'js/modules/controllers/*.js' 'js/modules/directives/*.js' 'js/modules/services/*.js' 'js/modules/filters/*.js' LESS The LESS files compiles into the file app.css. This file contains the bootstrap styles and the application custom styles. LESS文件编译为app.css，此文件包含bootstrap样式和应用程序的定制样式。 Also the app-rtl.css is automatically generated with the same styles but inverted for RTL layout. To convert styles the node script css-flip is used. 所有的app-rtl.css 自动生成相同样式但RTL布局倒转的， 转换方式的节点脚本使用CSS翻转。 Vendor Vendor script dependencies are managed by bower. Just run bower install in folder master/ and all dependencies will be installed. 第三方脚本依赖通过依赖管理器管理。 只需在master文件夹中运行bower install命令，所有的依赖关系将被安装。 After installing all dependencies is necessary to install them in the locations the app expects them. To do that, run gulp task with the command gulp scripts:vendor in the master folder. 在应用程序预计他们的位置安装完所有的依赖关系是必要的。在主文件夹运用gulp scripts:vendor 命令运行gulp任务。 This task will run automatically the tasks scripts:vendor:app and scripts:vendor:base 这项任务将自动运行任务scripts:vendor:app and scripts:vendor:base Vendor folder 第三方文件 To avoid not necessary files that bower downloads there’s a task scripts:vendor:app that will copy all files required by the app from the bower_components folder to the main /vendor folder. This files are listed in vendor.json file which contains the path of all necessary files required by the app components. Those files are usually required via the lazy load module and you can include fonts, svg, etc. 为了避免依赖管理器下载不必要的文件，有一个任务scripts:vendor:app将从bower_components文件复制应用程序所需的主要文件到vendor文件夹。 这个文件是在vendor.json文件中包含应用程序所需的所有必要的文件的路径组件。这些文件通常需要通过延迟加载模块,也可以包括字体、svg等。 Vendor Base 第三方组件基础 The base.js file is generated with the task scripts:vendor:base. This task will read the list of files in the vendor.base.json file and will concat and compress all files and move them to create the mentioned base.js file. base.js文件是通过scripts:vendor:base生成的。这项任务将在vendor.base.json文件读取文件列表，将连接和压缩所有文件并将它们移动到创建上述base.js文件。 All files in base.js are loaded when the app is required for first time and contains all vendor scripts necessary to start the app (jquery, angular, etc). 在base.js所有文件被加载时，程序是第一时间要求和包含所有第三方的脚本需要启动应用程序（jQuery，angular，等）。 Vendor Updates第三方组件更新 To update vendor files via bower you can edit the bower.json file by adding the last version you want to download. 通过依赖管理器更新第三方组件，您可以通过编辑bower.json文件增加您下载到的最新的版本 Note The folder app/vendor contains vendor files that currently aren’t possible to be managed via bower 注解：app/vendor文件包含不能被当前依赖管理器管理的第三方文件。 Usage使用方法 Layout布局 Layout can be changed via the following classed applied to the body tag 通过将以下类运用body 标签中可以改变布局 .layout-fixed: Makes navbars become fixed while the user can scroll only content .layout-fixed: 使navbars固定，而用户仅可以滚动其中内容 .layout-boxed: Limits the width of the main wrapper element .layout-boxed:限制主框架的宽度 .aside-collapsed: Condenses the sidebar showing only icons .aside-collapsed:收缩使边导航只显示图标 .aside-toggle: used internally for mobiles to hide the sidebar off screen .aside-toggle:内部使用用来隐藏侧边栏使不显示在屏幕上 .offsidebar-open: used internally to display the offsidebar component (formally the right sidebar) .offsidebar-open：内部使用显示offsidebar组件。 <html> <head> #metas and css </head> <body> <section class="wrapper" data-ui-view> #start include from app.html <nav class="navbar topnavbar"> #top navbar content </nav> <aside class="aside"> #sidebar content (left) </aside> <aside class="offsidebar"> #offsidebar content (right) </aside> <section> <div class="content-wrapper" data-ui-view> #page content </div> </section> #end include from app.html </section> #scripts </body> </html> Lazy Load 懒加载 This app requires only the necessary scripts according to the view that is loaded saving tons unnecessary request to the server. 根据视图，这个程序只需要必要的脚本加载,节约不必要的服务器请求。 The lazy load is handled by a custom core function based on the plugin ocLazyLoad 懒加载是由一个基于插件oclazyload定制的核心功能处理 To configure the lazy scripts, you need to edit the constants APP_REQUIRES (constants.js) 配置懒加载脚本，你需要配置constants.js中常量 Then edit the app configuration (config.js) where you will find the routes configuration and add or edit the params using the special function resolveFor which handles the scripts request order for the current route. 然后编辑应用程序的配置（config.js文件），你会发现路由配置和添加或使用特殊功能寻求处理当前路径的脚本请求命令编辑参数。 RTL RTL support uses the a tool called css-flip which inverts most the css properties to change the page orientation. It’s also a property $rootScope.isRTL to detect when the site is in RTL mode. RTL支持使用的工具称为CSS翻转，它颠倒大多数CSS属性更改页面方向。 $rootScope.isRTL能够检测该网站是否在RTL模式。 Routes路由 This app uses for routing the AngularUI Router with nested states making more simple to manage the routing system and load resource in cascade. 这个应用程序使用嵌套的状态更容易管理的路由系统和级联负载资源路由的angularui路由器。 All routes are defined in the file config.js 所有的路由都是在文件config.js中的定义 Translation翻译 The translation system uses the AngularUI Translate module.This modules simplifies the translation system by loading translate references from a JSON file and replacing the content where the reference has been used. 翻译系统使用AngularUI Translate 模块。这个模块简化了翻译系统通过加载来自JSON文件的翻译参考，然后替换引用已使用的内容。 Examples <h3 ui-translate="reference.NAME">Text that will be replaced</h3> <h3>{{ 'reference.NAME' | translate }}</h3> <a href="#" title="{{ 'reference.NAME' | translate }}">Link</a> The JSON files with translation references are located in the folder app/i18n Dynamic Sidebar 动态栏 The sidebar is created dynamically from a JSON file. 侧边栏动态从JSON文件创建。 JSON properties format: [ { "text": "Item text", // replaced by translate reference "sref": "app.dashboard", // the state name of the target route "icon": "icon-speedometer", // the icon full classname "translate": "sidebar.ITEM", // the translation reference "heading": "true" // only when item is used as heading }, ... ] This method is also useful if you pretend to generate a per user menu dynamically in the server. 这个方法也很有用,如果你假装在服务器动态生成每个用户菜单。 Markdown Docs Markdown文档 This documentation is loaded from a Markdown source using Flatdoc plugin. The menu and the content is generated automatically from the .md file and styled directly from custom css. Via the flatdoc directive you can use it like this 本文档是从使用flatdoc Markdown源加载插件。菜单的内容是自动生成的。MD文件直接从自定义的CSS样式。 Via the flatdoc directive you can use it like this 通过flatdoc指令你可以像这样使用 <flatdoc src="path/to/readme.md"></flatdoc> Icons Icons included from 图标包括 • Font Awesome • Skycons • Weather Icons Themes 主题 To change the color scheme you have 2 options: 改变配色方案你有2个选择: From LESS files Edit the LESS files in folder master/less/app and the file master/less/bootstrap/variables.less to use the color you want. 在master/less/app中编辑LESS文件， 在文件master/less/bootstrap/variables.less中使用您需要的文件 Like Bootstrap, most of the colors are based on @brand-* variables. You can also edit the files in master/less/theme folder to create your own set of color schemes. This files must be included after the app.css in order to override the default color set. 像Bootstrap，大部分颜色是基于@brand-* 变量。您也可以编辑master/less/theme 文件创建您自己的配色方案。这个文件必须包含在app.css之后以覆盖默认的颜色设置。 Changing the theme from LESS files helps you to avoid bloating your css by not double declaring your color rules. 通过使用LESS文件改变主题可以帮助您避免使用大量的css代码来重复定义色彩规则。 From CSS files This template support color schemes including a css file. You can find the color options in the folder app/css/ files are named theme-*.css 此模板支持配色方案包括一个CSS文件。你可以找到颜色选项在文件app/css/中以theme-*.css命名的主题 If you want to change or add a new component color, just inspect the color using your favorite browser devtool and then replace the value in the file. 如果您想更改或添加新组件的颜色，只需检测使用你喜欢的浏览器中的devtool，然后替换文件中的值。 This files are prepared to change the basic color scheme (both sidebars and top navbar) but if you want to make a more deep change I suggest you to check the LESS way which is more simple for multiple component changes. 这个文件是准备改变基本的配色方案（包括侧边栏和顶部导航栏）但是如果你想做一个更深刻的变化，我建议您检查LESS方法，这个针对多个组件的变化更加简单。 Directives 指令 This item include the following directives. 这个项目包括以下指令： [href] File: anchor.js Disables null anchor behavior 禁用空锚行为 [animate-enabled] File: animate-enabled.js Enable or disables ngAnimate for element with directive 启用或禁用ngAnimate与指令元素 [chosen] File: chosen-select.js Initializes the chose select plugin 初始化选择插件 [classyloader] File: classy-loader.js Enable use of classyLoader directly from data attributes 使classyLoader直接从数据属性的使用 [reset-key] File: clear-storage.js Removes a key from the browser storage via element click 通过点击从浏览器存储中删除一个关键元素 [filestyle] File: filestyle.js Initializes the fielstyle plugin 初始化fielstyle插件 [flatdoc] File: flatdoc.js Creates the flatdoc markup and initializes the plugin 创建flatdoc标记和初始化插件 [form-wizard] File: form-wizard.js Handles form wizard plugin and validation 处理表单向导插件和验证 [toggle-fullscreen] File: fullscreen.js Toggle the fullscreen mode on/off 切换全屏模式开/关 [gmap] File: gmap.js Init Google Map plugin 初始化谷歌地图插件 [load-css] File: load-css.js Request and load into the current page a css file 请求和加载到当前页面的css文件 [markdownarea] File: markdownarea.js Markdown Editor from UIKit adapted for Bootstrap Layout. Markdown Editor从UIKit适用于Bootstrap布局。 [masked] File: masked.js Initializes the masked inputs 初始化蒙版的输入 [search-open] File: navbar-search.js Open the search in the top navbar. Use [search-dismiss__] in buttons at close it. 打开搜索顶部导航条。使用[search-dismiss__]按钮关闭它。 [notify] File: notify.js Create a notifications that fade out automatically. Based on Notify addon from UIKit (http://getuikit.com/docs/addons_notify.html) 创建一个自动淡出通知。根据从UIKit通知插件(http://getuikit.com/docs/addons_notify.html) [now] File: now.js Provides a simple way to display the current time formatted 提供了一个简单的方法来显示当前时间格式化 [paneltool] Module panel-tools.js Directive tools to control panels. Allows collapse, refresh and dismiss (remove) Saves panel state in browser storage. Supports attributes [panel-dismiss] [panel-collapse] [panel-refresh] 控制面板的指令工具。允许折叠，刷新和删除，保存面板状态在浏览器存储中。 Supports attributes [panel-dismiss] [panel-collapse] [panel-refresh] 支持属性[面板删除] [面板折叠] [面板刷新] [animate] File: play-animation.js Provides a simple way to run animation with a trigger. Requires animo.js 提供了一种简单的方法用触发器运行动画。需要animo.js [scrollable] File: scroll.js Make a content box scrollable 内容框滚动 [sidebar] File: sidebar.js Wraps the sidebar and handles collapsed state 包的侧边栏，控件折叠状态 [skycon] File: skycons.js Include any animated weather icon from Skycons 包括Skycons中的任何动画天气图标 [sparkline] File: sparkline.js SparkLines Mini Charts 线性图表 [check-all] File: table-checkall.js Tables check all checkbox 表检查所有复选框 [tagsinput] File: tags-input.js Initializes the tag inputs plugin 初始化标签输入插件 [toggle-state] File: toggle-state.js Toggle a classname from the body tag. Useful to change a state that affects globally the entire layout or more than one item. Elements must have [toggle-state=”CLASS-NAME-TO-TOGGLE”]. Use [no-persist] to avoid saving the sate in browser storage. 从body 的标签中切换一个类名。有用的改变影响全局布局或多个元素的状态。 Elements must have [toggle-state=”CLASS-NAME-TO-TOGGLE”]. Use [no-persist] to avoid saving the sate in browser storage. 元素必须有[toggle-state=”CLASS-NAME-TO-TOGGLE”]。使用[no-persist]避免在浏览器存储中保存状态。 [ui-slider] File: ui-slider.js Initializes the jQuery UI slider controls 初始化jQuery UI滑动控制 [validate-form] File: validate-form.js Initializes the validation plugin Parsley 初始化验证插件 [vector-map] File: vector-map.js.js Initializes jQuery Vector Map plugin 初始化jQuery矢量地图插件 Bootstrap This item include all directives from Angular BootstrapUI. 这个项目包括所有Angular BootstrapUI指令。 Constants 常量 Colors APP_COLORS Defines the brand colors used in the css accessible from JS 通过JS访问定义中在css中的颜色值。 App.controller('ExampleCtrl', ['APP_COLORS', function(colors) { console.log( colors.primary ); // prints #5d9cec }]); This constant is used together with the service colors to provide access from the $scope to each color by its name 此常量与服务颜色一起使用，使用$scope通过每种颜色的名称来提供访问。 Example <div sparkline data-bar-color="{{colorByName('primary')}}" ></div> Media Queries APP_MEDIAQUERY Defines the media queries used in the css accessible from JS 通过JS访问定义了媒体查询中访问的css App.controller('ExampleCtrl', ['APP_MEDIAQUERY', function(mq) { console.log( mq.mobile ); // prints 480 }]); Requires APP_REQUIRES Defines the script used with the lazy load system. 定义脚本使用延迟加载系统。 Format: // Put here all jQuery script (and not angular js) scripts: { 'friendly-name' : ['path/to/plugin.js', 'path/to/plugin.css', '...'], ... } // Put here all angular js modules that needs to be instantiated modules: { { name: 'toaster', files: ['path/to/module.js', 'path/to/module.css', '...'] }, ... } Learn more by looking into the file config.js Credits Angular Angular Docs ocLazyLoad uiRouter uiTranslate uiBootstrap Toaster Angular Loading Bar Bootstrap jQuery Fastclick Animo Animate.css Chosen Codemirror BS Filestyle FlotCharts gMap Marked ClassyLoader CSSRadialBar Modernizr MomentJs Parsley Bootstrap Slider Sparkline BS Tags Input slimSCroll DataTables FullCalendar CsSpinner InputMask jVectorMap FlatDoc jQueryUI UiKit Upload UiKit Notify UiKit MarkdownArea Icons Font Awesome Skycons Weather Icons Demo images uiFaces Raumrot Unsplash © 2016 - Angle angle一个非常优秀的响应式Bootstrap管理模板本站拥有Angle3.8.5,Angle3.8.0,Angle3.7.5,Angle3.7.0,Angle3.6,angle 3.5 admin 下载,angle 3.5.4,angle 3.0,,angle 3.5.4 下载等版本已通过官方授权Angle3.8.5,Angle3.8.0,Angle3.7.5,Angle3.7.0,Angle3.6,angle 3.5 admin 下载,angle 3.5.4,angle 3.0,angle 3.5.4 下载7
==============================================================html页面================================ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(function () { $("#btnGetJson").click( function () { $.getJSON("ResponseJson.ashx", "a=3&b=4", function (data) { alert(data[1].CityName); }); }); $("#btnJQGet").click(function () { $.get("ResponseJson.ashx", "aa=22", function (data) { alert(data); }); }); $("#btnJQPost").click(function () { $.post("ResponseJson.ashx", "bb=22", function (data) { alert(data[0].CityName); }, "json") }); $("#btnAjax").click( function () { $.ajax({ url: "ResponseJson.ashx", data: "a=3", type: "Post", success: function (data) { //alert(data); $("#divDemo").text(data); }, error: function () { alert("错误！"); } }); } ); $("#btnLoad").click(function () { $("#divDemo").load("ResponseJson.ashx", { id: 333 }, function (data) { alert(data); }); }); }); </script> </head> <body> <input id="btnGetJson" type="button" value="JQ GetJson" /> <input type="button" value="JQ Get" id="btnJQGet" /> <input type="button" value="JQ Post" id="btnJQPost" /> <input type="button" value="JQ ajax" id="btnAjax" /> <input type="button" value="JQ load" id="btnLoad" /> <div id="divDemo"> </div> </body> </html> ===========================================================================ashx================================================ using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web; namespace _20141224.Ajax { /// <summary> /// Summary description for ResponseJson /// </summary> public class ResponseJson : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); System.Collections.Generic.List<CityInfo> cities = new List<CityInfo>() { new CityInfo() { CityId = 1, CityName = "郑州" }, new CityInfo() { CityId = 2, CityName = "周口" }, new CityInfo() { CityId = 3, CityName = "漯河" }, new CityInfo() { CityId = 4, CityName = "驻马店" }, new CityInfo() { CityId = 5, CityName = "许昌" }, new CityInfo() { CityId = 6, CityName = "开封" }, new CityInfo() { CityId = 7, CityName = "巩义" } }; //StringBuilder sb = new StringBuilder(); //sb.Append("["); //foreach (var CityInfo in cities) //{ // sb.Append("{"); // sb.AppendFormat("\"CityId\":\"{0}\",\"CityName\":\"{1}\"", CityInfo.CityId,CityInfo.CityName); // sb.Append("},"); //} //string str = sb.ToString().TrimEnd(','); //str += "]"; System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); string json = javaScriptSerializer.Serialize(cities); context.Response.Write(json); } public bool IsReusable { get { return false; } } public class CityInfo { public string CityName { get; set; } public int CityId { get; set; } } } }
发表了文章
2015-01-07
发表了文章
2017-06-14
发表了文章
2017-08-13
发表了文章
2018-01-18
发表了文章
2018-01-23
发表了文章
2018-01-23
发表了文章
2018-02-08
发表了文章
2018-02-08
发表了文章
2018-02-08
发表了文章
2018-08-28
发表了文章
2018-08-30
发表了文章
2018-09-13
