帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Directive  颜色选择器  angular  COL  Require  DIR  挖掘  color  
AngularJS Colour Picker Directive

  • 源代码名称:angular-color-picker
  • 源代码网址:http://www.github.com/ruhley/angular-color-picker
  • angular-color-picker源代码文档
  • angular-color-picker源代码下载
  • Git URL:
    git://www.github.com/ruhley/angular-color-picker.git
  • Git Clone代码到本地:
    git clone http://www.github.com/ruhley/angular-color-picker
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/ruhley/angular-color-picker
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • Angular 颜色选择器

    Vanilla AngularJS颜色选取器指令,对jQuery无要求

    Build StatusCode Climate

    演示

    https://ruhley.github.io/angular-color-picker/

    安装

    Bower
    bower install angularjs-color-picker --save
    Npm
    npm install angularjs-color-picker --save
    用法
    • 包含文件

      • Bower
      <linkrel="stylesheet"href="bower_components/angular-color-picker/dist/angularjs-color-picker.min.css"/><!-- only include if you use bootstrap --><linkrel="stylesheet"href="bower_components/angular-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css"/>
      <scriptsrc="bower_components/tinycolor/dist/tinycolor-min.js"></script>
      <scriptsrc="bower_components/angular-color-picker/dist/angularjs-color-picker.min.js"></script>
      • Node
      <linkrel="stylesheet"href="node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.css"/><!-- only include if you use bootstrap --><linkrel="stylesheet"href="node_modules/angularjs-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css"/>
      <scriptsrc="node_modules/tinycolor2/dist/tinycolor-min.js"></script>
      <scriptsrc="node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.js"></script>
    • 将模块添加到应用程序中

    angular.module('app', ['color.picker']);
    • 包含在视图中
    <color-pickerng-model="myColor"></color-picker>

    命令行选项

    HTML - 只需要 ng-model。 如果提供一个 api,它必须是每个颜色选取器的唯一对象。 但是,事件api可以在颜色选择器之间共享。

    <color-pickerng-model="color"options="options"api="api"event-api="eventApi"></color-picker>

    Javascript

    $scope.color='#FF0000';// options - if a list is given then choose one of the items. The first item in the list will be the default$scope.options= {
     // html attributes required: [false, true],
     disabled: [false, true],
     placeholder:'',
     inputClass:'',
     id:undefined,
     name:undefined,
     // validation restrictToFormat: [false, true],
     preserveInputFormat: [false, true],
     allowEmpty: [false, true],
     // color format: ['hsl', 'hsv', 'rgb', 'hex', 'hexString', 'hex8', 'hex8String', 'raw'],
     case: ['upper', 'lower'],
     // sliders hue: [true, false],
     saturation: [false, true],
     lightness: [false, true], // Note: In the square mode this is HSV and in round mode this is HSL alpha: [true, false],
     dynamicHue: [true, false],
     dynamicSaturation: [true, false],
     dynamicLightness: [true, false],
     dynamicAlpha: [true, false],
     // swatch swatch: [true, false],
     swatchPos: ['left', 'right'],
     swatchBootstrap: [true, false],
     swatchOnly: [true, false],
     // popup round: [false, true],
     pos: ['bottom left', 'bottom right', 'top left', 'top right'],
     inline: [false, true],
     horizontal: [false, true],
     // show/hide show: {
     swatch: [true, false],
     focus: [true, false],
     },
     hide: {
     blur: [true, false],
     escape: [true, false],
     click: [true, false],
     },
     // buttons close: {
     show: [false, true],
     label:'Close',
     class:'',
     },
     clear: {
     show: [false, true],
     label:'Clear',
     class:'',
     },
     reset: {
     show: [false, true],
     label:'Reset',
     class:'',
     },
    };// exposed api functions$scope.api.open(); // opens the popup$scope.api.close(); // closes the popup$scope.api.clear(); // removes value$scope.api.reset(); // resets color value to original value$scope.api.getElement(); // returns the wrapping <color-picker> element$scope.api.getScope(); // returns the color picker $scope// api event handlers$scope.eventApi= {
     onChange:function(api, color, $event) {},
     onBlur:function(api, color, $event) {},
     onOpen:function(api, color, $event) {},
     onClose:function(api, color, $event) {},
     onClear:function(api, color, $event) {},
     onReset:function(api, color, $event) {},
     onDestroy:function(api, color) {},
    };// decorator - all variables in options can be globally overridden hereangular
    . module('app', ['color.picker'])
    . config(function($provide) {
     $provide.decorator('ColorPickerOptions', function($delegate) {
     var options =angular.copy($delegate);
     options.round=true;
     options.alpha=false;
     options.format='hex';
     return options;
     });
     });

    要求

    • angularjs ( v1.3和更高)
    • tinycolor.js ( 18 8 KB缩小)

    不需要 jQuery !

    的灵感

    从项目中获得的灵感和代码



    文章标签:COL  angular  DIR  color  Directive  pick  Require  挖掘  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语