ajax_popup_hash
last update:
2017/03/12
Search :
: 0 results
example 1
// data.json { "A-1": { "data_1": "A-1_data_1", "data_2": "A-1_data_2", "data_3": "A-1_data_3", "data_4": "A-1_data_4", "data_5": "A-1_data_5" }, "A-2": { "data_1": "A-2_data_1", "data_2": "A-2_data_2", "data_3": "A-2_data_3", "data_4": "A-2_data_4", "data_5": "A-2_data_5" }, "A-3": { "data_1": "A-3_data_1", "data_2": "A-3_data_2", "data_3": "A-3_data_3", "data_4": "A-3_data_4", "data_5": "A-3_data_5" } } code_popup // app <!doctype html> <title>title</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> jQuery(function($){ var $data = { id: $(".data_id"), d1: $(".data_1"), d2: $(".data_2"), d3: $(".data_3"), d4: $(".data_4"), d5: $(".data_5") } var $vL = $(".viewLayer"); // event click close $(".close").on("click", function () { $vL.fadeOut(100); clearHash(); return false; }); // event click open $(".open a").on("click", function (e) { var id = e.srcElement.dataset.id; getData(id, jsonData); addHash(id); return false; }); // get json var jsonData; $.ajax({ type: 'GET', url: 'data.json', dataType: 'json', // cache: false, // キャッシュしない。バージョン(2?)によって効かない場合があるので注意。 success: function (json) { jsonData = json; (window.location.hash) ? getHash() : null; }, error: function () { alert('Transmition error. Please try again.'); } }); // get data function getData(id, jsonData){ $data.id.html(id); $data.d1.html(jsonData[id].data_1); $data.d2.html(jsonData[id].data_2); $data.d3.html(jsonData[id].data_3); $data.d4.html(jsonData[id].data_4); $data.d5.html(jsonData[id].data_5); $vL.fadeIn(100); } // add hash function addHash(id){ window.location.hash = '#' + id; } // clear hash function clearHash(){ try { var splitResult = window.location.href.split("#"); history.replaceState(null, null, splitResult[0]); } catch(e) { window.location.hash = ""; } } // get hash onload function getHash() { var id = window.location.hash.replace(/#/,''); if(/^A-[1-3]$/.test(id)) { getData(id, jsonData); } }; }); </script> <style> html, body {margin: 0; padding: 0; width: 100%; height: 100%; position: relative;} div {box-sizing: border-box;} dt {color: #999;} .open {margin: 0; padding: 0; float: right;} .open li {list-style: none;} .open a {display: block; width: 60px; height: 60px; border: #999 1px dotted;} .viewLayer {display: none; margin: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0;} .viewLayerInner {position: relative; width: 100%; height: 100%; padding: 30px;} .overlay {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: 0.5; box-sizing: border-box;} .dataBox {max-width: 700px; min-height: 380px; position: relative; margin: 0 auto; padding: 30px; background: #fff; box-sizing: border-box;} .dataBox p {position: absolute; top: 0; right: 20px;} </style> <ul class="open"> <li><a href="#" data-id="A-1">A-1</a></li> <li><a href="#" data-id="A-2">A-2</a></li> <li><a href="#" data-id="A-3">A-3</a></li> </ul> <div class="viewLayer"> <div class="viewLayerInner"> <div class="overlay"> </div> <div class="dataBox"> <dl> <dt>data_id: </dt><dd class="data_id"></dd> <dt>data_1: </dt><dd class="data_1"></dd> <dt>data_2: </dt><dd class="data_2"></dd> <dt>data_3: </dt><dd class="data_3"></dd> <dt>data_4: </dt><dd class="data_4"></dd> <dt>data_5: </dt><dd class="data_5"></dd> </dl> <p><a href="#" class="close">close</a><p> </div> </div> </div> code_popup
example 2
// data.json { "A-1": { "phot": "A-1.png", "name": { "ja": "名前1名前1名前1", "en": "Name1Name1Name1" }, "titl": { "ja": "タイトル1タイトル1タイトル1タイトル1タイトル1タイトル1タイトル1タイトル1タイトル1", "en": "Title1Title1Title1Title1Title1Title1Title1Title1Title1Title1Title1Title1Title1Title1" }, "prof": { "ja": "プロフィール1プロフィール1プロフィール1<br>プロフィール1プロフィール1プロフィール1", "en": "profile1profile1profile1profile1profile1profile1profile1profile1profile1profile1" }, "desc": { "ja": "詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1詳細1", "en": "description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1description1" }, "prev": "", "next": "A-2", "hall": "HALL A", "time": "13:30 - 14:10", "movi": "*****************************************", "slid": "*****************************************" }, "A-2": { "phot": "A-2.png", "name": { "ja": "名前2名前2名前2", "en": "Name2Name2Name2" }, "titl": { "ja": "タイトル2タイトル2タイトル2タイトル2タイトル2タイトル2タイトル2タイトル2タイトル2", "en": "Title2Title2Title2Title2Title2Title2Title2Title2Title2Title2Title2Title2Title2Title2" }, "prof": { "ja": "プロフィール2プロフィール2プロフィール2<br>プロフィール2プロフィール2プロフィール2", "en": "profile2profile2profile2profile2profile2profile2profile2profile2profile2profile2" }, "desc": { "ja": "詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2", "en": "description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2" }, "prev": "A-1", "next": "A-3", "hall": "HALL A", "time": "14:30 - 15:10", "movi": "*****************************************", "slid": "*****************************************" }, "A-3": { "phot": "A-3.png", "name": { "ja": "名前3名前3名前3", "en": "Name3Name3Name3" }, "titl": { "ja": "タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3", "en": "Title3Title3Title3Title3Title3Title3Title3Title3Title3Title3Title3Title3Title3Title3" }, "prof": { "ja": "プロフィール3プロフィール3プロフィール3<br>プロフィール3プロフィール3プロフィール3", "en": "profile3profile3profile3profile3profile3profile3profile3profile3profile3profile3" }, "desc": { "ja": "詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3詳細3", "en": "description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3description3" }, "prev": "A-2", "next": "B-1", "hall": "HALL A", "time": "14:30 - 15:10", "movi": "*****************************************", "slid": "*****************************************" }, "B-1": { "phot": "B-1.png", "name": { "ja": "名前B1名前B1名前B1", "en": "NameB1NameB1NameB1" }, "titl": { "ja": "タイトルB1タイトルB1タイトルB1タイトルB1タイトルB1タイトルB1タイトルB1タイトルB1タイトルB1", "en": "TitleB1TitleB1TitleB1TitleB1TitleB1TitleB1TitleB1TitleB1TitleB1TitleB1TitleB1TitleB1TitleB1TitleB1" }, "prof": { "ja": "プロフィールB1プロフィールB1プロフィールB1<br>プロフィールB1プロフィールB1プロフィールB1", "en": "profileB1profileB1profileB1profileB1profileB1profileB1profileB1profileB1profileB1profileB1" }, "desc": { "ja": "詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1詳細B1", "en": "descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1descriptionB1" }, "prev": "A-3", "next": "B-2", "hall": "HALL B", "time": "11:30 - 12:10", "movi": "*****************************************", "slid": "*****************************************" }, "B-2": { "phot": "B-2.png", "name": { "ja": "名前B2名前B2名前B2", "en": "NameB2NameB2NameB2" }, "titl": { "ja": "タイトルB2タイトルB2タイトルB2タイトルB2タイトルB2タイトルB2タイトルB2タイトルB2タイトルB2", "en": "TitleB2TitleB2TitleB2TitleB2TitleB2TitleB2TitleB2TitleB2TitleB2TitleB2TitleB2TitleB2TitleB2TitleB2" }, "prof": { "ja": "プロフィールB2プロフィールB2プロフィールB2<br>プロフィールB2プロフィールB2プロフィールB2", "en": "profileB2profileB2profileB2profileB2profileB2profileB2profileB2profileB2profileB2profileB2" }, "desc": { "ja": "詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2詳細B2", "en": "descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2descriptionB2" }, "prev": "B-1", "next": "", "hall": "HALL B", "time": "15:30 - 16:10", "movi": "*****************************************", "slid": "*****************************************" } } code_popup // app <!doctype html> <html lang="ja"> <title>title</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> jQuery(function($){ var $data = { id: $(".id"), name: $(".name"), titl: $(".titl"), prof: $(".prof"), desc: $(".desc"), prev: $(".prev a"), next: $(".next a"), phot: $(".phot img"), hall: $(".hall"), time: $(".time"), movi: $(".movi"), slid: $(".slid") } var $vL = $(".viewLayer"); // get lang var lang = $("html").attr("lang"); // get json var jsonData; $.ajax({ type: 'GET', url: 'data.json', dataType: 'json', // cache: false, // キャッシュしない。バージョン(2?)によって効かない場合があるので注意。 success: function (json) { jsonData = json; (window.location.hash) ? getHash() : null; }, error: function () { alert('Transmition error. Please try again.'); } }); // event click open or nav $(".open a, .nav a").on("click", function (e) { var id = e.srcElement.dataset.id; getData(id, jsonData); addHash(id); return false; }); // event click close $(".close a").on("click", function () { $vL.fadeOut(100); clearHash(); return false; }); // get data function getData(id, jsonData){ $data.id.html(id); $data.name.html(jsonData[id].name[lang])); $data.titl.html(jsonData[id].titl[lang])); $data.prof.html(jsonData[id].prof[lang])); $data.desc.html(jsonData[id].desc[lang])); $data.prev.attr("data-id", jsonData[id].prev); $data.next.attr("data-id", jsonData[id].next); $data.phot.attr("src", jsonData[id].phot); $data.hall.html(jsonData[id].hall); $data.time.html(jsonData[id].time); $data.movi.html(jsonData[id].movi); $data.slid.html(jsonData[id].slid); (jsonData[id].prev === "") ? $data.prev.hide() : $data.prev.show(); (jsonData[id].next === "") ? $data.next.hide() : $data.next.show(); $vL.fadeIn(100); } // add hash function addHash(id){ window.location.hash = '#' + id; } // clear hash function clearHash() { try { var splitResult = window.location.href.split("#"); history.replaceState(null, null, splitResult[0]); } catch(e) { window.location.hash = ""; } } // get hash onload function getHash() { var id = window.location.hash.replace(/#/,''); if(/^A-[1-3]$/.test(id) || /^B-[1-2]$/.test(id)) { getData(id, jsonData); } }; }); </script> <style> html, body {margin: 0; padding: 0; width: 100%; height: 100%; position: relative;} div {box-sizing: border-box;} .open {margin: 0; padding: 0; float: right;} .open li {list-style: none;} .open a {display: block; width: 60px; height: 60px; border: #999 1px dotted;} .viewLayer {display: none; margin: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0;} .viewLayerInner {position: relative; padding: 30px; width: 100%; height: 100%; box-sizing: border-box;} .overlay {width: 100%; height: 100%; min-height: 1200px; position: absolute; top: 0; left: 0; background: #000; opacity: 0.5; box-sizing: border-box;} .dataBox {width: auto; max-width: 700px; min-height: 700px; position: relative; margin: 0 auto; padding: 30px; background: #fff; word-break: break-word;} .close {position: absolute; top: 0; right: 20px;} .phot img {width: 100px; height: 100px;} .navBox {position: relative; height: 120px; margin-top: 24px; text-align: center;} .navBox .prev {float: left; position: absolute; top: 20px; left: 0;} .navBox .next {float: left; position: absolute; top: 20px; right: 0;} </style> <ul class="open"> <li><a href="#" data-id="A-1">A-1</a></li> <li><a href="#" data-id="A-2">A-2</a></li> <li><a href="#" data-id="A-3">A-3</a></li> <li><a href="#" data-id="B-1">B-1</a></li> <li><a href="#" data-id="B-2">B-2</a></li> </ul> <div class="viewLayer"> <div class="viewLayerInner"> <div class="overlay"> </div> <div class="dataBox"> <div class="navBox"> <p class="phot"><img src="" alt></p> <p class="nav prev"><a href="#" data-id="">prev</a></p> <p class="nav next"><a href="#" data-id="">next</a></p> </div> <p class="name"></p> <p class="id"></p> <p class="titl"></p> <p class="prof"></p> <p class="hall"></p> <p class="time"></p> <p class="desc"></p> <p class="movi"></p> <p class="slid"></p> </div> <p class="close"><a href="#">close</a><p> </div> </div> </div> </html> code_popup
sample (include nav, ja)
sample (include nav, en)
sample (error)