基於JQuery的messager彈窗元件開發

2021-07-12 06:59:07 字數 1640 閱讀 8695

昨天晚上和今天白天,主要完成了乙個彈窗元件開發,在開發的過程中發現自己的問題和整理思路,將自己的想法通過**實現並最終看到效果,是乙個很享受的過程。在本次實踐中,我學習到了以前沒有注意的小的用法和知識點。當然裡面的一些方法也是得到專案組的大神的指導才豁然開朗的,而且有些方法不熟悉,正好通過這次實踐鞏固一下。

下面我將自己完成的思路和完成過程中學到和用到的知識點總結如下:

我們先看下要求吧!

第一步:先分析要實現的需求。老師說最好是元件化開發,所以就想到了要傳引數設計。想到了需要title,message,icon,fn四個引數。我先構建了基本的html頁面,通過模擬情況實現了需求所要實現的,不過是靜態的,其實時間大部分花在了css樣式上,還好是參考了easyui外掛程式開發,裡面的一些基本樣式得已快速確定,比如顏色搭配之類的。

發現了幾個用法是之前沒用過的。

1、  outline

: medium none;

outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。不過我目前並沒有發現這個屬性的很好的用處。

border-width

: 1px 1px 0px;

border-color

: #dddddd

#95b8e7

#95b8e7;

第二步:實現global.js全域性檔案的編寫,主要是對jq通過.e

xten

d()方

式和.messager={}引入命名空間進行擴充套件。擴充套件了字串拼接方法、元素拖動方法、彈窗函式。

$target.offset();

//獲得當前元素相對於文件偏移的位置,包含left、top兩個屬性。

($target.offset().left)

e.pagex;//獲得滑鼠相對於文件偏移的x方向的位置。
var _offset = $target.offset();

var x = e.pagex - _offset.left,

y = e.pagey - _offset.top,

left, top;

$(document).on('mousemove', function

(e) );

});

這樣設計的原理,其實理解起來就一點,元素是以左上角為偏移位置計算點的,滑鼠是乙個點,直接有偏移位置計算點,移動的過程就相當於把這兩個點連線成的直線根據滑鼠的移動進行平移,元素看成有限個點,作同樣的平移動作,最終就會形成滑鼠移到哪,整個元素就移動要哪的效果。

第三步:實現js.js。通過元素的獲取繫結事件並呼叫擴充套件函式來獲得效果。

//通過元素獲取繫結事件,呼叫擴充套件函式方法,實現效果。

$("#messager-alert a").eq(1).on("click",function

());

總結:通過本次實踐,有了一點元件開發的概念和對一些基礎知識的鞏固。繼續加油,堅持練習,堅持看書。

關於Winform中的訊息框MessageBox

在 windows 窗體應用程式中向使用者提示操作時也是採用訊息框彈出的形式。訊息框是通過 messagebox 類來實現的,在 messagebox 類中僅定義了 show 的多個過載方法,該方法的作用就是彈出乙個訊息框。由於 show 方法是乙個靜態的方法,因此呼叫該方法只需要使用message...

基於jquery的 ajax async使用

預設設定下,所有請求均為非同步請求。如果需要傳送同步請求,請將此選項設定為 false。注意,同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行 預設 true 預設設定下,所有請求均為非同步請求。如果需要傳送同步請求,請將此選項設定為 false。注意,同步請求將鎖住瀏覽器,使用者其它...

基於jQuery的facebox使用

它是什麼?text 僅僅這樣就ok。然後我們在來看 用facebox div text ok,就這樣就能簡單的實現facebox了。當然在ajax橫行的時代,ajax遠端載入頁面也是必不可少的。我們 用facebox載入遠端的頁面內容 text ok,這樣就能遠端載入 cssrain.html 的內...