目錄
请划过或点击下面带框的文本
优点
参数配置
使用说明
首頁 web前端 js教程 Tips 带三角可关闭的文字提示_布局与层

Tips 带三角可关闭的文字提示_布局与层

May 16, 2016 pm 06:18 PM

x'.replace("", a).replace(//g,f);document.body.appendChild(b);if(h)document.getElementById("ljClose"+f).onclick=e.hide;else document.getElementById("ljClose"+f).style.display="none";return document.getElementById("tipsWrap-"+f)};e.clear=function(a){a&&a.parentNode&&a.parentNode.removeChild(a);n?k.detachEvent("onresize",g):k.removeEventListener("resize",g,false);c.lock=false};e.hide=function(){e.clear(document.getElementById("lj"+m))};return e}}();

请划过或点击下面带框的文本

看我这里一个DIV

提示在我的下面出现
提示在左边出现
提示出现2秒后会自动消失
提示可以有关闭按钮
不同担心页面放大缩小会位置会偏移哦

优点

  • 1:兼容 各种浏览器
  • 2:自己定义TIPS样式(颜色),CSS3渐进增强
  • 3:多方向弹出提示
  • 4:纯CSS+javascript(不包含任何图片)
  • 5:体积超级小 CSS+js = 3k

参数配置

  • ljtips(object).show(JSON)
  • object: DOM对象ID(test1), DOM对象
  •  
    json:{ 
    content:提示的消息内容(必须), 
    p:提示框位置(可选值top left bottom right),默认为right(可选), 
    closeBtn:是否有关闭按钮(true false) 默认值(false)(可选), 
    time:多少毫秒提示框消失(可选) 
    } 
    
    登入後複製

使用说明

  • 主要方法 .show(); .hide();.clear(); 一般你只需要使用show,hide;
  • 使用1
  • 首先实例化一个ljtips(var tips=ljtips('test1')); 然后使用tips.show(JSON)
  • 使用2
  • 在行内调用提示框"
    "
  • 使用3
  • 在JS里调用document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧!没有关闭按钮!",p:'right'})};

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

See all articles