- magnificPopupで動的にDOMを生成し、そのDOMに対して更にmagnificPopupでポップアップを出したい
- 新たに開いたポップアップを閉じたら、元々開いていたポップアップを再び表示させたい
- $.magnificPopup.open()でポップアップを表示している場合は、callbackにはinstanceからアクセスする
- 最初のポップアップでDOMを生成しているため、.on()でliveイベントを設定
- イベントの重複登録を防ぐため、.onの前に.offを行う
var fnc = { | |
// 電話番号機能(a:tel)をスマホの場合のみ有効化する | |
usableTel: function() { | |
/** | |
* PC, スマホでタグ自体を書き換える | |
* $.each()内での使用を想定 | |
*/ | |
var replaceFnc = function(index, elem) { | |
var tag = elem.tagName, | |
$self = $(elem), |
var breakPoint = 767; | |
/* 汎用的な関数をまとめて定義 */ | |
var utility = { | |
/** | |
* ウィンドウがスマホサイズ(ブレークポイントより小さい)かどうか | |
* @return {boolean} [規定した閾値以下であればtrue] | |
*/ | |
isSp: function(){ | |
// IE8以下はfalseを返す | |
if (!window.innerWidth){ |
<a href="#" data-slide-trigger="A" data-slide-toggle="true">Aをクリックすると...</a> | |
<div class="js-slide-target" data-slide-target="A">Aが開きます!</div> | |
<a href="#" data-slide-trigger="B" data-slide-toggle="false">Bをクリックすると...</a> | |
<div class="js-slide-target" data-slide-target="B">Bが開きます!クリックしたものはremoveされるぞ</div> | |
<a href="#" data-slide-trigger="C" data-slide-toggle="true">Cをクリックすると...</a> | |
<div class="js-slide-target" data-slide-target="C">Cが開きます!</div> |
/* スムーズスクロールのイベント設定 */ | |
var addSmoothScrollEvent = function() { | |
var clickEventHandler = function() { | |
var href = $(this).attr('href'); | |
// #headerが指定されていればトップと見なす | |
var target = (href === '#' + $header.attr('id')) ? 'html' : href; | |
$(target).velocity('scroll', {duration: 500, easing: 'ease-in'}); | |
return false; | |
}; | |
$('a[href^="#"]').on('click.smooth', clickEventHandler); |
<?xml version="1.0" encoding="UTF-8"?> | |
<!DOCTYPE en-export SYSTEM "http://xml.evernote.com/pub/evernote-export2.dtd"> | |
<en-export> | |
<note><title>ノート作成用 デザインテンプレート</title><content><![CDATA[<?xml version="1.0" encoding="UTF-8"?> | |
<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd"> | |
<en-note> | |
<div><br clear="none" /></div> | |
.js
がついている必要がある