Skip to content

Instantly share code, notes, and snippets.

@kaosf

kaosf/file0.txt

Created June 18, 2012 12:15
Show Gist options
  • Save kaosf/2948106 to your computer and use it in GitHub Desktop.
Save kaosf/2948106 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery.flickable experiment ref: http://qiita.com/items/37dece01c7986f1f0c45
Raw
file0.txt
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>flickable test</title>
<!-- use jQuery 1.5.2 daringly
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://lagoscript.org/files/jquery/flickable/jquery.flickable-1.0b3.min.js"></script>
-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://app.orange-soft.jp/wp-content/uploads/jquery.flickable-1.0b3-jq1.6.js"></script>
<script type="text/javascript">
$(function() {
$('#flickable1').flickable();
});
</script>
<style type="text/css">
#flickable1 {
/* border: 1px solid #CCC; */
width: 480px;
height: 155px;
/* overflow: auto; */
overflow: hidden;
}
#flickable1 ul {
list-style: none;
width:854px;
margin: 0;
padding: 5px;
}
#flickable1 ul li {
background-color: #EEE;
border: 1px solid #CCC;
height: 100px;
width: 100px;
margin: 5px;
padding: 5px;
float: left;
}
#flickable1 .ui-flickable-container {
cursor: pointer;
}
</style>
</head>
<body>
<div id="flickable1">
<ul>
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
<li>Content 4</li>
<li>Content 5</li>
<li>Content 6</li>
<li>Content 7</li>
</ul>
<div style="clear:both;"></div>
</div>
<!-- ref. http://cure.shiroro.com/ -->
<!-- http://lagoscript.org/ -->
<!-- http://twilog.org/ka_/date-120618 -->
<!-- http://app.orange-soft.jp/2011/08/jq1/ -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment