java 编写metro风格_纯Javascript实现Windows 8 Metro风格实现
Metro风格设计主要特点
1.Windows 8 Metro风格设计,实现网站或系统功能的导航
2.纯Javascript实现
3.支持所有IE、360、Chrome等常用浏览器
4.支持圆角、阴影、卡片切换等特效
5.支持卡片的放大、缩小、增加、删除等功能
6.可自定义卡片背景色、背景图片、卡片图片、卡片文字
7.卡片间可任意切换
Metro风格截图
Metro部分算法
卡片显示部分代码:
str='
';
str+='
str+='
str+='
';
移动单元格JS脚本:
function moveItem(objid,indexList){
//判断是否有效移动.
var curItem=getCurItem(objid);
var curIndex=curItem.index;
for(var i=0;i
var miIndex=parseInt(indexList[i]);
if((curIndex+1)==miIndex&&(curIndex+1)%colSize==0){
alertInfo("最后一列不能调大!");
return false;
}
if(miIndex>=(rowSize*colSize)){
alertInfo("不能超过三行!");
return false;
}
var cellnum=getItemCellNum(miIndex);
if(cellnum!=1){
alertInfo("被移动单元格目前只支持1个单元格!");
return false;
}
}
//判断是否超过所规定显示区域
var nullnum=0;
var nullIndexArray=new Array();
for(var i=0;i
var tmpItem=itemArray[i];
var objvalue=tmpItem.value;
if(itemvalueforspace==objvalue||itemvaluefornull==objvalue){
var isexitarea=false;
for(var j=0;j
var miIndex=parseInt(indexList[j]);
if(i==miIndex){
isexitarea=true;
break;
}
}
nullnum=nullnum+1;
if(!isexitarea){
nullIndexArray.push(i);
}
}
}
if((itemArray.length-nullnum+indexList.length)>(rowSize*colSize)){
alertInfo("调大单元格已超出所显示区域!");
return false;
}
//调整移动单元格的队列.
for(var i=0;i
var miIndex=parseInt(indexList[i]);
var moveItem=itemArray[miIndex];
if(moveItem==undefined){//不存在.
for(var j=itemArray.length;j<=miIndex;j++){
addNullItem("");
}
moveItem=itemArray[miIndex];
}
//undefined
var moveValue=moveItem.value;
moveItem.value=curItem.value;
itemArray[miIndex]=moveItem;
if(moveValue!=itemvalueforspace){//覆盖单元格中已有对象.
//覆盖单元格移到最后
var moveIndex=itemArray.length;
var col=moveIndex%colSize;
var row=(moveIndex-col)/colSize;
var moveLeft=splitspace+col*(initwidth+splitspace);
var moveTop=splitspace+row*(initheight+splitspace);
var moveCacheItem=new Object();
moveCacheItem.index=moveIndex;
moveCacheItem.id=itemPrefix+(moveIndex+1);
moveCacheItem.x=moveLeft;
moveCacheItem.y=moveTop;
moveCacheItem.value=moveValue;
itemArray.push(moveCacheItem);
var moveObj=document.getElementById(moveValue);
moveObj.style.top=moveTop+"px";
moveObj.style.left=moveLeft+"px";
}else{//null单元格,需要删除null单元格.
//del(moveItem.id);
}
}
//检查空缺单元格,如果存在,就填充null对象.
for(var i=itemArray.length-1;i>=(rowSize*colSize);i--){
var movitem=itemArray[i];
var nulitemIndex=nullIndexArray[nullIndexArray.length-1];
var nulitem=itemArray[nulitemIndex];
var moveObj=document.getElementById(movitem.value);
//console.log("id="+movitem.id+"//value="+movitem.value+"//top="+nulitem.y+"//left="+nulitem.x);
moveObj.style.top=parseInt(nulitem.y)+"px";
moveObj.style.left=parseInt(nulitem.x)+"px";
//console.log("nullid="+nulitem.id+"//moveid="+movitem.id+"//value="+movitem.value+"//top="+nulitem.y+"//left="+nulitem.x);
getElement(sortablecurid).removeChild(getElement(nulitem.id));
nulitem.value=movitem.value;
itemArray[nulitemIndex]=nulitem;
itemArray.pop();
nullIndexArray.pop();
}
printItemArray();
return true;
}
待续……
java 编写metro风格_纯Javascript实现Windows 8 Metro风格实现相关推荐
- 纯Javascript实现Windows 8 Metro风格实现
Metro风格设计主要特点 1.Windows 8 Metro风格设计,实现网站或系统功能的导航 2.纯Javascript实现 3.支持所有IE.360.Chrome等常用浏览器 4.支持圆角.阴影 ...
- java编写布局文件_鸿蒙OS利用JAVA编写的布局实践练习
鸿蒙OS利用JAVA编写的布局实践练习 鸿蒙OS利用JAVA编写的布局实践练习 目录 JAVA UI框架 利用JAVA代码实现一个简单的布局 利用xml实现上述布局 JAVA UI框架 ??应用的Ab ...
- java编写应用程序_为您的Java应用程序编写数据驱动的测试
java编写应用程序 JUnit是一个功能非常强大的测试框架,它不仅为其用户提供了编写快速简便的测试的功能,而且还为用户提供了扩展它并使其按其期望的方式工作的机会. 在JUnit之上构建了许多框架,这 ...
- java编写应用程序_使用Java API编写应用程序
java编写应用程序 总览 介绍 DB2JSON可用于DB2 Linux,Unix和Windows 10.5以及用于z / OS V3.1的IBM DB2 Accessories Suite与DB2 ...
- 目前流行的装修风格_目前装修流行的主要八大风格
1.中国传统风格 中国传统风格也叫中式风格,这种风格崇尚庄重.优雅,在装修时吸取中国传统的木构架构屏风.隔扇等装饰.而且大多采用对称的空间构图方式,色彩庄重,体现出一种宁静雅致的氛围. 此图片由圣都装 ...
- 用Java语言编写ajax设计模式_使用JavaScript发布订阅设计模式实现Ajax请求节流
1. 说明一下主要逻辑 当我们发送多个请求时使用的时同一个接口,并且这个接口支持多个参数获取多个条数据,而我们不想要每次请求一条数据就发送一条请求 而是在指定的时间段类发送一次请求,得到一些数据,然后 ...
- 用java编写验证码程序_编写,验证和分析实时Java应用程序
本文是" 用实时Java开发"系列的第三篇也是最后一部分,展示了如何设计,编写,验证和分析基本的实时应用程序. 我们将说明: 应用程序的时间和性能要求. 为什么传统的非实时Java ...
- python编写测试系统_纯 python 编写的一套 dubbo 测试平台
因组织要求,需要一个Dubbo接口的测试工具,经多方研究,遂决定要写一个不需要编写任何代码,直接在页面上填写数据就能直接运行Dubbo接口的测试工具,类似于Postman编写http接口一样简单. 整 ...
- java编写k线_用Java绘制K线 (转)
---- Java语言中的Applet(Java小程序)和Application(Java应用程序)是在结构和功能上都存在很大差异的两种不同的编程方式.Applet应用于Web页上,可做出多姿多彩的页 ...
- java 错误登陆次数_纯java代码实现登陆次数验证,登陆错误5次之后锁定30分钟
本方法因为是根据思路纯手写,代码可以再简化,功能尝试没问题,最主要就是在登陆验证中的逻辑,checkLogin()方法是登录前的验证,而真正的登陆方式采用的是Shiro,若不是采用Shiro登陆,将该 ...
最新文章
- jdbc执行Statement接口的步骤
- [译]深度神经网络的多任务学习概览(An Overview of Multi-task Learning in Deep Neural Networks)...
- CSS cursor 属性
- VMware View 与Citrix XenDesktop 用户体验大比拼-iPad篇
- SAP UI5 XML view lifecycle processing - defineMasterHeaderFooter
- 统一设置网站html文件输出编码为utf-8,以解决乱码问题
- adf时间作用域_ADF任务流:页面片段的托管bean作用域
- 【渝粤教育】国家开放大学2018年春季 0703-22T经济学基础 参考试题
- Python模拟ICMP包
- python分片上传_python上传文件到oss
- numpy 矩阵与向量相乘_有人把NumPy画成了花,生动又形象
- Intel保护机制:特权级别:Protection Rings
- python什么是接口设计_给女朋友讲什么叫接口设计!
- oracle函数 NLS_INITCAP(x[,y])
- usermod+用户密码管理+mkpasswd
- vc10的C2664和C2065错误
- 基于matlab的暴雨强度公式参数推求,小样本流域降雨强度公式和设计降雨分布的推求方法...
- JAVA生成随机数工具类
- 美团饿了么外卖返利红包小程序免费源码部署教程
- JAVA - Quartz 定时任务_启动原理