评估浏览器级别，提醒升级-Extjs的grid和树以及几种常用的...-JavaScript 项目构建工具 Grunt 实践：任务和指令

当前位置: 编程技术>WEB前端

本页文章导读:

▪评估浏览器级别，提醒升级是时候拒绝一些老旧的浏览器了，诱导你的用户升级浏览器吧 = =! 这张网页以IE 各本版本为参照粗略地评估访客的浏览器等级，提醒低于IE8 级别(没办法，XP不支持IE9)的浏览器用户更.........

▪Extjs的grid和树以及几种常用的插件使用详解 Ext.onReady(function() { /** * 1. Grid */ /*Ext.create('Ext.grid.Panel', { store : Ext.create('Ext.data.ArrayStore', { fields : [{ name : 'book' }, { name : 'author' }], data : [['Extjs4:firstBook', 'joms']] }), columns : [{ text : 'Book', flex : 1, so.........

▪JavaScript 项目构建工具 Grunt 实践：任务和指令　　 Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及运行静态.........

[1]评估浏览器级别，提醒升级

来源: 编程技术>WEB前端 iis7站长之家发布时间: 2013-11-06

是时候拒绝一些老旧的浏览器了，诱导你的用户升级浏览器吧 = =!

这张网页以IE 各本版本为参照粗略地评估访客的浏览器等级，提醒低于IE8 级别(没办法，XP不支持IE9)的浏览器用户更换浏览器。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="Edge" />



<link rel="stylesheet" href="http://files.cnblogs.com/ecalf/duolaAmeng.css" />
</head>
<body>

<style>
.nomoreie{
width:550px;
display:none;
clear: both;
position: relative;
left:-260px;
margin-left:50%;
margin-top:50px;
border: 1px solid #F7941D;
background: #FEEFDA;
text-align: center;
}
.nomoreie img{
border:none;
}

.nomoreie .close{
position: absolute;
right: 3px;
top: 3px;
border:none;
width:24px;
cursor:pointer;
}

.nomoreie .notice{
width:530px;
margin: 0 auto;
text-align: left;
padding: 0;
color: black;
overflow: hidden;
display:

[2]Extjs的grid和树以及几种常用的插件使用详解

来源: 互联网发布时间: 2013-11-06

Ext.onReady(function() {
/**
* 1. Grid
*/
/*Ext.create('Ext.grid.Panel', {
store : Ext.create('Ext.data.ArrayStore', {
fields : [{
name : 'book'
}, {
name : 'author'
}],
data : [['Extjs4:firstBook', 'joms']]
}),
columns : [{
text : 'Book',
flex : 1,
sortable : false,
dataIndex : 'book'
}, {
text : 'Author',
width : 100,
sortable : true,
dataIndex : 'author'
}],
height : 80,
width : 300,
title : 'Simple Grid',
renderTo : 'testG1'
});

// grid2
Ext.define('Book', {
extend : 'Ext.data.Model',
fields : [{
name : 'book'
}, {
name : 'topic',
type : 'string'
}, {
name : 'released',
type : 'boolean'
}, {
name : 'releasedDate',
type : 'date'
}, {
name : 'value',
type : 'number'
}]
});

var store = Ext.create('Ext.data.ArrayStore', {
model : 'Book',
data : [
['Ext JS 4: First Look', 'Ext JS', '4', false, null, 0],
['Learning Ext JS 3.2', 'Ext JS', '3.2', true, '2010/10/01',
40.49],
['Ext JS 3.0 Cookbook', 'Ext JS', '3', true, '2009/10/01',
44.99],
['Learning Ext JS', 'Ext JS', '2.x', true, '2008/11/01', 35.99]]
});
Ext.create('Ext.grid.Panel', {
store : store,
width : 550,
height : 300,
title : 'Extjs Books',
renderTo : 'grid2',
features : [{
groupHeaderTp1 : 'Publisher:{name}'

}],
selModel : Ext.create('Ext.selection.CheckboxModel'),
columns : [Ext.create('Ext.grid.RowNumberer'), {
text : 'Book',
flex : 1,
dataIndex : 'book'
}, {
text : 'Category',
xtype : 'templatecolumn',
width : 100,
tpl : '{topic}{version}'
}, {
text : 'Already Released',
xtype : 'booleancolumn',
width : 100,
dataIndex : 'released',
trueText : 'Yes',
falseText : 'No'
}, {
text : 'Released Date',
xtype : 'datecolumn',
width : 100,
dataIndex : 'releasedDate',
format : 'm-Y'
}, {
text : 'Price',
xtype : 'numbercolumn',
width : 80,
dataIndex : 'value',
renderer : Ext.util.Format.usMoney
}, {
xtype : 'actioncolumn',
width : 50,
items : [{
icon : 'script/checked.gif',
tooltip : 'Edit',
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert('Edit', rec
.get('book'));
}
}, {
icon : 'script/scroll-left.gif',
tooltip : 'Delete',
handler : function(grid, rowIndex, colIndex) {
var recs = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert('Delete', recs
.get('book'))
}
}]
}]
});
*/
/**
* 自定义分组 Ext.grid.feature.Grouping
* 分组总结 Ext.grid.feature.GroupingSummary
*总结所有组 Ext.grid.feature.Summary
* 插件使用
*/

// 定义模型
Ext.define('Book', {
extend : 'Ext.data.Model',
fields : ['name', 'topic']
});
// 创建store
var Books = Ext.create('Ext.data.Store', {
model : 'Book',
groupField : 'topic',// 按照主题分组
data : [{
name : 'Learning Ext js',
topic : 'Ext JS'
}, {
name : 'Learning Ext js2.0',
topic : 'Ext JS'
}, {
name : 'Learning Ext js3.0',
topic : 'Ext JS'
}, {
name : 'Learning PHP5 Tools',
topic : 'PHP'
}, {
name : 'NetBeans IDE 7 Cookbook',
topic : 'Java'
}, {
name : 'iReport 3.7',
topic : 'Java'
}, {
name : 'Python Multimedia',
topic : 'Python'
}, {
name : 'NHibernate 3.0 Cookbook',
topic : '.NET'
}, {
name : 'ASP.NET MVC 2 Cookbook',
topic : '.NET'
}]
});
// 填充数据给grid
/* Ext.create('Ext.grid.Panel', {
renderTo : 'div3',

[3]JavaScript 项目构建工具 Grunt 实践：任务和指令

来源: 发布时间: 2013-11-06

　　 Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及运行静态服务器。上一篇文章《JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架》介绍了 Grunt 安装和创建项目框架步骤，这篇文章介绍 Grunt 中的任务和指令。

Grunt 任务

　　Grunt 内置下面六种基本的任务：

✓ init - 从模板生成项目框架
✓ concat - 合并文件
✓ lint - 使用 JSHint 校验代码
✓ min - 使用 UglifyJS 压缩代码
✓ quint - 运行 Qunit 单元测试（依赖 PhantomJS）
✓ server - 启动静态服务器

　　任务按使用方式可以分为别名任务、多任务和自定义任务。

　　一、别名任务

　　基本语法：

grunt.registerTask(taskName, [description, ] taskList);

　　taskName：任务别名，descripation：任务描述，taskList：任务列表。

　　使用示例：

grunt.registerTask('theworks', 'lint qunit concat min');

　　这样定义以后，下面两条命令是等价的：

grunt theworks
grunt lint qunit concat min

　　如果别名是 "default"，那么命令还可以更简单，只需要输入 grunt 就可以了。

grunt.registerTask('default', 'lint qunit concat min');

　　下面三条命令是等价的：

grunt
grunt default
grunt lint qunit concat min

　　二、多任务

　　多任务是在如果没有指定任务目标的时候隐式地遍历所有的目标。例如下面的配置，运行 grunt lint:test 或者是 grunt lint:lib 都是校验特定的目录下的 JavaScript 文件，如果是运行 grunt lint 则是自动运行 test、lib 和 grunt 三个目标。

/*global config:true, task:true*/
grunt.initConfig({
lint: {
test: ['test/*.js'],
lib: ['lib/*.js'],
grunt: ['grunt.js']
}
});

　　三、自定义任务

　　如果你的任务不遵循多任务模式，可以自定义任务：

grunt.registerTask('default', 'My "default" task description.', function() {
grunt.log.writeln('Currently running the "default" task.');
});

　　在任务里还可以嵌套其它任务：

grunt.registerTask('foo', 'My "foo" task.', function() {
// Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.
grunt.task.run('bar baz');
// Or:
grunt.task.run(['bar', 'baz']);
});

　　甚至运行异步任务：

grunt.registerTask('asyncfoo', 'My "asyncfoo" task.', function() {
// Force task into async mode and grab a handle to the "done" function.
var done = this.async();
// Run some sync stuff.
grunt.log.writeln('Processing task...');
// And some async stuff.
setTimeout(function() {
grunt.log.writeln('All done!');
done();
}, 1000);
});

Grunt 指令

　　Grunt 内置下面五种指令：

　　<config:prop.subprop>

　　用于扩展 prop.subprop 配置属性的值。

　　<json:file.json>

　　用于调用通过 grunt.file.parseJSON 从 file.json 解析出来的对象。

　　<banner:prop.subprop>

　　用于访问 prop.subprop 参数属性，通过 grunt.template.process 解析。

　　<file_strip_banner:file.js>

　　用于引入将要嵌入注释的脚本文件

　　<file_template:file.js>　　

　　用于引入模板文件，通过 grunt.template.process 解析。

您可能感兴趣的相关文章

经典的白富美型 jQuery 图片轮播插件
精心挑选的优秀 jQuery Ajax 分页插件
十款精心挑选的在线CSS3代码生成工具
让人爱不释手的13套精美网页图标素材
10套精美的免费网站后台管理系统模板

本文链接：JavaScript 项目构建工具 Grunt 实践：任务和指令

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

本文链接