jade,Code片段,代码实例,代码示例,代码片段库

jade JQUERY__Slide

JQUERY__Slide.pug

.readmore
	.readmore__wrapper.text.text_bold
		p Эктоин® - первое вещество, выработанное из экстремолитов и уже, относительно, давно используется, как протектор кожи в дерматологических и косметических средствах, а также как стабилизатор белков и клеток в медико-биологической отрасли.
		p Принцип действия Эктоина® основан на довольно сложных процессах молекулярной биологии. Если говорить в двух словах, то он стабилизирует состояние основных элементов молекулы физическим воздействием на них, при помощи способа, который получил научное название «отборное исключение».	
		.readmore__data(style="display:none")
			p 1111 Принцип действия Эктоина® основан на довольно сложных процессах молекулярной биологии. Если говорить в двух словах, то он стабилизирует состояние основных элементов молекулы физическим воздействием на них, при помощи способа, который получил научное название «отборное исключение».			
			p Принцип действия Эктоина® основан на довольно сложных процессах молекулярной биологии. Если говорить в двух словах, то он стабилизирует состояние основных элементов молекулы физическим воздействием на них, при помощи способа, который получил научное название «отборное исключение».			
	.button.button_theme_white-invers.button_readme.button-readmore-js
		.button__text Читать далее
		.button__icon.button__icon_margin_left.button__icon_show_more
script.
    $(function(){


	var button = $('.button-readmore-js');

	button.click(function() {

			var block = $(this).parent('.readmore').find('.readmore__data');
			block.toggleClass('is-active');

			$(this).find('.button__text').empty();

			if (!block.hasClass('is-active')){ 	// скрыть

				$(this).removeClass('is-active');
				$(this).find('.button__text').text('Читать далее');
				block.slideUp('slow');

			} else {	// показать
				
				$(this).addClass('is-active');
				$(this).find('.button__text').text('Скрыть');
				block.slideDown('slow');

			}
			
    	});
    
    });

jade PUG__tutorial

PUG__tutorial

miniTutorial.pug

.selectorClassDiv
  #idDiv
  p.classP
img(src="img/img.png")
script(type='text/javascript').
  var a = 10;

jade 断言＃1

JS-assert＃1

style.css

#results li.pass {
  color: green;
}

#results li.fail {
  color: red;
}

script.js

function assert(val, desc) {
  const li = document.createElement('li');
  li.className = val ? 'pass' : 'fail';
  li.appendChild(document.createTextNode(desc));
  document.getElementById('results').appendChild(li);
}

window.onload = () => {
  assert(true, '成功');
  assert(false, '失敗');
};

js-assert-1.markdown

JS-assert #1
------------


A [Pen](https://codepen.io/taquaki/pen/aYWxJG) by [Takaaki Sato](https://codepen.io/taquaki) on [CodePen](https://codepen.io).

[License](https://codepen.io/taquaki/pen/aYWxJG/license).

index.pug

ul#results

jade 简单幻灯片的结构

JS：単纯な构造のスライドショー

index3

	this.currentSlide	= 0;
	this.slideArea 	= null;
	this.slideImgs	= null;


	/*スライド操作
	--------------------------------------------------------------------*/
	/**
	 * スライド追加
	*/
	addSlideEvent(){
		document.getElementById('js-slide-next').addEventListener("click",()=>{
			this.nextSlide();
		});
		document.getElementById('js-slide-prev').addEventListener("click",()=>{
			this.prevSlide();
		});
	}

	/**
	 * スライドループ
	*/
	loopSlide(){
		clearTimeout(this.slideTimer);
		this.slideTimer = setTimeout(() => {
			this.nextSlide();
		}, 5500);
	}

	/**
	 * スライド次へ
	*/
	nextSlide(){
		var next = this.currentSlide + 1;
		if(next > this.slideImgs.length-1) next = 0;
		this.slideArea.querySelector(".blc.is-current").classList.remove("is-current");
		this.slideImgs[next].classList.add("is-current");
		this.currentSlide = next;
		this.loopSlide();
	}

	/**
	 * スライド前へ
	*/
	prevSlide(){
		var next = this.currentSlide - 1;
		if(next < 0) next = this.slideImgs.length-1;
		this.slideArea.querySelector(".blc.is-current").classList.remove("is-current");
		this.slideImgs[next].classList.add("is-current");
		this.currentSlide = next;
		this.loopSlide();
	}

index2

//スライドショー
.blc-slide  { @include wh(1400,960); @include top-left(102,73,0); border-radius: 4px;
	.blc{ @include top-left(0,0,0); opacity: 0; transition: .3s linear opacity;
		img 	{ @include fluidElm; user-select: none; pointer-events: none;}
		&.is-current { opacity: 1;}
	}
}

//前後ボタン
.btn-prev,
.btn-next { width: 100px; height: 100px; top: 50%; z-index: 22; margin-top: -50px; background:rgb(246, 221, 0); pointer-events: none; 
	&:after { content:''; @include wh(36,42); @include top-left(50%,50%); margin:-22px 0 0 -14px; background:url("/swan/images/ico-play.png") no-repeat center center; background-size: cover; }
}
.btn-prev { left:27px;
	&:after { transform: rotateY(180deg) translate(10px,0); }
}
.btn-next { right:27px;}

index

.blc-slide#js-slide
	.blc.is-current
		img(src="###.jpg", alt="")
	.blc
		img(src="###.jpg", alt="")
	.blc
		img(src="###.jpg", alt="")
	.blc
		img(src="###.jpg", alt="")
	.blc
		img(src="###.jpg", alt="")

	.btn.btn-next#js-slide-next
	.btn.btn-prev#js-slide-prev

jade 单div CSS加载器

单div CSS加载器

style.scss

$base-line-height: 24px;
$white: rgb(255,255,255);
$off-white: rgba($white, 0.2);
$spin-duration: 1s;
$pulse-duration: 750ms;

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {	
  50% { 
    background: $white;
  } 
}

html {
  height: 100%;
}
body {
  @extend html;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #333333;
}

.loading {
    border-radius: 50%;
    width: $base-line-height;
    height: $base-line-height;
    border: .25rem solid $off-white;
    border-top-color: $white;
    animation: spin $spin-duration infinite linear;
}

.loading-pulse {
  position: relative;
  width: ($base-line-height / 4);
  height: $base-line-height;
  background: $off-white;
  animation: pulse $pulse-duration infinite;
  animation-delay: ($pulse-duration / 3);
  &:before, &:after {
    content: '';
    position: absolute;
    display: block;
    height: ($base-line-height / 1.5);
    width: ($base-line-height / 4);
    background: $off-white;
    top: 50%;
    transform: translateY(-50%);
    animation: pulse $pulse-duration infinite;
  }
  &:before {
    left: -($base-line-height / 2);
  }
  &:after {
    left: ($base-line-height / 2);
    animation-delay: ($pulse-duration / 1.5);
  }
}

index.pug

.loading
.loading-pulse

jade 最小的CSS Watch

最小的CSS Watch

style.scss

@import 'https://fonts.googleapis.com/css?family=PT+Sans+Narrow';

@mixin centerV($height) {
	position: absolute;
	top: 50%;
	margin-top: calc(-0.5 * #{$height});
}
@mixin centerH($width) {
	position: absolute;
	left: 50%;
	margin-left: calc(-0.5 * #{$width});
}

$facesize: 140px; // Not including border
$strapwidth: 90px;
$hourheight: 28px;
$minheight: 42px;
$secheight: 56px;

$black: #292929;
$blacktrans: rgba(0, 0, 0, 0.6);
$gold: #CDB380;
$grey: #4a4a4a;
$red: #BF4A67;
$turq: #47C9AF;
$mint: #D9F5BE;

html, body {
	width: 100%;
	height: 100%;
}
body {
	position: relative;
	font: {
		size: 12px;
		family: 'PT Sans Narrow';
	}
	background: linear-gradient(to bottom left, $turq 0%, $mint 100%) 100% no-repeat;
}
.watch {
	width: 150px;
	height: 100%;
	@include centerH(150px);
}
.strap {
	background: $black;
	height: 100%;
	width: $strapwidth;
	border-left: 5px solid $grey;
	border-right: 5px solid $grey;
	@include centerH(100px);
}
.face {
	background: $black;
	border: 5px solid $gold;
	width: $facesize;
	height: $facesize;
	@include centerV(150px);
	box-shadow: 0 0 80px 0 $blacktrans, inset 0 0 50px 0 $blacktrans;
}
.numeral {
	background: $grey;
	height: 20px;
	width: 4px;
}
.n-12, .n-6 {
	@include centerH(4px);
}
.n-3, .n-9 {
	height: 4px;
	width: 20px;
	@include centerV(4px);
}
.n-12 {
	top: 5px;
}
.n-6 {
	bottom: 5px;
}
.n-3 {
	right: 5px;
}
.n-9 {
	left: 5px;
}
.cntrpt {
	background: $gold;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	@include centerV(10px);
	@include centerH(10px);
}
.crown {
	background: $grey;
	height: 20px;
	width: 10px;
	right: -10px;
	@include centerV(20px);
}
.hand {
	background: $grey;
	position: absolute;
	transform-origin: 50% 100%;
}
.hours {
	width: 6px;
	height: $hourheight;
	@include centerH(6px);
	top: calc(70px - #{$hourheight});
}
.mins {
	width: 4px;
	height: $minheight;
	@include centerH(4px);
	top: calc(70px - #{$minheight});
}
.secs {
	background: $red;
	width: 2px;
	height: $secheight;
	@include centerH(2px);
	top: calc(70px - #{$secheight});
}
.day {
	background: $black;
	color: $gold;
	border: 1px solid $gold;
	width: 18px;
	height: 14px;
	line-height: 14px;
	text-align: center;
	@include centerV(16px);
	right: 28px;
}
.logo {
	color: $gold;
	width: 40px;
	letter-spacing: 5px;
	height: 12px;
	line-height: 12px;
	text-align: center;
	@include centerH(40px);
	top: 36px;
}

script.babel

const hours = document.getElementById('hours'),
			mins = document.getElementById('mins'),
			secs = document.getElementById('secs'),
			day = document.getElementById('day');

let time;
function getTime() {
	time = new Date(Date.now());
	return {
		hours: convertToDeg(time.getHours(), 12),
		mins: convertToDeg(time.getMinutes(), 60),
		secs: convertToDeg(time.getSeconds(), 60),
		day: time.getDate() < 10 ? `0${time.getDate()}` : `${time.getDate()}`
	};
}
function convertToDeg(time, factor) {
	return time * (360 / factor);
}
function setClock(time) {
	hours.style.transform = `rotate(${time.hours}deg)`;
	mins.style.transform = `rotate(${time.mins}deg)`;
	secs.style.transform = `rotate(${time.secs}deg)`;
	day.innerHTML = `${time.day}`;
}

setClock(getTime());
setInterval(() => {
	setClock(getTime());
}, 1000);

minimal-css-watch.markdown

Minimal CSS Watch
-----------------
Almost pure CSS watch. JavaScript Date object used to set the real time and day.

A [Pen](https://codepen.io/harunpehlivan/pen/NyZZoX) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/NyZZoX/license).

index.pug

.watch
	.strap
	.face
		.numeral.n-12
		.numeral.n-3
		.numeral.n-6
		.numeral.n-9
		.logo SWAG
		.day#day
		.hand.hours#hours
		.hand.mins#mins
		.hand.secs#secs
		.cntrpt
	.crown

jade 反应计算器

反应计算器

style.scss

@import 'https://fonts.googleapis.com/css?family=Roboto+Mono';

:root {
	font-size: 18px;
}

@media only screen and (min-width: 768px) {
	:root { font-size: 24px }
}

$buttonSize: 4rem;
$black: #343838;
$transBlack: rgba(0, 0, 0, 0.3);
$gold: #CDB380;
$cloud: #5E6F8C;
$purp: #542437;


body{
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font:{
		family: 'Roboto Mono';
		size: $buttonSize / 4;
	}
	background: linear-gradient(to bottom right, $purp 0%, $gold 100%) 100% no-repeat;
}
button{
	width: $buttonSize;
	height: $buttonSize;
	font:{
		family: 'Roboto Mono';
		size: 16px;
	}
	background: none;
	color: $gold;
	border: none;
	cursor: pointer;
	transition: color 300ms ease-in-out;
	&:hover{
		color: $cloud;
	}
	&:focus{
		outline: none;
	}
}
.calculator {
	width: 4 * $buttonSize;
	background: $black;
	box-shadow: 0 0 $buttonSize 0 $transBlack;
}
.calc-display{
	font-size: 18px;
	padding: $buttonSize / 2.5 $buttonSize / 3;
	text-align: right;
	color: $gold;
	border-bottom: 3px solid $cloud;
	box-shadow: 0 5px 21px -5px $transBlack;
}
.calc-numbers{
	width: 3 * $buttonSize;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	float: left;
}
.calc-functions{
	float: left;
}

scripts

<script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>

script.babel

class Calculator extends React.Component{
	constructor(){
		super();
		this.state={
			displayVal: "0",
			calcVals: []
		};
	}
	_displayNum(num){
		if(this.state.displayVal.length > 19) { // Where var too long for display
			return;
		} else if(this.state.displayVal === "0" || this.state.displayVal === "Undefined!

jade mordalbox结构

SCSS：モーダルボックスの基本构造。

style.scss

// 動画のモーダル
.movie-mordal { width:100%; height:100%; display:block; position:fixed; top:0; left:0; background:black;
	visibility: hidden; opacity: 0; 
	transform: scale(.9); pointer-events: none; overflow: hidden;
	transition:opacity,visibility,transform;
	transition-duration:.8s;
	transition-timing-function: ease-out;

	&__close { padding: 20px; @include top-right(10,30,10); color: white; line-height: 1; opacity: 0.001; 
		.is-pause & { opacity: 1; transition: .3s linear opacity; pointer-events: auto; }
	  &:after { content:'✕'; font-size:70px; line-height:1; font-weight: 400; text-shadow: 0 0 10px rgba(4, 0, 0, 0.4);}
	}
	&__mask { width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:3; background:black; transition: .5s ease-out opacity .9s; pointer-events: none; }
	&__inner { width:100%; height:100%; display:block;  position:absolute; top:0; left:0; z-index:0;}
}

// モーダル表示
.is-mordal-show {
	&.movie-mordal { visibility: visible; opacity: 1; transform: none; pointer-events:auto;}
	.movie-mordal__close 	{ opacity: 1;}
	.movie-mordal__mask 	{ opacity: 0; }
}

index.pug

.movie-mordal#js-movie-mordal
  .movie-mordal__close#js-movie-mordal__close
  .movie-mordal__inner#js-movie-mordal__inner
  .movie-mordal__mask

jade 静音视频修复

.pug

+e.VIDEO(autoplay loop volume='0' onloadedmetadata='this.muted = true')
  +e.SOURCE(src='static/video/video-sample.mp4' type='video/mp4')

jade 测试

test.tag

header
  h3 {message}
  svg: use(xlink:href='#header-logo')/

  style(scoped).
    :scope
      background-color #fff
    h3
      color #ccc

  script.
    this.message = 'test';
    console.log(opts);
    this.on('mount', ()=> {

    });