【django】校易论坛网源码custom.js

这段代码展示了如何使用JavaScript在Django项目中实现一个选择校园的功能。包括选择省份、初始化校园列表、点击事件处理、窗口居中定位等。当用户选择校园后,会更新相关文本框的值,并关闭弹窗。此外,还包含了一个用于详情页图片轮播的JavaScript实现。
摘要由CSDN通过智能技术生成

// 注册选择校园弹窗
function selectchool(){
    // 窗口居中
    makeCenter();
    
    //初始化省份列表
    initProvince();
    
    //默认情况下,给第一个省份添加choosen样式
    $('[province-id="1"]').addClass('choosen');
    
    //初始化校园列表
    initSchool(1);
}

//隐藏窗口
function hide(){
    $('#choose-box-wrapper').css("display","none");
}

function initProvince(){
    //将原来的省份列表清空
    $('#choose-a-province').html('');
    for(i=0;i<schoolList.length;i++){
        $('#choose-a-province').append('<a class="province-item" province-id="'+schoolList[i].id+'">'+schoolList[i].name+'</a>');
    }
    
    //添加省份列表项的click事件
    $('.province-item').bind('click',function(){
        var item=$(this);
        var province=item.attr('province-id');
        var choosenItem=item.parent().find('.choosen');
        if(choosenItem)
            $(choosenItem).removeClass('choosen');
        
        item.addClass('choosen');
        //更新校园列表
        initSchool(province);
    });
}

function initSchool(provinceID){
    //原来的校园列表清空
    $('#choose-a-school').html('');
    var schools=schoolList[provinceID-1].school;
    for(i=0;i<schools.length;i++){
        $('#choose-a-school').append('<a class="school-item" school-id="'+schools[i].id+'">'+schools[i].name+'</a>');
    }
    
    //添加校园列表的click事件
    $('.school-item').bind('click',function(){
        var item=$(this);
        var school=item.attr('school-id');
        //更新选择校园文本框中的值
        $('#school-name').val(item.text());
        //关闭弹窗
        hide();
    });
}


function makeCenter(){
    $('#choose-box-wrapper').css("display","block");
    $('#choose-box-wrapper').css("position","absolute");
    $('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px");
    $('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px");
}


//切换校园弹窗
function changeschool(){
    // 窗口居中
    makeCenter();
    
    //初始化省份列表
    initchangeProvince();
    
    //默认情况下,给第一个省份添加choosen样式
    $('[province-id="1"]').addClass('choosen');
    
    //初始化校园列表
    initchangeSchool(1);
}


function initchangeProvince(){
    //将原来的省份列表清空
    $('#choose-a-province').html('');
    for(i=0;i<schoolList.length;i++){
        $('#choose-a-province').append('<a class="province-item" province-id="'+schoolList[i].id+'">'+schoolList[i].name+'</a>');
    }
    
    //添加省份列表项的click事件
    $('.province-item').bind('click',function(){
        var item=$(this);
        var province=item.attr('province-id');
        var choosenItem=item.parent().find('.choosen');
        if(choosenItem)
            $(choosenItem).removeClass('choosen');
        
        item.addClass('choosen');
        //更新校园列表
        initchangeSchool(province);
    });
}

function initchangeSchool(provinceID){
    //原来的校园列表清空
    $('#choose-a-school').html('');
    var schools=schoolList[provinceID-1].school;
    for(i=0;i<schools.length;i++){
        $('#choose-a-school').append('<a class="school-item" school-id="'+schools[i].id+'">'+schools[i].name+'</a>');
    }
    
    //添加校园列表的click事件
    $('.school-item').bind('click',function(){
        var item=$(this);
        var schoolid="";
        var school=item.attr('school-id');
        //更新选择校园文本框中的值
//        $('#school-name').val(item.text());
        var a=document.links;
        $('#schid').val(school);
        //关闭弹窗
        hide();
        //切换到对应的网址
        window.location.href="http://127.0.0.1:8000/campus-"+school+"%3Fp=1";
    });
}

//详情页面图片轮播的js

;(function() {

    var EventUtil, Get, Element;
    EventUtil = {
        addHandler: function(ele, type, handler) {
            if (ele.addEventListener) {

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

py编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值