顯示具有 jquery 標籤的文章。 顯示所有文章
顯示具有 jquery 標籤的文章。 顯示所有文章

2017年8月25日 星期五

,

Bootstrap 輪播高度一致


本文的程式碼來自於 https://fantasyworld.idv.tw/2015/1542


$(function () {
    carouselNormalization();
});
function carouselNormalization() {
    var items = $('.carousel .carousel-inner .item'), heights = [], tallest, bwidth, height, width;
    if (items.length) {
        function normalizeHeights() {
            bwidth = $('.carousel').width();
            items.each(function () {
                height = $(this).height();
                width = $(this).width();
                if (width > bwidth) {
                    height = height * (bwidth / width);
                }
                heights.push(height);
            });
            tallest = Math.max.apply(null, heights);
            if (tallest > bwidth) {
                tallest = bwidth;
            }
            items.each(function () {
                $(this).css('height', tallest + 'px');
            });
        };
        normalizeHeights();
        $(window).on('resize', function () {
            bwidth = $('.carousel').width();
            heights = [];
            items.each(function () {
                $(this).css('height', 'auto');
            });
            normalizeHeights();
        });
    }
}


.carousel-inner{height: 300px;}

.img{width:100%;}



Share:
Read More

2016年8月8日 星期一

,

[網頁設計] 背景幻燈片jQuery套件


官網 http://vegas.jaysalvat.com/documentation/transitions/

1. 套件:Zepto.js、vegas.min.js
2. css:vegas.css
3. 初始化
$(function() {
     $('body').vegas({
            slides: [{
                src: "images/banner.jpg"
            }, {
                src: "images/banner2.jpg"
            }],
           animation: 'kenburns'
    });
});

以上範例都在menu_left /index3.html中
Share:
Read More
,

[網頁設計] 選單動畫jQuery套件


以下範例都在menu_left /index.html中

1.套件:iscroll.js、drawer.min.js 
2.css:drawer.css
3.HTML
<body class="drawer drawer--left">
  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
  </header>
  <main role="main">
    <!-- Page content -->
  </main>
</body>
4.初始化
$(document).ready(function() {
  $('.drawer').drawer();
});
Share:
Read More
,

[網頁設計] 圖片輪播jQuery套件


以下範例都在321/index3.html中
1.套件:swiper.jquery.min.js
2. css:swiper.css
3.布局
<div class="swiper-container">
     <div class="swiper-wrapper">
         <div class="swiper-slide">
              <img src="images3/a-1.jpg">
         <div>
         <div class="swiper-slide">
              <img src="images3/a-2.jpg">
         </div>
         <div class="swiper-slide">
              <img src="images3/a-3.jpg">
         </div>
     </div>
     <div class="swiper-button-prev"></div>
     <div class="swiper-button-next"></div>
</div>

4.指定swiper 容器尺寸:
.swiper-container, .swiper-slide {
  width: 250px;
}

5.初始化文件
window.onload = function() {
        var mySwiper = new Swiper('.swiper-container', {
            //添加需要的选项:
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            spaceBetween: 0,
            centeredSlides: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false,
            loop: true,
        });
    }
Share:
Read More
, ,

[網頁設計] 驗證欄位jQuery套件



1、套件:jquery.validate.js
2、套件:cmxforms.js
3、套件:cmxforms.css
4、$("#commentForm").validate({
     rules:{
     repassword:{equalTo: '#password'}
     },
     errorPlacement: function(error, element) {
       error.appendTo( element.parents(".control-group"))
     }
   });

註:原始為$("#commentForm").validate(); 即可,此為套用bootstrap之範例

以上範例都在login/register.php中
Share:
Read More
,

[網頁設計] 彈出視窗jQuery套件



1.套件:sweetalert2
2.$(function() {
     $('p').bind('click', function(event) {
        swal({
               title: 'jQuery HTML example',
               html: $('<div>')
                    .addClass('some-class')
                    .text('jQuery is everywhere.')
            })
       );
  })

以上無範例


1.套件:jquery.poptrox.min.js
2.撰寫js
   $(function() {
        var foo = $('#gallery');
        foo.poptrox({
            usePopupCaption: false
        });
    });

3.HTML
<div class="col-xs-8 col-md-8 hover" id="gallery">
    <a href="https://youtu.be/nSJFveEL_38" data-poptrox="youtube,800x480">
        <span>點我看更多</span>
        <img src="images2/btn-08.jpg" class="img-responsive">
   </a>
 </div>

以上範例在321/index2.html中



Share:
Read More
, ,

[網頁設計] 記憶目前所在的頁面jQuery套件




說明:Bootstrap 記憶目前所在的頁面 (Nav .active效果)

1.套件:The Scrollspy Plugin、Bootstrap
2.<body data-spy="scroll" data-target=".navbar" data-offset="50">
3.<a class="page-scroll" href="#section1">Services</a>
4.<div id="section1" class="container-fluid">

線上教學網址:

以上範例在comecloud中
Share:
Read More