1. 首页
  2. 代码片断库
  3. jade
全部数据
text
javascript
php
markdown
sh
java
python
html
csharp
css
sql
c_cpp
PHP
ruby
xml
scss
json
swift
JavaScript
typescript
vbscript
powershell
CSS
apache_conf
ActionScript 3
r
ini
HTML
golang

jade 计时器

.js 
export default class Timer {
   constructor(el, date) {
      this.counter = document.querySelector(el);
      if (!this.counter) return;

      this.countdown = new Date(date);
      this.daysItem = this.counter.querySelector('.js-countdown-days');
      this.hoursItem = this.counter.querySelector('.js-countdown-hours');
      this.minutesItem = this.counter.querySelector('.js-countdown-minutes');
      this.secondsItem = this.counter.querySelector('.js-countdown-seconds');

      this.init();
   }

   init() {
      this.initClock(this.countdown);
   }

   initClock(endTime) {
      const _this = this;

      function updateClock() {
         const time = _this.getRemainingTime(endTime);

         _this.daysItem.innerHTML = time.days;
         _this.hoursItem.innerHTML = ('0' + time.hours).slice(-2);
         _this.minutesItem.innerHTML = ('0' + time.minutes).slice(-2);
         _this.secondsItem.innerHTML = ('0' + time.seconds).slice(-2);

         if (time.total <= 0) {
            clearInterval(timeInterval);
         }
      }

      updateClock();
      const timeInterval = setInterval(updateClock, 1000);
   }

   getRemainingTime(endTime) {
      const milliseconds = Date.parse(endTime) - Date.parse(new Date());
      const seconds = Math.floor((milliseconds / 1000) % 60);
      const minutes = Math.floor((milliseconds / 1000 / 60) % 60);
      const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
      const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));

      return {
         total: milliseconds,
         seconds: seconds,
         minutes: minutes,
         hours: hours,
         days: days,
      };
   }
}

const promoClock = new Timer('.js-promo-timer', 'Apr 9, 2019');
.pug 
.js-promo-timer
									.countdown__item
										.countdown__timer.js-countdown-days
										.countdown__label Days
									.countdown__item
										.countdown__timer.js-countdown-hours
										.countdown__label Hours
									.countdown__item
										.countdown__timer.js-countdown-minutes
										.countdown__label Minutes
									.countdown__item
										.countdown__timer.js-countdown-seconds
										.countdown__label Seconds

jade 有用的哈巴狗Mixins

mixins.pug 
mixin state-dropdown()
  option(value="AL") AL
  option(value="AK") AK
  option(value="AZ") AZ
  option(value="AR") AR
  option(value="CA") CA
  option(value="CO") CO
  option(value="CT") CT
  option(value="DE") DE
  option(value="DC") DC
  option(value="FL") FL
  option(value="GA") GA
  option(value="HI") HI
  option(value="ID") ID
  option(value="IL") IL
  option(value="IN") IN
  option(value="IA") IA
  option(value="KS") KS
  option(value="KY") KY
  option(value="LA") LA
  option(value="ME") ME
  option(value="MD") MD
  option(value="MA") MA
  option(value="MI") MI
  option(value="MN") MN
  option(value="MS") MS
  option(value="MO") MO
  option(value="MT") MT
  option(value="NE") NE
  option(value="NV") NV
  option(value="NH") NH
  option(value="NJ") NJ
  option(value="NM") NM
  option(value="NY") NY
  option(value="NC") NC
  option(value="ND") ND
  option(value="OH") OH
  option(value="OK") OK
  option(value="OR") OR
  option(value="PA") PA
  option(value="RI") RI
  option(value="SC") SC
  option(value="SD") SD
  option(value="TN") TN
  option(value="TX") TX
  option(value="UT") UT
  option(value="VT") VT
  option(value="VA") VA
  option(value="WA") WA
  option(value="WV") WV
  option(value="WI") WI
  option(value="WY") WY

mixin month-dropdown()
  option(value="01") 1 - Jan
  option(value="02") 2 - Feb
  option(value="03") 3 - Mar
  option(value="04") 4 - Apr
  option(value="05") 5 - May
  option(value="06") 6 - Jun
  option(value="07") 7 - Jul
  option(value="08") 8 - Aug
  option(value="09") 9 - Sept
  option(value="10") 10 - Oct
  option(value="11") 11 - Nov
  option(value="12") 12 - Dec

mixin year-dropdown-up()
  option(value="2016") 2016
  option(value="2017") 2017
  option(value="2018") 2018
  option(value="2019") 2019

mixin day-dropdown()
  option(value="1") 1
  option(value="2") 2
  option(value="3") 3
  option(value="4") 4
  option(value="5") 5
  option(value="6") 6
  option(value="7") 7
  option(value="8") 8
  option(value="9") 9
  option(value="10") 10
  option(value="11") 11
  option(value="12") 12
  option(value="13") 13
  option(value="14") 14
  option(value="15") 15
  option(value="16") 16
  option(value="17") 17
  option(value="18") 18
  option(value="19") 19
  option(value="20") 20
  option(value="21") 21
  option(value="22") 22
  option(value="23") 23
  option(value="24") 24
  option(value="25") 25
  option(value="26") 26
  option(value="27") 27
  option(value="28") 28
  option(value="29") 29
  option(value="30") 30
  option(value="31") 31

mixin year-dropdown-down()
  option(value="2019") 2019
  option(value="2018") 2018
  option(value="2017") 2017
  option(value="2016") 2016
  option(value="2015") 2015
  option(value="2014") 2014
  option(value="2013") 2013
  option(value="2012") 2012
  option(value="2011") 2011
  option(value="2010") 2010
  option(value="2009") 2009
  option(value="2008") 2008
  option(value="2007") 2007
  option(value="2006") 2006
  option(value="2005") 2005
  option(value="2004") 2004
  option(value="2003") 2003
  option(value="2002") 2002
  option(value="2001") 2001
  option(value="2000") 2000
  option(value="1999") 1999
  option(value="1998") 1998
  option(value="1997") 1997
  option(value="1996") 1996
  option(value="1995") 1995
  option(value="1994") 1994
  option(value="1993") 1993
  option(value="1992") 1992
  option(value="1991") 1991
  option(value="1990") 1990
  option(value="1989") 1989
  option(value="1988") 1988
  option(value="1987") 1987
  option(value="1986") 1986
  option(value="1985") 1985
  option(value="1984") 1984
  option(value="1983") 1983
  option(value="1982") 1982
  option(value="1981") 1981
  option(value="1980") 1980
  option(value="1979") 1979
  option(value="1978") 1978
  option(value="1977") 1977
  option(value="1976") 1976
  option(value="1975") 1975
  option(value="1974") 1974
  option(value="1973") 1973
  option(value="1972") 1972
  option(value="1971") 1971
  option(value="1970") 1970
  option(value="1969") 1969
  option(value="1968") 1968
  option(value="1967") 1967
  option(value="1966") 1966
  option(value="1965") 1965
  option(value="1964") 1964
  option(value="1963") 1963
  option(value="1962") 1962
  option(value="1961") 1961
  option(value="1960") 1960
  option(value="1959") 1959
  option(value="1958") 1958
  option(value="1957") 1957
  option(value="1956") 1956
  option(value="1955") 1955
  option(value="1954") 1954
  option(value="1953") 1953
  option(value="1952") 1952
  option(value="1951") 1951
  option(value="1950") 1950
  option(value="1949") 1949
  option(value="1948") 1948
  option(value="1947") 1947
  option(value="1946") 1946
  option(value="1945") 1945
  option(value="1944") 1944
  option(value="1943") 1943
  option(value="1942") 1942
  option(value="1941") 1941
  option(value="1940") 1940
  option(value="1939") 1939
  option(value="1938") 1938
  option(value="1937") 1937
  option(value="1936") 1936
  option(value="1935") 1935
  option(value="1934") 1934
  option(value="1933") 1933
  option(value="1932") 1932
  option(value="1931") 1931
  option(value="1930") 1930
  option(value="1929") 1929
  option(value="1928") 1928
  option(value="1927") 1927
  option(value="1926") 1926
  option(value="1925") 1925
  option(value="1924") 1924
  option(value="1923") 1923
  option(value="1922") 1922
  option(value="1921") 1921
  option(value="1920") 1920
  option(value="1919") 1919
  option(value="1918") 1918
  option(value="1917") 1917
  option(value="1916") 1916
  option(value="1915") 1915
  option(value="1914") 1914
  option(value="1913") 1913
  option(value="1912") 1912
  option(value="1911") 1911
  option(value="1910") 1910
  option(value="1909") 1909
  option(value="1908") 1908
  option(value="1907") 1907
  option(value="1906") 1906
  option(value="1905") 1905
  option(value="1904") 1904
  option(value="1903") 1903
  option(value="1902") 1902
  option(value="1901") 1901
  option(value="1900") 1900

jade 多个条件类

mixins.pug 
mixin myMixin(cond1=false, cond2=false)
  - var cond1Class = cond1 == true ? ' class1' : ''
  - var cond2Class = cond2 == true ? ' class' : ''
  .container(class=cond1Class + cond2Class)

jade 密码显示

密码显示

ff.js 
togglePassVisibility () {
    this.showPassField.type === 'password' ? this.showPassField.type = 'text' : this.showPassField.type = 'password';
    this.showPassBtn.classList.toggle('is-active');
  }
.pug 
div.form-group.show-pass
                        label(for='register-form-password' title='Показать пароль').show-pass__btn: +i('eye')
                        input.form-control.show-pass__field(id='register-form-password' type='password' placeholder="пароль" required)
                        div.help-block введите пароль

jade 视图块

.js 
class View {
  constructor(el) {
    this.$container = $(el);
    this.$nav = $(this.$container.children()[0]);
    this.$block = $(this.$container.children()[1]);

    if (this.$container.length) this.init();
  }

  init() {
    this.createSliders();
  }

  createSliders() {
    this.$nav.slick({
      asNavFor: this.$block,
      speed: 400,
      slidesToShow: 4,
      rows: 0,
      arrows: false,
      focusOnSelect: true
    });

    this.$block.slick({
      asNavFor: this.$nav,
      rows: 0,
      arrows: false
    });
  }
}

$('.js-view').each((i, el) => new View(el));
.pug 
+b.view.js-view
					+e.nav
						-i = 0
						while i < 3
							+e.nav-item
								+e.IMG(src=`img/content/products/product_sld-sm-1.jpg` alt='image')
							+e.nav-item
								+e.IMG(src=`img/content/products/product_sld-sm-2.jpg` alt='image')
							-i++

					+e.block
						-i = 0
						while i < 6
							+e.block-item
								+e.IMG(src=`img/content/products/product_sld-lg.jpg` alt='image')
							-i++

jade 此示例每3个产品重复一行。请参阅：https：//stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3

此示例每3个产品重复一行。请参阅：https：//stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3-or-4-cols#answer-38857761 #angular #js

Angular How to set rows to repeat every x number of items with ng-repeat.jade 
.row.row-eq-height(ng-repeat='product in productsFiltered=(products | filter:{name: filterQuery} | orderBy: sortTerm)' ng-if='$index % 3 == 0')
  .col-xs-4(ng-repeat='i in [0, 1, 2]', ng-init='product = productsFiltered[$parent.$parent.$index + i]', ng-if='$parent.$index + i < productsFiltered.length')
    .panel.b.product-list-block.mb-sm
      .panel-heading
        span.product-type-icon
        div {{product.name}}
      table.product-list-block-table.mt-lg.mb-lg
        tbody
          tr
            th Price
            th Sub Products
          tr
            td ${{product.monthly_price}}
            td {{ product.children.length || "N/A"}}

jade wow.js

script.js 
//wow animate
var wow = new WOW(
	{
		boxClass: 'wow',
		animateClass: 'animated',
		offset: 300,
		mobile: false,
		live: true,
	}
);
wow.init();
//wow animate end
index.pug 
// bower i wow --save-dev
// bower i animate.css --save-dev
// script(src="bower/wow/dist/wow.js")
// link(rel="stylesheet", href="bower/animate.css/animate.min.css")

.el.wow.fadeIn(data-wow-duration="1s" data-wow-delay=".3s")

//Отключить анимацию
.wow
  +below(768px)
    visibility: visible !important;
    animation: none !important;

jade 社交

.sass 
// *** begin socials *** //
.socials
   display: flex
   align-items: center
   a
      display: flex
      align-items: center
      margin-left: 17px
      &:hover
         svg
            fill: $color2
      svg
         fill: $color8
         transition: .3s ease-in-out
// end socials //
.pug 
+b.socials.footer__socials
	+e.SPAN Мы в соц.сетях:
	-
		socList = [
		'vk',
		'inst',
		'fb']
	for icon in socList
		+e.A(href='#!' target='_blank'): +i(`${icon}`)

jade UI：Swiper.js简单资产

Swiper.jsのシンプルな构造でインスタンスを作成

index.js 
	/**
	 * SWIPERインスタンス追加
	 */
	addSwiper() {
		this.SWIPER = new Swiper('.swiper-container', {
			slidesPerView: 'auto',
			centeredSlides: true,
			loop: true,
			// autoplay: {
			// 	delay: 5000,
			// 	disableOnInteraction: false
			// },
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			}
		});
	}
style.scss 
// スライドショー
.swiper-container { width: 100%; }
.swiper-slide { width: 1000px; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.swiper-button-next,
.swiper-button-prev { width: 54px; height:563px; top: 0; margin: 0; background: rgba(0,0,0,0.5); transition: .15s ease-out background; outline: none !important;
	@include icofont($icofont-arw-thin) { @include top-left(50%,50%); margin: -14px 0 0 -5px; color: $color-01; font-size:2.8rem; font-weight: bold;}
	&:hover { background: rgba(0,0,0,0.8); }
}
.swiper-button-next { right: 0;}
.swiper-button-prev { left: 0;
	&:before { transform: rotate(180deg); margin-left: -15px; }
}
@include sp{
	.swiper-wrapper { height:56.3vw; }
	.swiper-slide { width:100%; height: 56.3vw;
		img { width: 100%; height: 100%; object-fit: cover; }
	}
	.swiper-button-next,
	.swiper-button-prev { width: 40px; height:40px; top:28.1vw; bottom: 0; margin-top: -20px;
		// border-bottom:1px solid #ddd; 
		background: none !important; 
		box-shadow:none; outline:none;
		&:before { margin-top: -10px; font-size: 2rem; }
		// &:hover { background:#fff; }
	}
	.swiper-button-prev {  
		&:before { transform: rotate(180deg); margin-left: -10px; }
	}
}
index.pug 
.swiper-container#js-swiper-slide
	.swiper-wrapper
		.swiper-slide: img(src="images/01/slide/01.jpg",alt="")
		.swiper-slide: img(src="images/01/slide/02.jpg",alt="")
		.swiper-slide: img(src="images/01/slide/03.jpg",alt="")
	.swiper-button-prev
	.swiper-button-next

jade круговаядиаграмма - 圈子进展

script.js 
// bower i jquery-circle-progress
// script(src='bower/jquery-circle-progress/dist/circle-progress.min.js')
// doc https://github.com/kottenator/jquery-circle-progress

$('.circle').circleProgress({
  size: 120,
  startAngle: 4.75,
  thickness: 2,
  emptyFill:'#f3f3f3', //цвет задника
  fill:"#41cf1c" //цвет полоски
});
index.pug 
.circle(data-value="0.9")