江大大
江大大

HTML实现遮罩层的方法 HTML中如何使用遮罩层

Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。

实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。

示例代码：

index.html

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html lang="zh-CN">  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta http-equiv="X-UA-Commpatible" content="IE=edge">  
  6. <title>HTML遮罩层title>  
  7. <link rel="stylesheet" href="css/index.css">  
  8. head>  
  9. <body>  
  10.     <div class="header" id="header">  
  11.         <div class="title-outer">  
  12.             <span class="title">  
  13.                 HTML遮罩层使用   
  14.             span>  
  15.         div>  
  16.     div>  
  17.     <div class="body" id="body">  
  18.         <iframe id="iframeRight" name="iframeRight" width="100%" height="100%"  
  19.             scrolling="no" frameborder="0"  
  20.             style="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow: hidden;"  
  21.             onload="rightIFrameLoad(this)" src="body.html">iframe>  
  22.     div>  
  23.        
  24.       
  25.     <div id="overlay" class="overlay">div>  
  26.       
  27.     <div id="loadingTip" class="loading-tip">  
  28.         <img src="images/loading.gif" />  
  29.     div>  
  30.        
  31.       
  32.     <div class="modal" id="modalDiv">div>  
  33.        
  34.     <script type='text/javascript' src="js/jquery-1.10.2.js">script>  
  35.     <script type="text/javascript" src="js/index.js">script>  
  36. body>  
  37. html>  

index.css

CSS Code复制内容到剪贴板
  1. * {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5.   
  6. html, body {   
  7.     width: 100%;   
  8.     height: 100%;   
  9.     font-size: 14px;   
  10. }   
  11.   
  12. div.header {   
  13.     width: 100%;   
  14.     height: 100px;   
  15.     border-bottom: 1px dashed blue;   
  16. }   
  17.   
  18. div.title-outer {   
  19.     position: relative;   
  20.     top: 50%;   
  21.     height: 30px;   
  22. }   
  23. span.title {   
  24.     text-align: left;   
  25.     position: relative;   
  26.     left: 3%;   
  27.     top: -50%;   
  28.     font-size: 22px;   
  29. }   
  30.   
  31. div.body {   
  32.     width: 100%;   
  33. }   
  34. .overlay {   
  35.     position: absolute;   
  36.     top: 0px;   
  37.     left: 0px;   
  38.     z-index: 10001;   
  39.     display:none;   
  40.     filter:alpha(opacity=60);   
  41.     background-color: #777;   
  42.     opacity: 0.5;   
  43.     -moz-opacity: 0.5;   
  44. }   
  45. .loading-tip {   
  46.     z-index: 10002;   
  47.     position: fixed;   
  48.     display:none;   
  49. }   
  50. .loading-tip img {   
  51.     width:100px;   
  52.     height:100px;   
  53. }   
  54.   
  55. .modal {   
  56.     position:absolute;   
  57.     width: 600px;   
  58.     height: 360px;   
  59.     border: 1px solid rgba(0, 0, 0, 0.2);   
  60.     box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);   
  61.     display: none;   
  62.     z-index: 10003;   
  63.     border-radius: 6px;   
  64. }   
  65.   

index.js

JavaScript Code复制内容到剪贴板
  1. function rightIFrameLoad(iframe) {   
  2.     var pHeight = getWindowInnerHeight() - $('#header').height() - 5;   
  3.        
  4.     $('div.body').height(pHeight);   
  5.     console.log(pHeight);   
  6.        
  7. }   
  8.   
  9. // 浏览器兼容 取得浏览器可视区高度  
  10. function getWindowInnerHeight() {   
  11.     var winHeight = window.innerHeight   
  12.             || (document.documentElement && document.documentElement.clientHeight)   
  13.             || (document.body && document.body.clientHeight);   
  14.     return winHeight;   
  15.        
  16. }   
  17.   
  18. // 浏览器兼容 取得浏览器可视区宽度  
  19. function getWindowInnerWidth() {   
  20.     var winWidth = window.innerWidth   
  21.             || (document.documentElement && document.documentElement.clientWidth)   
  22.             || (document.body && document.body.clientWidth);   
  23.     return winWidth;   
  24.        
  25. }   
  26.   
  27. /** 
  28.  * 显示遮罩层  
  29.  */  
  30. function showOverlay() {   
  31.     // 遮罩层宽高分别为页面内容的宽高  
  32.     $('.overlay').css({'height':$(document).height(),'width':$(document).width()});   
  33.     $('.overlay').show();   
  34. }   
  35.   
  36. /**  
  37.  * 显示Loading提示 
  38.  */  
  39. function showLoading() {   
  40.     // 先显示遮罩层  
  41.     showOverlay();   
  42.     // Loading提示窗口居中  
  43.     $("#loadingTip").css('top',   
  44.             (getWindowInnerHeight() - $("#loadingTip").height()) / 2 + 'px');   
  45.     $("#loadingTip").css('left',   
  46.             (getWindowInnerWidth() - $("#loadingTip").width()) / 2 + 'px');   
  47.                
  48.     $("#loadingTip").show();   
  49.     $(document).scroll(function() {   
  50.         return false;   
  51.     });   
  52. }   
  53.   
  54. /**  
  55.  * 隐藏Loading提示 
  56.  */  
  57. function hideLoading() {   
  58.     $('.overlay').hide();   
  59.     $("#loadingTip").hide();   
  60.     $(document).scroll(function() {   
  61.         return true;   
  62.     });   
  63. }   
  64.   
  65. /** 
  66.  * 模拟弹出模态窗口DIV 
  67.  * @param innerHtml 模态窗口HTML内容 
  68.  */  
  69. function showModal(innerHtml) {   
  70.     // 取得显示模拟模态窗口用DIV  
  71.     var dialog = $('#modalDiv');   
  72.        
  73.     // 设置内容  
  74.     dialog.html(innerHtml);   
  75.        
  76.     // 模态窗口DIV窗口居中  
  77.     dialog.css({   
  78.         'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px',   
  79.         'left' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'  
  80.     });   
  81.        
  82.     // 窗口DIV圆角  
  83.     dialog.find('.modal-container').css('border-radius','6px');   
  84.        
  85.     // 模态窗口关闭按钮事件  
  86.     dialog.find('.btn-close').click(function(){   
  87.         closeModal();   
  88.     });   
  89.        
  90.     // 显示遮罩层  
  91.     showOverlay();   
  92.        
  93.     // 显示遮罩层  
  94.     dialog.show();   
  95. }   
  96.   
  97. /** 
  98.  * 模拟关闭模态窗口DIV 
  99.  */  
  100. function closeModal() {   
  101.     $('.overlay').hide();   
  102.     $('#modalDiv').hide();   
  103.     $('#modalDiv').html('');   
  104. }   

body.html

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html lang="zh-CN">  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta http-equiv="X-UA-Commpatible" content="IE=edge">  
  6. <title>body 页面title>  
  7. <style type="text/css">  
  8. * {   
  9.     margin: 0;   
  10.     padding: 0;   
  11. }   
  12.   
  13. html, body {   
  14.     width: 100%;   
  15.     height: 100%;   
  16. }   
  17.   
  18. .outer {   
  19.     width: 200px;   
  20.     height: 120px;   
  21.     position: relative;   
  22.     top: 50%;   
  23.     left: 50%;   
  24. }   
  25.   
  26. .inner {   
  27.     width: 200px;   
  28.     height: 120px;   
  29.     position: relative;   
  30.     top: -50%;   
  31.     left: -50%;   
  32. }   
  33.   
  34. .button {   
  35.     width: 200px;   
  36.     height: 40px;   
  37.     position: relative;   
  38. }   
  39.     
  40. .button#btnShowLoading {   
  41.     top: 0;   
  42. }   
  43.   
  44. .button#btnShowModal {   
  45.     top: 30%;   
  46. }   
  47.   
  48. style>  
  49. <script type="text/javascript">  
  50.        
  51.     function showOverlay() {   
  52.         // 调用父窗口显示遮罩层和Loading提示   
  53.         window.top.window.showLoading();   
  54.   
  55.         // 使用定时器模拟关闭Loading提示   
  56.         setTimeout(function() {   
  57.             window.top.window.hideLoading();   
  58.         }, 3000);   
  59.   
  60.     }   
  61.   
  62.     function showModal() {   
  63.         // 调用父窗口方法模拟弹出模态窗口   
  64.         window.top.showModal($('#modalContent').html());   
  65.     }   
  66.        
  67. script>  
  68. head>  
  69. <body>  
  70.     <div class='outer'>  
  71.         <div class='inner'>  
  72.             <button id='btnShowLoading' class='button' onclick='showOverlay();'>点击弹出遮罩层button>  
  73.             <button id='btnShowModal' class='button' onclick='showModal();'>点击弹出模态窗口button>  
  74.         div>  
  75.     div>  
  76.        
  77.       
  78.     <div id='modalContent' style='display: none;'>  
  79.         <div class='modal-container' style='width: 100%;height: 100%;background-color: white;'>  
  80.             <div style='width: 100%;height: 49px;position: relative;left: 50%;top: 50%;'>  
  81.                 <span style='font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;'>模态窗口1span>  
  82.             div>  
  83.             <button class='btn-close' style='width: 100px; height: 30px; position: absolute; right: 30px; bottom: 20px;'>关闭button>  
  84.         div>  
  85.     div>  
  86.     <script type='text/javascript' src="js/jquery-1.10.2.js">script>  
  87. body>  
  88. html>  
  89.   

运行结果：

初始化

HTML实现遮罩层的方法 HTML中如何使用遮罩层_第1张图片

显示遮罩层和Loading提示

HTML实现遮罩层的方法 HTML中如何使用遮罩层_第2张图片

显示遮罩层和模拟弹出模态窗口

HTML实现遮罩层的方法 HTML中如何使用遮罩层_第3张图片

以上就是本文的全部内容，希望对大家的学习有所帮助。

你可能感兴趣的:(jQuery)

  • 【前端】jQuery数组合并去重方法总结
    在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...
  • 前端面试题——手写实现 ajax 阿水爱踢中锋 ajaxjs前端
    凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据，这样就能在保证良好用户体验的同时，将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯，几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法，如jQuery、zepto、angular等等，这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷，就是我们知道如何去使用封
  • 前端高频面试题深度解析（JavaScript + Vue + jQuery）
    前端高频面试题深度解析（JavaScript+Vue+jQuery）一、JavaScript核心问题解析事件冒泡与捕获机制对比：graphLRA[捕获阶段]-->|Window→父元素|B[目标元素]B-->|子元素→父元素|C[冒泡阶段]阻止方法：//阻止冒泡（常用）event.stopPropagation();//阻止捕获+冒泡+默认行为（慎用）event.stopImmediateProp
  • 构建高效的jQuery地理选择器组件 Kiki-2189
    本文还有配套的精品资源，点击获取简介：本项目展示了如何利用jQuery构建一个在网页中常用的二级和三级城市选择器。这种选择器对于地理位置选择场景尤为重要，例如在线购物和预订服务。组件通过动态DOM操作、JSON数据结构、事件绑定、异步数据加载、插件化、样式美化、响应式设计、性能优化和无障碍访问等技术点，提供了一个高效、易用和适应性强的用户体验。同时，还需注意代码的兼容性、错误处理和全面的测试。1.
  • 爬虫-数据解析 打酱油的； python自动化+爬虫爬虫
    1.解析概述特性re(正则表达式)bs4(BeautifulSoup)xpath(lxml)pyquery本质文本模式匹配HTML/XML解析器(DOM树操作)XML路径语言(节点导航)jQuery式CSS选择器(封装lxml)学习曲线陡峭中等中等简单(熟悉jQuery/CSS)灵活性极高(处理任意文本)高(容错好，DOM操作)高(路径、轴、谓词)高(jQuery语法)可读性差(模式复杂时难懂)好
  • Vue入门 LUO-CHEn Java温馨Talkvue
    vue1、vue概述（1）概念vue.js（读音/vjuː/,类似于view）是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。随着项目业务场景的复杂,传统模式(html+jquery)已无法满足需求,就出现了Angular/React/Vue等框架（2）特点1、Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。2、Vue.JS是优秀的前端Jav
  • 移动端turn.js挖坑总结 进击的金城武
    【1】高版本的jquery会导致turning的过程中page溢出半屏。正确版本：【2】可通过css修改翻书的底部颜色及其透明度，默认为transparent。.flipbook.page{background-color:/*底部色*/}【3】在turn.js的源文件2734行通过修改x,y的值可调整peel的大小与角度。flipMethods._showFoldedPage.call(this
  • web渗透之指纹识别1 合作小小程序员小小店 网络安全物联网网络安全网络攻击模型计算机网络
    web渗透之指纹识别1前端技术：前端中我们需要掌握一些基础html,javascrip,jquery,bootstrap,前端框架vue.js,vue,angular,React等，在前端中可以利用的东西还是很多的，我们可使用xss配合csrf以及一些攻击漏洞进行弹框，获取cookie，劫持，绕过，跳转，跨域，重定向，重放，控制节点，挂暗链接，甚至隐藏我们的请求等。如果要说怎么在识别中使用，我们可
  • java毕业设计图书馆座位预约管理系统维修端源码+lw文档+mybatis+系统+mysql数据库+调试 木林网络 mybatisjava数据库
    java毕业设计图书馆座位预约管理系统维修端源码+lw文档+mybatis+系统+mysql数据库+调试java毕业设计图书馆座位预约管理系统维修端源码+lw文档+mybatis+系统+mysql数据库+调试本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、
  • axios 使用入门
    axios使用入门阅读目录一、前言#二、干货合集#1、加载#2、get&post#3、拦截器#三、总结#一、前言在没有接触React、Angular、Vue这类MVVM的前端框架之前，无法抛弃Jquery的重要理由，除了优秀的前端DOM元素操作性以外，能够非常便捷的发起http请求也占有非常重要的地位。既然我们已经开始使用Vue进行前端开发，抛弃了对页面DOM元素的操作，难道，为了方便的发起htt
  • ssm高校奖助学金管理系统设计实现
    以下是关于SSM高校奖助学金管理系统的技术栈、功能设计、数据库设计及测试设计的详细说明：技术栈后端框架：Spring+SpringMVC+MyBatis（SSM组合），提供IoC、AOP、事务管理和ORM支持。前端技术：Thymeleaf/JSP+Bootstrap+jQuery，实现动态页面和响应式布局。数据库：MySQL8.0，支持事务和高并发访问。安全框架：SpringSecurity，用于
  • jEasyUI 创建自定义视图 沐知全栈开发 开发语言
    jEasyUI创建自定义视图引言jEasyUI是一款流行的jQueryUI扩展库，它提供了丰富的UI组件和交互效果，帮助开发者快速构建美观、响应式的网页应用。在jEasyUI中，创建自定义视图是一个常见的需求，本文将详细介绍如何使用jEasyUI创建自定义视图，包括视图的结构、样式和交互。视图结构在jEasyUI中，一个自定义视图通常由以下几个部分组成：容器：用于承载视图内容的HTML元素，通常是
  • Webpack中使用ProvidePlugin插件全局引入jquery报错 bug_maker1 jquerywebpackjavascript
    报错提示：error'$'isnotdefinedno-undefwebpack.config.js设置：newWebpack.ProvidePlugin({$:'jquery',jQuery:'jquery'})报错原因：eslint错误解决方式：在eslint.js中加入全局设置"globals":{"$":"readonly","jQuery":"readonly"}
  • webpack的ProvidePlugin对比vite写法 前端程序猿i webpack前端javascript
    以jquery为例，用ProvidePlugin进行实例初始化后，jquery就会被自动加载并导入对应的node模块中在webpack中通过ProvidePlugin提前注入相关依赖而不需要在页面中显示引入，在vite中可以使用@rollup/plugin-inject来代替cnpmi@rollup/plugin-inject在vite.config.js里配置constinject=requir
  • 查看npm包某个具体版本及所有版本 大猫会长 前端
    查看该包的所有版本及最新版本npminfojquery查看npmjs服务器上包的版本信息：使用npmviewjqueryversions；这种方式可以查看npm服务器上所有的jquery版本信息；使用npmviewjqueryversion；这种方式只能查看jquery的最新的版本是哪一个；使用npminfojquery；这种方式和第一种类似，也可以查看jquery所有的版本，但是能查出更多的关于
  • jQuery Mobile 事件
    jQueryMobile事件概述jQueryMobile是一个基于jQuery的开源移动设备Web框架，它通过简单的代码和丰富的API，为开发者提供了创建适应各种移动设备的响应式Web应用的解决方案。jQueryMobile事件是其核心功能之一，本文将详细介绍jQueryMobile中常见的事件及其使用方法。常见事件1.点击事件（click）点击事件是jQueryMobile中最常用的交互事件之一
  • 图片上传预处理（剪裁压缩）
    基于bootstrap的fileinput.js上传图片插件，在上传前进行图片的剪裁压缩，对图片大小及宽高不做限制，方便用户上传图片。写入代码前需要引入jquery.js及fileinput.js//初始化fileinput控件（第一次初始化）functioninitFileInput(ctrlName,uploadUrl,initImage,picId){varcontrol=$('#'+ctr
  • java面试题60JQuery选择器 码农颜 java开发语言
    jQuery选择器是jQuery的核心功能之一，它允许你高效、简洁地查找和选取HTML文档中的元素。其语法基于CSS选择器，并进行了扩展，使其更加强大和灵活。使用$()函数（或jQuery()函数）来应用选择器。核心语法$(selector)selector:一个字符串，用于指定要查找哪些元素。主要类型及示例基本选择器(最常用):#id(ID选择器):选取具有指定ID的元素。$("#myEleme
  • jquery mobile和ajax,使用jquery mobile不可忽视的细节
    jQueryMobile是创建移动WEB应用程序的框架。在学习和使用该框架的过程中，有一些心得想要和大家分享一下。一、框架因为是移动端开发，所以不要忘了下面这个重要的meta标签哦：使用jquerymobile要引入相应的css文件：jquerymobile依赖jquery，因此要先引入jquey.js再引入jquery.mobile.js：在引用jquey.js文件的时候一定要注意版本，要在1.
  • jquerymobile跳转方法_jquery mobile 页面跳转方法
    如果使用JavaScript代码切换当前显示的页面，可以调用jQueryMobile中的changePage()方法。该方法可以设置跳转页面的URL地址、跳转时的动画效果和需要携带的数据，接下来通过一个简单的实例详细说明该方法的使用过程。实例2-8使用changePage()方法跳转页面1.功能说明新建一个HTML页面，在页面中显示“页面正在跳转中…”文字，然后调用changePage()方法，从
  • jQuery Mobile 实例 lsx202406 开发语言
    jQueryMobile实例引言jQueryMobile是一个基于jQuery的轻量级移动设备友好的开发框架，旨在创建响应式、跨平台的移动应用程序和网站。它提供了一套丰富的用户界面组件和触摸优化事件，使得开发者能够快速构建出适用于各种移动设备的用户界面。本篇文章将通过一系列实例，展示如何使用jQueryMobile来创建美观、功能丰富的移动界面。实例一：基本页面结构首先，让我们从创建一个基本的jQ
  • 轻量级、无依赖、响应式粒子背景动画库——tsparticles、@tsparticles/engine、@tsparticles/react
    项目简介tsparticles-demo是一个基于React和tsparticles的可视化粒子特效演示项目，旨在为开发者和设计师提供丰富、炫酷的粒子动画效果参考。项目支持多种粒子特效切换，界面美观，交互友好，适合用于网页背景、登录页、展示页等多种场景。无依赖项（*），浏览器直接可用，且兼容React.js、Vue.js（2.x和3.x）、Angular、Svelte、jQuery、Preact、
  • jQuery CSS 类
    jQueryCSS类引言jQuery是一个快速、小型且功能丰富的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax操作。在jQuery中，CSS类的使用是处理样式和美化网页的关键组成部分。本文将深入探讨jQueryCSS类的使用方法，包括如何添加、移除、切换和检查CSS类，以及如何通过CSS类实现动态样式变化。jQueryCSS类的基本概念CSS类是HTML元素的一个
  • 基于nodejs+vue.js服装商店电子商务管理系统
    如果你是一个小白,你不懂得像javaPHP、Python等编程语言，那么Node.js是一个非常好的选择。采用vscode软件开发,配套软件安装.包安装调试部署成功,有视频讲解前端:html+vue+elementui+jQuery、js、css数据库：mysql,Navicatvue框架于Node运行环境的Web框架,随着互联网技术的飞速发展，世界逐渐成了一个地球村，空间的距离也不再是那么重要。
  • Ajax——在OA系统提升性能的局部刷新 1加1等于 javascript实战ajax前端javascript
    本文总结了在OA系统中关于Ajax的原理与使用，以及如何使用其局部刷新提升OA系统的性能体验。本文目录一、Ajax基础概念前后端交互原理全局刷新与局部刷新二、局部刷新实现方式XMLHttpRequestjQuery封装XMLHttpRequest三、XMLHttpRequest重要属性和函数属性函数四、具体使用步骤五、全局刷新创建表单创建表单Servlet处理六、HttpServletRespon
  • 在 Vue 中使用 jQuery-UI 的踩坑记 qmzhna_ vue.jsjqueryui
    在使用leaflet开发的时候，有一个需求要在图层的popup上编辑信息，需要一个AutoComplete的组件。但是popup支持的是htmltemplate，只能通过js拼接HTML标签实现。不得已引入了jquery-ui中的AutoComplete组件来完成，在vue中使用jquery-ui过程中踩了不少坑。安装和引入jQuery和jQueryUI首先，我们需要在项目中安装jQuery和jQ
  • Yii 2 JQuery UI 扩展使用教程 解雁淞
    Yii2JQueryUI扩展使用教程yii2-juiYii2JQueryUIextension.项目地址:https://gitcode.com/gh_mirrors/yi/yii2-jui项目介绍Yii2JQueryUI扩展是一个为Yii框架2.0提供的扩展，它封装了JQueryUI小部件作为Yii小部件，使得在Yii应用程序中使用JQueryUI小部件变得更加方便。这个扩展由yiisoft开发
  • jQuery UI MultiSelect Widget 使用教程 蒙丁啸Sharp
    jQueryUIMultiSelectWidget使用教程jquery-ui-multiselect-widgetjQueryUIMultiSelectwidget项目地址:https://gitcode.com/gh_mirrors/jq/jquery-ui-multiselect-widget1.项目的目录结构及介绍jQueryUIMultiSelectWidget项目的目录结构如下：jque
  • 前端领域：jQuery UI组件的使用指南_副本 大厂前端小白菜 前端开发实战前端jqueryuiai
    前端领域：jQueryUI组件的使用指南关键词：jQueryUI、前端组件、交互效果、用户界面、使用指南摘要：本文旨在为前端开发者提供一份全面的jQueryUI组件使用指南。首先介绍了jQueryUI的背景，包括其目的、适用读者、文档结构和相关术语。接着详细阐述了jQueryUI的核心概念与联系，通过文本示意图和Mermaid流程图展示其架构。然后深入讲解了核心算法原理，并给出具体操作步骤和Pyt
  • jQuery-Json-AJAX-跨域 了解化 jqueryjsonajax
    一、jQuery1.简介用于简化JavaScript代码开发主要作用：对于前端来说，写更少代码、做更多事情2、JQuery入门2.1操作选择器$("p")选取元素。$("p.intro")选取所有class="intro"的元素。$("p#demo")选取所有id="demo"的元素。事件及其事件绑定JavaScript的事件与jQuery事件区别:jQuery事件就是将JavaScript事件名
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他