一種拖拉式管理頁面按鈕和消息的組件系統的製作方法

2023-10-23 16:04:28 2

1.本發明涉及計算機領域，尤其涉及一種拖拉式管理頁面按鈕和消息的組件系統。


背景技術：

2.在web軟體項目中，按鈕是必不可少的控制項。現有的web軟體中按鈕都是處於固定位置，如圖1所示。用戶無法根據自己的喜好進行按鈕位置的調整，也無法根據自己的性格習慣便捷地操作按鈕。同時，按鈕的展現形式單調，不具有科技感，按鈕無法根據用戶習慣進行展現、隱藏，並且一直佔用頁面的一部分空間無法釋放。
3.在web軟體項目中，用戶與系統進行交互，系統經常需要發出一些消息提醒用戶操作，例如「用戶名或密碼錯誤」等，此類消息提醒一般分為固定區域提醒和頁面上層提醒，固定區域提醒佔用頁面空間，頁面上層提醒友好程度較低，有時會阻擋頁面下方的信息或按鈕，這會導致被遮擋的按鈕功能無法使用，同樣依據現有技術很難實現提示信息與移動組件兩者之間建立綁定關係。
4.ios、安卓、鴻蒙作業系統的懸浮球(或懸浮窗)對按鈕進行了集中，但懸浮球主要集中了系統功能，並且懸浮球打開時，每個頁面上的懸浮球的內容不變。下面以手機作業系統的微信視頻通話為例介紹懸浮球的工作原理。在視頻通話時，打開其他應用或點擊home鍵退出時或點擊縮放圖標，懸浮窗會顯示在其他應用之上，給人的假象是通話頁面變小了，點擊懸浮窗回到通話頁面，懸浮窗消失。退出通話頁面懸浮窗消失。懸浮球採用的技術實現方案是：
5.(1)懸浮窗顯示在其他應用或launchers之上，懸浮窗的顯示需要懸浮窗權限，而懸浮窗權限屬於特殊權限，所以只能通過引導用戶去打開，無法像危險權限那樣直接申請。可以做到後臺顯示則說明懸浮窗是一個服務。
6.(2)通話頁面隱藏時懸浮窗顯示，通話頁面顯示時懸浮窗隱藏，可以看出懸浮窗和安卓的activity組件的生命周期相關聯，所以懸浮窗的服務和通話頁面的activity是通過bind去綁定的。
7.3.既然服務和activity組件是通過bind去綁定的，說明當懸浮窗顯示的時候，通話activity組件雖然不可見但仍在運行。
8.在現有技術中已有懸浮球操作的實現方案中，應用於移動端的技術較為成熟。在移動終端上，懸浮球操作可以在屏幕上單獨形成一個操作菜單系列，以便把一些快捷的操作功能設置在其中。但懸浮球技術方案是針對於整個作業系統統一配置一套快捷圖標，而不是針對於單頁功能頁面去逐個配置個性化功能菜單按鈕。


技術實現要素：

9.本發明提供基於web應用技術實現web按鈕、消息提醒管理，按鈕可拖動可收縮，不固定在web應用的某一處，操作便捷，交互友好性高，消息提醒位置可變，解決了傳統消息佔用頁面空間或遮擋下層信息的問題。
10.本發明提供的拖拉式管理頁面按鈕和消息的組件系統，包括：監聽模塊、組件頁面樣式模塊、組件動態拖動模塊、組件按鈕展開收縮模塊和消息提醒模塊，其中，
11.監聽模塊，用於監聽滑鼠點擊、懸浮和移動信息、系統提示信息和/或頁面提示信息，並將所述信息傳遞給組件頁面樣式模塊、組件動態拖動模塊、組件按鈕展開收縮模塊和/或消息提醒模塊；
12.組件頁面樣式模塊，用於設置中心圖像和按鈕的圖標、樣式、布局、畫面效果、坐標相對量以及按鈕的功能實現；
13.組件動態拖動模塊，用於接收監聽模塊傳送的滑鼠點擊和移動信息，在滑鼠點擊組件後頁面移動時組件跟隨滑鼠進行移動；
14.組件按鈕展開收縮模塊，用於接收監聽模塊發送的滑鼠的懸停、離開和雙擊信息，以顯示組件的重疊或展開狀態；
15.消息提醒模塊，用於接收系統或應用程式發出的提醒消息和監聽模塊發送的滑鼠懸停或離開信息，以顯示和隱藏所述系統提醒消息。
16.進一步地，所述監聽模塊，通過html、jquery、css實現監聽功能。
17.進一步地，組件頁面樣式模塊包括組件框架單元、顏色效果渲染單元、動作效果單元，其中，
18.組件框架單元，用於定義每個頁面組件的中心圖像和按鈕，包括中心圖像的圖標、圖標的大小、按鈕的名稱、按鈕的圖標、坐標相對量以及按鈕的功能實現；
19.顏色效果渲染單元，用於實現組件圖形的大小、顏色樣式和布局；
20.動作效果單元，用於接收所述組件按鈕展開收縮模塊發送的按鈕展開、收起信息，以在按鈕展開、收起時播放動畫。
21.進一步地，組件內按鈕的數量為0～6個。
22.進一步地，所述坐標相對量為按鈕坐標相對於中心圖像的角度和長度。
23.進一步地，在組件按鈕展開收起模塊中，當接收到css組件發送的滑鼠懸浮組件上信息時，呈現組件的展開狀態，方法包括：獲取中心圖像的坐標，根據中心圖像的坐標和坐標相對量修改各個按鈕的展開坐標，根據坐標顯示中心圖像和各個按鈕。
24.進一步地，在組件按鈕展開收起模塊中，當接收到css組件發送的滑鼠離開組件上信息時，呈現組件的重疊狀態，方法包括：將按鈕的展開坐標設定為中心圖像的坐標，並只顯示中心圖像。
25.進一步地，在組件按鈕展開收起模塊中，如果接收到監聽模塊發送的滑鼠雙擊事件信息，對按鈕的坐標進行修改顯示組件的展開或重疊狀態。
26.進一步地，在消息提醒模塊中，如果接收到監聽模塊發送的提示消息和滑鼠懸浮事件信息，則將提示消息顯示在中心圖像上方；如果接收到監聽模塊發送的滑鼠懸浮中心圖像事件，則隱藏提醒消息；如果接收到監聽模塊發送的滑鼠移動到中心圖像區域並被按下和移動時，提示消息會隨中心圖像按照滑鼠的移動軌跡同步移動。
27.進一步地，在消息提醒模塊中，在需要提示消息時，將所述組件設定為jqueryeasuui的tooltips載體，從而實現提示信息隨所述組件的移動而移動。
28.本發明的有益效果包括：
29.(1)實現對頁面按鈕的自定義，既簡化了頁面，又提高了用戶使用滿意度；
30.(2)管理按鈕的展示與隱藏形態，管理消息提醒的位置和顯示、隱藏形態，提高頁面利用率和智能化效果。
31.(3)消息顯示隨著組件的移動而移動，避免了被遮擋的按鈕功能無法使用的問題。
附圖說明
32.圖1為現有界面按鈕示意圖；
33.圖2為本發明一個實施例的組件結構示意圖；
34.圖3為本發明一個實施例的組件初始狀態示意圖；
35.圖4為本發明一個實施例的組件展開狀態示意圖；
36.圖5為本發明一個實施例的系統信息提示示意圖；
37.圖6為本發明一個實施例的設置按鈕的代碼示意圖。
具體實施方式
38.為使本發明實施案例的目的、技術方案和優點更加清楚，下面將結合本發明實施案例中的附圖，對本發明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅是本發明一部分實施例，而不是全部的實施例。基於本發明中的實施例，本領域普通技術人員在沒有做出創造性勞動前提下所獲得的所有其他實施例，都屬於本發明保護的範圍。
39.本發明提供了一種拖拉式管理頁面按鈕和消息的組件系統，如圖2所示，包括監聽模塊、組件頁面樣式模塊、組件動態拖動模塊、組件按鈕展開收縮模塊、消息提醒模塊。
40.監聽模塊，用於監聽滑鼠點擊、懸浮和移動信息、系統提示信息以及頁面提示信息，滑鼠信息包括滑鼠的動作和位置信息，並將信息傳遞給組件頁面樣式模塊、組件動態拖動模塊、組件按鈕展開收縮模塊和/或消息提醒模塊。提示信息為系統提示信息或當前頁面的應用程式給出的信息，比如用戶名、密碼不正確。因為每個頁面都會定義一個組件，因此可以根據頁面信息，來明確當前頁面所用的組件。
41.組件頁面樣式模塊，利用html超文本標記語言實現對組件的定義，利用css3.0實現組件包括的中心圖像和按鈕等的圖形的輪廓、顏色樣式、布局和畫面效果。
42.組件動態拖動模塊，可以利用javascript定義一個可移動的範圍，當收到監聽模塊發送的滑鼠移動的位置，實時設置組件的位置與滑鼠的位置相同，當收到滑鼠抬起信息時顯示組件。如果組件為展開狀態，則顯示展開狀態的組件，如果組件為重疊狀態，則顯示重疊狀態的組件。
43.組件按鈕展開收縮模塊，當接收到監聽模塊發送的滑鼠懸停到組件區域內信息時，可以將組件由重疊狀態更新為展開狀態，當收到滑鼠移開組件信息時，將組件由展開狀態收縮恢復至重疊狀態。這可以利用css3.0對組件按鈕樣式進行變更。
44.消息提醒模塊，利用jqueryeasyui的tooltips組件實現消息的提醒，將消息提醒內容的坐標設置為組件的中心圖像的坐標，消息提醒的位置就會跟著中心圖像的位置發生變動；利用jquery監聽滑鼠的懸停事件，當滑鼠懸停到組件中心圖像位置時，操作jqueryeasyui的tooltips隱藏提示信息。
45.在監聽模塊中，可以利用html、jquery、css實現對滑鼠和系統消息的監聽，例如，
可以利用html中《a》標籤的onclick和ondblclick實現對滑鼠單擊事件和雙擊事件的監聽；利用jquery技術監聽滑鼠事件，分別對按下(左鍵或者右鍵)、抬起事件進行監聽；利用css3.0的hover監聽滑鼠的懸停、離開事件。
46.組件頁面樣式模塊包括組件框架單元、顏色效果渲染單元和動作效果單元。
47.其中，組件框架單元，用於設置每個頁面組件的中心圖像和按鈕，包括中心圖像的圖標、圖標的大小、按鈕的名稱、按鈕的圖標、坐標相對量以及按鈕的功能。開發人員可對組件內的按鈕可進行增減，優選的每個組件內按鈕的數量為0～6個，如圖6所示，一個《a》標籤為一個按鈕。中心圖像即組件收縮後的圖像，代表組件。初始化時，中心圖像和各按鈕的坐標相同，組件收縮時，只顯示中心圖像，也稱為重疊狀態(如圖3所示)，展開時，顯示中心圖像和各按鈕，也稱為展開狀態(如圖4所示)。
48.按鈕的功能可以通過javascript定義函數來實現，比如圖1中的手工勾兌、拖入勾兌等。當組件框架單元接收到監聽模塊發送的滑鼠對按鈕單擊事件信息時，調用既定好的函數即可實現相應的功能。
49.相對量可以根據頁面的顯示比例進行預先設定，以實現美觀、小巧、並不影響用戶觀看頁面其他位置的目的。例如，可以設定中心圖像的x軸正向為零度，順時針方向依次展開按鈕的位置與中心圖像的x軸夾角為：30度、90度、150度、210度、270度、330度，長度為2～4個單位長度等。
50.上述內容可以利用html超文本標記語言實現。
51.顏色效果渲染單元，用於實現組件圖形的大小、顏色樣式和布局，可以利用css3.0實現。顏色樣式包括三部分，第一部分為組件的樣式；第二部分為中心圖像的樣式；第三部分為按鈕的樣式；按鈕的樣式提供了四種顏色的定義，可進行增加或刪減。
52.動作效果單元，用於實現按鈕的展開、收起動作效果。具體來說，當動作效果單元接收到監聽模塊發送的滑鼠懸浮事件後展示組件打開的動畫(即組件由重疊狀態變為展開狀態)；當接收到監聽模塊傳來的頁面初始化時展示組件出現的動畫效果。動畫效果的設置可以利用css3.0實現。
53.組件動態拖動模塊，用於接收監聽模塊傳送的滑鼠按下、抬起和移動事件，並將組件的顯示位置設定為滑鼠的位置，以此來實現組件可拖動。優選的，在本模塊中，可以定義組件的移動範圍，滑鼠坐標的值不能超過該設定的範圍。本模塊可以利用jquery和javascript實現。
54.組件按鈕展開收起模塊，用於按鈕的展開、收起。具體來說，本模塊收到監聽模塊發送的滑鼠懸浮到組件信息，根據中心圖像的坐標和坐標相對量修改按鈕的展開坐標並顯示，以將按鈕相對中心圖像進行展開(即展開狀態)；本模塊接收到監聽模塊傳送的滑鼠移開信息或頁面轉換信息時，按鈕的展開坐標設定為中心圖像的坐標，並只顯示中心圖像，從而實現按鈕的收縮，即組件變為初始化狀態(即重疊狀態)；在本模塊中，還可以接收監聽模塊發送的滑鼠雙擊事件信息，對按鈕的坐標進行修改實現展開或收縮，即按鈕展開時，設置按鈕為中心圖像坐標，只顯示中心圖像；按鈕收縮時，即按鈕坐標和中心圖像坐標相同，則根據預先設定的相對量設置按鈕坐標並在相應坐標位置顯示按鈕和中心圖像。
55.在組件按鈕展開收起模塊中，當接收到css組件發送的滑鼠懸浮組件上的信息時，呈現組件的展開狀態，方法包括：獲取中心圖像的坐標，根據中心圖像的坐標和坐標相對量
修改各個按鈕的展開坐標，根據坐標顯示中心圖像和各個按鈕。
56.在組件按鈕展開收起模塊中，當接收到css組件發送的滑鼠離開組件上的信息時，呈現組件的重疊狀態，方法包括：將按鈕的展開坐標設定為中心圖像的坐標，並只顯示中心圖像。
57.在一個實施例中，可以使用css的hover事件監聽滑鼠的懸浮時間，當滑鼠懸浮到組件區域時，觸發hover事件，通過對hover事件自定義，修改按鈕的坐標並顯示，當hover監聽到滑鼠移開組件時修改按鈕的坐標並隱藏。
58.組件按鈕展開收起模塊，可以利用jquery和css3.0實現，利用jquery監聽滑鼠的雙擊事件，當滑鼠對組件進行雙擊時，自定義雙擊觸發事件，修改按鈕的坐標並顯示/隱藏。
59.消息提醒模塊，用於接收監聽模塊發送的系統提示消息和滑鼠懸浮事件，然後將系統提示消息顯示在中心圖像上方(如圖5所示)；當接收到監聽模塊發送的滑鼠懸浮中心圖像事件時，提醒消息隱藏；如果接收到監聽模塊發送的滑鼠移動到中心圖像區域並被按下和移動組件時，系統提示消息會隨中心圖像按照滑鼠的移動軌跡同步移動。
60.在一個實施例中，可以利用jqueryeasyui的tooltips實現消息提醒，在需要提示消息時，將本組件設定為jqueryeasuui的tooltips載體，設定消息的顯示層級、顏色等樣式，由於本組件可以在頁面範圍內移動，所以提示信息也可以隨組件的位置而移動，從而實現消息提醒可移動化。
61.最後應說明的是，以上實施例僅用以描述本發明的技術方案而不是對本技術方法進行限制，本發明在應用上可以延伸為其他的修改、變化、應用和實施例，並且因此認為所有這樣的修改、變化、應用、實施例都在本發明的精神和教導範圍內。