当前位置: 首页 > news >正文

[UI5 常用控件] 09.IconTabBar,IconTabHeader,TabContainer

文章目录

  • 前言
  • 1. IconTabBar
    • 1.1 简介
    • 1.2 基本结构
    • 1.3 用法
      • 1.3.1 颜色,拖放,溢出
      • 1.3.2 Icons Only , Inner Contents
      • 1.3.3 showAll,Count,key,IconTabSeparator
    • 1.3.4 Only Text
      • 1.3.5 headerMode-Inline
      • 1.3.6 design,IconTabSeparator-icon
      • 1.3.7 DensityMode-Compact
      • 1.3.8 Sub Tabs
      • 1.3.9 Badges
      • 1.3.10 stretchContentHeight
  • 2. IconTabHeader
  • 3. Tab Container
    • 3.1 基本结构
    • 3.2 属性及方法


前言

本章节记录常用控件 IconTabBar,IconTabHeader, TabContainer
其路径分别是:

  • sap.m.IconTabBar
  • sap.m.IconTabHeader
  • sap.m.TabContainer

1. IconTabBar

1.1 简介

在SAP UI5中,IconTabBar 是一种用户界面控件,通常用于创建具有多个标签页的导航界面。它允许用户通过标签切换内容区域,每个标签通常与一个特定的视图或功能相关联。IconTabBar 通常包含多个 IconTabFilter,每个 IconTabFilter 都表示一个标签页。

主要用途包括:

  • 导航: IconTabBar 可以用作导航控件,允许用户浏览不同的页面或功能区域。每个标签通常与一个特定的视图或功能相关联,用户可以通过点击标签切换到不同的内容。

  • 分类和过滤: 可以使用 IconTabBar 来对数据进行分类和过滤。每个标签可能代表不同的类别,用户可以通过选择标签来过滤或查看特定类别的数据。

  • 组织内容: 如果应用程序有多个功能或模块,IconTabBar 可以用于组织和呈现这些功能,使用户能够方便地访问和切换。

  • 图标导航: 由于每个标签都可以关联一个图标,IconTabBar 也可以用作图标导航,通过视觉上识别图标来切换到不同的页面或功能。

1.2 基本结构

<mvc:Viewxmlns:mvc="sap.ui.core.mvc"xmlns="sap.m"><IconTabBar><items><IconTabFilter text="Tab 1" icon="sap-icon://home"><!-- Content for Tab 1 --></IconTabFilter><IconTabFilter text="Tab 2" icon="sap-icon://list"><!-- Content for Tab 2 --></IconTabFilter><!-- Additional tabs as needed --></items></IconTabBar></mvc:View>

1.3 用法

1.3.1 颜色,拖放,溢出

  • 颜色
    IconTabFilter: iconColor

  • 拖放
    IconTabBar: enableTabReordering ( true,false )

  • 溢出
    IconTabBar: tabsOverflowMode (End, StartAndEnd )
    在这里插入图片描述

  • View

    <Panel headerText="Color,enableTabReordering,tabsOverflowMode"><IconTabBar enableTabReordering="true" tabsOverflowMode="StartAndEnd"><items><IconTabFilter icon="sap-icon://inventory" text="None"/><IconTabFilter icon="sap-icon://inventory" iconColor="Contrast" text="Contrast"/><IconTabFilter icon="sap-icon://inventory" iconColor="Critical" text="Critical"/><IconTabFilter icon="sap-icon://inventory" iconColor="Default" text="Default"/><IconTabFilter icon="sap-icon://inventory" iconColor="Marker" text="Marker"/><IconTabFilter icon="sap-icon://inventory" iconColor="Negative" text="Negative"/><IconTabFilter icon="sap-icon://inventory" iconColor="Neutral" text="Neutral"/><IconTabFilter icon="sap-icon://inventory" iconColor="NonInteractive" text="NonInteractive"/><IconTabFilter icon="sap-icon://inventory" iconColor="Positive" text="Positive"/><IconTabFilter icon="sap-icon://inventory" iconColor="Tile" text="Tile"/></items></IconTabBar></Panel>

1.3.2 Icons Only , Inner Contents

在这里插入图片描述

  • View
    <Panel headerText="Icons Only , Inner Contents"><IconTabBar><items><IconTabFilter icon="sap-icon://begin" iconColor="Contrast" ><Text text="此处可以添加内容 A"></Text></IconTabFilter><IconTabFilter icon="sap-icon://compare" iconColor="Critical" ><Text text="此处可以添加内容 B"></Text></IconTabFilter><IconTabFilter icon="sap-icon://inventory" iconColor="Default" ><Text text="此处可以添加内容 C"></Text></IconTabFilter></items></IconTabBar></Panel>

1.3.3 showAll,Count,key,IconTabSeparator

当设置showAll时,组件不会显示图标。
IconTabBar : select
IconTabFilter : showAll
IconTabFilter : count
IconTabFilter : key
在这里插入图片描述

  • View
   <Panel headerText="showAll,Count,key,IconTabSeparator"><IconTabBar select="onSelectFilter"><items><IconTabFilter showAll="true" count="10" text="Users" key="ALL"/><IconTabSeparator /><IconTabFilter icon="sap-icon://inventory" count="10" iconColor="Contrast" key="NEW"/><IconTabFilter icon="sap-icon://begin" count="20" iconColor="Critical" text="Warrning" key="OLD"/></items>    </IconTabBar></Panel>
  • select Event
    在这里插入图片描述

  • Controller

	onSelectFilter:function(oEvent){var sKey = oEvent.getParameter("key")new sap.m.MessageToast.show("Selected filter: " + sKey);}

1.3.4 Only Text

在这里插入图片描述

  • View
    <Panel headerText="Only Text"><IconTabBar ><items><IconTabFilter count="10" iconColor="Contrast" text="New" key="NEW"/><IconTabFilter count="20" iconColor="Critical" text="Old" key="OLD"/><IconTabFilter count="30" iconColor="Positive" text="None" key="NONE"/></items>    </IconTabBar></Panel>

1.3.5 headerMode-Inline

在这里插入图片描述

  • View
    <Panel headerText="headerMode-Inline"><IconTabBar headerMode="Inline"><items><IconTabFilter count="10" iconColor="Contrast" text="New" key="NEW"/><IconTabFilter count="20" iconColor="Critical" text="Old" key="OLD"/><IconTabFilter count="30" iconColor="Positive" icon="sap-icon://newspaper" text="None" key="NONE"/></items>    </IconTabBar></Panel>

1.3.6 design,IconTabSeparator-icon

经常用于流程业务上
IconTabFilter : design ( Horizontal )
IconTabSeparator : icon
在这里插入图片描述

  • View
    <Panel headerText="design,IconTabSeparator-icon"><IconTabBar select="onSelectFilter2"><items><IconTabFilter icon="sap-icon://newspaper" iconColor="Positive" count="10 of 40" text="New" key="NEW" 	design="Horizontal"/><IconTabSeparator icon="sap-icon://open-command-field" /><IconTabFilter icon="sap-icon://newspaper" iconColor="Critical" count="20 of 40" text="Processing" key="PROCESSING" 	design="Horizontal"/><IconTabSeparator icon="sap-icon://open-command-field" /><IconTabFilter icon="sap-icon://newspaper" iconColor="Negative" count="10 of 40" text="End" key="END" 	design="Horizontal"/></items></IconTabBar></Panel>

1.3.7 DensityMode-Compact

以小图标显示
IconTabBar :tabDensityMode ( Compact )
在这里插入图片描述

    <Panel headerText="DensityMode-Compact"><IconTabBar tabDensityMode="Compact"><items><IconTabFilter icon="sap-icon://newspaper" iconColor="Positive" count="10 of 40" text="New" key="NEW" 	design="Horizontal"/><IconTabSeparator icon="sap-icon://open-command-field" /><IconTabFilter icon="sap-icon://newspaper" iconColor="Critical" count="20 of 40" text="Processing" key="PROCESSING" 	design="Horizontal"/><IconTabSeparator icon="sap-icon://open-command-field" /><IconTabFilter icon="sap-icon://newspaper" iconColor="Negative" count="10 of 40" text="End" key="END" 	design="Horizontal"/></items></IconTabBar></Panel>

1.3.8 Sub Tabs

在IconTabFilter 里再嵌套items实现
在这里插入图片描述

  • View
     <Panel headerText="Sub Tabs"><IconTabBar headerMode="Inline"><items><IconTabFilter count="10" iconColor="Contrast" text="New" key="NEW"><items><IconTabFilter count="10" iconColor="Contrast" text="New1" key="NEW1"/></items></IconTabFilter><IconTabFilter count="20" iconColor="Critical" text="Old" key="OLD"/><IconTabFilter count="30" iconColor="Positive" icon="sap-icon://newspaper" text="None" key="NONE"/></items>    </IconTabBar></Panel>

1.3.9 Badges

IconTabFilter里嵌套customData-BadgeCustomData 实现

  • 再标签右上方显示一个小点

  • 当点击标签时,过一段时间自动消失(大概5秒)

  • 第一个标签不会显示小点(即使设置了)
    在这里插入图片描述

  • View

	<Panel headerText="Badges"><IconTabBar headerMode="Inline"><items><IconTabFilter count="10" iconColor="Marker" text="New" key="NEW"><customData><BadgeCustomData visible="true"/></customData></IconTabFilter><IconTabFilter count="20" iconColor="Critical" text="Old" key="OLD"><customData><BadgeCustomData visible="true"/></customData></IconTabFilter><IconTabFilter count="30" iconColor="Positive" icon="sap-icon://newspaper" text="None" key="NONE"/></items>    </IconTabBar></Panel>

1.3.10 stretchContentHeight

当设置stretchContentHeight时,自动把Tab固定到画面的最上方。

  • IconTabBar:stretchContentHeight ( false )

在这里插入图片描述

  <Panel headerText="stretchContentHeight,ScrollContainer " height="300px"><IconTabBarid="idIconTabBar"select=".onFilterSelect"class="sapUiResponsiveContentPadding"stretchContentHeight="false"><items><IconTabFiltershowAll="true"count="1"text="Products"key="All"/><IconTabSeparator /><IconTabFiltericon="sap-icon://begin"iconColor="Contrast"count="{counts>/PriceLessThan20}"text="Ok"key="Ok"/><IconTabFiltericon="sap-icon://compare"iconColor="Critical"count="{counts>/Price20To40}"text="Heavy"key="Heavy"/><IconTabFiltericon="sap-icon://inventory"iconColor="Negative"count="{counts>/PriceGreaterThan40}"text="Overweight"key="Overweight"/></items><content><ScrollContainerheight="100%"width="100%"horizontal="false"vertical="true"><Table items="{/Products}" width="100%"><columns><Column><Text text="Product" /></Column><Column><Text text="Supplier" /></Column><Column><Text text="Price" /></Column></columns><items><ColumnListItem><cells><Text text="{Product}" /><Text text="{Supplier}" /><ObjectNumbernumber="{parts:[{path:'Price'},{path:'Currency'}],type: 'sap.ui.model.type.Currency',formatOptions: {showMeasure: false}}"state="{parts: [{path: 'Price'}],formatter: '.formatter.priceState'}"unit="{Currency}"/></cells></ColumnListItem></items></Table></ScrollContainer></content></IconTabBar></Panel>

2. IconTabHeader

IconTabHeader的用法和IconTabBar差不多,具体看效果
在这里插入图片描述

  • View
   <Panel headerText="IconTabHeader" ><IconTabHeader  class="sapUiMediumMarginBottom"><items><IconTabFilter key="info" text="Info" iconColor="Critical" icon="sap-icon://newspaper" count="10"><items><IconTabFilter count="10" iconColor="Contrast" text="New1" key="NEW1"/></items></IconTabFilter><IconTabFilter key="attachments" icon="sap-icon://notes" text="Attachments" count="3" /><IconTabFilter key="notes" icon="sap-icon://number-sign" text="Notes" count="12" /><IconTabFilter key="people" icon="sap-icon://open-folder" text="People"/></items></IconTabHeader><IconTabHeader mode="Inline"><items><IconTabFilter key="info" text="Info" iconColor="Critical" count="10"><items><IconTabFilter count="10" iconColor="Contrast" text="New1" key="NEW1"/></items></IconTabFilter><IconTabFilter key="attachments" text="Attachments" count="3" /><IconTabFilter key="notes" text="Notes" count="12" /><IconTabFilter key="people" text="People"/></items></IconTabHeader></Panel>

3. Tab Container

TabContainer 控件用于创建带有选项卡的容器,以实现分页或标签式导航。

3.1 基本结构

<TabContainerid="myTabContainer"class="sapUiResponsiveContentPadding"expanded="{/expanded}"selectedKey="{/selectedKey}"><!-- TabContainerItems will be added here --><TabContainerItem><content><!-- contents will be added here --></content></TabContainerItem></TabContainer>

3.2 属性及方法

  • 属性
    TabContainer:items (需要绑定的数据)
    TabContainer:showAddNewButton (显示加号)
    TabContainer:addNewButtonPress (点击加号时触发的事件)
    TabContainer:itemClose (点击关闭时触发的事件)
    TabContainerItem:name,additionalText,icon

  • 方法
    setSelectedItem:激活标签
    addItem:添加标签
    getItems:获取所有标签
    removeItem:删除标签
    在这里插入图片描述

  • View

	<Panel headerText="TabContainer" height="400px" width="1000px"><TabContainer items="{ path: 'emp>/employees' }" id="myTabContainer"showAddNewButton="true"class="sapUiResponsiveContentPadding sapUiResponsivePadding--header"addNewButtonPress="addNewButtonPressHandler" itemClose="itemCloseHandler"><items><TabContainerItemname="{emp>name}"additionalText="{emp>position}"icon="{emp>icon}"><content><f:Form editable="false"><f:title><core:Title text="Employee" /></f:title><f:layout><f:ResponsiveGridLayout/></f:layout><f:FormContainer><f:FormElement label="First Name"><f:fields><Text text="{emp>empFirstName}"/></f:fields></f:FormElement><f:FormElement label="Last Name"><f:fields><Text text="{emp>empLastName}" /></f:fields></f:FormElement><f:FormElement label="Position"><f:fields><Text text="{emp>position}" /></f:fields></f:FormElement><f:FormElement label="Salary"><f:fields><Text text="{salary} EUR"/></f:fields></f:FormElement></f:FormContainer></f:Form></content></TabContainerItem></items></TabContainer></Panel>
  • Controller
	addNewButtonPressHandler: function () {// 假设要添加的新数据对象var newEmployee = {name: "New",empFirstName: "New",empLastName: "Employee",position: "New Position",icon: "sap-icon://accessibility",iconTooltip: "new",salary: 1500.00};var oModel2 = this.getView().getModel("emp");// 获取当前模型的数据var currentData = oModel2.getData();// 添加新数据对象到数组中currentData.employees.push(newEmployee);// 设置更新后的数据回到模型中oModel2.setData(currentData);// var newEmployee = new sap.m.TabContainerItem({//     name: "New",//     additionalText: "Developer",//     icon: "sap-icon://group",//     iconTooltip: "group",//     modified: false// });var tabContainer = this.byId("myTabContainer");tabContainer.getItems().some(function (item) {if (item.getName() === newEmployee.name) {tabContainer.setSelectedItem(item);return true; // 停止遍历}});},itemCloseHandler: function (oEvent) {// prevent the tab being closed by defaultoEvent.preventDefault();var oTabContainer = this.byId("myTabContainer");var oItemToClose = oEvent.getParameter('item');sap.m.MessageBox.confirm("Do you want to close the tab '" + oItemToClose.getName() + "'?", {onClose: function (oAction) {if (oAction === sap.m.MessageBox.Action.OK) {oTabContainer.removeItem(oItemToClose);sap.m.MessageToast.show("Item closed: " + oItemToClose.getName(), { duration: 500 });} else {sap.m.MessageToast.show("Item close canceled: " + oItemToClose.getName(), { duration: 500 });}}});}

相关文章:

[UI5 常用控件] 09.IconTabBar,IconTabHeader,TabContainer

文章目录 前言1. IconTabBar1.1 简介1.2 基本结构1.3 用法1.3.1 颜色&#xff0c;拖放&#xff0c;溢出1.3.2 Icons Only , Inner Contents1.3.3 showAll,Count,key,IconTabSeparator 1.3.4 Only Text1.3.5 headerMode-Inline1.3.6 design,IconTabSeparator-icon1.3.7 DensityM…...

CCF编程能力等级认证GESP—C++5级—20231209

CCF编程能力等级认证GESP—C5级—20231209 单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09;判断题&#xff08;每题 2 分&#xff0c;共 20 分&#xff09;编程题 (每题 25 分&#xff0c;共 50 分)小杨的幸运数烹饪问题 答案及解析单选题判断题编程题1编程题2 单…...

【论文精读】GPT2

摘要 在单一领域数据集上训练单一任务的模型是当前系统普遍缺乏泛化能力的主要原因&#xff0c;要想使用当前的架构构建出稳健的系统&#xff0c;可能需要多任务学习。但多任务需要多数据集&#xff0c;而继续扩大数据集和目标设计的规模是个难以处理的问题&#xff0c;所以只能…...

10-k8s中pod的探针

一、探针的概念 一般时候&#xff0c;探针的设置&#xff0c;都是为了优化业务时&#xff0c;需要做的事情&#xff1b;属于后期工作&#xff1b; 1&#xff0c;探针的分类 1&#xff0c;健康状态检查探针&#xff1a;livenessProbe 当我们设置了这个探针之后&#xff0c;检查…...

【Langchain Agent研究】SalesGPT项目介绍(二)

【Langchain Agent研究】SalesGPT项目介绍&#xff08;一&#xff09;-CSDN博客 上节课&#xff0c;我们介绍了SalesGPT他的业务流程和技术架构&#xff0c;这节课&#xff0c;我们来关注一下他的项目整体结构、poetry工具和一些工程项目相关的设计。 项目整体结构介绍 我们把…...

《UE5_C++多人TPS完整教程》学习笔记4 ——《P5 局域网连接(LAN Connection)》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P5 局域网连接&#xff08;LAN Connection&#xff09;》 的学习笔记&#xff0c;该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版&#xff0c;UP主&#xff08;也是译者&…...

【运维测试】移动测试自动化知识总结第1篇:移动端测试介绍(md文档已分享)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论移动测试相关知识。主要知识点包括&#xff1a;移动测试分类及android环境搭建&#xff0c;adb常用命令&#xff0c;appium环境搭建及使用&#xff0c;pytest框架学习&#xff0c;PO模式&#xff0c;数据驱动&#xff0…...

高校疫情防控系统的全栈开发实战

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

OpenTitan- 开源安全芯片横空出世

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

简单的edge浏览器插件开发记录

今天在浏览某些网页的时候&#xff0c;我想要屏蔽掉某些信息或者修改网页中的文本的颜色、背景等等。于是在浏览器的控制台中直接输入JavaScript操作dom完成了我想要的功能。但是每次在网页之间跳转该功能都会消失&#xff0c;我需要反复复制粘贴js脚本&#xff0c;无法实现自动…...

WSL下如何使用Ubuntu本地部署Vits2.3-Extra-v2:中文特化修复版(新手从0开始部署教程)

环境&#xff1a; 硬&#xff1a; 台式电脑 1.cpu:I5 11代以上 2.内存16G以上 3.硬盘固态500G以上 4.显卡N卡8G显存以上 20系2070以上 本案例英伟达4070 12G 5.网络可连github 软&#xff1a; Win10 专业版 19045以上 WSL2 -Ubuntu22.04 1.bert-Vits2.3 Extra-v2:…...

Go语言的100个错误使用场景(40-47)|字符串函数方法

前言 大家好&#xff0c;这里是白泽。 《Go语言的100个错误以及如何避免》 是最近朋友推荐我阅读的书籍&#xff0c;我初步浏览之后&#xff0c;大为惊喜。就像这书中第一章的标题说到的&#xff1a;“Go: Simple to learn but hard to master”&#xff0c;整本书通过分析100…...

Fluke ADPT 连接器新增对福禄克万用 Fluke 15B Max 的支持

所需设备&#xff1a; 1、Fluke ADPT连接器&#xff1b; 2、Fluke 15B Max&#xff1b; Fluke 15B Max拆机图&#xff1a; 显示界面如下图&#xff1a; 并且可以将波形导出到EXCEL: 福禄克万用表需要自己动手改造&#xff01;&#xff01;&#xff01;...

前端工程化面试题 | 10.精选前端工程化高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

【并发编程】AQS原理

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程 ⛺️稳中求进&#xff0c;晒太阳 1. 概述 全称是 AbstractQueuedSynchronizer&#xff0c;是阻塞式锁和相关的同步器工具的框架 特点&#xff1a; 用 state 属性来表示资源的状…...

AI:130-基于深度学习的室内导航与定位

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码,详细讲解供…...

Leetcode1423.可获得的最大点数

文章目录 题目原题链接思路&#xff08;逆向思维&#xff09; 题目 原题链接 Leetcode1423.可获得的最大点数 思路&#xff08;逆向思维&#xff09; 由题目可知&#xff0c;从两侧选k张&#xff0c;总数为n张&#xff0c;即从中间选n - k张 nums总和固定&#xff0c;要选k张最…...

深度学习之梯度下降算法

梯度下降算法 梯度下降算法数学公式结果 梯度下降算法存在的问题随机梯度下降算法 梯度下降算法 数学公式 这里案例是用梯度下降算法&#xff0c;来计算 y w * x 先计算出梯度&#xff0c;再进行梯度的更新 import numpy as np import matplotlib.pyplot as pltx_data [1.0,…...

代码随想录第32天|● 122.买卖股票的最佳时机II ● 55. 跳跃游戏 ● 45.跳跃游戏II

文章目录 买卖股票思路一&#xff1a;贪心代码&#xff1a; 思路&#xff1a;动态规划代码&#xff1a; 跳跃游戏思路&#xff1a;贪心找最大范围代码&#xff1a; 跳跃游戏②思路&#xff1a;代码&#xff1a; 方法二&#xff1a;处理方法一的特殊情况 买卖股票 思路一&#x…...

线性代数的本质 2 线性组合、张成的空间、基

基于3Blue1Brown视频的笔记 一种新的看待方式 对于一个向量&#xff0c;比如说&#xff0c;如何看待其中的3和-2&#xff1f; 一开始&#xff0c;我们往往将其看作长度&#xff08;从向量的首走到尾部&#xff0c;分别在x和y上走的长度&#xff09;。 在有了数乘后&#xff0…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...