webplus开发

本文介绍了Webplus的基础语法,包括面板和窗口的使用,推荐了使用窗口和窗口内容的结构。对于导航栏,建议使用拖拽方法自定义。新闻列表和轮播组件的实现,提到了swiper组件的配置和动态填充内容的方法。此外,还讨论了搜索框的自定义实现,以及如何通过JavaScript操作窗口内容来满足复杂需求。
摘要由CSDN通过智能技术生成


爱特工作室

基础语法

官方推荐为三级模式

  • 面板
  • 窗口
  • 窗口内容
<div frag="面板01">
    <div frag="窗口01">
        <div frag="窗口内容">
            {缩略图}
        </div>
    </div>
</div>

但实际使用时不需要面板,是需要使用窗口和窗口内容即可,窗口号不能重复!!!,只有需要使用webplus的数据时再按这个语法规范写,别的静态的该怎么写就怎么写

英文版

这里没有什么好的英文版的简单方法,可以在后台在创建一个子域名,然后再写一版英文的,在系统管理的建站管理中
在这里插入图片描述

main.htm

导航栏

这里有两个选择,一是使用webplus自带的导航栏目,然后强改样式,二是使用窗口,拖拽需要的导航栏目进去就行,个人比较推崇第二种方法,下面介绍一个导航的实例
在这里插入图片描述

<div class="nav_name" frag="窗口100">关于我们</div>
                <div class="sub_container nav_about_us animate__animated animate__fadeIn ">
                    <div class="sub_item" frag="窗口101">简介</div>
                    <div class="sub_item" frag="窗口102">基地主任</div>
                    <div class="sub_item" frag="窗口103">合作单位</div>
                </div>

自己先在本地写好测试,然后拖动相应的导航栏目进去即可
在这里插入图片描述
在这里插入图片描述

新闻列表

在这里插入图片描述

<div class="cooperation research">
                <div class="re_top">
                    <div class="re_top_text">
                        合作交流
                    </div>
                </div>
                <div class="re_list_container" frag="窗口115">
                    <div class="re_list_item" frag="窗口内容">
                        <div class="title">
                            > {标题}
                        </div>
                        <div class="time">
                            {发布时间}
                        </div>
                    </div>
                </div>
                <div class="re_more">
                    查看更多>>
                </div>
            </div>

花括号中就是需要数据的字段,不需要使用循环语法,需要几条就在后台设置就可以

轮播组件

比较推荐使用swiper组件,当出现多个使用的swiper时,可能会出现问题,先设置好两个不同的swiper,然后需要使用时就添加上swiper1或者是swiper2的类名

<script>
    var mySwiper = new Swiper('.swiper', {
        //   direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项 
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })
    var mySwiper = new Swiper('.swiper1', {
        //   direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项 
        // 如果需要前进后退按钮
        pagination: {
            el: '.swiper1>.swiper-pagination'
        },

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })
    var mySwiper2 = new Swiper('.swiper2', {
        //   direction: 'vertical', // 垂直切换选项
        loop: true,
        slidesPerView: 4,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })        
</script>

在这里插入图片描述
上图这种情况使用swiper配置新闻列表是会出现问题的,应该是swiper和webplus的执行顺序的问题,所以可以另外写一个暂存窗口获取新闻的内容,在使用js塞入到swiper模块中
swiper

<div class="swiper2 swiper ach_list_con">
            <div class="swiper-wrapper ach_swiper">
                <div class="swiper-slide need_del" frag="窗口内容">
                    <div class="ach_list_item">
                        {缩略图}
                        <div class="ach_introduce">
                            <div class="ach_title">
                                {标题}
                            </div>
                            <div class="ach_info">
                                {简介}
                            </div>
                            <div class="ach_more">
                                查看更多
                            </div>
                        </div>
                    </div>
                </div>
            </div>

暂存窗口

<div class="get_container" frag="窗口117">
        <div class="get_img">
            {缩略图}
        </div>
        <div class="get_ach_title">
            {标题}
        </div>
        <div class="get_ach_info">
            {简介}
        </div>
    </div>

js

//成果展示测试
var data_img = document.querySelectorAll('.get_img')
var data_title = document.querySelectorAll(".get_ach_title")
var data_info = document.querySelectorAll('.get_ach_info')
var ach_swiper = document.querySelector(".ach_swiper")
var need_del=document.querySelector('.need_del')

//拿图片的地址
for (var i = 0; i < data_img.length; i++){
    var swiper_slide=document.createElement('div')
    var ach_list_item = document.createElement('div')
    ach_list_item.append(data_img[i])
    var ach_introduce = document.createElement('div')
    ach_introduce.classList.add('ach_introduce')
    var ach_title = data_title[i]
    ach_title.classList.add('ach_title')
    var ach_info = data_info[i]
    var ach_more = document.createElement('div')
    ach_more.classList.add("ach_more")
    ach_info.classList.add("ach_info")
    // var ach_a = ach_info.children[0]
    var ach_a = document.createElement('a')
    ach_a.href=data_img[i].children[0].href
    ach_a.innerHTML = "查看更多>>"
    ach_more.append(ach_a)
    ach_introduce.append(ach_title)
    ach_introduce.append(ach_info)
    ach_introduce.append(ach_more)
    ach_list_item.append(ach_introduce)
    ach_list_item.classList.add('ach_list_item')
    swiper_slide.classList.add('swiper-slide')
    swiper_slide.append(ach_list_item)
    ach_swiper.append(swiper_slide)
}

搜索框

当然可以使用自带的搜索组件,但是如果需求复杂,也同样可以使用上面的方法,用一个暂存组件,然后js取内容,我这里的需求是点击搜索图标弹出搜索框
在这里插入图片描述
代码仅供参考
暂存随便写一个窗口

<div frag="窗口99">
                hello
            </div>

js
发现窗口号对应的就是id,如果窗口118,那么id就是w118

//搜索
var table = document.querySelector('.footer_contact').children[4]
table.id = "w118"
console.log(table);
var open_serach = document.querySelector('.open_serach')
var wp_search = document.querySelector('.wp_search')
var click_search = false
var close_search = false
table.classList.add('animate__animated')
table.classList.add('animate__fadeInDown')
open_serach.onclick = function () {
    table.classList.remove('animate__fadeOutDown')
    table.classList.add('animate__fadeInDown')
    table.style.display = "flex"
    table.style.backgroundColor = "rgba(0,0,0,.5)"
    click_search = true
}



table.onclick = function (e) {
    var e = e || window.event;
    var elem = e.target;
    if (click_search) {
        if (wp_search.contains(elem)) {
            // alert("在区域内");
        } else {
            table.classList.remove('animate__fadeInDown')
            table.classList.add('animate__fadeOutDown')
            // table.style.display = "none"
            click_search = false
        }
    }
}

window.onmousewheel = function () {
    if (click_search) {
        table.classList.remove('animate__fadeInDown')
        table.classList.add('animate__fadeOutDown')
        // table.style.display = "none"
        click_search = false
    }
}

listcolumn&displayinfo

这部分主要参考这两篇博文
webplus开发
webplus开发 listcolumn & displayinfo

参考的网站

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值