首頁 > web前端 > js教程 > 主體

jQuery Tools tooltip使用說明_jquery

WBOY
發布: 2016-05-16 17:51:51
原創
1410 人瀏覽過

HTML

複製程式碼程式碼如下:







jQuery 工具獨立示範


href="./tooltip-generic.css" />

#myform {
邊框:1px開頭#ccc;
背景:#fff 重複-x;
內邊距:20px;
邊距: 20px 自動;
寬度:350px;
字體大小:12px;
-moz-border-radius:4px;
}
#myform h3 {
text-align:center;
邊距:0 0 10px 0;
}
/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs input, #inputs textarea, #inputs select {
顯示:堵塞;
寬度:150px;
浮動:左;
邊距底部:20px;
}
#inputs 標籤{
文字對齊:右;
寬度:75px;
右內邊距:20px;
}
#inputs br {
清除:左;
}
樣式樣式>
頭>

註冊表單




使用者名稱標籤>
;

>

密碼標籤>
>

>

電子郵件標籤>
>

>




>





我接受條款和條件

標籤>



表格>


// 當DOM 準備好時執行腳本。需的輸入欄位並為其附加工具提示
$("#myform :input").tooltip({
//將工具提示放在右邊緣
position: "center right",
// 稍微調整位置
offset: [-2, 10],
// 使用內建的fadeIn /fadeOut 效果
effect: "fade",
// 自訂不透明度設定
opacity: 0.7
})
});
腳本>
身體>


CSS 程式碼如下:


/*簡單的基於CSS 的工具提示*/
.tooltip {
background-color:#000;
邊框:1px實線#fff;
內邊距:10px 15px;
寬度:200px;
顯示:無; >顏色:#fff;
文字對齊:左;
字體大小:12px;
/* 僅適用於mozilla/firefox 的輪廓半徑*/
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}

CSS 可以不需要,這樣就能顯示出美味佳餚了。
關鍵程式碼:
複製程式碼 程式碼如下:

// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
tipClass:'tooltip', // 省却值:tooltip,少了这一行效果也是一样
// custom opacity setting
opacity: 0.7
});

使用
这里是可能存在的最简单的工具提示的初始化:

$("#myform :input").tooltip();配置
属性 默认值 描述
cancelDefault true 自从1.1.0版。 当工具提示内容抓取 从 标题 触发器元素的属性 这个属性取消默认工具提示执行的行为 浏览器。 这是通过简单的移除 这个 标题 属性从触发器。

你仍然可以检索/修改标题值通过调用 jQuery的 数据('title') 方法为触发。

effect 'toggle' 指定了如何显示和隐藏的提示。 有两个 内置的效果,可以用作值:

toggle 。 一个简单的显示/隐藏效果。 这是 默认

fade 。 一个简单的淡入/淡出效果

还有一个 幻灯片效果 不 包括在该工具本身。 你可以 构建 你自己的

delay <span id="OUTFOX_JTR_TRANS_NODE-93" class="OUTFOX_JTR_TRANS_NODE">30 </span> 指定工具提示依然可见多久后鼠标 叶子触发器。 这是必需的,如果tootip已 互动的内容和用户将需要时间去 tootip区域。 通过设置0工具提示也会消失 鼠标离开就从触发器元素。
events Object 一个配置对象,它指定当工具提示会 显示和隐藏。 您可以指定不同的事件不同 类型的元素。 这里有默认值为这个 属性:
 <span class="nx">events</span><span class="o">:</span> <span class="p">{</span><br> <span class="nx">def</span><span class="o">:</span> <span class="s2">"mouseover,mouseout"</span><span class="p">,</span><br> <span class="nx">input</span><span class="o">:</span> <span class="s2">"focus,blur"</span><span class="p">,</span><br> <span class="nx">widget</span><span class="o">:</span> <span class="s2">"focus mouseover,blur mouseout"</span><span class="p">,</span><br> <span class="nx">tooltip</span><span class="o">:</span> <span class="s2">"mouseover,mouseout"</span><br> <span class="p">}</span><br> 
登入後複製

JavaScript

你可以阅读更多关于这方面的内容这个 事件管理 一章。

layout '<div/>' 自从1.2.0 HTML布局为生成的工具提示。 可以很复杂的HTML布局如你所愿。 你可以,例如,添加一个嵌套的 跨度 元素作为箭的占位符。
offset [0, 0] 精细地调节工具提示指定位置这个 位置 属性。 看到这个 定位细节 更多的信息。
opacity <span id="OUTFOX_JTR_TRANS_NODE-116" class="OUTFOX_JTR_TRANS_NODE">1 </span> 透明的工具提示。 例如,0意味着不可见, 1意味着没有透明度(完全可见)和0.4意味着40% 工具提示显示的。 如果你的工具提示使用CSS背景图像,你可以设置透明度的形象,如果它已经保存在PNG24图形格式。 记住,互联网 IE 6不支持原生透明的PNG。
position 'top center' 指定位置的工具提示。 看到这个 定位细节 更多的信息。 旧的格式:['top', 'center'] 是废弃,在未来将会被移除。
predelay <span id="OUTFOX_JTR_TRANS_NODE-126" class="OUTFOX_JTR_TRANS_NODE">0 </span> 自从1.1.0版。 指定了延迟(在毫秒)工具提示显示之前。 默认情况下有没有延迟。
relative false 自从1.1.1。 默认情况下,工具提示位置现在决定相对于文档(通过使用这个 relative)的方法。 通过启用这个产权工具提示的位置是相对确定的父元素
tip   一个jQuery选择器为一个单一的工具提示的元素。 对于示例 # mytip 。 该选项仅有效如果你要手动定义一个工具提示多个触发器同时元素。 因为1.2.5 标题 属性仍然可以被用作工具提示内容。
tipClass 'tooltip' 自从1.2.0。 CSS类名生成的工具提示的元素。  
事件
确保你已经阅读 大约 事件 jQuery工具 。 所有事件监听器接收 这个 事件 对象 作为第一个参数。
事件 触发事件
onbeforeshow 在工具提示显示。 第二个参数是工具提示 要使用位置。 这是一个对象的值{top: integer, left: integer} 
onShow 在工具提示显示。
onBeforeHide 在工具提示是隐藏的
onHide 当这个工具提示是隐藏的。
下面的示例是一个onShow 回调函数, 淡出触发器元素当工具提示显示:
复制代码 代码如下:

$("label").tooltip({
// change trigger opacity slowly to 0.8
onShow: function() {
this.getTrigger().fadeTo("slow", 0.8);
}
});

事件管理
jQuery工具提示可以让你完全控制 当 工具提示 将显示或隐藏。 您可以指定不同的事件 不同类型的元素。 你可以控制这种行为 这个 事件 配置变量,它具有以下 默认值:
复制代码 代码如下:

events: {
def: "mouseenter,mouseleave", // default show/hide events for an element
input: "focus,blur", // for all input elements
widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button
tooltip: "mouseenter,mouseleave" // the tooltip element
}

脚本 api
首先确保你已经了解你自己 与 jQuery工具 脚本 。

以下列出的是所有API方法:
方法 返回值 描述/例子
show() <span id="OUTFOX_JTR_TRANS_NODE-255" class="OUTFOX_JTR_TRANS_NODE">api </span> 显示工具提示。
hide() <span id="OUTFOX_JTR_TRANS_NODE-258" class="OUTFOX_JTR_TRANS_NODE">api </span> 隐藏工具提示。
isShown(fully) <span id="OUTFOX_JTR_TRANS_NODE-261" class="OUTFOX_JTR_TRANS_NODE">布尔 </span> 返回 真正的 如果这个工具提示是可见的。 自从1.2.0 你也可以使用一个布尔型参数,保证了 函数返回 真正的 只有当这个工具提示是充分的 可见(在它的最终位置和不透明性)。
getTip() <span id="OUTFOX_JTR_TRANS_NODE-268" class="OUTFOX_JTR_TRANS_NODE">jQuery </span> 返回tooltip作为一个jQuery对象。
getTrigger() <span id="OUTFOX_JTR_TRANS_NODE-271" class="OUTFOX_JTR_TRANS_NODE">jQuery </span> 返回元素作为一个jQuery对象的触发。
getConf() <span id="OUTFOX_JTR_TRANS_NODE-274" class="OUTFOX_JTR_TRANS_NODE">对象 </span> 返回工具提示配置。
內建的效果: fade
內建的效果「漸」有它自己的一組設定選項 如下:
属性 默认值 描述
fadeInSpeed 400 淡入时速度显示工具提示,以毫秒为单位。
fadeoutspeed 200 当工具提示的淡出速度是隐藏着的,以毫秒为单位。

下面有個自訂事件的範例:http://jquerytools.org/demos/tooltip/custom-effect.htm
  tab:傳送門
  tab(幻燈片):傳送門
  tooltip:傳送門
  overlay:傳送門
  dateinput:傳送門
在攜程做著framework2.0,研究的卻是framework4.0,當時是怎麼想的T.T。全是TMD舊技術和堆代碼


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板