jQuery.flickable experiment #jQuery

公式のスクリプトだと jQuery 1.5.x じゃないと動かないっぽいんで非公式の修正版を使うという話．

jQuery.flickable のサンプルはここを見るよろし．

以下のコードはここで実演．

<!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>