1

30 日間の「ポップアップ」イベントでは、ハンドルバーと jquery を使用して、json ファイルから毎日「データ」(メディア、テキストなど) をロードしています。これまでのところ期待どおりに動作します:

        //template

<script id="calendarT" type="x-handlebars-template">

<ol id="calendar"class="cf">{{#each list}}<li class="day" >{{this}}</li>{{/each}}</ol>      
<div id="progress"><div id="bar"> </div></div>  
</script>

//data + compile

var allDays  = {"list":["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"]};   
var calT = Handlebars.compile($("#calendarT").html());
$("#calendarView").html(calT(allDays)); 


    //using moment.js we highlight today etc... and update bar's width


var isnow = moment().date();
$("#calendar li:eq("+isnow+")").addClass("on");    
$("#calendar li:gt("+isnow+")").addClass("future");   
$("#calendar li:lt("+isnow+")").addClass("past");        
if (isnow<7) {
 $('#bar').css('width', "15%");}
else if (isnow>=7&isnow<=14) {
$('#bar').css('width', "20%");} 
else  (isnow>=14&isnow<=24) {
$('#bar').css('width', "60%");}
//you get the idea, this should be improved, something like $('#bar').css('width', isnow+"%") ??? 
}); 

        //load day on click
$ui.on('click', '.past', function(event) { var today = $(this).text();  
$.getJSON('days/'+today+'.json', function(data) {                     
var eachdayT = Handlebars.compile($("#eachdayT").html());
$("#dayView").html(eachdayT(data)).toggle();          
 });

次にやりたいことは、ある種の「URL ルーティング」(または「状態」と呼ばれますか?) を追加して、ユーザーがブラウザで .com/popupevent/#22 と入力すると、その日のイベントを表示/ロードできるようにすることです。コンテンツ。また、いいね/リツイートボタンの推測にも役立ちます...

これまでのところ、firefox/safari で動作しているようですが、もっと良い方法はありますか? ハッシュ .com/popupevent/22 を取り除くことは可能ですか? 

 if ( window.location.hash==="") {
    // do nothing
    }else{              
    var hash = window.location.hash;
    alert("haz hash and is "+hash+"") ; 
// load day
    }

グラシアス。

スクリーンショット caniuse.com

4

1 に答える 1

0

HTML5 History APIを使用できます。また、古いブラウザーのサポートを提供し、不整合を修正する優れたプラグインもあります。https://github.com/browserstate/history.js

単一の Web アプリケーションを開発している場合は、Routing API を持ち、History API をサポートする Backboneプラグインを使用することをお勧めします。

于 2013-04-21T11:27:11.790 に答える