EasyUI效果 彈出頁面效果

2021-06-28 20:58:27 字數 3138 閱讀 5737

easyui

效果--

右擊選單

》,接下來寫一下彈出頁面效果。這個效果就是,我寫乙個正常的頁面,然後在另乙個頁面寫上事件,將這個頁面整個作為彈出頁面進行彈出

.這個做的原因是

,這個正常的頁面即可以作為正常頁面存在

,也可以通過方法彈出顯示

,而不用跳轉過去

,算是方便檢視吧.首先

,setstudentno

.jsp

頁面上有乙個檢視學生資訊的鏈結

,可以彈出

studentnolist.jsp頁面,

該頁面顯示的是學生基本資訊

.其中鏈結的**如下

,

檢視學生資訊

在queryallstudentno

()方法中,呼叫

showmywindow方法,

控制視窗大小

,並控制跳轉到哪個頁面

.

function queryallstudentno() /list?page=1&rows=10',

800, 540);

}

其中showmywindow

方法的彈出框**是這樣的

.在頁面載入時,在

body

中新增乙個叫

mywindow

的div,然後

showmywindows

就是在這個

div的位置上

,顯示彈出框(視窗

).在easyui

的window視窗(

中,對下面的**可以充分了解

.

$(function() );

function showmywindow(title, href, width, height, modal, minimizable,

maximizable) );

}

$('#mywindow').window(

)可以建立視窗

,其中屬性標題必須有

,長寬沒有就預設為

600和

400,content

內容的話

,用帶滾動條的

iframe顯示,

顯示的url

在src

中設定.

預設是模態視窗

,預設不顯示最大化和最小化按鈕,還有

shadow

不會顯示陰影

,不快取

,closed

不關閉視窗

(若設定為

true,

由於關閉視窗

,所以視窗是打不開的

),collapsible

不顯示摺疊按鈕

,不能修改大小

,以及設定載入時的資訊

其中基本都在這裡能夠看到,但是

content

和loadingmessage

屬性是在哪的

?在面板中

,圖中最上面的那就話就能說明了

,window

是擴充套件自$.fn.panel.defaults,而

dialog

是擴充套件自

$.fn.window.defaults.

到現在為止

,彈出窗彈出

,那麼在

content

中顯示的內容是什麼?在

url=

'$/list?page=1&rows=10'

,是如何顯示到

jsp頁面?在

controller中,

接收到分發的

list請求,

而該請求會返回

"/studentnolist"

字串.

/**

* 學生資訊列表 lyl 2023年2月4日09:36:47

* * @return 檢視所有學生資訊列表

*/public string liststudent()

然後在spring

-mvc.xml

的配置檔案的作用下,新增上字首和字尾

,拼湊為

/web-inf/jsp/studentnolist

.jsp.

對於viewresolver

,這個文章給了詳細的說明,springmvc框架入門。對於

spring mvc

的框架,給了一幅圖

,圖中說明了,所有的使用者請求,經過前端控制器的分發,分發到控制器

contoller

來進行處理,處理完畢之後,回到前端控制器,然後再經過檢視模板修飾一下,再顯示給使用者。其中選擇什麼樣的檢視需要

viewresolver(

視**析器

)來控制

,不在配置檔案中配置

,就預設為

internalresourceviewresolver

,這個很適合顯示

jsp和

html頁面,

它會建立乙個

jstlview

,並且把任務委託給

servlet

內部的requestdispatcher

去呈現資源

,可以將邏輯檢視名字解析為乙個路徑,最後

servlet

將回應通過制定的

jsp呈現給使用者

最後,就看到乙個彈出框上顯示了乙個頁面的資訊

.以上就是我做的彈出頁面效果

,很簡單

,就是用了視窗的

.window()

來建立彈出框

,並設定了一些屬性

.了解了

panel

,window

和dialog

的繼承關係

,以及對

iframe

的簡單設定

.

彈出層效果和彈出框拖動效果

目前能夠簡單實現彈出層的框架實在是多,但個人還是覺得原生js 實現比較具有根本性。原始碼。js 總體分為三個部分 獲取節點並新增點選事件 建立彈出層節點並設定樣式 新增滑鼠移動事件。重點是後面兩個部分。html css 首先還是附上html和css 樣式寫的有些複雜,純屬個人強迫症犯了。需要注意的就...

EasyUI介面載入等待效果

使用easyui tab頁面,載入頁面的時候 可能會渲染很慢,體驗不是很好,加乙個簡單的等待效果吧。使用此指令碼需要先引入easyui.js基礎指令碼。var maskwidth window width var maskheight window height var maskhtml maskh...

jquery效果 視窗彈出案例

效果 基本效果 show hide toggle 滑動 slidedown slideup slidetoggle 劃上 p slideup slow 劃下 p slidedown slow p slidetoggle slow 用600毫秒緩慢的將段落滑上或滑下 淡入淡出 fadein fadeo...