Demo entry 6354105

js

   

Submitted by anonymous on Apr 05, 2017 at 10:59
Language: JavaScript. Code size: 4.2 kB.

(function($){
	var ajax;
	var currentState;
	$.fn.historyLoad = function(target,navlist){
		var obj = this;
		$(document).on('click','.navlistitem',function (){
            $(this).addClass("mdui-list-item-active").siblings().removeClass("mdui-list-item-active");
			var catename = $(this).attr('name');
			var url = '/cate/' + catename;
			if(ajax == null){
				currentState = {
					url: document.location.href,
					title: '',
					html: $(target).html(),
					navlist: $(navlist).html()
				};
			}else{
				ajax.abort();
			}
			ajax = $.ajax({
                url : '/api/site/' + catename,
                method: 'GET',
                success:function (data) {
                    var sitNode = $('.mdui-container');
                    var navNode = $('.navlist');
                    sitNode.html("");
                    var strhtml = '';
                    var list = data.userSiteList;
                    for(var usersite of list) {
                        strhtml += `<div class="mdui-col-sm-6 mdui-col-md-3">
                <div class="mdui-card">

            <div class="mdui-card-media">
                <img src="http://iph.href.lu/250x200"/>
                <div class="mdui-card-media-covered mdui-card-media-covered-top mdui-card-media-covered-transparent">
                    <li class="mdui-list-item">
                        <div class="mdui-list-item-avatar"><img src="https://api.byi.pw/favicon/?url=${usersite.siteurl}"/></div>
                        <div class="mdui-list-item-content">${usersite.comment}</div>
                        <div class="mdui-card-menu">
                <button class="mdui-btn mdui-btn-icon" id="${usersite.id}open" mdui-menu="{target:'#${usersite.id}menu',position:'bottom',align:'right'}"><i class="mdui-icon material-icons">more_vert</i></button>

                <ul class="mdui-menu" id="${usersite.id}menu">
                    <li class="mdui-menu-item edit" dataid="${usersite.id}">
                        <a href="javascript:;" class="mdui-ripple"><i class="mdui-menu-item-icon mdui-icon material-icons">edit</i>修改</a>
                    </li>
                    <li class="mdui-menu-item move" dataid="${usersite.id}">
                        <a href="javascript:;" class="mdui-ripple"><i class="mdui-menu-item-icon mdui-icon material-icons">near_me</i>移动</a>
                    </li>
                    <li class="mdui-menu-item delete" dataid="${usersite.id}">
                        <a href="javascript:;"><i class="mdui-menu-item-icon mdui-icon material-icons">delete</i>删除</a>
                    </li>
                    
                </ul>
            </div>
                    </li>
                </div>
            </div>
            <div class="mdui-card-actions">
                <div class="mdui-float-left">
                    <div class="mdui-card-primary-title">${usersite.title}</div>
                    <div class="mdui-card-primary-subtitle">${usersite.siteurl}</div>
                </div>
            </div>
        </div>
            </div>`
                    }
                    sitNode.append(strhtml);
                    var html = sitNode.html();
                    var navlistitem = $(navNode).html();
                    var state = {
                        url: url,
                        title: '',
                        html: html,
						navlist: navlistitem
                    };
                    history.pushState(state, '', url);
                    $(target).html(html);
                    $(obj).historyLoad(target,navlist);

                }
            });
			return false;
		});
		window.onpopstate = function(event){
			if(ajax == null){
				return;
			}else if(event && event.state){
				document.title = event.state.title;
				$(target).html(event.state.html);
				console.log(event.state.navlist);
				$(navlist).html(event.state.navlist);
			}else{
				document.title = currentState.title;
				$(target).html(currentState.html);
                console.log(currentState.navlist);
				$(navlist).html(currentState.navlist);
			}
		}
	}
})(jQuery);

This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).