知問前端——工具提示UI

時間 2019-11-19

標籤前端工具提示简体版

原文原文鏈接

工具提示（tooltip），是一個很是實用的UI。它完全擴展了HTML中的title屬性，讓提示更加豐富，更加可控制，全面提高了用戶體驗。javascript

調用tooltip()方法css

在調用tooltip()方法以前，首先須要針對元素設置相應title屬性。如：html

<input type="text" name="user" class="text" id="user" title="請輸入賬號， 不小於2位！ " />

$('#user').tooltip();

修改tooltip()樣式前端

在彈出的tooltip提示框後，在火狐瀏覽器中打開Firebug或者右擊->查看元素。這樣，咱們能夠看看tooltip的樣式，根據樣式進行修改。java

無須修改ui裏的CSS，直接用style.css替代掉：jquery

/* 工具提示的文本顏色 */
.ui-tooltip {
    color: #666;
}

tooltip()方法的屬性瀏覽器

對話框方法有兩種形式：ide

1.tooltip(options)，options是以對象鍵值對的形式傳參，每一個鍵值對錶示一個選項函數

2.tooltip('action', param)，action是操做對話框方法的字符串，param則是options的某個選項。工具

tooltip外觀選項

屬性	默認值/類型	說明
disabled	false/布爾值	設置爲true，將禁止顯示工具提示
content	無/字符串	設置title內容
items	無/字符串	設置選擇器以限定範圍
tooltipClass	無/字符串	引入class形式的CSS樣式

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知問前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="header">
        <div class="header_main">
            <h1>知問</h1>
            <div class="header_search">
                <input type="text" name="search" class="search" />
            </div>
            <div class="header_button">
                <button id="search_button">查詢</button>
            </div>
            <div class="header_member">
                <a href="###" id="reg_a">註冊</a> | <a href="###" id="login_a">登陸</a>
            </div>
        </div>
    </div>
    
    <div id="reg" title="會員註冊">
        <p>
            <label for="user">帳號：</label>
            <input type="text" name="user" class="text" id="user" title="請輸入帳號，很多於2位！"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="pass">密碼：</label>
            <input type="password" name="pass" class="text" id="pass" title="請輸入密碼，很多於6位！"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="email">郵箱：</label>
            <input type="text" name="email" class="text" id="email" title="請輸入正確的郵箱！"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label>性別：</label>
            <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
            <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
        </p>
        <p>
            <label for="date">生日：</label>
            <input type="text" name="date" readonly="readonly" class="text" id="date"></input>
        </p>
    </div>
</body>
</html>

jQuery代碼：

$("[title]").tooltip({
    disabled:true, //禁止顯示工具提示
    content:"改變title", //設置title內容
    items:"input", //過濾，設置選擇器以限定範圍，我以爲應該至關於$("input[title]").tooltip();
    tooltipClass:"a"
});

class=a的樣式：

.a {
    color: red;
}

tooltip頁面位置選項

屬性	默認值/類型	說明
position	無/對象	使用對象的鍵值對賦值，有兩個屬性：my和at表示座標。my是以目標點左下角爲基準，at以my爲基準

詳細說明my屬性：

再來詳細說明at屬性：

還能夠這樣寫：

$("[title]").tooltip({
    position: {
        my:"left center",
        at:"right+10 center"
    }
});

tooltip視覺選項

屬性	默認值/類型	說明
show	false/布爾值	顯示對話框時，默認採用淡入效果
hide	false/布爾值	關閉對話框時，默認採用淡出效果

jQuery代碼：

$("[title]").tooltip({
    show:false,
    hide:false
});

注意：設置true後，默認爲淡入淡出，若是想使用別的特效，可使用如下表格中的字符串參數。

show和hide可選特效

特效名稱	說明
blind	工具提示從頂部顯示或消失
bounce	工具提示斷斷續續地顯示或消失，垂直運動
clip	工具提示從中心垂直地顯示或消失
slide	工具提示從左邊顯示或消失
drop	工具提示從左邊顯示或消失，有透明度變化
fold	工具提示從左上角顯示或消失
highlight	工具提示顯示或消失，伴隨着透明度和背景色的變化
puff	工具提示從中心開始縮放。顯示時「收縮」，消失時「生長」
scale	工具提示從中心開始縮放。顯示時「生長」，消失時「收縮」
pulsate	工具提示以閃爍形式顯示或消失

tooltip行爲選項

屬性	默認值/類型	說明
track	false/布爾值	設置爲true，能跟隨鼠標移動

jQuery代碼：

$("[title]").tooltip({
    track:true//效果很差，一直在抖動
});

tooltip()方法的事件

除了屬性設置外，tooltip()方法也提供了大量的事件。這些事件能夠給各類不一樣狀態時提供回調函數，這些回調函數中的this值等於對話框內容的div對象，不是整個對話框的 div。

tooltip事件選項

事件名	說明
create	當工具提示被建立時會調用create方法，該方法有兩個參數(event, ui)。此事件中的ui參數爲空
open	當工具提示被顯示時，會調用open方法，該方法有兩個參數(event, ui)。此事件中的ui有一個參數tooltip，返回的是工具提示的jQuery對象
close	當工具提示關閉時，會調用close方法。關閉的工具提示能夠用tooltip('open')從新打開。該方法有兩個參數(event, ui)。此事件中的ui有一個參數tooltip，返回的是工具提示的jQuery對象

在此只關注open()：

$("[title]").tooltip({
    open:function(e,ui) {
    　　alert("打開時觸發！"+ui.tooltip.length);
    }
});

tooltip('action',param)方法

方法	返回值	說明
tooltip('open')	jQuery對象	打開工具提示
tooltip('close')	jQuery對象	關閉工具提示
tooltip('disable')	jQuery對象	禁用工具提示
tooltip('enable')	jQuery對象	啓用工具提示
tooltip('destroy')	jQuery對象	刪除工具提示，直接阻斷了tooltip
tooltip('widget')	jQuery對象	獲取工具提示的jQuery對象
tooltip('option',param)	通常值	獲取options屬性的值
tooltip('option',param,value)	jQuery對象	設置options屬性的值

jQuery代碼：

$("#pass").tooltip("open"); //一開始就打開工具提示

tooltip()中使用on()

在tooltip的事件中，提供了使用on()方法處理的事件方法。

on()方法觸發的對話框事件

特效名稱	說明
tooltipopen	顯示時觸發
tooltipclose	每一次移動時觸發

jQuery代碼：

$("#user").on("tooltipopen",function() {
    alert("打開時觸發！");
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。