jQuery EasyUI使用教程之建立簡單窗口

jQuery EasyUI最新試用版下載請猛戳>>

建立一個窗口很是簡單，咱們建立一個 DIV 標記：

< div id = "win" class = "easyui-window" title = "My Window" style = "width:300px;height:100px;padding:5px;" >

Some Content.

</ div >

如今運行測試頁面，您會看見一個窗口顯示在您的屏幕上。咱們不須要寫任何的javascript代碼。

若是您但願建立一個隱藏的窗口，記得將 'closed' 屬性設置爲 'true' 值，您能夠調用 'open' 方法來打開窗口：

< div id = "win" class = "easyui-window" title = "My Window" closed = "true" style = "width:300px;height:100px;padding:5px;" >

Some Content.

</ div >

$('#win').window('open');

做爲最後的實例演示，咱們建立一個登陸窗口：

< div id = "win" class = "easyui-window" title = "Login" style = "width:300px;height:180px;" >

< form style = "padding:10px 20px 10px 40px;" >

< p >Name: < input type = "text" ></ p >

< p >Pass: < input type = "password" ></ p >

< div style = "padding:5px;text-align:center;" >

< a href = "#" class = "easyui-linkbutton" icon = "icon-ok" >Ok</ a >

< a href = "#" class = "easyui-linkbutton" icon = "icon-cancel" >Cancel</ a >

</ div >

</ form >

</ div >

下載EasyUI示例：easyui-window-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的教程>>