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 回答