1. jQuery
2. jQuery Masonry

$(function(){
  $('#main_container').masonry({
     itemSelector: '.box',
     isFitWidth: true,
     isAnimated: true
  });
});

    
        

            


Box1



Box2



Box3



Box4



Box5



Box6



Box7



Box8



Box9

            body{ background-color: #808080; }
            #main_container{ margin: 0 auto; width: 900px; }
            .box{
                background-color: #fff;
                float: left;
                width: 200px;
                margin: 10px;
                padding: 10px;
                border-radius: 5px;
            }

1. JavaScript内で使用されるほほう数を加算
2. PHPにPOSTでページURLと"Increment"を送信
3. ほほうボタンスタイル変更

1. JavaScript内で使用されるほほう数をデクリメント
2. PHPにPOSTでページURLと"Decrement"を送信
3. ほほうボタンスタイル変更

http://izumikawa.tk/api/hohoubotan/phpint.php?data=PageURL

http://izumikawa.tk/api/hohoubotan/hohou_botan_share.php

var xmlHttp; 
var phpint; 
var eventlog = 'null'; 
var pageurl = location.href; 
xmlHttp = new XMLHttpRequest(); 
xmlHttp.onreadystatechange = loading; 
xmlHttp.open("GET", "http://izumikawa.tk/api/hohoubotan/phpint.php?data="+pageurl, false); 
xmlHttp.send(null); 
function loading() {
     window.addEventListener('load', function () { 
     console.log("loading: ", xmlHttp.readyState, xmlHttp.status); 
     phpint = xmlHttp.responseText; 
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
        var hohou_botanobject = document.getElementById("hohou_botan"); 
        hohou_botanobject.innerHTML = 'ほほう' + phpint; 
        hohou_botanobject.style.borderRadius = "5px"; 
        hohou_botanobject.style.MozBorderRadius = "5px"; 
        hohou_botanobject.style.WebkitBorderRadius = "5px"; 
        hohou_botanobject.style.padding = "5px"; 
        hohou_botanobject.style.color = "#FF3E3E"; 
        hohou_botanobject.style.textAlign = "center"; 
        hohou_botanobject.style.fontWeight = "bold"; 
        hohou_botanobject.style.backgroundColor = '#FFFFFF'; 
        hohou_botanobject.style.cursor = "pointer"; 
    } 
  }, false); 
} function hohou_share() { 
    if(eventlog == 'null') { 
        eventlog = 'value'; 
        phpint++; 
        var data = { main_data: 'Increment', data_url: pageurl }; 
        var http_post = new XMLHttpRequest(); 
        http_post.onreadystatechange = function () { 
            var READYSTATE_COMPLETED = 4; 
            var HTTP_STATUS_OK = 200; 
            if (this.readyState == READYSTATE_COMPLETED && this.status == HTTP_STATUS_OK) { 
                var hohou_object = document.getElementById('hohou_botan'); 
                hohou_object.innerHTML = 'ほほう' + phpint; 
                hohou_object.style.backgroundColor = '#FF3C3C'; 
                hohou_object.style.color = "#FFFFFF"; 
             } 
        }; 
        http_post.open('POST', 'http://izumikawa.tk/api/hohoubotan/hohou_botan_share.php'); 
        http_post.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
        http_post.send(form_data(data)); 
    }else if(eventlog == 'value') { 
        eventlog = 'null'; 
        phpint--; 
        var data = { main_data: 'Decrement', data_url: pageurl }; 
        var http_post = new XMLHttpRequest(); 
        http_post.onreadystatechange = function () { 
            var READYSTATE_COMPLETED = 4; 
            var HTTP_STATUS_OK = 200; 
            if (this.readyState == READYSTATE_COMPLETED && this.status == HTTP_STATUS_OK) { 
                var hohou_object = document.getElementById('hohou_botan'); 
                hohou_object.innerHTML = 'ほほう' + phpint; 
                hohou_object.style.backgroundColor = '#FFFFFF'; 
                hohou_object.style.color = "#FF3E3E"; 
             } 
        }; 
        http_post.open('POST', 'http://izumikawa.tk/api/hohoubotan/hohou_botan_share.php'); 
        http_post.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
        http_post.send(form_data(data)); 
    } 
} 
function form_data(data) { 
    var params = []; 
    for(var name in data) { 
        var value = data[name]; 
        var param = encodeURIComponent(name).replace(/%20/g, '+') + '=' + encodeURIComponent(value).replace(/%20/g, '+'); params.push(param); 
    } return params.join('&'); 
}

リンクの設定

基本的にページ内の要素に移動するので、適切な「target=""」ターゲットフレームを指定する必要があります。この部分に注意して編集をすれば必ず失敗しません。

テーマの設定

各コンテンツのdivに「data-theme="b"」プロパティを追加する事により、テーマの変更が出来ます。

コンテンツ2





このテンプレート個人・法人を問わず自由にご利用頂けます。

ベースデザインについては「data-theme」で変更可能。

また、アイコンやページ遷移時のエフェクトも自由に変更できます。

こちらのページで簡単なチートシートがご覧になれます。

jQuery Mobileのまとめ資料




PC用サイトへ
会社情報
お問い合わせ



00-0000-0000

上記のソースを見れば分かるのですが、
[<div data-role="header" data-theme="b">]と[<div data-role="footer" data-theme="b">]の部分に追加されていますよね?　これでテーマを簡単に変更する事が出来ます。

詳細プロパティは以下で紹介しています。
http://www.finefinefine.jp/web/kiji1549/

新しいコンテンツを追加

新しいコンテンツの追加も至って簡単です。

既にあるコンテンツをコピー&ペーストすればいいだけです。

具体的に言うとコメントからコメントまでの間のコンテンツをコピー&ペーストするのみ

ただ以下の部分は必ず変更して下さい。