用jQuery UI做简单九宫格拼图

最近在搞一个很复杂的页面，搞得脑子有点疲劳。。。抽空把前段时间用jQuery UI写的一个非常简单的九宫格拼图重新分析一下，转换一下心情。

Github URL: https://github.com/JennieJi/jquery-jigsaw

jQuery UI提供了许多非常有用的工具，如draggable、droppable等。这可以让我们用很少的代码实现复杂的功能，并且做到多浏览器兼容。

这个九宫格拼图根据需求的不同，我做了两个版本。由于两个版本的JS代码变化还是比较大的，所以我准备分开来讲。先讲最初也是最简单的版本。一步步来。

  1. 首先建好HTML文件，把你的9张切割好的图片都扔进去： 
    <!doctype>

<html>

<head>

     

    </head>

<body>

<div id="jigsaw">

	<img src="images/puzzle_r1_c1.gif" width="150" height="100" alt="Puzzle Piece"/>

	<img src="images/puzzle_r1_c2.gif" width="150" height="100" alt="Puzzle Piece"/>

	<img src="images/puzzle_r1_c3.gif" width="150" height="100" alt="Puzzle Piece"/>

	<img src="images/puzzle_r2_c1.gif" width="150" height="100" alt="Puzzle Piece"/>

	<img src="images/puzzle_r2_c2.gif" width="150" height="100" alt="Puzzle Piece"/>

	<img src="images/puzzle_r2_c3.gif" width="150" height="100" alt="Puzzle Piece"/>

	<img src="images/puzzle_r3_c1.gif" width="150" height="100" alt="Puzzle Piece"/>

	<img src="images/puzzle_r3_c2.gif" width="150" height="100" alt="Puzzle Piece"/>

	<img src="images/puzzle_r3_c3.gif" width="150" height="100" alt="Puzzle Piece"/>

</div>

<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="scripts/jquery-ui-1.8.21.custom.min.js"></script>

<script type="text/javascript" src="scripts/jigsaw.js"></script>

</body>

</html>
    注意：图片插入顺序需要为正确顺序。稍后会用JS来打乱图片的顺序。
  2. 加上CSS使图片呈九宫格分布： 
    #jigsaw{float:left;width:450px;}

#jigsaw IMG{float:left;width:150px;height:100px;}
  3. 开始编写我的jigsaw.js。首先记录一下我们经常需要用到的量： 
    var jigsaw = $('#jigsaw'),

    imgs = jigsaw.find("IMG");

var col = 3,

    row = 3,

   match = col * row,

   width = imgs.width(),

   height = imgs.height(),

   order =  new Array();
  4. 接着，做一些准备工作。在这里，我为了便于判断图片的顺序，将正确的顺序写入图片的ID中。 
    imgs.each(function(i){

	$(this).attr('id','jigsaw' + i);

	$(this).addClass("ready");

});
    然后，打乱图片的顺序。
    这里用到了上面一段代码中，给图片加的"ready"类。
    思路是：在有"ready"这个class的图片中，随机选择一张图片，按从左到右、从上到下的顺序依次插入九宫格的相应位置，然后去掉它的"ready"类，直至9张图片位置都调整完成，match这个变量减为0。同时，在图片下面插入9个用于吸附图片的DIV。 
    for( match; match>0; match-- ){

	$("<div/>").appendTo(jigsaw);

	var now = col * row - match,

		nowCol = now % col,

		nowRow = parseInt( now / col );

	var selectImg = imgs.filter(".ready").eq( parseInt( Math.random() * 10 ) % match );

	selectImg.css({

		'left': nowCol * width,

		'top': nowRow * height

	});

	selectImg.removeClass("ready");

	order[now] =  selectImg.attr('id').replace(/jigsaw/i,"");

}
    如上，我用imgs.filter(".ready")先选出带有"ready"这个类的图片，然后用随机数选出第parseInt(Math.random()*10)%match张图片，将图片放到相应位置。
    改变位置后，我将目前的位置顺序记录到数组order中。
    做这步之后，还要将CSS做一些改动。如下： 
    #jigsaw{float:left; width:450px; margin:103px 0 0 150px; position:relative; z-index:1;}

#jigsaw DIV{float:left; width:150px; height:100px; padding:0;}

#jigsaw IMG{float:left; width:150px; height:100px; font-size:3em; color:#fff; background:#ccc; position:absolute; z-index:2;}
  5. 接下来就要用神奇的jQuery UI来实现图片的拖放功能了。
    思路：图片拖到对应位置附近，就会被“吸附”进对应的DIV中，并且不能再被拖动。 
    $('DIV', jigsaw).each( function(i){

	var obj = $( "#jigsaw" + order[i] );

	if( obj.attr('id') == 'jigsaw' + i ){

		match++;

		obj.appendTo( $(this) ).addClass("dropped");

	}

	else{

		obj.draggable();

		$(this).droppable({

			drop:function( event, ui ){

				if( ui.draggable.attr('id')== 'jigsaw' + i ){

					ui.draggable.appendTo($(this)).addClass("dropped");

					match++;

					ui.draggable.draggable("disable");

					$(this).droppable("disable");

					if( match == 9 ){alert("Match!");}

				}

			}

		});

	}

});
    如上，首先按排列顺序检查每张图片，是否正好分布在对应的位置。如果已经在对应的位置，则将它挪入对应的DIV中，给它一个class为"dropped"，match数加1。
    dropped的CSS： 
    #jigsaw IMG.dropped{ position:static !important;}
    将图片插入对应的div中后，需要将position属性更改为static，则图片会自动与DIV对齐。如果图片没有在对应位置，使用jQuery UI的Draggable方法使图片可以被拖动，并且使用Droppable方法使对应的DIV可以吸附图片。
    在DIV吸附图片的时候判断这张图片是不是被吸附在对应的DIV上，是的话给它加上"dropped"类，match数加1，并且禁掉这个DIV的可吸附性。
    当match为9的时候，即为9张图片都已经拖到对应位置，给出已经拼图完成的提示就大功告成啦！

另外一个版本比这个稍微高级一点。图片拖对位置之后，还可以重新被拖出去。虽说是在这个版本的基础上改的，但是基本上面目全非了T-T。

你可能感兴趣的:(jQuery UI)

  • 北本海硕腾讯二面没过，该如何准备才能再战大厂？ 程序员yt 面试
    今天给大家分享的是一位粉丝的提问，北本海硕腾讯二面没过，该如何准备才能再战大厂？接下来把粉丝的具体提问和我的回复分享给大家，希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问：bg北本海硕两段大厂实习，感觉自己bg其实不错但问题是实习干的都是些crud当时也没意识记录一些更深刻的技术或者架构上的问题，八股又欠背(大致看完了小林codinga和csguilde的c++指北但实际中延伸出来的问题太
  • 工程化与框架系列（32）--前端测试实践指南 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端
    前端测试实践指南引言前端测试是保证应用质量的重要环节。本文将深入探讨前端测试的各个方面，包括单元测试、集成测试、端到端测试等，并提供实用的测试工具和最佳实践。测试概述前端测试主要包括以下类型：单元测试：测试独立组件和函数集成测试：测试多个组件的交互端到端测试：模拟用户行为的完整测试性能测试：测试应用性能指标快照测试：UI组件的视觉回归测试测试工具实现测试运行器//测试运行器类classTestRu
  • C# 事件使用详解 鲤籽鲲 C#c#C#知识捡漏开发语言
    总目录前言在C#中，事件（Events）是一种基于委托的重要机制，用于实现对象之间的松耦合通信。它通过发布-订阅模式（Publisher-SubscriberPattern），允许一个对象（发布者）在特定条件发生时通知其他对象（订阅者）执行相应操作。事件是构建响应式、动态应用程序的核心工具，广泛应用于UI交互、游戏开发、网络通信等领域。本文将全面详细地介绍C#事件的使用，包括事件的定义、发布、订阅
  • Rust语言基础知识详解【九】 学习两年半的Javaer rustrust开发语言
    继上一章对复合类型中的结构体做了详细的介绍之后，本节将介绍枚举类型这个部分。枚举枚举(enum或enumeration)允许你通过列举可能的成员来定义一个枚举类型，例如扑克牌花色：这里需要注意的是：枚举名和里面的枚举值的首字母最好都要大写，符合规范。enumPokerSuit{ Clubs, Spades, Diamonds, Hearts,}如果在此之前你没有在其它语言中使用过枚举，那么可能需要
  • python语言写的一款pdf转word、word转pdf的免费工具 典龙330 pdfword
    Word与PDF文件转换工具这是一个简单的Web应用程序，允许用户将Word文档转换为PDF文件，或将PDF文件转换为Word文档。功能特点-Word(.docx)转换为PDF-PDF转换为Word(.docx)-简单易用的Web界面-即时转换和下载-详细的错误处理和日志记录安装要求-Python3.7或更高版本-依赖库（见requirements.txt）-对于Word到PDF的转换，建议安装L
  • 鸿蒙开发0基础【stateStyles：多态样式】ui组件 蒸糕笑QAQ harmonyos5.0uiharmonyos华为鸿蒙系统鸿蒙
    @Styles仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。这就是我们本章要介绍的内容stateStyles（又称为：多态样式）。概述stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下五种状态：focused：获焦态。normal：正常态。pressed：按压态。disabled：
  • Flutter如何实现导航状态栏透明 yuanlaile flutterjavascript前端
    Flutter如何实现导航状态栏透明，具体操作如下：Widgetbuild(BuildContextcontext){returnMaterialApp(title:'FlutterDemo',theme:ThemeData(colorScheme:ColorScheme.fromSeed(seedColor:Colors.deepPurple),useMaterial3:true,//状态栏字体
  • WAI-ARIA 前端岳大宝 前端核心知识总结前端html
    以下是关于WAI-ARIA（WebAccessibilityInitiative-AccessibleRichInternetApplications）的核心知识梳理。一、WAI-ARIA的基本概念定义与作用WAI-ARIA是一套由W3C制定的技术规范，旨在通过语义补充使动态Web应用（如单页应用、复杂UI组件）对辅助技术（如屏幕阅读器）更可访问。核心目标：为无法通过原生HTML语义化标签表达的U
  • ERROR 2061 (HY000): Authentication plugin ‘caching_sha2_password‘ reported error: Authentication 喝醉酒的小白 MySQLmysqljava数据库
    错误信息“ERROR2061(HY000):Authenticationplugin‘caching_sha2_password’reportederror:Authenticationrequiressecureconnection.”表示MySQL数据库配置了caching_sha2_password认证插件，并要求使用安全连接来进行身份验证。该错误通常出现在以下情况下：使用的MySQL客户端
  • P1164 小A点菜【java】【AC代码】 黄昏岭 算法
    题目背景uim神犇拿到了uoi的ra（镭牌）后，立刻拉着基友小A到了一家……餐馆，很低端的那种。uim指着墙上的价目表（太低级了没有菜单），说：“随便点”。题目描述不过uim由于买了一些书，口袋里只剩M元(M≤10000)。餐馆虽低端，但是菜品种类不少，有N种(N≤100)，第i种卖ai元(ai≤1000)。由于是很低端的餐馆，所以每种菜只有一份。小A奉行“不把钱吃光不罢休”的原则，所以他点单一定
  • 文件的读写 苜柠 QTqt开发语言
    点击按钮实现打开选择的文件，把路径和数据显示到对应的控件上connect(ui->pushButton_3,&QPushButton::clicked,[=](){//打开文件控件返回文件路径QStringpath=QFileDialog::getOpenFileName(this,"打开文件","D:");//显示文件路径ui->lineEdit->setText(path);//文件对象（文件
  • Python激活码 qq_36357944 Python
    EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUlXU1dEIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ
  • tksheet: 强大的Python Tkinter表格控件 柏珂卿
    tksheet:强大的PythonTkinter表格控件项目地址:https://gitcode.com/gh_mirrors/tk/tksheet在探索Python的GUI库时，你会发现tksheet是一个引人注目的名字。它不仅仅是一款简单的表格插件；实际上，这是一个功能丰富且优化得当的数据管理工具，尤其适合那些依赖于Tkinter构建界面的应用开发者。项目介绍tksheet是基于Tkinter
  • 鸿蒙开发：自定义一个Toast
    前言代码案例基于Api13。系统的toast已经可以满足大部分的场景了，而且使用起来也是十分的简单，可以修改很多的可配置属性，简单的使用代码如下：promptAction.showToast({message:"toast提示"})但是偏偏有一点实现不了，那就是圆角度数的设置，还有就是和icon结合使用的场景也无法满足，为了更好的适配UI的设计图，那么自定义一个Toast是在所难免的。简单的实现效
  • 自动化游戏测试揭秘：如何解放双手，高效提升游戏质量？ 软件测试自动化游戏
    引言随着游戏行业的快速发展，游戏测试的重要性日益凸显。从传统的手动测试到如今的自动化测试，测试方法不断演进，以适应日益复杂的游戏场景。面对多平台、多设备的兼容性挑战，以及大量的游戏逻辑、UI、网络、多玩家交互等测试需求，如何通过自动化手段高效保证游戏质量？本文将深入探讨自动化游戏测试的关键技术、工具及实践策略。一、为什么需要自动化游戏测试？相比传统的手动测试，自动化游戏测试能在以下方面带来巨大优势
  • 【超全总结】JMeter vs K6 vs Locust，性能测试工具终极对比！ 软件测试jmeter测试工具
    引言在现代软件开发中，性能测试是保障系统稳定性和高并发能力的关键环节。然而，面对市面上众多的性能测试工具，我们该如何选择？今天，我们将对JMeter、K6、Locust进行全面对比，帮你找到最适合你的工具！1.工具概览工具语言适用场景优点缺点JMeterJava传统性能测试、WebAPI测试功能强大、插件丰富、支持GUI学习曲线陡峭，资源消耗大K6JavaScript现代DevOps、CI/CD集
  • qt 点击按钮弹出下拉窗口_设置Qt QPushButton弹出菜单的位置（向右） 石化橙子 qt点击按钮弹出下拉窗口
    IamwritingapopupmenuforaQtpushbuttonwidget.Wheneverthepushbuttonisclicked,amenupopsup(belowthepushbutton).Thepopupmenuisleft-sidedbelowbydefault.Arethereanywaystomakethepopupmenutopopupontherightsideb
  • Vue.js 3 的设计思路：从声明式UI到高效渲染机制 前端 贾公子 vue.jsuiflutter
    目录一、声明式UI与虚拟DOM的灵活性二、渲染器：虚拟DOM到真实DOM的桥梁三、组件的本质与实现四、编译与运行时的协同优化五、性能与可维护性的权衡总结Vue.js3作为新一代前端框架，其设计理念在声明式UI描述、虚拟DOM优化、组件化架构以及编译与运行时协作等方面实现了显著突破。本文将从多个角度深入探讨其设计思路。一、声明式UI与虚拟DOM的灵活性Vue.js3的核心特性之一是声明式UI描述，开
  • 「QT」布局类 之 QHBoxLayout 水平布局类 何曾参静谧 「QT」QT5程序设计qt开发语言
    ✨博客主页何曾参静谧的博客（✅关注、点赞、⭐收藏、转发）文章专栏「QT」QT5程序设计全部专栏（专栏会有变化，以最新发布为准）「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C++」C/C++程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定制开发「Py」Python程序设计「Ma
  • vue3 el-form校验 报错formRef.value.validate is not a function J总裁的小芒果 vue.jselementuijavascript前端vue
    这是需要校验的表单【每一行都需要校验】保存在保存按钮中打印formRef.value.validate()是有值的，所以我给它们增加了异步constformData=ref([])construles={name:[{required:true,message:'请输入姓名',trigger:['blur','change']}]}constsaveData=async()=>{constvali
  • Flutter 常用组件大全 笔沫拾光 flutter
    Flutter常用组件大全Flutter提供了丰富的组件来构建UI，以下是常见的组件，按功能类别分类。1️⃣基础布局组件组件作用示例Container盒子容器，支持装饰、边距、大小Container(width:100,height:100,color:Colors.red)Padding内边距Padding(padding:EdgeInsets.all(10),child:Text("Hello
  • MessageBox() 程工助力英语中国话 win32MessageBox
    书籍：《windows程序设计(第五版)》的开始->编写第一个WINDOWS程序环境：visualstudio2022内容：编写第一个WINDOWS程序一、函数原型与参数解析intWINAPIMessageBox(HWNDhWnd,//窗口句柄LPCTSTRlpText,//消息内容LPCTSTRlpCaption,//标题UINTuType//类型参数);**hWnd**：指定消息框的父窗口句柄
  • HiPixel开源AI驱动的图像超分辨率的原生macOS 应用程序，使用 SwiftUI 构建并利用 Upscayl 强大的 AI 模型 2301_78755287 swiftuiiosswift人工智能开源图像处理
    一、软件介绍文末提供程序和源码下载HiPixel是一个开源程序基于SwiftUI构建的macOS原生应用程序，用于AI驱动的图像超分辨率，并利用Upscayl的强大AI模型。二、软件特征具有SwiftUI界面的原生macOS应用程序使用AI模型进行高质量图像放大通过GPU加速实现快速处理支持各种图像格式用于自动处理新添加图像的文件夹监控现代、直观的用户界面三、为什么选择HiPixel？虽然Upsc
  • jQuery的substring由后向前截取字符串的方法 潮易
    substring方法定义和用法substring方法用于提取字符串中介于两个指定下标之间的字符。语法stringObject.substring(start,stop)参数描述start必需。一个非负的整数，规定要提取的子串的第一个字符在stringObject中的位置。stop可选。一个非负的整数，比要提取的子串的最后一个字符在stringObject中的位置多1。如果省略该参数，那么返回的子
  • ES 使用geo point 查询离目标地址最近的数据 DavidSoCool elasticsearchMysqlelasticsearch搜索引擎mysql
    需求描述：项目中需要通过经纬度坐标查询目标地所在的行政区。解决思路大致有种，使用es和mysql分别查询。1、使用es进行查询将带有经纬度坐标的省市区数据存入es中，mappings字段使用geopoint类型，索引及查询dsl如下。geopoint文档地址：Geo-distancequery|ElasticsearchGuide[8.6]|ElasticSortsearchresults|Ela
  • JavaScript的学习6——jQuery 十五春会
    文章目录jQuery选择器按ID查找按tag查找按class查找按属性查找组合查找多项选择器练习层级选择器子选择器（ChildSelector）过滤器（Filter）表单相关练习查找和过滤操作DOM修改Text和HTML修改CSS显示和隐藏DOM获取DOM信息操作表单修改DOM结构添加DOM删除节点练习事件鼠标事件键盘事件其他事件事件参数取消绑定事件触发条件浏览器安全限制练习动画show/hide
  • WPF学习笔记04-控件Control_Part1 一只只对技术感兴趣的程序员 WPF学习wpf学习ui
    之前我们已经学习过WPF布局了，这节我们开始简单介绍下控件。熟悉Winform的应该对控件并不陌生。WPF和Winform的渲染也是不一样的一个是基于DirectX一个是基于GDI+。在WPF中，打交道最多的控件无非就那么几种。1）布局控件。之前介绍过的，可以容纳多个控件或嵌套其他布局控件，用于在UI上组织和排列控件。比如StackPanel、Grid等控件都属于此类控件，他们都拥有共同父类---
  • 深入解析ADC寄存器：从原理到实战配置 Electron-er 嵌入式硬件单片机架构stm32
    目录引言一、ADC寄存器核心作用与分类1.寄存器在ADC中的角色2.寄存器典型分类二、STM32ADC寄存器深度解析1.关键寄存器映射表2.寄存器级ADC配置实战三、TIADS1115配置寄存器详解1.16位配置寄存器结构（I2C从地址0x48）2.**I2C配置代码示例（Arduino平台）**四、寄存器操作中的常见陷阱与解决方案1.典型问题排查表2.**调试技巧**五、寄存器优化设计趋势1.自
  • 24.pocsuite3：开源的远程漏洞测试框架 白帽少女安琪拉 安全工具网络安全网络
    一、项目介绍pocsuite3是一款由Knownsec404Team开发的开源远程漏洞测试框架，专注于快速验证和利用已知漏洞。其通过模块化设计和插件化架构，支持用户编写自定义POC（ProofofConcept），覆盖Web漏洞、系统漏洞、数据库漏洞等多种类型，适用于红队渗透、漏洞验证及安全研究等场景。1.1核心功能模块化设计：支持编写、加载和执行自定义POC，灵活适应不同场景。内置丰富的POC库
  • 实现手机银行应用框架鸿蒙示例代码
    本文原创发布在华为开发者社区。介绍本示例提供了一个手机银行应用的基本框架，包含“首页”、“财富”、“生活”、“我的”四个模块。应用只展示了基本的页面，其中具体功能的实现，开发者可根据需求自行开发。实现手机银行应用框架源码链接效果预览使用说明进入应用，点击下方的tabBar可浏览不同的模块，其中一些功能未开发，只是作为页面布局展示。应用中登录验证，只是UI能力，手机号输入满11位，验证码为12345
  • Spring中@Value注解，需要注意的地方 无量 springbean@Valuexml
    Spring 3以后,支持@Value注解的方式获取properties文件中的配置值，简化了读取配置文件的复杂操作 1、在applicationContext.xml文件(或引用文件中)中配置properties文件 <bean id="appProperty" class="org.springframework.beans.fac
  • mongoDB 分片 开窍的石头 mongodb
        mongoDB的分片。要mongos查询数据时候 先查询configsvr看数据在那台shard上，configsvr上边放的是metar信息，指的是那条数据在那个片上。由此可以看出mongo在做分片的时候咱们至少要有一个configsvr,和两个以上的shard（片）信息。     第一步启动两台以上的mongo服务 &nb
  • OVER(PARTITION BY)函数用法 0624chenhong oracle
    这篇写得很好，引自 http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数用法 2010年10月26日 OVER(PARTITION BY)函数介绍 开窗函数        &nb
  • Android开发中，ADB server didn't ACK 解决方法 一炮送你回车库 Android开发
    首先通知：凡是安装360、豌豆荚、腾讯管家的全部卸载，然后再尝试。   一直没搞明白这个问题咋出现的，但今天看到一个方法，搞定了！原来是豌豆荚占用了 5037 端口导致。 参见原文章：一个豌豆荚引发的血案——关于ADB server didn't ACK的问题 简单来讲，首先将Windows任务进程中的豌豆荚干掉，如果还是不行，再继续按下列步骤排查。 &nb
  • canvas中的像素绘制问题 换个号韩国红果果 JavaScriptcanvas
    pixl的绘制，1.如果绘制点正处于相邻像素交叉线，绘制x像素的线宽，则从交叉线分别向前向后绘制x/2个像素，如果x/2是整数，则刚好填满x个像素，如果是小数，则先把整数格填满，再去绘制剩下的小数部分，绘制时，是将小数部分的颜色用来除以一个像素的宽度，颜色会变淡。所以要用整数坐标来画的话（即绘制点正处于相邻像素交叉线时），线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的
  • 编码乱码问题 灵静志远 javajvmjsp编码
    1、JVM中单个字符占用的字节长度跟编码方式有关，而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式；2、对于单个字符：ISO-8859-1单字节编码，GBK双字节编码，UTF-8三字节编码；因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节，而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。 3、getBytes()、getByte
  • java 求几个月后的日期 darkranger calendargetinstance
    Date plandate = planDate.toDate(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); Calendar cal = Calendar.getInstance(); cal.setTime(plandate); // 取得三个月后时间 cal.add(Calendar.M
  • 数据库设计的三大范式（通俗易懂） aijuans 数据库复习
    关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。数据库的设计范式是数据库设计所需要满足的规范。只有理解数据库的设计范式，才能设计出高效率、优雅的数据库，否则可能会设计出错误的数据库. 目前，主要有六种范式：第一范式、第二范式、第三范式、BC范式、第四范式和第五范式。满足最低要求的叫第一范式，简称1NF。在第一范式基础上进一步满足一些要求的为第二范式，简称2NF。其余依此类推。
  • 想学工作流怎么入手 atongyeye jbpm
    工作流在工作中变得越来越重要，很多朋友想学工作流却不知如何入手。 很多朋友习惯性的这看一点，那了解一点，既不系统，也容易半途而废。好比学武功，最好的办法是有一本武功秘籍。研究明白，则犹如打通任督二脉。 系统学习工作流，很重要的一本书《JBPM工作流开发指南》。 本人苦苦学习两个月，基本上可以解决大部分流程问题。整理一下学习思路，有兴趣的朋友可以参考下。 1  首先要
  • Context和SQLiteOpenHelper创建数据库 百合不是茶 androidContext创建数据库
           一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper     一:SQLiteOpenHelper创建数据库:   1,SQLi
  • 浅谈group by和distinct bijian1013 oracle数据库group bydistinct
            group by和distinct只了去重意义一样，但是group by应用范围更广泛些，如分组汇总或者从聚合函数里筛选数据等。         譬如：统计每id数并且只显示数大于3 select id ,count(id) from ta
  • vi opertion 征客丶 macoprationvi
    进入 command mode （命令行模式） 按 esc 键 再按 shift + 冒号 注：以下命令中 带 $ 【在命令行模式下进行】，不带 $ 【在非命令行模式下进行】 一、文件操作 1.1、强制退出不保存 $ q! 1.2、保存 $ w 1.3、保存并退出 $ wq 1.4、刷新或重新加载已打开的文件 $ e 二、光标移动 2.1、跳到指定行 数字
  • 【Spark十四】深入Spark RDD第三部分RDD基本API bit1129 spark
      对于K/V类型的RDD,如下操作是什么含义？   val rdd = sc.parallelize(List(("A",3),("C",6),("A",1),("B",5)) rdd.reduceByKey(_+_).collect  reduceByKey在这里的操作，是把
  • java类加载机制 BlueSkator java虚拟机
    java类加载机制 1.java类加载器的树状结构 引导类加载器 ^ | 扩展类加载器 ^ | 系统类加载器 java使用代理模式来完成类加载，java的类加载器也有类似于继承的关系，引导类是最顶层的加载器，它是所有类的根加载器，它负责加载java核心库。当一个类加载器接到装载类到虚拟机的请求时，通常会代理给父类加载器，若已经是根加载器了，就自己完成加载。 虚拟机区分一个Cla
  • 动态添加文本框 BreakingBad 文本框
      <script>     var num=1; function AddInput() {      var str="";     str+="<input 
  • 读《研磨设计模式》-代码笔记-单例模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ public class Singleton { } /* * 懒汉模式。注意，getInstance如果在多线程环境中调用，需要加上synchronized，否则存在线程不安全问题 */ class LazySingleton
  • iOS应用打包发布常见问题 chenhbc iosiOS发布iOS上传iOS打包
    这个月公司安排我一个人做iOS客户端开发，由于急着用，我先发布一个版本，由于第一次发布iOS应用，期间出了不少问题，记录于此。   1、使用Application Loader 发布时报错：Communication error.please use diagnostic mode to check connectivity.you need to have outbound acc
  • 工作流复杂拓扑结构处理新思路 comsci 设计模式工作算法企业应用OO
    我们走的设计路线和国外的产品不太一样，不一样在哪里呢？  国外的流程的设计思路是通过事先定义一整套规则(类似XPDL)来约束和控制流程图的复杂度(我对国外的产品了解不够多，仅仅是在有限的了解程度上面提出这样的看法)，从而避免在流程引擎中处理这些复杂的图的问题，而我们却没有通过事先定义这样的复杂的规则来约束和降低用户自定义流程图的灵活性，这样一来，在引擎和流程流转控制这一个层面就会遇到很
  • oracle 11g新特性Flashback data archive daizj oracle
    1. 什么是flashback data archive Flashback data archive是oracle 11g中引入的一个新特性。Flashback archive是一个新的数据库对象，用于存储一个或多表的历史数据。Flashback archive是一个逻辑对象，概念上类似于表空间。实际上flashback archive可以看作是存储一个或多个表的所有事务变化的逻辑空间。
  • 多叉树:2-3-4树 dieslrae 树
        平衡树多叉树,每个节点最多有4个子节点和3个数据项,2,3,4的含义是指一个节点可能含有的子节点的个数,效率比红黑树稍差.一般不允许出现重复关键字值.2-3-4树有以下特征:     1、有一个数据项的节点总是有2个子节点(称为2-节点)     2、有两个数据项的节点总是有3个子节点(称为3-节
  • C语言学习七动态分配 malloc的使用 dcj3sjt126com clanguagemalloc
    /* 2013年3月15日15:16:24 malloc 就memory(内存) allocate(分配)的缩写 本程序没有实际含义，只是理解使用 */ # include <stdio.h> # include <malloc.h> int main(void) { int i = 5; //分配了4个字节 静态分配 int * p
  • Objective-C编码规范[译] dcj3sjt126com 代码规范
      原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : raywenderlich.com Objective-C编码规范 译者 : Sam Lau
  • 0.性能优化-目录 frank1234 性能优化
    从今天开始笔者陆续发表一些性能测试相关的文章，主要是对自己前段时间学习的总结，由于水平有限，性能测试领域很深，本人理解的也比较浅，欢迎各位大咖批评指正。 主要内容包括： 一、性能测试指标 吞吐量、TPS、响应时间、负载、可扩展性、PV、思考时间 http://frank1234.iteye.com/blog/2180305 二、性能测试策略 生产环境相同 基准测试 预热等 htt
  • Java父类取得子类传递的泛型参数Class类型 happyqing java泛型父类子类Class
      import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import org.junit.Test; abstract class BaseDao<T> { public void getType() { //Class<E> clazz =
  • 跟我学SpringMVC目录汇总贴、PDF下载、源码下载 jinnianshilongnian springMVC
      ----广告-------------------------------------------------------------- 网站核心商详页开发 掌握Java技术，掌握并发/异步工具使用，熟悉spring、ibatis框架； 掌握数据库技术，表设计和索引优化，分库分表/读写分离； 了解缓存技术，熟练使用如Redis/Memcached等主流技术； 了解Ngin
  • the HTTP rewrite module requires the PCRE library 流浪鱼 rewrite
    ./configure: error: the HTTP rewrite module requires the PCRE library. 模块依赖性Nginx需要依赖下面3个包 1. gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) 2. rewrite 模块需要 pcre 库 ( 下载: http://www.pcre.org/ ) 3. s
  • 第12章 Ajax（中） onestopweb Ajax
    index.html <!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/
  • Optimize query with Query Stripping in Web Intelligence blueoxygen BO
    http://wiki.sdn.sap.com/wiki/display/BOBJ/Optimize+query+with+Query+Stripping+in+Web+Intelligence and a very straightfoward video http://www.sdn.sap.com/irj/scn/events?rid=/library/uuid/40ec3a0c-936
  • Java开发者写SQL时常犯的10个错误 tomcat_oracle javasql
    1、不用PreparedStatements 　　有意思的是，在JDBC出现了许多年后的今天，这个错误依然出现在博客、论坛和邮件列表中，即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个： 　　他们对PreparedStatements不了解 　　他们认为使用PreparedStatements太慢了 　　他们认为写Prepar
  • 世纪互联与结盟有感 阿尔萨斯
    10月10日，世纪互联与（Foxcon）签约成立合资公司，有感。 全球电子制造业巨头（全球500强企业）与世纪互联共同看好IDC、云计算等业务在中国的增长空间，双方迅速果断出手，在资本层面上达成合作，此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任，另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。 众所周知，精于电子产品制造（世界第一），对于世纪互联而言，能够与结盟
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他