javascript メニューのタブ切り替え

ギャラリーページ等に使えるタブ切り替えのコード

style.css
.box_tab {
	@extend %bw;
	@extend %cf;
	.tab {
		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			@include cV(margin-bottom,70px ,45px, 35px);
			@include cV(margin-top,0px ,0px, 40px);
			@include mq(sp) { display: none; }
			li {
				text-align: center;
				cursor: pointer;
				display: inline-block;
				width: (100%/4);
				display: flex;
				justify-content: center;
				align-items: center;
				word-break:break-all;
				@include mq(sp) {
					width: (100%/2);
					&:nth-child(-n + 2){
						border-bottom: none;
					}
					&:nth-child(2){
						border-right: 1px solid #333;
					}
				}
				border: 1px solid #333;
				margin: -1px 0 0 -1px;
				padding: 0.7em;
				&:last-child{
					border-right: 1px solid #333;
				}
				&.select {
					background: #333;
					cursor: default;
					a{
						color: #fff;
					}
				 }
				&:hover {
					transition: .5s;
					background: #333;
					cursor: pointer;
					a{
						color: #fff;
					}
				 }
			}
		}
		select {
			width: 100%;
			padding: 8px 10px;
			margin-bottom: 20px;
		}
	}
	.con_sightseeing{
		@include mq(tab) {
			width: 95%
		}
		@include mq(sp) {
			width: 100%
		}
		@extend %bw;
		@extend %cf;
		#panel {
			overflow: hidden;
			position: relative;
			li {
				position: absolute;
				overflow: hidden;
				top: 0;
				left: 0;
				width: 100%;
				visibility: hidden;
				@include cV(padding, 0 10px 0 ,0 5px 0 ,0 10px 0 );
				&.tab-content {
					//display:none;
					background: #fff;
					z-index: 5;
					opacity: 0;
					&.select {
						visibility: visible;
						position: static;
						opacity: 0.99; //webviewの残像の削除
						background: #fff;
					}
				}
				.box{
					@include cV(margin-bottom,60px, 50px ,50px);
					float: left;
					margin-right: 2%;
					box-shadow: 0 0 8px 0px $gray_h;
					padding: 10px;
					word-wrap: break-word;
					@include mq(pc) {
						width: 32%;
						&:nth-child(3n){
							margin-right: 0;
						}
					}
					@include mq(tab) {
						width: (100%/2-2);
						&:nth-child(even){
							margin-right: 0;
						}
					}
					@include mq(sp) {
						float: none;
						width: 100%;
						margin-right: 0;
					}
					.box_img{
						@include cV(margin-bottom,20px ,20px, 15px);
						position: relative;
						padding-top: 61.7%;
						overflow: hidden;
						width: 100%;
						img{
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 100%;
						}
					}
					.box_txt{
						.box_st{
							@include cV(margin-bottom,20px ,15px, 15px);
							.st{
								margin-bottom: 0.1em;
								@include fsz_r(28,26,24);
								font-weight: normal;
								line-height: 1;
							}
							.inner_st{
								display: block;
								color: #666;
								@include fsz_r(15,14,14);
								margin-bottom: 5px;
								&::before {
									font-family: "Fontawesome";
									content: "\f276";
									margin-right: 5px;
								}
							}
						}//.box_st
						.inner_txt{
							@include cV(margin-bottom,20px ,15px, 15px);
						}
					}
					.box_btn{
						@include mq(pc) {
							display: -webkit-flex;
							display: flex;
							-webkit-justify-content: center;
							justify-content: center;
						}
						.btn{
							display: inline-block;
							width: 48%;
							&:first-child{
								margin-right: 0.3em;
							}
							@include mq(sp) {
								width: 100%;
								margin-right: 0;
							}
							@include mq(tab) {
								margin-bottom: 10px;
							}
							&.sp_btn{
								@include mq(sp) {
									margin-bottom: 10px;
								}
							}
							a {
								padding: 0.8em 0.1em;
								@include fsz(15);
							}//a
						}//.btn
					}
				}
			}
		}
		.box_pager {
			@extend %bw;
			@extend %cf;
			text-align: center;
			@include cV(margin-top,50px ,40px, 20px);
			ul {
				@include inline-block;
				li {
					@include inline-block;
					&.prev {
						i {
							margin-right: .3em;
						}
					}
					&.next {
						i {
							margin-left: .3em;
						}
					}
					a {
						display: block;
						padding: .5em .6em;
						&:hover,&.active {
							background: $gray_d;
							color: #fff;
							text-decoration: none;
						}
					}
				}
			}
		}
	}
}
code.html
<div class="box_tab">
	<!-- <div id="tab"> -->
	<div class="tab">
		<ul>
			<li class="select"><a href="#77777">全て</a></li>
			<li><a href="#77777">タブネーム1</a></li>
			<li><a href="#77777">タブネーム2</a></li>
			<li><a href="#77777">タブネーム3</a></li>
		</ul>
		<form name="sort_form" class="view_sp">
			<select name="sort" onchange="dropsort()">
				<option value="#77777">全て</option>
				<option value="#77777">タブネーム1</option>
				<option value="#77777">タブネーム2</option>
				<option value="#77777">タブネーム3</option>
			</select>
		</form>
	</div><!-- /#obj_tab -->

	<div class="con_sightseeing">
		<ul id="panel">
			<li id="panel01" class="tab-content select">
				<div class="box">
					<div class="box_img">
						<img src="<?php echo LOCATION_MODULE;?>images/guide/img_guide01.jpg" alt="nophoto">
					</div>
					<div class="box_txt">
						<div class="box_st">
							<span class="inner_st">ホテルから徒歩で約10分</span>
							<h4 class="st">道頓堀</h4>
						</div>
						<p class="inner_txt">道頓堀といえばグリコの看板などによって象徴される道頓堀は、大阪・ミナミの代表的な繁華街です。飲食店もさまざまなジャンルが軒を連ねます。</p>
					</div>
					<div class="box_btn">
						<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(2);">地図を見る<i class="fa fa-angle-right"></i></a></p>
						<p class="btn btn_gold view_sp sp_btn"><a href="https://goo.gl/maps/9TDC5CLqsKF2" target="_brank">地図を見る<i class="fa fa-angle-right"></i></a></p>
					</div>
				</div><!-- box -->
			</li><!-- /#panel01 -->

			<li id="panel02" class="tab-content hide">
				<div class="box">
					<div class="box_img">
						<img src="<?php echo LOCATION_MODULE;?>images/guide/img_guide01.jpg" alt="nophoto">
					</div>
					<div class="box_txt">
						<div class="box_st">
							<span class="inner_st">ホテルから徒歩で約10分</span>
							<h4 class="st">道頓堀</h4>
						</div>
						<p class="inner_txt">道頓堀といえばグリコの看板などによって象徴される道頓堀は、大阪・ミナミの代表的な繁華街です。飲食店もさまざまなジャンルが軒を連ねます。</p>
					</div>
					<div class="box_btn">
						<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(2);">地図を見る<i class="fa fa-angle-right"></i></a></p>
						<p class="btn btn_gold view_sp sp_btn"><a href="https://goo.gl/maps/9TDC5CLqsKF2" target="_brank">地図を見る<i class="fa fa-angle-right"></i></a></p>
					</div>
				</div><!-- box -->
			</li><!-- /#panel02 -->

			<li id="panel03" class="tab-content hide">
				<div class="box">
					<div class="box_img">
						<img src="<?php echo LOCATION_MODULE;?>images/guide/img_guide01.jpg" alt="nophoto">
					</div>
					<div class="box_txt">
						<div class="box_st">
							<span class="inner_st">ホテルから徒歩で約10分</span>
							<h4 class="st">道頓堀</h4>
						</div>
						<p class="inner_txt">道頓堀といえばグリコの看板などによって象徴される道頓堀は、大阪・ミナミの代表的な繁華街です。飲食店もさまざまなジャンルが軒を連ねます。</p>
					</div>
					<div class="box_btn">
						<p class="btn btn_gold view_pc-tab"><a href="#gmap_g" onclick="maps.myclick(2);">地図を見る<i class="fa fa-angle-right"></i></a></p>
						<p class="btn btn_gold view_sp sp_btn"><a href="https://goo.gl/maps/9TDC5CLqsKF2" target="_brank">地図を見る<i class="fa fa-angle-right"></i></a></p>
					</div>
				</div><!-- box -->
			</li><!-- /#panel04 -->

		</ul><!-- /#panel -->
		<div class="box_pager">
			<ul>
				<li class="prev"><a href="#77777"><i class="fa  fa-angle-left"></i>BACK</a></li>
				<li class="extend">…</li>
				<li><a href="#77777">1</a></li>
				<li><a class="active" href="#">2</a></li>
				<li><a href="#77777">3</a></li>
				<li class="extend">…</li>
				<li class="next"><a href="#77777">NEXT<i class="fa fa-angle-right"></i></a></li>
			</ul>
		</div><!-- /.con_pager -->
	</div><!-- con_sightseeing -->
</div><!-- /.box_tab -->
tab.js
	$(function(){
		//tab menu
		var $tabMenu = $('.tab ').find('li');
		var $match = $('.con_sightseeing ul li');

		$w.on({
			//load
			'load' : function(){
				$(document).on('click', '.tab ul li', function(){
					var index = $('.tab ul li').index(this);
					$('.tab ul li').removeClass('select');
					$(this).addClass('select');
					$('.tab-content').removeClass('select').eq(index).addClass('select');
				});
			},
			//scroll
			'scroll' : function(){

			}
		}).superResize({
			//resize
			resizeAfter : function(){
				//tab menu
				matchHeight($tabMenu,(abi.pc) ? 4 : (abi.tab) ? 4 : 2,768);

				$.each($match, function(i){
					matchHeight($match.eq(i).find('.box'),(abi.pc) ? 3 : (abi.tab) ? 2 : 1,768);
					matchHeight($match.eq(i).find('.box .box_txt .box_st'),(abi.pc) ? 3 : (abi.tab) ? 2 : 1,768);
					matchHeight($match.eq(i).find('.box .box_txt .inner_txt'),(abi.pc) ? 3 : (abi.tab) ? 2 : 1,768);
				});
			}
		}).firstLoad({
			//firstLoad
			pc_tab : function(){

			},
			sp : function(){

			}
		});
	});
	function dropsort() {
		var browser = document.sort_form.sort.value;
		location.href = browser
	}

javascript sp스킨,PC상품상세페이지에리뷰수작업

비슷한사례<br/> - 모델로https://github.com/crema/crema-me/commit/51ff7428b62520348ebc489b19d7cd3b704a72be <br/> - 씨드비https://github.com/crema/crema-me/commit/d077403567df26ae5dc3556a44d5920347d93764

product.js
// 70번째 라인 부근에 아래 코드 삽입
var crema_product_no = $('#crema_product_num').val();

// 바로 아래의 4줄 주석처리 후 9~10번 라인(2줄) 삽입
//if( $.sp_isNumeric(sp_review) ){
//	if( $.sp_getNum(sp_review) > 0 ){ $('.sp-detail-navigation > ul > li[data-target="#prdReview"]').append('<i>'+ $.sp_getNum(sp_review) +'</i>'); }
//	$('#prdReview .sp-detail-navigation > ul > li[data-target="#prdReview"]').addClass('active');
//}
$('.sp-detail-navigation > ul > li[data-target="#prdReview"]').append('<i class="crema-product-reviews-count" data-product-code="' + crema_product_no + '" data-hide-if-zero="1"></i>');
$('#prdReview .sp-detail-navigation > ul > li[data-target="#prdReview"]').addClass('active');
detail.html
<!--상품트릭-->
<div id="sp-detail-count" class="sp-product-item sp-product-item-detail">
  <!-- 바로 아래의 코드를 #sp-detail-count 안쪽에 삽입하시면 됩니다. -->
  <input id="crema_product_num" value="{$product_no}" />
</div>
detail_reviews_count.js
// product/detail.html 과 같은 위치에 detail_reviews_count.js 파일을 생성하여 아래 소스 복붙

// 리뷰 수와 상품 평점을 업데이트하는 함수
function UpdateCount() {
  if (typeof(crema) === "object") {
    c_c = new crema.ProductReviewsCountWidget;
    c_c.attach();
    c_s.attach();
  }
  console.log("%c[CREMA]%c REVIEWS COUNT WAS UPDATED.", "font-weight: bold; color: black;", "color: green");
}

window.cremaOnLoad = function() {
  setTimeout(function() {
    UpdateReviewsCount();
  }, 500);
};

javascript 谷歌地图

标准Google地图脚本

maps.js
locations = [
  ['Location', 51.82606620000001, 4.413209400000028],
  ['Location', 51.82606620000001, 4.413209400000028]
];

function initMap(){
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 17,
		center: new google.maps.LatLng(locations[0][1], locations[0][2] )
	});

	var bounds = new google.maps.LatLngBounds();
	var infowindow = new google.maps.InfoWindow();
	var marker, i;

	for (i = 0; i < locations.length; i++) {
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			map: map
		});

		//extend the bounds to include each marker's position
		bounds.extend(marker.position);

		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
				infowindow.setContent(locations[i][0]);
				infowindow.open(map, marker);
			}
		})(marker, i));
	}

	//now fit the map to the newly inclusive bounds
	map.fitBounds(bounds);
	
}
google.maps.event.addDomListener(window, 'load', initMap);

javascript Gulp任务解决shopify中导入sass文件的问题

gulp-task-import-scss.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const sassimport = require('gulp-cssimport');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

gulp.task('styles', function(){
    return gulp.src([
        '!./{sass,scss}/**/_*.{sass,scss,sass.liquid,scss.liquid}',
        '!./{sass,scss}/_**/*.*',
        './{sass,scss}/**/*.{sass,scss,sass.liquid,scss.liquid}'
    ])
    .pipe(postcss([
        autoprefixer(["> 1%", "last 2 versions", "Firefox ESR", "android 4"])
    ]))
    .pipe(sassimport())
    .pipe(gulp.dest('./assets'));
});

javascript 转换数字javascript修剪不是数字

main.js
 Number($("#Quantity").val().replace(/[^0-9]+/g, ""));

javascript 尺寸

https://ramdajs.com/repl/#?const%20%7B%20log%2C%20clear%20%7D%20%3D%20console%3B%0Aclear%28%29%3B%0A%0A%2F% 2F%20size%20%3A%3A%20%28Array%7CObject%7CString%7CFunction%29%20-%3E%20Number%0Aconst%20size%20%3D%20cond%28%5B%0A%20%20%5Bhas %28%27length%27%29%2C%20length%5D%2C%0A%20%20%5bis中%28Object%29%2C%20compose%28length%2C%20keys%29%5D%2C%0A%20%20 %5BT%2C%20always%28NaN%29%5D%0A%5D%29%3B%0A%0Aconst%20案件%20%3D%20%5B%0A%20%20%5B1%2C%202%2C%204 %5D%2C%0A%20%20%7B%20A%3A%20%27A%27%20%7D%2C%0A%20%20%27skdjf%27%2C%0A%20%20%28A%2C %20b的%29%20%3D%3E%20%60%24%7BA%7D%2C%20%24%7BB%7D%60%2C%0A%5D%3B%0A%0Amap%28X%20%3D %3E%20compose%28%0A%20%20apply%28log%29%2C%0A%20%20concat%28%5Btype%28X%29%5D%29%2C%0A%20%20of%2C%0A%20 %20size%2C%0A%29%28X%29%2C%20案件%29%3B%0A%0Alog%28%27%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D %3D%3D%3D%3D%3D%3D%3D%27%29%0A%0Amap%28converge%28log%2C%20%5Btype%2C%20size%5D%29%2C%20案件%29%3B

size.js
const { log, clear } = console;
clear();

// size :: (Array|Object|String|Function) -> Number
const size = cond([
  [has('length'), length],
  [is(Object), compose(length, keys)],
  [T, always(NaN)]
]);

const cases = [
  [1, 2, 4],
  { a: 'a' },
  'skdjf',
  (a, b) => `${a}, ${b}`,
];

map(x => compose(
  apply(log),
  concat([type(x)]),
  of,
  size,
)(x), cases);

log('==================')

map(converge(log, [type, size]), cases);

javascript React.js

创建actionTypes <br/>创建通用的接口请求的动作<br/>处理表单

form.js
onChange = ({ target }) => {
  this.setState({
    data: {
      ...this.state.data,
      [target.name]: target.type === 'checkbox' ? target.checked : target.value,
    }
  })
}
createActions.js
export function createActions(types) {
  return {
    request(payload) {
      return {
        type: types[0],
        payload,
      };
    },
    success(payload) {
      return {
        type: types[1],
        payload,
      };
    },
    failure(error) {
      return {
        type: types[2],
        error: error || 'Something bad happened',
      };
    },
  };
}
createConstants.js
//covert array to object with the same key and value
export function createConstants(...constants) {
  return constants.reduce((acc, constant) => {
    return {
      ...acc,
      [constant]: constant,
    };
  }, {});
}

javascript Card1.js

Card1.js
import React, {Component} from 'react';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';

const c1 = {maxWidth: 300, margin: 10}


export default class Card1 extends Component {
  constructor() {
    super();
    this.state = {
      name: 'BitsTV',
      shadow: 1,
      raised1: false,
      raised2: false,
    };
  }

  onMouseOver = () => {
    console.log('onMouseOver')
    this.setState({ raised1: true })
  };
  onMouseOut = () => {
    console.log('onMouseOut')
    this.setState({ raised1: false })
  };

  render() {
    return (
      <div>
      <Card style={c1}
      onMouseOver={this.onMouseOver}
   onMouseOut={this.onMouseOut}
      raised={this.state.raised1}
      
      >
        <CardMedia
          style={{height: 0, paddingTop: '56.25%'}}
          image="https://cdn.movieweb.com/img.teasers.posters/FIvHJ0sRccQIzv_381_a/Black-Panther.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="headline" component="h2">
            Black Panther
          </Typography>
          <Typography component="p">
            Black Panther is a 2018 American superhero film based on the Marvel Comics character of the same name.
          </Typography>
        </CardContent>
        <CardActions>
          <IconButton aria-label="Add to favorites"><FavoriteIcon /></IconButton>
          <IconButton aria-label="Share"><ShareIcon /></IconButton>
          <Button size="small" color="primary">Share</Button>
          <Button size="small" color="primary">More</Button>


        </CardActions>
      </Card>



      <Card style={c1}
      >
        <CardMedia
          style={{height: 0, paddingTop: '56.25%'}}
          image="https://cdn.movieweb.com/img.teasers.posters/FIvHJ0sRccQIzv_381_a/Black-Panther.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="headline" component="h2">
            Black Panther
          </Typography>
          <Typography component="p">
            Black Panther is a 2018 American superhero film based on the Marvel Comics character of the same name.
          </Typography>
        </CardContent>
        <CardActions>
          <IconButton aria-label="Add to favorites"><FavoriteIcon /></IconButton>
          <IconButton aria-label="Share"><ShareIcon /></IconButton>
          <Button size="small" color="primary">Share</Button>
          <Button size="small" color="primary">More</Button>


        </CardActions>
      </Card>

    </div>
    );
  }
}

javascript jquery fn kill从h2元素中删除字符串

需要从Green Span Profiles产品页面上的h2元素的开头删除“Products”

fn-kill.js
jQuery.fn.kill = function(str, className) {
	var regex = new RegExp(str, "gi");

	return this.each(function() {
		this.innerHTML = this.innerHTML.replace(regex, function(matched) {
			return '<span class="' + className + '">' + matched + "</span>";
		});
	});
};

jQuery("h2").kill("Products ", "kill");

javascript 短语drole

generateur de phrase.js
let sujet = ["nicolas-sarkozy","ma femme","francois-hollande","mon frere","mon cousin"];
let verbe = ["attaque","sauve","tue","mange","suce"];
let complement = ["un chien","un chat","une sucette"];

function aleat(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
    
}

console.log(aleat(sujet) + " "+ aleat(verbe) + " " + aleat(complement));