H/C/J 前端学习笔记 - I

1. AngularJS 如何条件设置元素的class

ng-class="{class}[condition]"
example：ng-class="{1:'col-md-12', 2:'col-sm-6'}[value]"

ng-class supports an expression that must evaluate to either
a. a string of space-delimited class names, or
b. an array of class names, or
c. a map/object of class names to boolean values.

2. [CC]一篇非常好的Animation的文章

　　http://www.yearofmoo.com/2013/04/animation-in-angularjs.html
　　https://scotch.io/tutorials/animating-angular-apps-ngshow-and-nghide
　　https://docs.angularjs.org/api/ng/directive/ngHide
　　https://egghead.io/lessons/angularjs-animating-the-angular-way

3. [CC]Bootstrap 3 tips and tricks you still might not know

 https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-still-might-not-know

4. [CC]Extending HTML with AngluarJS Directives

http://www.codeproject.com/Articles/607873/Extending-HTML-with-AngularJS-Directives

5. How to no padding in Bootstrap 3 Row/Col

 .nopadding {

   padding: 0 !important;

   margin: 0 !important;

}

LESS:
.row-no-padding {

  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

SASS:

@mixin no-padding($side) {

    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

6. AngluarJS CSS Slide Animation

http://codepen.io/anon/pen/JGBPja

7. fill up div with css

http://jsfiddle.net/posco2k8/vu8dV/
https://www.gmaven.com/info/angularjs-directive-full-height-div/
http://gyf1.com/blog/2014/03/21/angularjs-%E5%8A%A8%E6%80%81%E8%AE%BE%E7%BD%AEdiv%E7%9A%84%E9%AB%98%E5%BA%A6/
http://stackoverflow.com/questions/20248905/how-to-make-the-divs-fill-the-remaining-space-without-using-float
http://stackoverflow.com/questions/20917181/how-to-make-a-div-fill-up-remaining-horizontal-space
http://stackoverflow.com/questions/8555820/set-div-to-remaining-height-using-css-with-unknown-height-divs-above-and-below
http://jsfiddle.net/Victornpb/S8g4E/783/ (Div full automatically remaining height)
http://stackoverflow.com/questions/15376558/how-to-fill-100-of-remaining-height  (How to fill 100% of remaining height?)
http://www.thecssninja.com/css/sangraal-layout   (A true flexible, fluid CSS layout)

8. How to make only one column fluid in bootstrap

https://www.codementor.io/tips/0917338242/how-to-make-only-one-column-fluid-in-bootstrap

 9. Angular Splitter

https://github.com/blackgate/bg-splitter
http://wijmo.com/docs/wijmo/wijsplitterDirectives.html

10. Angular Resizable

http://codepen.io/anon/pen/XXEQpZ

11. AngluarJS + Kendo UI

http://blog.falafel.com/angularjs-and-kendo-ui-part-1-getting-started/

12. AngularJS Directives

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters
http://www.w3docs.com/snippets/angularjs/angularjs-directive-scope-method.html
https://thinkster.io/egghead/isolate-scope-am