betway必威-betway必威官方网站
做最好的网站

必威官方网站:超链接变按钮的实现方法,Boot

必威官方网站 1

开关(Button)在 Bootstrap 开关一章中牵线过。通过按键(Button)插件,您能够增多进一些互动,比方调控开关状态,可能为别的零件(如工具栏)成立开关组。

angularjs是由Google团队开垦的一款特别精美web前端框架。在当前如此多的web框架下,angularjs能横空出世,从架构设计上就卓尔不群,双向数据绑定,注重注入,指令,MVC,模板。Angular.js立异地把后台技能融合前端开采,扫去jQuery一度的亮光。用angularjs就像是写后台代码,更标准,更结构化,更可控。

必威官方网站 2

若是你想要单独援用该插件的意义,那么您需要援用 button.js。或然,正如 Bootstrap 插件大概浏览 一章中所提到,您能够援用 bootstrap.js 或压缩版的 bootstrap.min.js。

1.bootstrp的弹出提示

<a href="#"> xuhaitao </a>

一、加载状态

  bootstrap已经帮大家封装了老大好用的弹出提醒Popover。

地点代码效果如下:

如需向开关加多加载状态,只供给轻松地向 button 成分加多data-loading-text="Loading..." 作为其质量即可,如下边实例所示:

  

btn btn-default :形成一个开关样子

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
 type="button"> 加载状态
</button>
<script>
 $(function() {
  $(".btn").click(function(){
   $(this).button('loading').delay(1000).queue(function() {
   // $(this).button('reset');
   });  
  });
 }); 
</script>

2.自定义popover指令

btn-lg : 中号的按键

必威官方网站 3

  大家使用贰个发令给肆意成分加上popover,而且能够依照气象退换popover的content内容。

btn-block : 按钮填充整个宽度

二、单个切换

JS:

必威官方网站 4

如需激活单个按键的切换(即改动按键的常规状态为按压状态,反之亦然),只需向 button 成分增加 data-toggle="button" 作为其属性就可以,如上边实例所示:

<script>
  var app = angular.module('testApp', []);
  app.factory('dataService',function() {
    var service = {};
    service.cacheObj = {};
    service.getAppName = function (appId, callback) {
      if (service.cacheObj[appId]) {
        console.log('get name from cache');
        callback(service.cacheObj[appId]);
        return;
      }
      //here is sample. Always ajax.
      service.cacheObj[appId] = 'QQ';
      callback('QQ');
    };
    return service;
  });
  app.directive('myPopover', function (dataService) {
    return {
      restrict: 'AE',
      link: function (scope, ele, attrs) {
        $(ele).data('title','App');
        $(ele).data('content', "<div id ='popDiv'>Name:-</div>");
        $(ele).popover({ html: true, trigger: 'hover'});
        $(ele).on('shown.bs.popover',function() {
          var popDiv = $('#popDiv');
          console.log(popDiv);
          dataService.getAppName('xxx',function(name) {
            popDiv.html('Name:' name);
          });
        });
      }
  };
  });
  app.controller("test",function($scope) {
  });
</script>

JS按钮(bootstrap)超链接

复制代码 代码如下:

html:

本文由betway必威发布于网页设计,转载请注明出处:必威官方网站:超链接变按钮的实现方法,Boot

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。