/*标签切换* tab:标签, data:内容, style:标签选中样式*/
$(data + ':gt(0)').hide(); //首先隐藏第一个之后的其他内容块
$(tab).click(function(){
$(this).addClass(style).siblings().removeClass();
$(data).eq(tabTitle.index(this)).show().siblings().hide();
});
}
function cssHover(selector,style){
$(selector).hover(
function(){
$(this).addClass(style);
},
function(){
$(this).removeClass(style);
}
);
}
function cssLastChild(selector,style){
/*选择最后一个元素*/
selector += ':last-child';
$(selector).addClass(style);
}
function cssChaldth(selector,nth,style){
/*选择第n个元素*/
selector = selector + ':nth-child('+nth+')';
$(selector).addClass(style);
}
function checkBox(getAll,getRev,pack){
/*全选与反选* getAll:全选/全不选, getRev:反选, pack:包含复选框的元素*/
$(getAll).click(function(){
if(this.checked){
$(pack+'>:checkbox').attr('checked',true);
$(getRev).attr('checked',false);
}else{
$(pack+'>:checkbox').attr('checked',false);
}
});
$(getRev).click(function(){
$(pack+'>:checkbox').each(function(){
this.checked = !this.checked;
});
if(this.checked){//当这个按钮本身被选中时,全选变为不选中
$(getAll).attr('checked',false);
}
});
}
function showIntro(selector,attr,class){
/*弹出详情介绍框* selector:元素, attr:元素属性名, class:生成框的样式名*/
$(selector).mouseover(function(e){
x = 20; y = 20;
msgBox = '<div id="'+class+'" +class+'">'+$(this).attr(attr)+'</div>';
$('body').append(msgBox);
$('#'+class).css({'left':(e.pageX + x)+'px', 'top':(e.pageY + y)+'px'}).show('fast');
}).mousemove(function(e){
$('#'+class).css({'left':(e.pageX + x)+'px', 'top':(e.pageY + y)+'px'}).show('fast');
}).mouseout(function(){
$('#'+class).remove();
});
}
function textFocus(selector,style){
/*文本框得到与推动焦点*/
$(selector+'>:text',selector+'input[type="password"]').focus(function(){
$(this).addClass(style);
if($(this).val() == this.defaultValue){$(this).val('');}
}).blur(function(){
$(this).removeClass(style);
if($(this).val() == ''){$(this).val(this.defaultValue)}
});
}
function cssFocus(selector,style){
$(selector).focus(function(){
$(this).addClass(style);
}).blur(function(){
$(this).removeClass(style);
})
}
function stepTab(selector,hidden,show){
/*一个隐藏,一个显示*/
$(selector).click(function(){
$(hidden).hide();
$(show).show();
});
}
function selectBox(showBox,dataBox,option,showValue,textBox){
/*下拉框* */
$(showBox).click(function(event){
event.stopPropagation();
$(this).next().slideToggle('fast');
});
$(option).click(function(){
$(showValue).text($(this).text());
$(textBox).val($(this).attr('value'));
});
$(document).click(function(){
$(dataBox).slideUp('fast');
});
}
本文链接
AngularJS是一个超棒的javascript框架，不单单对于开发人员来说非常有吸引力，对于UI设计师来说也同样出色。在这篇教程中，我们将简单的介绍AngularJS几个重量级必备特性，并且介绍它如何能够让你的web应用更加强大！
AugularJS简单介绍 AngularJS是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML，CSS和javascript，并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。在这篇文章中，我们讲述了一些最重要的AngularJS功能和特性。我们的目标在于阅读后，你可以开始自己开发一些有趣的应用。
特性一：双向的数据绑定数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。
我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。
传统来说，当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。
这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。
这里有一个非常简单的例子，用来演示一个input输入框和<h1>元素的双向绑定：
<!doctype html>
<html ng-app>
<head>
<script src=/blog_article/"http_/code.angularjs.org/angular-1.0.0rc10.min.js"></script>/index.html
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello, {{yourName}}!</h1>
</div>
</body>
</html>
特性二：模板
在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。
HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。
我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。
最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。
这里有一个例子，我们使用ng-repeat指令来循环图片数组并且加入img模板，如下：
function AlbumCtrl($scope) {
scope.images = [
{"image":"img/image_01.png", "description":"Image 01 description"},
{"image":"img/image_02.png", "description":"Image 02 description"},
{"image":"img/image_03.png", "description":"Image 03 description"},
{"image":"img/image_04.png", "description":"Image 04 description"},
{"image":"img/image_05.png", "description":"Image 05 description"}
];
}
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src=/blog_article/"{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
这里还有一件事值得提一句，AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。
特性三：MVC针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC，更接近于MVVM（Moodel-View-ViewModel)。
Modelmodel是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes，使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。
ViewModelviewmodel是一个用来提供特别数据和方法从而维护指定view的对象。
viewmodel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。
Controllercontroller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。
Viewview是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。
特性四：依赖注入（Dependency Injection，即DI）AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。
为了而得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你：
function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}
你也可以定义自己的服务并且让它们注入：
angular.
module('MyServiceModule', []).
factory('notify', ['$window', function (win) {
return function (msg) {
win.alert(msg);
};
}]);
function myController(scope, notifyService) {
scope.callNotify = function (msg) {
notifyService(msg);
};
}
myController.$inject = ['$scope', 'notify'];
特性五：Directives（指令）
指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。
这里是一个例子，它监听一个事件并且针对的更新它的$scope ，如下：
myModule.directive('myComponent', function(mySharedSe
参数
描述
默认值
data
参见data 数据项
dataParser
已过期。http://www.highcharts.com/documentation/how-to-use
null
dataURL
已过期。
null
index
图表中序列的索引，会影响char.series数组的内部索引，也会影响z index以及在图例中的顺序。
null
legendIndex
序列在图例中的顺序
null
name
序列在图例和提示中显示的名称
null
stack
该选项允许在堆栈图上分组序列。stack选项可以是一个字符串，一个数字或者其他任何项，只要被分组的序列stack选项互相匹配
null
type
序列类型。可以是area, areaspline, bar, column, line, pie, scatter， spline中的一个
line
xAxis
当使用双轴或者多个x轴的时候，这个数字定义了序列对应的x轴。
0.0
yAxis
当使用双轴或者多个y轴的时候，这个数字定义了序列对应的y轴。
0.0
data数据项
说明：序列数据点的数组。点有三种方式：
1.数据集合。比如data:[0,5,3,6]
2.两个值的集合，如果第一个值是字符串，它是点的name。比如data:[[5,2],[1,2],[3,7],[4,6]].
3.带有名称值的对象集合。比如data: [{name: 'Point 1', color: '#00FF00', y: 0}, {name: 'Point 2',color: '#FF00FF', y: 5}]
参数
描述
默认值
color
每个点独立的颜色，
从global的colors中获取
dataLabels
每个点独立的数据标签。参考plotOptions.series.dataLabels
null
events
参见events
id
每个点的id。在图表渲染后，可以通过chart.get()来获得这个点对象
null
legendIndex
仅用在饼图中。每一个饼图切片在图例中的顺序。
null
marker
参见marker
name
点显示在图例，提示和数据标签等地方的名字
null
sliced
仅用在饼图序列中。是否将一个切片偏移中心。
false
x
点的x值。
null
y
点的y值