欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery學(xué)習筆記(2)--用jquery實現(xiàn)各種模態(tài)提示框代碼及項目構(gòu)架

 更新時間:2013年04月08日 17:41:34   作者:  
想實現(xiàn)一個模態(tài)的框框,找了很多的jquery插件,都沒有碰到自己滿意的于是自己摸索了一個,接下來為大家介紹下實現(xiàn)的思路及代碼,希望對你有所幫助

     好久以來就想實現(xiàn)一個模態(tài)的框框,找了很多的jquery插件,都沒有碰到自己滿意的,這次碰到了一個,但是由于還處于開發(fā)階段吧,連個文檔API都沒有,自己摸索了好長一段時間才搞定。

     先來看看代碼,本人看著源代碼定制了自己想要的效果:

復(fù)制代碼 代碼如下:

<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>JQueryMagicDialog 的基本使用</title>
<link href="./css/default.css"type="text/css" rel="stylesheet">
<link href="./css/default(1).css"type="text/css" rel="stylesheet">
<script type="text/javascript"src="./js/jquery.js"></script>
<script type="text/javascript"src="./js/cn.js"></script>
<script type="text/javascript"src="./js/magicDialog/core.js"></script>
<script type="text/javascript"src="./js/ui.js"></script>
<script type="text/javascript"src="./js/global.js"></script>
<script type="text/javascript"src="./js/magicDialog/dialog.js"></script>
<script type="text/javascript"src="./js/ga.js"></script>
<style type="text/css">
#btn{
position:absolute;
top: 50px;
left: 250px;
}
</style>
<script type="text/javascript">
$(function(){
$('.dlgDemoBtn').click(function(){
var el = $(this), act = el.attr('action');
switch(act){
case 'basic':
$('<div></div>').mac('dialog',{
title: '提示',
model: true,
autoOpen: true,
width: 200,
draggable: true,
el: '<p>你點擊了我!</p>'
});
break;
case 'extended':
mac.opendlg({
title: '提示',
message: '按下 {0} 可關(guān)閉窗口.',
params: ['<b>ESC/Enter</b>'],
buttons: [{
text: '確認',
click: function(d){
d.close();
}
}]
});
break;
case 'wait':
var h = mac.wait('3秒后此窗口自動關(guān)閉');
window.setTimeout(function(){
h.close();
}, 3000);
break;
case 'alert':
mac.alert('Hello!');
break;
case 'confirm':
mac.confirm('<p>你確認嗎?</p>', function(){
alert('You clickedyes!');
}, null);
break;
case 'customize':
mac.confirm('<p>你確認嗎?</p>', null, null, [{
text: '關(guān)閉',
click: function(d){
d.close();
}
},{
text: '確認',
click: function(d){
d.close();
}
}]);
break;
}
});
});
</script>
</head>
<body>
<div id="btn">
<button class="dlgDemoBtn"action="basic">Basic</button>
<button class="dlgDemoBtn"action="extended">Extended</button>
<button class="dlgDemoBtn"action="wait">Spinner</button>
<button class="dlgDemoBtn"action="alert">Alert</button>
<button class="dlgDemoBtn"action="confirm">Confirm</button>
<button class="dlgDemoBtn"action="customize">Customize</button>
</div>
</body>
</html>

     整個項目構(gòu)架如下圖所示:


        其中,css文件夾,images文件夾下放著所需要的css文件與圖片,而js文件夾下放著所需要的js文件,別看這么多,后續(xù)還有很多功能需要這些文件,實現(xiàn)模態(tài)提示框只是其中的一個小功能,即magicDialog文件夾下的文件。

     好了,運行dialogDemo.jsp文件,頁面如下所示:


       貼出幾個效果吧!

       點擊“Basic”:


       點擊“Spinner”:


       點擊“Customize”:


       總體來說,還是挺不錯的一個插件,在IE9與Chrome瀏覽器下測試均沒問題,只不過彈出框在Chrome瀏覽器下支持拖動,在IE9下卻不支持。

       具體源文件請參考官網(wǎng):http://boarsoft.com/cn/,里面有很多其他的例子,后續(xù)本人會一一嘗試下。

       這是本人學(xué)習的結(jié)果,允許轉(zhuǎn)載,歡迎交流,但轉(zhuǎn)載務(wù)必給出本文章的鏈接地址

相關(guān)文章

  • jquery根據(jù)td給相同tr下其他td賦值的實現(xiàn)方法

    jquery根據(jù)td給相同tr下其他td賦值的實現(xiàn)方法

    下面就為大家?guī)硪黄猨query根據(jù)td給相同tr下其他td賦值的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • 基于jquery的用鼠標畫出可移動的div

    基于jquery的用鼠標畫出可移動的div

    這個測試用例的div移動出了點問題,因為是第一次使用jsfiddle網(wǎng)站,所以用的不是很熟悉,還希望高手指點
    2012-09-09
  • jquery+javascript編寫國籍控件

    jquery+javascript編寫國籍控件

    本文給大家分享一個自己編寫的使用jquery+javascript實現(xiàn)的國籍控件,效果非常不錯,這里推薦給大家。
    2015-02-02
  • 基于jquery ajax 用戶無刷新登錄方法詳解

    基于jquery ajax 用戶無刷新登錄方法詳解

    ajax俗稱無刷新登錄或局部刷新登錄,這樣可以提高用戶體驗了,文章講到了關(guān)于基于jquery ajax用法返回數(shù)據(jù)與實例2用戶無刷新登錄
    2012-04-04
  • jQuery Selectors(選擇器)的使用(七、子元素篇)

    jQuery Selectors(選擇器)的使用(七、子元素篇)

    本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實例方式進行講述,以簡單,全面為基礎(chǔ),不會涉及很深,我的學(xué)習方法:先入門,后進階!
    2009-12-12
  • 解決jQuery插件tipswindown與hintbox沖突

    解決jQuery插件tipswindown與hintbox沖突

    先掃下盲:tipswindown是jQuery的彈窗插件,可以使用url或當前頁元素顯示在模擬層中;hintbox是jQuery的類似Google Suggestions插件。
    2010-11-11
  • jQuery手動點擊實現(xiàn)圖片輪播特效

    jQuery手動點擊實現(xiàn)圖片輪播特效

    這篇文章主要為大家詳細介紹了jQuery手動點擊實現(xiàn)圖片輪播特效,手動點擊數(shù)字卡片實現(xiàn)圖片輪播,對圖片輪播感興趣的小伙伴們可以參考一下
    2015-12-12
  • jQuery1.4.2與老版本json格式兼容的解決方法

    jQuery1.4.2與老版本json格式兼容的解決方法

    原來使用jQuery1.3.2編寫的代碼,更換到1.4.2后,使用jQuery.ajax()加載的json文件,不能正常加載。(使用jQuery.getJSON()也一樣)
    2011-02-02
  • jQuery實現(xiàn)簡單評論功能

    jQuery實現(xiàn)簡單評論功能

    這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單評論功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • 七夕情人節(jié)丘比特射箭小游戲

    七夕情人節(jié)丘比特射箭小游戲

    本文給大家分享的是使用javascript實現(xiàn)的七夕情人節(jié)丘比特射箭小游戲的代碼,并附上源碼下載,誰說程序猿就不懂得浪漫呢,小伙伴們感覺拿去獻寶吧(當然了,首先你得有女票才行^_^)
    2015-08-08

最新評論