100 lines
5.1 KiB
HTML
100 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<title>jQuery Gridly</title>
|
|
<link href='css/jquery.gridly.css' rel='stylesheet' type='text/css'>
|
|
<link href='css/sample.css' rel='stylesheet' type='text/css'>
|
|
<script src='javascripts/jquery.js' type='text/javascript'></script>
|
|
<script src='javascripts/jquery.gridly.js' type='text/javascript'></script>
|
|
<script src='javascripts/sample.js' type='text/javascript'></script>
|
|
|
|
</meta>
|
|
</head>
|
|
|
|
<body>
|
|
<div class='content'>
|
|
<h1>jQuery Gridly</h1>
|
|
<p>Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the example below try tapping or dragging any of the bricks.</p>
|
|
<h2>Example</h2>
|
|
<section class='example'>
|
|
<div class='gridly'>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
<div class='brick small'>
|
|
<a class='delete' href='#'>×</a>
|
|
</div>
|
|
</div>
|
|
<p class='actions'>
|
|
<a class='add button' href='#'>Add</a>
|
|
</p>
|
|
</section>
|
|
<h2>Installation</h2>
|
|
<p>To install download one of these packages and include the jquery.gridly.js and jquery.gridly.css files in your head with the following:</p>
|
|
<pre><code data-language='html'><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascript/jquery.gridly.js" type="text/javascript"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" /></code></pre>
|
|
<h2>Example</h2>
|
|
<p>Setting up a gridly is easy. The following snippet is a good start:</p>
|
|
<pre><code data-language='html'><style type="text/css">
 .gridly {
 position: relative;
 width: 960px;
 }
 .brick.small {
 width: 140px;
 height: 140px;
 }
 .brick.large {
 width: 300px;
 height: 300px;
 }
</style>
<div class="gridly">
 <div class="brick small"></div>
 <div class="brick small"></div>
 <div class="brick large"></div>
 <div class="brick small"></div>
 <div class="brick small"></div>
 <div class="brick large"></div>
</div>
<script>
 $('.gridly').gridly({
 base: 60, // px 
 gutter: 20, // px
 columns: 12
 });
</script></code></pre>
|
|
</div>
|
|
<!--可删除-->
|
|
<script src="http://www.jq22.com/js/jq.js"></script>
|
|
<!--ecd 可删除-->
|
|
</body>
|
|
|
|
</html> |