jQueryUI基础概要

jQuery学习笔记,附有自己的注释
包含拖拽、缩放、拖入以及分页和排序功能

初始界面
这里写图片描述

调整界面
这里写图片描述

完整代码

<!doctype html>
<html>
<head>
    <title>Learning jQueryUI</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="jquery.min.js"></script> 
    <!--谷歌提供的jQueryUI网络链接-->
    <!--CSS文件-->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <!--JS文件-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <style>
        #draggable {
            width:200px;
            height:200px;
            background-color:green;
        }
        #resizable {
            width:300px;
            height:300px;
            background-color:yellow;
        }
    </style>
</head>

<body>
    <!--拖拽、缩放、拖入功能-->

    <div id="draggable"></div>
    <div id="resizable"></div>
    <script>
        $("#draggable").draggable(); /*调用draggable功能 draggable=可拖拽的*/
      /*$("#resizable").resizable(); /*调用resizable功能 resizable=可调整大小的*/
        $("#resizable").droppable({     /*调用droppable功能 droppable=可放置的*/
            drop:function(ui,event){ /*当有其他元素拖动到里面后会执行函数操作*/
                $("#resizable").css("background-color","red");  /*触发函数时 改变指定元素的CSS属性*/
            }
        });     
    </script>

    <!--分页功能 让界面看着更简洁-->
    <div id="accordion">
    <h3>Title1</h3>
    <div>
        <p>This is some text.This is some text.This is some text.</p>
    </div>
    <h3>Title2</h3>
    <div>
        <p>This is some text.This is some text.This is some text.</p>
    </div>
    <h3>Title3</h3>
    <div>
        <p>This is some text.This is some text.This is some text.</p>
    </div>
    </div>
    <script>
        $("#accordion").accordion(); /*调用accordion功能 accordion=可折叠的*/
    </script>

    <!--排序功能 可以调整列表的循序-->
    <ul>
        <li>Pizza</li>
        <li>IceCream</li>
        <li>Chocolate</li>
        <li>Apple</li>
        <li>Banana</li>
    </ul>
    <script>
        $("ul").sortable(); /*调用排序功能 sortable=可整理的*/
    </script>
</body>
</html>
内容概要:本文详细介绍了900W或1Kw,20V-90V 10A双管正激可调电源充电机的研发过程和技术细节。首先阐述了项目背景,强调了充电机在电动汽车和可再生能源领域的重要地位。接着深入探讨了硬件设计方面,包括PCB设计、磁性器件的选择及其对高功率因数的影响。随后介绍了软件实现,特别是程序代码中关键的保护功能如过流保护的具体实现方法。此外,文中还提到了充电机所具备的各种保护机制,如短路保护、欠压保护、电池反接保护、过流保护和过温度保护,确保设备的安全性和可靠性。通讯功能方面,支持RS232隔离通讯,采用自定义协议实现远程监控和控制。最后讨论了散热设计的重要性,以及为满足量产需求所做的准备工作,包括提供详细的PCB图、程序代码、BOM清单、磁性器件和散热片规格书等源文件。 适合人群:从事电力电子产品研发的技术人员,尤其是关注电动汽车充电解决方案的专业人士。 使用场景及目标:适用于需要高效、可靠充电解决方案的企业和个人开发者,旨在帮助他们快速理解和应用双管正激充电机的设计理念和技术要点,从而加速产品开发进程。 其他说明:本文不仅涵盖了理论知识,还包括具体的工程实践案例,对于想要深入了解充电机内部构造和工作原理的人来说是非常有价值的参考资料。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值