強大的jquery外掛jqeuryUI做網頁對話方塊效果!簡單

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

我們先來最簡單的,網頁的登入視窗;

不過開始之前,大家先下載jquery的外掛
本人習慣用了vs2008來做網頁了,先新增一個空白頁

這是最簡單的的做法。。。先在body裡面插入

<body>
<div id=”div1″>
<table>
<tr><td>使用者名稱</td><td><input type=”text” style=”width:100px” /></td></tr>
<tr><td>密碼</td><td><input type=”text” style=”width:100px” /></td></tr>
</table>
</div>
</body>

這是時候我們就要把下載的東西解壓好,把其中jquery1.4.2資料夾裡的jquery-1.4.2.js還有jquery-ui-1.8.11.custom資料夾裡的js資料夾的jquery-ui-1.8.11.custom.min.js,把這兩個複製到目錄下

現在我們就來新增引用了,這時候如果是裝了2008的sp1的話,可以直接拖動那兩個js檔案到程式碼head標籤中來,當然也可以手動新增的,看圖:



下一步我們就來用它了,

<script type=”text/javascript”>
        $(function() {
            $(“#div1”).dialog();
        });
    </script>

直接呼叫物件的dialog()方法;好了。。。看看效果吧

不怎麼好看對吧…不要緊張,這時候我們把jquery-ui-1.8.11.custom資料夾裡的css資料夾複製進來,看圖吧。。。

把這個jquery-ui-1.8.11.custom.css,css檔案新增引用

好了。。。在看看效果吧

就是這麼簡單的幾句程式碼。。。
複製程式碼 程式碼如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html
xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<link href=”../css/ui-lightness/jquery-ui-1.8.11.custom.css” rel=”stylesheet” type=”text/css” />
<script src=”jquery-1.4.2.js” type=”text/javascript”></script>
<script src=”jquery-ui-1.8.11.custom.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function() {
$(“#div1”).dialog();
});
</script>
</head>
<body>
<div id=”div1″>
<table>
<tr><td>使用者名稱</td><td><input type=”text” style=”width:100px” /></td></tr>
<tr><td>密碼</td><td><input type=”text” style=”width:100px” /></td></tr>
</table>
</div>
</body>
</html>

大家學習。。。有好的也告訴我哦…..

if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = false;
var cb_blogId = 86333;
var cb_entryId = 2013503;
var cb_blogApp = “huanlinll”;
var cb_blogUserGuid = “b9a74d3f-8b5a-e011-a53f-842b2b196315”;
var cb_entryCreatedDate = ‘2011/4/12 12:17:00’;

您可能感興趣的文章:

jQuery validate artdialog jquery form實現彈出表單思路詳解分享2個jQuery外掛–jquery.fileupload與artdialog用jquery中外掛dialog實現彈框效果例項程式碼jquery外掛之資訊彈出框showInfoDialog(成功/錯誤/警告/通知/背景遮罩)修改jquery裡的dialog對話方塊外掛為框架頁(iframe) 的方法jQuery Dialog 彈出層對話方塊外掛jquery外掛hiAlert實現網頁對話方塊美化學習從實踐開始之jQuery外掛開發 對話方塊外掛開發jBox 2.3基於jquery的最新多功能對話方塊外掛 常見使用問題解答非常強大的 jQuery.AsyncBox 彈出對話方塊外掛基於jQuery的彈出警告對話方塊美化外掛(警告,確認和提示)jQuery對話方塊外掛ArtDialog在雙擊遮罩層時出現關閉現象的解決方法

前端開發 最新文章