2018-08-29 10:38:21 qq_40852784 阅读数 307
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- 轮播(Carousel)指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播(Carousel)项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="#">
                <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
            </a>
            <div class="carousel-caption">标题 1</div>
        </div>
        <div class="item">
            <a href="#">
                <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
            </a>
            <div class="carousel-caption">标题 2</div>
        </div>
        <div class="item">
            <a href="#">
                <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
            </a>
            <div class="carousel-caption">标题 3</div>
        </div>
    </div>
    <!-- 轮播(Carousel)导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<style>
	.carousel-caption{
		color:#ffffff;
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);/**兼容IE8,文本背景变透明*/
	}
</style>
<script>
	$('.carousel').carousel();//开启自动轮播
</script>

 

2018-02-24 11:08:36 zouzongning 阅读数 666

之前加载瀑布流之后,使用bootstrap的多标签显示,发现由于多标签是静态的,不会刷新网页,导致切换标签之后div重叠问题,之后翻了好多文章才发现解决方法,记录一下

首先引用瀑布流文件,和图片加载插件

<script src="__PUBLIC__/js/masonry.pkgd.js"></script>
<script src="__PUBLIC__/js/vendor/imagesloaded.pkgd.min.js"></script>

下载地址
https://unpkg.com/masonry-layout@4.2.1/dist/masonry.pkgd.min.js
https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js

主体结构

  <div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active grid" id="home">
        <div class="grid-item"></div>
    </div>
    <div role="tabpanel" class="tab-pane grid" id="profile">
        <div class="grid-item"></div>
    </div>
    <div role="tabpanel" class="tab-pane grid" id="messages">
        <div class="grid-item"></div>
    </div>
    <div role="tabpanel" class="tab-pane grid" id="settings">
        <div class="grid-item"></div>
    </div>
  </div>

</div>

script

<script>
  //瀑布流调用
  $('.grid').masonry({
    itemSelector: '.grid-item',
  });
  //解决切换标签时,由于无刷新,页面获取不到宽度导致的div重叠问题
  $('a[data-toggle=tab]').each(function () {
  var $this = $(this);
  $this.on('shown.bs.tab', function () {
    $container.imagesLoaded( function () {
      $container.masonry({
        itemSelector: '.grid-item'
        });
      });
    });
  });
</script>

瀑布流排版完成

使用这个瀑布流排版,并不能解决后面无限加载的问题,如果仅仅用瀑布流排版再使用分页又显得不是那么合适,所以需要再整合一个无限加载插件(由于这是另一个项目的东西,放到一起写了,但是我觉得这个和上面bootstrap的多标签页的兼容性还是有问题,等有空测试完再更新。

无限加载有两种方式,一种是返回json数据后追加,一种是调用分页后的html页面,由于在做瀑布流之前已经写好了分页,所以采用第二种方式,调用分页的html页面。

插件我采用了infinitescroll,一定要注意,它更新了一个3.0版本,所有的API基本全变了!!!坑爹!!!!坑死我了!!!!根据手册整了一整天都不知道为什么debug不报错的情况下,出现各种莫名其妙的问题。换上2.x的版本立刻所有问题都消失不见。所以这里给附上2.1的版本插件下载地址。

下载地址

https://codeload.github.com/metafizzy/infinite-scroll/tar.gz/2.1.0

调用插件

<script src="__PUBLIC__/js/vendor/jquery.infinitescroll.min.js"></script>

分页代码(用的thinphp5自带的分页方法,调用后自动生成的,审查元素可见)

<div style="display: none;" class="page">
    <ul class="pagination">
        <li class="disabled"><span>«</span></li> 
        <li><a href="/magiex/public/index/index/index.html?page=2">2</a></li>
        <li><a href="/magiex/public/index/index/index.html?page=3">3</a></li>
        <li><a href="/magiex/public/index/index/index.html?page=5">5</a></li>
        <li><a href="/magiex/public/index/index/index.html?page=7">7</a></li>
        <li class="disabled"><span>...</span></li>
        <li><a href="/magiex/public/index/index/index.html?page=739">739</a></li>
        <li><a href="/magiex/public/index/index/index.html?page=2">»</a></li>
    </ul>
</div>

JS部分

$container.infinitescroll({
    navSelector  : '.pagination',  //这个是为了选择分页所在的位置,并设置隐藏
    nextSelector : '.pagination a', //这个是下一页的位置
    itemSelector : '.grid-item', //加载的容器
    loading: {
        finishedMsg: '没有更多的页面加载。',
        loadingText:'加载中',
    }
},function(newElements){
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
            $newElems.animate({opacity:1});
            $container.masonry( 'appended', $newElems, true ); 
        });
    }
);
2017-06-16 16:05:20 Leolu007 阅读数 1567

出处:http://www.cnblogs.com/wteam-xq/p/4328332.html

使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢? 当然网上一些前辈也给出了不少答案, 感觉不太全而且针对的都是各自的项目难以给我等小白太直观的理解。因而手痒试试写个稍微完整点的解决方案, 作为总结及日后回顾之用。

  项目中的bootstrap版本是3.X , 作为项目后台使用。 在项目进行过程中遇到组件弹出框无法垂直居中,示例demo代码如下:

复制代码
<!DOCTYPE html>
<html>
  <head>
    <title>bootstrap modal 垂直居中测试</title>
    <link href="bootstrap.css" rel="stylesheet">
    <meta charset="utf-8">
  </head>
  <body>
    
    <button type="button" id="modalBtn" class="btn btn-primary">点击弹出modal</button>

    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal 标题</h4>
          </div>
          <div class="modal-body">
            <p>内容&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">确定</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.js"></script>

    <script type="text/javascript">
      $(function(){
        // dom加载完毕
        var $m_btn = $('#modalBtn');
        var $modal = $('#myModal');
        $m_btn.on('click', function(){
          $modal.modal({backdrop: 'static'});
        });
      });
    </script>

  </body>
</html>
复制代码

 

弹出的效果是这样的:

当点击按钮时modal的位置看起来很不舒服, 解决办法总结有两:

 

1.使用modal 弹出事件方法;

   从官方文档中可以了解到, modal组件有不少事件接口:

 其中 “shown.bs.modal”可以在弹窗框出现后 做一些处理, 更改弹出框的样式当然是可以的:

复制代码
<script type="text/javascript">
      $(function(){
        // dom加载完毕
        var $m_btn = $('#modalBtn');
        var $modal = $('#myModal');
        $m_btn.on('click', function(){
          $modal.modal({backdrop: 'static'});
        });
        // 测试 bootstrap 居中-----------主要是这一段代码
        $modal.on('shown.bs.modal', function(){
          var $this = $(this);
          var $modal_dialog = $this.find('.modal-dialog');
          var m_top = ( $(window).height() - $modal_dialog.height() )/2;
          $modal_dialog.css({'margin': m_top + 'px auto'});
        });
      });
    </script>
复制代码

该实现方式 弹出框是居中了, 但弹出时有一些迟疑后抖动到中部;不是特别理想, 接下来试试第二种方式;

ps:

  该方案我的代码实现的不太好, 感谢园友提供的外国链接,实现效果更好一些,代码如下:

复制代码
<script type="text/javascript">
      $(function(){
        // dom加载完毕
        var $m_btn = $('#modalBtn');
        var $modal = $('#myModal');
        $m_btn.on('click', function(){
          $modal.modal({backdrop: 'static'});
        });

        // 测试 bootstrap 居中
        $modal.on('show.bs.modal', function(){
          var $this = $(this);
          var $modal_dialog = $this.find('.modal-dialog');
          // 关键代码,如没将modal设置为 block,则$modala_dialog.height() 为零
          $this.css('display', 'block');
          $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
        });
        
      });
    </script>
复制代码

2.修改bootstrap.js 源码;

   带着问题读js库源码, 往往能学到不少知识;本着怎样让 modal组件自动居中目的, 开始跟踪组件弹窗时对应的事件;

打开bootstrap.js ctrl+f 找到 modal对应代码:

 弹出框出现时, 调用的自然是 Modal.prototype.show() 方法, 而show 方法中又调用了 that.adjustDialog() 方法:

以上代码看来,官方要实现 垂直居中简直太容易, 而他们没有, 只能说国外同行网站布局观跟俺们还是有区别的。加上少量代码:

复制代码
复制代码
Modal.prototype.adjustDialog = function () {
    var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight

    this.$element.css({
      paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
      paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
    })
    // 是弹出框居中。。。
    var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
    var m_top = ( $(window).height() - $modal_dialog.height() )/2;
    $modal_dialog.css({'margin': m_top + 'px auto'});
  }
复制代码
复制代码

 

然后就实现modal垂直居中了, 效果图:

 

总结:

  总的来说 两方案都能实现优雅的垂直居中效果,而实际网站开发中页面多弹出框自然不止一个;修改源码就不用在每个页面调用bootstrap事件,故本人更倾向于方案2。

 

参考链接:

http://v3.bootcss.com/javascript/#modals

http://www.abeautifulsite.net/vertically-centering-bootstrap-modals/

没有更多推荐了,返回首页