• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 自制轻量级仿jQuery.boxy对话框插件代码

自制轻量级仿jQuery.boxy对话框插件代码

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了对话框等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
对此,jquery.boxy插件已经做得非常强大了,常用的提示、确认,拖拽、改变大小、异步加载都非常实用,导致文件较大(可忽略不计),很多功能并不需要,为此,抱着在边学边实践的态度和想法,自制一款适用于本项目的轻量级弹出层插件,这是第一次写jqeury插件,也为了以后能将常用操作封装为jquery插件做准备吧。

首先来个插件名字,这样才能去唬人,就叫jquey.cvbox.min.js吧,cv就是网站域名ChinaValue的缩写,压缩后的容量控制在6K以下。因为还未完成,所以先将思想记录下来。

1.在页面增加用来显示内容的容器元素,以及弹出层的背景,仅只需要有就可以了,至于说在哪儿出生(也就是显示在页面什么位置)、长成什么样儿,后边会培养(设置),样子自然要由美术指导来打扮了。
2.根据我们的需要,我们事先定义好常用的一些对象,比如说遮罩的背景、弹出层的容器、弹出层的标题栏、弹出层的内容区域、以及当前浏览器窗口的高宽等,有了这些,在后边的使用中就方便多了。
3.开始往容器中塞内容,内容可以是一句提示语(对应提示功能),可以是询问语(对应确认框),可以是一张图片(比如用于小图放大),还可以是一段HTML代码(代替直接在JS中写HTML的不便)。
4.定义用户点击关闭的事件,也就是隐藏或者移除背景层和弹出层,留着给操作完成时调用。
5.设置背景层透明度以及滚动高度,设置弹出层的位置,居中随滚动或者固定不动。
6.最后,为了方便多个场合中使用,提取可变参数,参数要有默认值,使用$.extend搞定。

预计将于节后发布测试版,还是未删节的。
在线演示:http://demo.jb51.net/js/jquery_cvbox/index.htm
打包下载:http://xiazai.jb51.net/201010/yuanma/jquery_cvbox.rar
jquery.cvbox.min.js代码
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-08-16jquery 无限极下拉菜单的简单实例(精简浓缩版)
  • 2017-08-16JQuery Tips(3) 关于$()包装集内元素的改变
  • 2017-08-16jQuery 1.7.2中getAll方法的疑惑分析
  • 2017-08-16jquery实现居中弹出层代码
  • 2017-08-16JQuery 设置checkbox值二次无效的解决方法
  • 2017-08-16jquery ui resize 中border-box的bug修正
  • 2017-08-16jquery查找父元素、子元素(个人经验总结)
  • 2017-08-16JQuery 学习笔记 选择器之二
  • 2017-08-16jQuery制作简单柱状图实例
  • 2017-08-16用JQuery 判断某个属性是否存在hasAttr的解决方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery实现多行文字图片滚动效果示例代码
    • jQuery使用$.ajax进行即时验证实例详解
    • Jquery ajax加载等待执行结束再继续执行下面代码操作
    • jQuery实现根据滚动条位置加载相应内容功能
    • 玩转jQuery按钮 请告诉我你最喜欢哪些?
    • jQuery实现手机号码输入提示功能实例
    • jQuery结合CSS制作漂亮的select下拉菜单
    • Jquery Post处理后不进入回调的原因及解决方法
    • jQuery 获取URL的GET参数值的小例子
    • 基于jQuery的checkbox全选问题分析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有