rs-popover:佳能弹出式视窗的Angular指令

  • B8_315146
    了解作者
  • 35.5KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 03:20
    上传日期
rs-popover Popover的Angular指令。 要求 AngularJS v1.3或更高版本 佳能v1.1或更高版本 jQuery v1.9或更高版本 安装 该软件包当前尚未发布到NPM或Bower。 API稳定后,将发布构建的文件。 在此之前,您可以直接从GitHub存储库安装。 要使用Bower进行安装,请将以下行添加到bower.json中的依赖项: "rs-popover": "https://github.com/rackerlabs/rs-popover.git" 安装软件包后,您需要: 在您的应用程序中包括rs-popover.js或rs-popover.min.js 。 将rs.popover添加到主模块的依赖项列表中。 用法 rs-popover 该伪指令定义了一个弹出窗口,可以用作元素或属性。 此属性的所有实例都必须具有唯一的id属性。 <rs
rs-popover-master.zip
  • rs-popover-master
  • .travis.yml
    433B
  • docs
  • index.html
    3.2KB
  • documentation.css
    55B
  • Gulpfile.js
    2.9KB
  • package.json
    727B
  • test
  • popoverStateMachineSpec.js
    5.3KB
  • popoverControllerSpec.js
    4.8KB
  • formSpec.js
    1.7KB
  • tetherSpec.js
    918B
  • rsPopoverTriggerSpec.js
    3.6KB
  • registrySpec.js
    1.7KB
  • attachmentSpec.js
    1.7KB
  • LICENSE
    1.1KB
  • dist
  • rs-popover.js
    14.2KB
  • rs-popover.min.js.map
    16.9KB
  • rs-popover.js.map
    14.3KB
  • rs-popover.min.js
    8.9KB
  • src
  • templates
  • rsPopoverForm.html
    1.3KB
  • rsPopover.html
    632B
  • javascripts
  • rsPopoverForm.js
    368B
  • attachment.js
    983B
  • rsPopoverTrigger.js
    1.3KB
  • module.js
    1023B
  • form.js
    1.3KB
  • popoverController.js
    2.2KB
  • popoverStateMachine.js
    2KB
  • registry.js
    814B
  • rsPopover.js
    295B
  • tether.js
    924B
  • .gitignore
    42B
  • CHANGELOG.md
    2KB
  • README.md
    4.9KB
  • .jshintrc
    547B
  • bower.json
    731B
内容介绍
# rs-popover [![Build Status](http://img.shields.io/travis/rackerlabs/rs-popover/master.svg)](https://travis-ci.org/rackerlabs/rs-popover) [![Code Climate](http://img.shields.io/codeclimate/github/rackerlabs/rs-popover.svg)](https://codeclimate.com/github/rackerlabs/rs-popover) [![Coverage](http://img.shields.io/codeclimate/coverage/github/rackerlabs/rs-popover.svg)](https://codeclimate.com/github/rackerlabs/rs-popover) Angular directive for [Canon](http://rackerlabs.github.io/canon) popovers. ## Requirements - AngularJS v1.3 or higher - Canon v1.1 or higher - jQuery v1.9 or higher ## Installation This package is not currently published to either NPM or Bower. Once the API stabilizes, the built files will be published. Until then, you can install directly from the GitHub repository. To install with Bower, add the following line to dependencies in your bower.json: ``` "rs-popover": "https://github.com/rackerlabs/rs-popover.git" ``` Once you have installed the package, you'll need to: 1. Include `rs-popover.js` or `rs-popover.min.js` in your application. 2. Add `rs.popover` to your main module's list of dependencies. ## Usage ### `rs-popover` This directive defines a popover and can be used as either an element or an attribute. All instances of this attribute must have a unique `id` attribute. ``` <rs-popover id="myPopover"> This is popover content! </rs-popover> ``` #### Attributes ##### `id` Type: `String`, Required Accepts any unique string used to identity this popover. This attribute is required and must be unique across all other elements on the page. ##### `on-open` Type: `Expression`, Default: `''` Accepts the name of a function to be called when the popover is opened. This function should return a promise. A loading pattern will be displayed until the promise returned by this method is resolved. This attribute is optional. ### `rs-popover-form` This directive defines a popover that contains a form and can be used as either an element or an attribute. All instances of this attribute must have a unique `id` attribute. ``` <rs-popover-form id="myPopoverForm"> <div class="rs-control-group"> <label>Label</label> <div class="rs-controls"> <input type="text"> </div> </div> </rs-popover-form> ``` #### Attributes ##### `id` Type: `String`, Required Accepts any unique string used to identity this popover. This attribute is required and must be unique across all other elements on the page. ##### `on-open` Type: `Expression`, Default: `''` Accepts the name of a function to be called when the popover is opened. This function should return a promise. A loading pattern will be displayed until the promise returned by this method is resolved. This attribute is optional. ##### `on-save` Type: `Expression`, Default: `''` Accepts the name of a function to be called when the popover's form is submitted. This function should return a promise. The save and cancel buttons will be disabled until the promise returned by this method is resolved. When the promise resolved, the popover will be closed. When the promise throws an error, the buttons will be enabled and an error message will be displayed. This attribute is optional. ### `rs-popover-trigger` This directive toggles a popover's visibility and can only be used as an attribute. ``` <button rs-popover-trigger="myPopover" rs-popover-target="myTarget" rs-popover-attach="top-left" rs-popover-data="{ id: 'object-id' }">Toggle Me!</button> ``` #### Attributes ##### `rs-popover-trigger` Type: `String`, Required Accepts the ID of the popover it should toggle. If this attribute is used inside of a popover, it defaults to toggling the containing popover. ##### `rs-popover-target` Type: `String` Accepts the ID of the element at which the popover should point. If this attribute is not provided, the popover will point at the popover trigger. ##### `rs-popover-attach` Type: `String`, Default: `top-left` Specifies how the popover will be oriented in relation to the target. - `attach="left-top"` - Position the target to the left of the popover. - `attach="top-left"` - Position the target to the top left of the popover. ##### `rs-popover-data` Type: `Object`, Default: `{}` Accepts an object that will be passed to the `on-open` and `on-save` hooks exposed by the popover. ### Programmatic Control In addition to the `rs-popover-trigger` directive for toggling popover visibility, this package also provides a service that can be used to control popovers programmatically. ``` angular.module('my.module').controller('MyController', function (registry) { $scope.toggle = function (e) { registry.popover('somepopoverid').toggle(e.target, 'top-left'); }; $scope.show = function (e) { registry.popover('somepopoverid').open(e.target, 'top-left'); }; $scope.hide = function () { registry.popover('somepopoverid').close(); }; }); ``` ## License rs-popover is released under the [MIT License](LICENSE).
评论
    相关推荐