olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法

  1. Home>
  2. コンテンツ表示>
  3. フローティングボックス>
  4. iGoogleみたいなフローティングボックス

フローティングボックスjquery-ui-personalized-1.6rc2.min.js

iGoogleみたいなフローティングボックス

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>iNettuts - Welcome!</title>
        
        <link href="inettuts.css" rel="stylesheet" type="text/css" />
</head>
<body>
    
    <div id="head">
        <h1>iNettuts</h1>
    </div>

    <div id="columns">
        
        <ul id="column1" class="column">
            <li class="widget color-green" id="intro">
                <div class="widget-head">
                    <h3>Introduction Widget</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-red">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>

        <ul id="column2" class="column">
            <li class="widget color-blue">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-yellow">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>
        
        <ul id="column3" class="column">
            <li class="widget color-orange">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-white">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            
        </ul>
        
    </div>
    
    
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-personalized-1.6rc2.min.js"></script>
    <script type="text/javascript" src="inettuts.js"></script>

</body>
</html>

iGoogleのような、ユーザーサイドで自由にボックスの位置を変更することができるスクリプトです。
コンテンツで使用するのも面白そうですが、どうせならこのスクリプトを使用してまるごとサイト作ってしまったほうがインパクトは高いと思います。
jQueryを使用しています。

サンプルはこちらからご覧下さい。

１．ダウンロード＆セッティング

まずサイトへ行き、「Source」をクリックしスクリプトをダウンロードします。
解凍したら丸ごとアップロード。

２．<head>設定

スタイルシートを読み込ませます。

<link href="inettuts.css" rel="stylesheet" type="text/css" />

３．HTMLマークアップ

このスクリプトでは３つのカラムを主軸にボックスを配置していきます。
実際に設置する際は、index.htmlをコピーして、内部のボックスを配置してしまえば楽だと思います。

まず大枠、

<div id="columns"></div>

この中に３つのカラムを設置します。

<div id="columns">
    <ul id="column1" class="column"></ul>
    <ul id="column2" class="column"></ul>
    <ul id="column3" class="column"></ul>
</div>

それから、このul要素内に li要素を配置していきます。
このli要素が、一つのボックスとなるわけです。

詳しい説明は省略しますが、ボックスには、固定、移動可、編集可など種類があります。
これもindex.htmlと照らし合わせて必要なものを使ってください。
画像等は変更した方が良いと思います。

４．スクリプトの読み込み

最後に</body>前あたりにスクリプトを読み込む記述をします。

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.6rc2.min.js"></script>
<script type="text/javascript" src="inettuts.js"></script>

最新版のjQueryだと、ボックス移動時に、ちょっと横に伸びてしまって不恰好になりますが、すぐに直るので気にしない方は最新版のjQueryに差し替えてしまっても良いと思います。

関連スクリプト

感想

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。