webplus开发

最新推荐文章于 2023-05-08 10:09:12 发布

江野_c

最新推荐文章于 2023-05-08 10:09:12 发布

阅读量568

点赞数

分类专栏：日常文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_51544319/article/details/128348630

版权

日常专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了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>

//成果展示测试
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
    }
}