Popover、Tooltip、Typeahead
卫弘义
Popover
popover-title：显示的标题popover-placement：默认为top，其他为"bottom", "left", "right"popover-animation：是否有fade in和fade out的动画效果，默认为truepopover-popup-delay：鼠标放置多少毫秒之后才会显示内容，默认为0popover-trigger：何种方式触发提示，mouseenter，focus，详见tooltippopover-append-to-body：是否追加至$body
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<title></title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="lib/angular/angular.min.js"></script>
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
<script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<div class="well">
<div>
<h4>Dynamic</h4>
<div>Dynamic Popover : <input type="text" ng-model="dynamicPopoverText"></div>
<div>Dynamic Popover Popup Text: <input type="text" ng-model="dynamicPopover"></div>
<div>Dynamic Popover Popup Title: <input type="text" ng-model="dynamicPopoverTitle"></div>
<div><button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="btn">{{dynamicPopoverText}}</button></div>
</div>
<div>
<h4>Positional</h4>
<button popover-placement="top" popover="On the Top!" class="btn">Top</button>
<button popover-placement="left" popover="On the Left!" class="btn">Left</button>
<button popover-placement="right" popover="On the Right!" class="btn">Right</button>
<button popover-placement="bottom" popover="On the Bottom!" class="btn">Bottom</button>
</div>
<div>
<h4>Triggers</h4>
<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="btn">Mouseenter</button>
<input type="text" value="Click me!"
popover="I appeared on focus! Click away and I'll vanish..."
popover-trigger="focus" />
</div>
<div>
<h4>Other</h4>
<button Popover-animation="true" popover="I fade in and out!" class="btn">fading</button>
<button popover="I have a title!" popover-title="The title." class="btn">title</button>
</div>
</div>
</div>
<script>
var Demo = angular.module('Demo', ['ui.bootstrap']);
var PopoverDemoCtrl = function ($scope) {
$scope.dynamicPopover = "Hello, World!";
$scope.dynamicPopoverText = "dynamic";
$scope.dynamicPopoverTitle = "Title";
};
</script>
</body>
</html>Tooltip
两个版本：tooltip，tooltip-html-unsafe
tooltip-placement：tooltip-animation：tooltip-popup-delay：tooltip-trigger：mouseenter，mouseleave，click，focus，blurtooltip-append-to-body
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<title></title>
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="lib/angular/angular.min.js"></script>
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
<script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
</head>
<body>
<div ng-controller="TooltipDemoCtrl">
<div class="well">
<div>Dynamic Tooltip Text: <input type="text" ng-model="dynamicTooltipText"></div>
<div>Dynamic Tooltip Popup Text: <input type="text" ng-model="dynamicTooltip"></div>
<p>
Pellentesque <a><span tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</span></a>,
sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
aliquam. Tincidunt lobortis feugiat vivamus at
<a><span tooltip-placement="left" tooltip="On the Left!">left</span></a> eget
arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
<a><span tooltip-placement="right" tooltip="On the Right!">right</span></a>
nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
<a><span tooltip-placement="bottom" tooltip="On the Bottom!">bottom</span></a>
pharetra convallis posuere morbi leo urna,
<a><span tooltip-animation="false" tooltip="I don't fade. :-(">fading</span></a>
at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
<a><span tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</span></a> turpis massa tincidunt
dui ut.
</p>
<p>
I can even contain HTML. <a><span tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</span></a>
</p>
<p>
Or use custom triggers, like focus:
<input type="text" value="Click me!"
tooltip="See? Now click away..."
tooltip-trigger="mouseleave"
tooltip-placement="right"/>
</p>
<form name="myForm" >
<div>
here
<input
class="span2"
name="input1id"
type="text"
ng-model="input1"
required
tooltip="See? Now click away..."
tooltip-placement="bottom"
tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.input1id.$invalid]}}"
/>
</div>
<pre>myForm.input1id.$invalid: {{myForm.input1id.$invalid}}</pre>
</div>
</div>
<script>
var Demo = angular.module('Demo', ['ui.bootstrap']);
Demo.config(['$tooltipProvider', function ($tooltipProvider) {
$tooltipProvider.options({
placement: 'right',
animation: true,
popupDelay: 0,
appendToBody: false
});
}]);
var TooltipDemoCtrl = function ($scope) {
$scope.dynamicTooltip = "Hello, World!";
$scope.dynamicTooltipText = "dynamic";
$scope.htmlTooltip = "I've been made <h6>bold</h6>!";
};
</script>
</body>
</html>Typeahead
$viewValue：用户输入的值ng-model：对应的模型绑定typeahead：对应的表达式，类似于selecttypeahead-editable：是否允许不从提示中选择，默认为ture，设置为false时，如果不是从提示中选择，该input的验证为falsetypeahead-input-formatter：选中之后格式化显示typeahead-loading：指定一个模型，当查询时，该模型为turetypeahead-min-length：输入最少数量的字符时出现提示typeahead-on-select：选择选项时的回调函数，默认为空typeahead-template-url：自定义内容的urltypeahead-wait-ms：键入最后一个字符时的等待时间，默认为0
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<title></title>
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="lib/angular/angular.min.js"></script>
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
<script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected | json}}</pre>
<form name="myForm">
<input type="text" ng-model="selected" name="selected"
typeahead="state.id as state.name for state in states | filter:{ name : $viewValue }"
typeahead-editable="false"
typeahead-input-formatter="formatInput($model)">
<input type="text" ng-model="search"
typeahead="result for result in lookup($viewValue)"
typeahead-loading="isLoading" />
</form>
{{myForm.selected.$valid}}
</div>
<script>
var Demo = angular.module('Demo', ['ui.bootstrap']);
function TypeaheadCtrl($scope,$filter) {
$scope.selected=3;
$scope.states = [
{id:1,name:"Alabama"},
{id:2,name:"Montana"},
{id:3,name:"Arkansas"}
];
$scope.formatInput = function($model) {
return $filter('filter')($scope.states,{id:$model})[0].name;
}
$scope.lookup = function() {
console.log("isLoading is " + $scope.isLoading);
return [];
}
}
</script>
</body>
</html>
类似资料：