infosite/index.js at master · CLFClub/infosite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141


function displayItem(infoobj) {
    var el=$("#left");
    //设置显示的信息
    el.css("background-image","url('"+infoobj.imgsrc+"')");
    $(".info-title").text(infoobj.title);
    $(".info-text").text(infoobj.content);
    //将ID放在标签属性上
    el.attr("data-cid",infoobj.id);
    el.attr("data-already",infoobj.isalready);
    el.addClass("active");
    //检测是否已经报了名
    // $(".info-baoming>span").text("hello");
}
function undisplayItem() {
    $("#left").removeClass("active");
}
$(function () {
    //页面选择事件
    $("#tabs>a,#list-plane>a").click(function () {
        $("#tabs>a,#list-plane>a").removeClass("active");
        //获得hash
        var hash=this.id.split('-')[1];
        // console.log(hash);
        var ael="#btn-"+hash;
        var bel="#mbtn-"+hash;
        $(ael).addClass("active");
        $(bel).addClass("active");
    });

    //表项点击事件
    $(".litem").click(function (e) {
        //构造显示信息对象
        var infoobj = {
            id: $(this).attr("data-cid"),
            imgsrc: $(this).children(".lback").attr("src"),
            title: $(this).children().children(".ltitle").text(),
            content: $(this).children().children(".ldesc").text(),
            isalready: $(this).attr("data-already")
        };
        displayItem(infoobj);
        e.stopPropagation();
    })
    $("#right").click(function (e) {
            undisplayItem();
    });
    //初始化检测
    var hash = window.location.hash;
    if (hash == "") window.location.hash = "starting";
    hash = window.location.hash;
    //设置函数
    var setfunc = function (el) {
        $("#tabs>a").removeClass("active");
        $(el).addClass("active");
    }
    //设置标准分类按钮激活状态
    setfunc("#btn-" + hash.slice(1, hash.length));
    //列表面板状态
    var setmfunc=function (el) {
        $("#list-plane>a").removeClass("active");
        $(el).addClass("active");
    };
    setmfunc("#mbtn-" + hash.slice(1, hash.length));


    //报名监听
    //报名时取出left标签上的data-cid属性
    $(".info-baoming").click(function () {
        //报名监听 并返回结果
        // $.toast("报名中，请稍后......");
        //检查是否已经报名
        var leftel = $("#left");
        var id = leftel.attr("data-cid");
        var already = leftel.attr("data-already");
        if (already == 'true') $.toast({
            text: "已报名，请勿重复报名!",
            showHideTransition: 'slide',
            hideAfter: 3000,
            bgColor: "rgba(240,192,203,0.7)",
            textColor: "black"
        })
        else {
            $.toast({
                text: "报名中，请稍后......",
                showHideTransition: 'slide',
                hideAfter: 1000,
                bgColor: "rgba(240,192,203,0.7)",
                textColor: "black"
            });
            //进行报名
            //地址先留空
            $.post("#", {id: id}, function () {
                alert("success!");
            }, "text");
        }

    });
    $(".info-enterback").click(function () {
        window.location.href = "http://www.baidu.com";
    });
    //用户按钮事件
    $("#user-widget").click(function (e) {
        //清除所有面板
        var el=$("#user-plane");
        var isactive=el.hasClass("active");
        $("[id*='plane']").removeClass("active");
        if(isactive) el.removeClass("active");
        else el.addClass("active");
        e.stopPropagation();;
    });
    //下面为手机适配部分
    //返回按钮事件
    $("#left-return").click(function (e) {
        undisplayItem();
        e.stopPropagation();
        //返回时清除所有面板
        $("[id*='plane']").removeClass("active");
    });
    //列表按钮事件
    $("#list-widget").click(function (e) {

        var el=$("#list-plane");
        var isactive=el.hasClass("active");
        $("[id*='plane']").removeClass("active");
        if(isactive) el.removeClass("active");
        else el.addClass("active");
        e.stopPropagation();
    });


    //其他地方点击关闭所有面板
    //
    document.addEventListener("click",function () {
        $("[id*='plane']").removeClass("active");
    });
    //拦截面板本身的事件
    $("[id*='plane']").click(function (e) {
        e.stopPropagation();
    });
});