帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:Ionic 框架  framework    Bower  component  COM  ION  Ionic  
'ionic-ratings' bower component for ionic framework applications

  • 源代码名称:ionic-ratings
  • 源代码网址:http://www.github.com/rajeshwarpatlolla/ionic-ratings
  • ionic-ratings源代码文档
  • ionic-ratings源代码下载
  • Git URL:
    git://www.github.com/rajeshwarpatlolla/ionic-ratings.git
  • Git Clone代码到本地:
    git clone http://www.github.com/rajeshwarpatlolla/ionic-ratings
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/rajeshwarpatlolla/ionic-ratings
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • bitHound Score

    ##Introduction:

    这是一个 ionic-ratings 组件,可以与框架的任何离子应用一起使用。

    视图plunker演示插件

    视图codepen演示插件

    ##Prerequisites.

    • node.js
    • bower
    • 吞咽。

    要使用的##How:

    1 ) 在项目仓库中使用 Bower 安装 ionic-ratings
    bower install ionic-ratings --save

    这将安装最新版本的发布。

    2 ) 在 index.html 文件中给出 ionic-ratings.js的路径。
    <!-- path to ionic/angularjs js --><scriptsrc="lib/ionic-ratings/dist/ionic-ratings.min.js"></script>
    or
    <scriptsrc="lib/ionic-ratings/src/ionic-ratings.js"></script>
    在应用程序 MODULE 中, 3插入依赖 ionic-ratings,以便与之一起工作。
    angular.module('mainModuleName', ['ionic', 'ionic-ratings']){
     //}
    请将你所需要传递给指令的对象定义为你的控制器中的
    .controller('ControllerName', ['$scope', function($scope) {
     $scope.ratingsObject= {
     iconOn:'ion-ios-star', //Optional iconOff:'ion-ios-star-outline', //Optional iconOnColor:'rgb(200, 200, 100)', //Optional iconOffColor:'rgb(200, 100, 100)', //Optional rating:2, //Optional minRating:1, //Optional readOnly:true, //Optionalcallback:function(rating, index) { //Mandatory$scope.ratingsCallback(rating, index);
     }
     };
     $scope.ratingsCallback=function(rating, index) {
     console.log('Selected rating is : ', rating, ' and the index is : ', index);
     };
    }])

    这些属性的属性如下。

    1 ) 英镑 iconOn ( 可选): 你可以从 ionicons 提供任何 icon 。 当 icon 处于活动状态时,将显示这里 icon 。 默认值为 ion-ios-star

    b ) 收费的( 可选): 你可以从 ionicons 提供任何 icon 。 这里 icon 将在 icon 处于非活动状态时显示。 默认值为 ion-ios-star-outline

    c ) 英镑的iconOnColor ( 可选): 你可以给任何颜色。 颜色格式可以是 red 或者 #00FF00 或者 rgb(200, 200, 100). 。当 icon 处于活动状态时,这里颜色将显示。 默认值为 rgb(200, 200, 100)

    d ) 英镑的iconOffColor ( 可选): 你可以给任何颜色。 颜色格式可以是 red 或者 #00FF00 或者 rgb(200, 200, 100). 。当 icon 处于非活动状态时,这里颜色将显示。 默认值为 rgb(200, 100, 100)

    e ) 定价( 可选): 你可以传递从 0开始的任何值。 这是初始/默认分级。 默认值为 0

    f ) 英镑的minRating ( 可选): 你可以传递从 0开始的任何值。 这是用户可以选择的最小值。 默认值为 0

    g ) readOnly ( 可选): 这需要两个值。如果你想让它只读,请给 true,否则你可以以给 false 。 默认值为 false 。如果希望使它的只读,请将 below css类添加到css文件中。

    .ionic_ratings.read_only {
     pointer-events:none!important;
     }

    h ) 回调 ( 强制): 当用户选择分级时将调用这里方法。 你可以在这里回调函数中获得选定的分级。

    5 ) 在你的模板中,你可以像下面那样使用

    不重复

    <ionic-ratingsratingsobj='ratingsObject'index='0'></ionic-ratings>

    ng重复

    <ionic-ratingsratingsobj='ratingsObject'index='$index'></ionic-ratings>

    :这是强制属性,如果在侧中使用的话,它将帮助获取所选项的索引。 这将在回调函数中发送。 index的值为零,类似于 $index

    ##CSS 类:你可以使用这些类自定义图标的字体,宽度和高度。

    ) ) ) ) ) ionic_rating_icon_off

    ionic-ratings icon onionic-ratings icon off

    你还可以使用以下css类来更改每个 icon的属性。

    .ionic_ratings.icon {
     font-size: 50px;
     }

    ##Screen 镜头:

    成功完成 above 步骤后,你应该能够看到 below 屏幕快照。

    ionic-ratings buttons

    ##Versions:

    1 ) v0.1.0

    整个 ionic-ratings 组件功能已经实现,并且可以与命令一起安装 bower install ionic-ratings --save

    2 ) v0.2.0

    已经添加只读功能。

    3 ) v0.3.0

    新功能插件

    ##License:

    ##Contact: gmail: rajeshwar.patlolla@gmail.com

    github: https://github.com/rajeshwarpatlolla

    Twitter: https://twitter.com/rajeshwar_9032

    facebook: https://www.facebook.com/rajeshwarpatlolla

    paypal: rajeshwar.patlolla@gmail.com

    评论或者评分:http://market.ionic.io/plugins/ionicratings



    文章标签:COM    framework  component  ION  Ionic  Bower  评价  

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