gridster插件
gridster简介：gridster.js是Ducksboard的开源项目，Ducksboard用gridster.js做了自己的产品，gridster是一款自定义，客户菜单插件，他可以随意摆放你关注的几何图形。
在实际项目中每个几何图形都被称为widget,每个widget可以是你项目模块的一个缩影，便于你系统性的观察。
gridster下载：
http://gridster.net/.
gridster要求：Gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.jquery 1.7+.
grister使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="article" id="articlelink" content="/technology/jquerynews/20120815-jqueryplugin-dragndrop-gridster/" />
<meta name="author" content="www.gbin1.com" />
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="dist/jquery.gridster.min.css">
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="dist/jquery.gridster.min.js" charset="utf-8"></script>
</head>
<!--
<script type="text/javascript" src="dist/jquery.coords.js"></script>
<script type="text/javascript" src="dist/jquery.draggable.js"></script>
<script type="text/javascript" src="dist/jquery.collision.js"></script>-->
<style>
body{
font-family: Helvetica, arial, sans-serif;
margin:150px auto;
background: red;
color: #fff;
font-size: 12px;
width:940px;
}
a{
color: #808080;
}
h1{
padding:10px;
font-size: 38px;
}
ul{
list-style:block;
}
li{
background: blue;
}
.s1{
background: blue;
}
.s2{
background: green;
}
.s3{
background:yellow;
}
.s4{
background: black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".gridster ul").gridster({
//widget_selector: "> li #sss",
//extra_rows: 1111,//设置多余的行数 默认15行 min_rows
//extra_cols: 9,//设置多余的列数 列数减一 默认为1
//max_size_x: 6,//设置每个widget x的size 默认为 6
//max_size_y: 6,//设置每个widget y的size 默认为 6
//autogenerate_stylesheet: true,//自动生成widget的样式 默认为true
avoid_overlapped_widgets: false,//不让你从数据库或是其他途径 生成的 widget 互相覆盖 默认为true
//serialize_params: function($w, wgd) {//当调用serialize()触发的事件 $w当前的li wgd是{col: 4, row: 3, size_x: 2, size_y: 1,el:b.fn.b.init[1]}
//alert($w+"---"+wgd);
//return { col: wgd.col, row: wgd.row }
//},
/*draggable.start: function(event, ui){},
draggable.drag: function(event, ui){},
draggable.stop: function(event, ui){},
collision.on_overlap_start: function(collider_data) { },
collision.on_overlap: function(collider_data) { },
collision.on_overlap_stop: function(collider_data) { },*/
widget_margins: [10, 10],//设置每个 widget margin 前一个参数是y 后面是x
widget_base_dimensions: [140, 140],//设置 widget width height
draggable:{
start: function(event, ui){
//alert("statr");
console.log("start");
},
drag:function(event, ui){
console.log("drag");
},
stop: function(event, ui){
console.log("stop");
}
},
collision:{
on_overlap_start: function(collider_data) {
// alert(collider_data);
console.log("on_overlap_start");},
on_overlap:function(collider_data) {console.log("on_overlap"); },
on_overlap_stop:function(collider_data) { console.log("on_overlap_stop");}
}
});
});
function test(){
var gridster = $(".gridster ul").gridster().data('gridster');//只能通过 样式得到ul
alert("row:"+gridster.rows+"--cols"+gridster.cols);
// alert(gridster);
gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1);//添加一个widget
// gridster.remove_widget( $('.gridster li').eq(3) );//删除某个
var json = gridster.serialize();//得到 所有的 widget
alert(json);
gridster.disable( );
}
function test1(){
var gridster = $(".gridster ul").gridster().data('gridster');//只能通过 样式得到ul
var g = gridster.serialize($(".s1"));
alert(g);
for(var v in g){
//alert(v);
}
}
</script>
<body>
<article>
<h1>Demo </h1>
<section>
<div class="gridster">
[list]
<li id="sss" class="s1" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div>
open source
</div>
</li>
<li class="s1" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
</li>
<li class="s1" data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
<li class="s2" data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
<li class="s4" data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
<li class="s1" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
<li class="s2" data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
<li class="s1" data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
<li class="s1" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
<li class="s1" data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
<li class="s1" data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
<li class="s3" data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
<div style="position:absolute;top:150px;background:black;width:1000px;height:200px;">
11
<div>
[/list]
</div>
</section>
</article>
<input type='button' value='test' onclick='test()'/>
<input type='button' value='test1' onclick='test1()'/>
</body>
</html>
分享到：
相关推荐
2000-2021年中国科技统计年鉴（分省年度）面板数据集-最新更新.zip
PPT保护工具PDFeditor专业版-精心整理.zip
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
考研英语真题及详解-精心整理.zip
Jupyter-Notebook
全国电子地图行政区划道路水系数据-最新shp.zip
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
地级市进出口贸易及外资利用数据（297城）-最新.zip
HengCe-18900-2024-2030中国皮革制品市场现状研究分析与发展前景预测报告-样本.docx
猪脚饭超好吃 java制作的小游戏，作为巩固java知识之用.zip
【基于Python的大麦网自动抢票工具的设计与实现】 随着互联网技术的发展，网络购票已经成为人们生活中不可或缺的一部分。尤其是在文化娱乐领域，如音乐会、演唱会、戏剧等活动中，热门演出的门票往往在开售后瞬间就被抢购一空。为了解决这个问题，本论文探讨了一种基于Python的自动抢票工具的设计与实现，旨在提高购票的成功率，减轻用户手动抢票的压力。 Python作为一种高级编程语言，因其简洁明了的语法和丰富的第三方库，成为了开发自动化工具的理想选择。Python的特性使得开发过程高效且易于维护。本论文深入介绍了Python语言的基础知识，包括数据类型、控制结构、函数以及模块化编程思想，这些都是构建抢票工具的基础。 自动化工具在现代社会中广泛应用，尤其在网络爬虫、自动化测试等领域。在抢票工具的设计中，主要利用了自动化工具的模拟用户行为、数据解析和定时任务等功能。本论文详细阐述了如何使用Python中的Selenium库来模拟浏览器操作，通过识别网页元素、触发事件，实现对大麦网购票流程的自动化控制。同时，还讨论了BeautifulSoup和requests库在抓取和解析网页数据中的应用。 大麦网作为国内知名的票务平台，其网站结构和购票流程对于抢票工具的实现至关重要。论文中介绍了大麦网的基本情况，包括其业务模式、用户界面特点以及购票流程，为工具的设计提供了实际背景。 在系统需求分析部分，功能需求主要集中在自动登录、监控余票、自动下单和异常处理等方面。抢票工具需要能够自动填充用户信息，实时监控目标演出的票务状态，并在有票时立即下单。此外，为了应对可能出现的网络延迟或服务器错误，工具还需要具备一定的错误恢复能力。性能需求则关注工具的响应速度和稳定性，要求在大量用户同时使用时仍能保持高效运行。 在系统设计阶段，论文详细描述了整体架构，包括前端用户界面、后端逻辑处理以及与大麦网交互的部分。在实现过程中，采用了多线程技术以提高并发性，确保在抢票关键环节的快速响应。此外，还引入了异常处理机制，以应对网络故障或程序错误。 测试与优化是确保抢票工具质量的关键步骤。论文中提到了不同场景下的测试策略，如压力测试、功能测试和性能测试，以验证工具的有效性和稳定性。同时，通过对抢票算法的不断优化，提高工具的成功率。 论文讨论了该工具可能带来的社会影响，包括对消费者体验的改善、对黄牛现象的抑制以及可能引发的公平性问题。此外，还提出了未来的研究方向，如增加多平台支持、优化抢票策略以及考虑云服务的集成，以进一步提升抢票工具的实用性。 本论文全面介绍了基于Python的大麦网自动抢票工具的设计与实现，从理论到实践，从需求分析到系统优化，为读者提供了一个完整的开发案例，对于学习Python编程、自动化工具设计以及理解网络购票市场的运作具有重要的参考价值。
校园驿站全天候辅助取货管理系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
1970年至2010年美国所有乳制品的供应和利用情况
java基础 java_leetcode题解之Possible Bipartition.java
该开源项目为阿里巴巴数据库事业部精心打造的druid连接池设计源码，包含4689个文件，涵盖4069个Java源文件、297个SQL脚本、102个文本文件以及其他多种文件类型。druid连接池以其独特的监控功能，旨在为数据库连接管理提供高效、可靠的解决方案。项目文件类型丰富，包括HTML、JavaScript、CSS和Shell脚本等，适用于多种开发需求。
Jupyter-Notebook
金融风险管理计算手册（CoVaR）最新版.zip
网上选课系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
Jupyter-Notebook
Jupyter-Notebook