話題のサークルデザイン｜展開可能なソーシャルボタンをjQueryで実装できる「ClassySocial」
2013年06月05日 公開
スマートフォン用に作られたアプリのうち、今年はサークルが広まっています。
同時にフラットデザインなんかと併用して使われることがあり、今回はこうしたサークルデザインのアクセントとして使うことが出来るサークルボタンをご紹介致します。
これはjQueryを利用して、比較的簡単に設置出来るのが利点です。
ClassySocial
以下からダウンロード可能。
ClassySocial | Class.PM
とりあえずイメージとしては以下の様な。
中心から周りに展開。
ボタンから右へ展開。
今回の紹介されているものは、ソーシャルボタンですが、使い道はいろいろですね。
設置
jQueryお決まりのコレ。<head></head>内に記述。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
続いて、CSSとJavaScriptを読み込みます。
<script src="js/jquery.classysocial.js"></script>
<link rel="stylesheet" href="css/jquery.classysocial.css" />
勿論どこの階層に何をおくかは各個人の自由なので、その辺はカスタマイズしちゃってください。
そしてHTMLの記述ですが、このへんで呼び出すボタンや形状の設定を行います。
<div class="classysocial right" data-arc-length="360" data-image-type="facebook" data-picture="picozu" data-facebook-handle="picozu" data-twitter-handle="picozu_editor" data-email-handle="office@picozu.net" data-networks="facebook,twitter,email"></div>
オプションが幾つかあります。
**handleは、それぞれのサービスで使われている、プロフィールページ用のURLに付随しているIDとなります。
エキサイト翻訳やGoogle翻訳でも十分分かる範囲なのでこのへんは割愛。こちらのページの中断あたりに記載されています。
あとは上で紹介したdivのすぐ下にでも以下を追加しておく。
<script>
$(".classysocial").each(function() {
new ClassySocial(this);
});
</script>
という流れです。
ちなみにjQuery.Classysocial.jsを開くと以下のように、呼び出すオプション名と対応したリンク先URLがあります。
facebook: {
profile_url: "http://www.facebook.com/[HANDLE]",
name: "Facebook"
},
google: {
profile_url: "https://plus.google.com/[HANDLE]",
name: "Google Plus"
},
twitter: {
profile_url: "https://twitter.com/[HANDLE]",
name: "Twitter"
},
pinterest: {
profile_url: "http://pinterest.com/[HANDLE]",
name: "Pinterest"
},
linkedin: {
profile_url: "http://www.linkedin.com/profile/view?id=[HANDLE]",
name: "LinkedIn"
},
dribbble: {
profile_url: "http://dribbble.com/[HANDLE]",
name: "Dribbble"
},
email: {
profile_url: "mailto:[HANDLE]",
name: "Email"
},
socl: {
profile_url: "http://www.so.cl/#/profile/[HANDLE]",
name: "Socl"
},
instagram: {
profile_url: "http://instagram.com/[HANDLE]",
name: "Instagram"
},
divに記述するソーシャルサービス名から、アイコンのimg画像を呼び出し、さらには、ここで設定するURLが使われる仕組みになっています。
その為、この辺りをカスタマイズすることで、わりと柔軟な設計が可能になるというわけです。
ちょっと使いどころを選びそうではありますが、面白いプラグインですよね。
気に入りましたら使ってみるといいかもしれません。
それでは、また。