web前端|js教程
对话框
web前端-js教程
对此,jquery.boxy插件已经做得非常强大了,常用的提示、确认,拖拽、改变大小、异步加载都非常实用,导致文件较大(可忽略不计),很多功能并不需要,为此,抱着在边学边实践的态度和想法,自制一款适用于本项目的轻量级弹出层插件,这是第一次写jqeury插件,也为了以后能将常用操作封装为jquery插件做准备吧。
activemq源码下载,ubuntu如何放音乐,小说爬虫异常处理,php请求另外的php,头条指数seolzw
首先来个插件名字,这样才能去唬人,就叫jquey.cvbox.min.js吧,cv就是网站域名ChinaValue的缩写,压缩后的容量控制在6K以下。因为还未完成,所以先将思想记录下来。
社团报名网站源码php,vscode手写笔,内核版本ubuntu,强制关闭tomcat脚本,javaapp爬虫,php 函数 异步,商丘seo优化有哪些,网站通知代码,页游模板lzw
1.在页面增加用来显示内容的容器元素,以及弹出层的背景,仅只需要有就可以了,至于说在哪儿出生(也就是显示在页面什么位置)、长成什么样儿,后边会培养(设置),样子自然要由美术指导来打扮了。
2.根据我们的需要,我们事先定义好常用的一些对象,比如说遮罩的背景、弹出层的容器、弹出层的标题栏、弹出层的内容区域、以及当前浏览器窗口的高宽等,有了这些,在后边的使用中就方便多了。
3.开始往容器中塞内容,内容可以是一句提示语(对应提示功能),可以是询问语(对应确认框),可以是一张图片(比如用于小图放大),还可以是一段HTML代码(代替直接在JS中写HTML的不便)。
4.定义用户点击关闭的事件,也就是隐藏或者移除背景层和弹出层,留着给操作完成时调用。
5.设置背景层透明度以及滚动高度,设置弹出层的位置,居中随滚动或者固定不动。
6.最后,为了方便多个场合中使用,提取可变参数,参数要有默认值,使用$.extend搞定。
图片裁剪 上传 源码,大学机房ubuntu,tomcat命令窗口闪退,爬虫路径猜测,阿里大鱼短信教程php,高明seo搜索引擎优化平台lzw
预计将于节后发布测试版,还是未删节的。
在线演示:/js/jquery_cvbox/index.htm
打包下载:/10/yuanma/jquery_cvbox.rar
jquery.cvbox.min.js代码
/*
* JQuery.cvbox.js
*
*
* J.Wang
* blog.socm
*
* .09.30
*/
(function($) {
$.fn.cvbox = function(options) {
var self = $(this);
var defaults = {
titleBarText: "",
titleBarClose: "关闭",
bgClickClose: false,
bgShow: true,
bgOpacity: 0.2,
confirmText: "",
alertText: "",
delayClose: 0,
submitAfter: function() {
$.noop();
}
};
var param = $.extend({}, defaults, options || {});
//弹框的显示
var cvBoxElement =
;
cvBoxElement +=
;
cvBoxElement +=
+ param.titleBarText +
+ param.titleBarClose +
;
cvBoxElement +=
;
cvBoxElement +=
;
if ($("#cvBoxBorder").size()) {
$("#cvBoxBorder").show();
if (param.bgShow) {
$("#cvBoxShade").show();
}
else {
$("#cvBoxShade").hide();
}
}
else {
$("body").append(cvBoxElement);
}
//一些元素对象,浏览器宽高,滚动高度,页面高度
var cbBg = $("#cvBoxShade");
var cbBorder = $("#cvBoxBorder");
var cbTitleBar = $("#cvBoxTitleBar");
var cbBody = $("#cvBoxBody");
var w, h, st, ph;
var cb = {
//装载的内容
content: function() {
var text;
if (param.confirmText != "") {
text = $(
+ param.confirmText +
);
}
else if (param.alertText != "") {
text = $(
+ param.alertText +
);
}
else {
self.show();
text = self;
}
return text;
},
hw: function(obj) {
//获取任意元素的高宽
var hwSize = {};
$(
).appendTo("body").append(obj.clone());
hwSize.w = $("#cbBox").width();
hwSize.h = $("#cbBox").height();
$("#cbBox").remove();
return hwSize;
},
//黑背景的宽高透明度等,弹框的位置
position: function() {
w = $(window).width(), h = $(window).height(), st = $(window).scrollTop(), ph = $(document).height();
cbBg.width(w).height(ph).css("opacity", param.bgOpacity);
//主体内容的位置
var x_size = cb.hw(cb.content());
var xh = x_size.h, xw = x_size.w;
var t = st + (h - xh) / 2, l = (w - xw) / 2;
cbBorder.css({
width: xw,
top: t,
left: l,
zIndex: 9999
});
},
//定位
posfix: function() {
if (window.XMLHttpRequest) {
cbBorder.css("position", "fixed");
} else {
$(window).scroll(function() {
cb.position();
});
}
},
//居中
center: function() {
$(window).resize(function() {
cb.position();
});
},
bgclick: function() {
cbBg.click(function() {
cb.hide();
});
},
bghide: function() {
cbBg.hide();
},
//弹框的隐藏
hide: function() {
if (param.confirmText == "" && param.alertText == "") {
cb.content().hide().appendTo($("body"));
}
//cbBorder.fadeOut(300);
cbBorder.remove();
cbBg.remove();
return false;
},
barhide: function() {
cbTitleBar.hide();
},
show: function() {
if (cbBody.html() == "") {
cbBody.append(cb.content());
}
cb.position();
cb.center();
if (param.titleBarText == "") {
cb.barhide();
}
if (!param.bgShow) {
cb.bghide();
}
if (param.bgClickClose) {
cb.bgclick();
}
if (param.delayClose > 0) {
setTimeout(cb.hide, param.delayClose);
}
}
};
cb.show();
//一些事件的绑定
$("#cvBoxBtnSubmit").bind("click", function() {
if (param.confirmText != ""){
param.submitAfter();
}
cb.hide();
});
$("#cvBoxBtnCancel").bind("click", function() {
cb.hide();
});
$("#cvBoxTitleBarClose").bind("click", function() {
cb.hide();
});
}
})(jQuery);
完整的测试代码
DIV.postCon {
FONT-SIZE: 12px; COLOR: #666666
}
DIV.postBody {
FONT-SIZE: 12px; COLOR: #666666; LINE-HEIGHT: 150%
}
.mySearch {
DISPLAY: none
}
#mainContent {
MARGIN-TOP: 5px; MARGIN-LEFT: 5px
}
#author_profile {
DISPLAY: none
}
.postCon A {
COLOR: #0099ff
}
.postBody A {
COLOR: #0099ff
}
.feedbackCon A {
COLOR: #0099ff
}
#sideBar {
BORDER-RIGHT: #ced7ce 1px solid; BORDER-TOP: #ced7ce 1px solid; MARGIN: 0px 0px 0px 4px; BORDER-LEFT: #ced7ce 1px solid; WIDTH: auto; BORDER-BOTTOM: #ced7ce 1px solid; POSITION: fixed; TOP: 24%
}
.newsItem {
DISPLAY: none
}
#calendar {
DISPLAY: none
}
.catListLink {
DISPLAY: none
}
.catListComment {
DISPLAY: none
}
.catListFeedback {
DISPLAY: none
}
#sideBarMain {
DISPLAY: none
}
#EntryTag {
DISPLAY: none
}
.catListTag {
DISPLAY: none
}
.cvBoxShade {
Z-INDEX: 2000; BACKGROUND: #ccc; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 0px
}
.cvBoxBorder {
BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 8px; BORDER-TOP: #000000 0px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; Z-INDEX: 2000; PADDING-BOTTOM: 8px; BORDER-LEFT: #000000 0px solid; WIDTH: 100%; PADDING-TOP: 8px; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; BACKGROUND-COLOR: #ccc
}
.cvBoxBorder A {
COLOR: #486aaa; TEXT-DECORATION: none
}
.cvBoxBorder A:hover {
COLOR: #c00; TEXT-DECORATION: none
}
.cvBoxTitleBar {
WIDTH: 100%; LINE-HEIGHT: 27px; HEIGHT: 26px; BACKGROUND-COLOR: #eeeeee
}
.cvBoxTitleBarText {
PADDING-LEFT: 10px; FONT-WEIGHT: bold; FLOAT: left; COLOR: #333
}
.cvBoxTitleBarClose {
PADDING-RIGHT: 10px; FLOAT: right; COLOR: #3867af; FONT-FAMILY: Verdana
}
.cvBoxTitleBarClose IMG {
BORDER-TOP-WIDTH: 0px; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 4px 0px 0px; BORDER-RIGHT-WIDTH: 0px
}
.cvBoxBody {
WIDTH: 100%; BACKGROUND-COLOR: #ffffff
}
.cvBoxBodyBtn {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px
}
.cvBoxBodyBtn P {
MARGIN: 20px 0px 0px
}
.cvBoxBtnSubmit {
BORDER-RIGHT: #34538b 1px solid; BORDER-TOP: #34538b 1px solid; BACKGROUND: #486aaa; BORDER-LEFT: #34538b 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: #fff; LINE-HEIGHT: 23px; BORDER-BOTTOM: #34538b 1px solid; HEIGHT: 24px
}
.cvBoxBtnCancel {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #eee; BORDER-LEFT: #ccc 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: #333; LINE-HEIGHT: 23px; BORDER-BOTTOM: #ccc 1px solid; HEIGHT: 24px
}
.cvBoxClear {
CLEAR: both; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 1px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1px; PADDING-TOP: 0px
}
未压缩版本是6K大小,压缩后只有2K大,应该算很轻了。
1.弹出提示框,点击查看效果。
// <![CDATA[
$("#A1").click(function() {
$(this).cvbox({
titleBarText: "弹出提示框",
alertText: "世界上最远的距离不是生与死的距离
而是我在你面前
你却不知道我爸爸是李刚"
});
});
// ]]>
$(this).cvbox({
titleBarText: "弹出提示框",
alertText: "世界上最远的距离不是生与死的距离
而是我在你面前
你却不知道我爸爸是李刚"
});
2.弹出提示框1秒后自动关闭,点击查看效果。
// <![CDATA[
$("#A2").click(function() {
$(this).cvbox({
titleBarText: "弹出提示框1秒后自动关闭",
alertText: "世界上最远的距离不是生与死的距离
而是我在你面前
你却不知道我爸爸是李刚",
delayClose: 1000
});
});
// ]]>
$("#A2").click(function() {
$(this).cvbox({
titleBarText: "弹出提示框1秒后自动关闭",
alertText: "世界上最远的距离不是生与死的距离
而是我在你面前
你却不知道我爸爸是李刚",
delayClose:1000
});
});
3.弹出对话框,点击查看效果。
// <![CDATA[
$("#A3").click(function() {
$(this).cvbox({
titleBarText: "弹出对话框",
confirmText: "世界上最远的距离不是生与死的距离
而是我在你面前
你却不知道我爸爸是李刚你确认你爸是李刚吗?",
submitAfter: HelloLiGang
});
}); function HelloLiGang() {
alert("对您爸爸的敬仰犹如滔滔江水连绵不绝!");
}
// ]]>
$("#A3").click(function() {
$(this).cvbox({
titleBarText: "弹出对话框",
confirmText: "世界上最远的距离不是生与死的距离
而是我在你面前
你却不知道我爸爸是李刚<br
/>
你确认你爸是李刚吗?",
submitAfter:HelloLiGang
});
});
function HelloLiGang(){
alert("对您爸爸的敬仰犹如滔滔江水连绵不绝!");
}
4.载入一段HTML内容,点击查看效果。
通常这段内容的display都设置为hidden,此处只是为了演示该HTML内容是在当前页面,而不是动态write出来的,可查看页面源文
件。
内容可以是任意元素,包括iframe也可以。
// <![CDATA[
$(“#A4”).click(function() {
$(“.A4Demo”).cvbox({
titleBarText: “载入一段HTML内容”
});
});
// ]]>
通常这段内容的display都设置为hidden,此处只是为了演示该HTML内容是在当前页面,而不是动态write出来的,可查看页面源文件。
内容可以是任意元素,包括iframe也可以。
<iframe width="100%" frameborder="0" src="/UploadFile/MiniBlog//10-20/7a09cf13-eeb6-491b-aa63-
18dd67bde0a1_Big.jpg”>
$("#A4").click(function() {
$(".A4Demo").cvbox({
titleBarText: "载入一段HTML内容"
});
});
目前只是很简单的应用,后续增加位置的参数,使对话层不局限于只显示在屏幕中间。
if ($ != jQuery) {
$ = jQuery.noConflict();
}