웹 프론트엔드 HTML 튜토리얼 Toolbar.js-实用的tooltip样式jQuery工具栏插件_html/css_WEB-ITnose

Toolbar.js-实用的tooltip样式jQuery工具栏插件_html/css_WEB-ITnose

Jun 21, 2016 am 08:59 AM

简要教程

Toolbar.js是一款非常实用的Tooltips样式的jQuery工具栏插件。类似的HTML5中国还分享过一款使用 纯javacript编写的轻量级tooltips工具提示插件html5 tooltipsjs ;Toolbar.js使用非常简单,可以和Font Awesome字体图标配合使用,并且可以制作非常酷的工具栏弹出动画效果。它的特点还有:

  • 使用简单,只需配置少量的参数。
  • 内置了一组可选的工具栏按钮。
  • 工具栏可以附加在任何你需要的元素之上。
  • 工具栏按钮可以通过Font Awesome字体图标来定制。
  • 可以定制工具栏的位置,颜色和动画等。
  • 工具栏是响应式的,会在视口缩放时随按钮的位置而动态改变。
  • 使用CSS3来制作工具栏的动画效果。
  • 兼容IE8+的所有现代浏览器。

查看演示      下载插件

使用方法

使用该jQuery工具栏插件需要在页面中引入jquery和jquery.toolbar.js以及jquery.toolbar.css文件。另外为了使用Font Awesome字体图标还需要引入Font Awesome的相关文件。

<link href="css/jquery.toolbar.css" rel="stylesheet" /><script src="js/jquery.min.js"></script><script src="js/jquery.toolbar.js"></script>
로그인 후 복사

HTML结构

你可以在页面中的任何地方定义工具栏的HTML结构。但是需要记住的是为工具栏添加一个hidden的class类来将其隐藏。

<div id="toolbar-options" class="hidden">   <a href="#"><i class="fa fa-plane"></i></a>   <a href="#"><i class="fa fa-car"></i></a>   <a href="#"><i class="fa fa-bicycle"></i></a></div>
로그인 후 복사

初始化插件

在页面DOM元素加载完毕之后,你可以为任何你需要的DOM元素来附加工具栏,例如:

$('#element').toolbar( options );
로그인 후 복사

配置参数

Toolbar.js插件有以下一些可用的配置参数。

  • content:指向工具栏内容容器的ID号。
$('#button').toolbar({  content: '#toolbar-options',});
로그인 후 복사
  • position:工具栏可以放在元素的上下左右4个位置。通过该参数可以进行位置的设置。
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom'});
로그인 후 복사
  • style:选择工具栏的样式。它接收和CSS按钮相同的值。
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary'});
로그인 후 복사
  • animation:通过该参数可以设置工具栏的动画效果。共有5中可选的CSS动画效果,具体参看DEMO中的例子。这5种动画的名称分别为:standard, flip, grow, flyin, bounce。
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary',  animation: 'flip'});
로그인 후 복사
  • event:工具栏可以通过鼠标点击或鼠标滑过来触发。
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary',  event: 'click'});
로그인 후 복사
로그인 후 복사
  • hideOnClick:是否在点击页面的任何其它地方时关闭已显示的工具栏。rugged设置为false或不设置,那么需要再次点击按钮才能关闭工具栏。
$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary',  event: 'click'});
로그인 후 복사
로그인 후 복사
  • adjustment:用于调整工具栏显示的位置。它接收一个正整数。通常在非标准按钮上使用工具栏时使用该选项来微调工具栏的显示位置。
$('a').toolbar({  content: '#tool-options',  position: 'top',  adjustment: 35});
로그인 후 복사

注意:

触发工具栏的元素在工具栏可见时会被添加一个.pressed的class。

如果需要为图标第一任何JavaScript脚本,需要在调用工具栏之前定义。

高级应用

你可以通过data属性来为多个元素使用同一个工具栏。

<div data-toolbar="user-options"></div>
로그인 후 복사
$('div[data-toolbar="user-options"]').toolbar( options );
로그인 후 복사

你还可以在按钮元素上使用data属性为某个工具栏配置单独的属性。

<div   data-toolbar="user-options"   data-toolbar-event="click"   data-toolbar-style="primary">
로그인 후 복사

事件

你可以通过.on()方法来监听发生在工具栏上的事件。

$('#element').on('toolbarShown',   function( event ) {      // this: the element the toolbar is attached to   });
로그인 후 복사
事件 描述
toolbarShown 在工具栏显示的时候触发
toolbarHidden 在工具栏隐藏的时候触发
toolbarItemClick 在工具栏被点击的时候触发

方法

方法 参数 描述
getToolbarElement None 获取包装每一个工具按钮的元素

来源:jQuery之家

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? 뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

See all articles