【jQuery】はてなブログでソースコードをタブBOX表示するテスト
はてなで各種ソースコードを表示しようとした時、
普通にSyntaxHighlighterを使ってもいいんだけどね。
なーんかブログと見た目が合わないというか・・・
オリジナリティが無いというか・・・
そんなこんなで試作品を作ってみました。
まだ色や形は味気ないです(今はCSSまでやる気力なし)
BOX全体の色味をブログに合わせたり、一行置きにバックグラウンドの色を変えたり。
その上でプラグインっぽくスクリプトを外部呼び出しにすると完璧ですね(課題)
☆注意 完全にはてな用ってことで他の用途には使えません。
(弄れば使えるかなw)
あとChromeでしか表示確認してないっす(おぃおぃ
もちっと時間ができたらプラグイン化するので待っててにゃ☆
とにかくタブをポチポチして遊んでみてくださいw
$(function() { $('.src_box').each(function(){ var tab = $('<ul>').attr('class',"src_tab"); var content = $('<ul>').attr('class',"src_content"); $('pre',this).each(function(){ tab.append($('<li>').html($(this).attr('data-lang'))); var pre = $('<li>').append($(this).clone()); content.append(pre); }); $(this).html(''); tab.children().first().attr('class','select'); content.children().first().css('display','block'); $(this).append(tab).append(content); }); $('.src_tab li').click(function() { var parent = $(this).parent().parent(); var index = $('.src_tab li').index(this); $('.src_content li',parent).css('display','none'); $('.src_content li').eq(index).css('display','block'); $('.src_tab li',parent).removeClass('select'); $(this).addClass('select') }); });
.src_box{ margin:20px 0; border:none; box-shadow: 5px 5px 5px rgba(0,0,0,0.4); } .src_tab{ overflow:hidden; } ul.src_tab{ list-style:none; margin:0; margin-left:-40px; } .src_tab li{ background:#eee; padding:5px 25px; float:left; margin-right:1px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 20px; box-shadow: 5px 5px 5px rgba(0,0,0,0.4); } .src_tab li.select{ box-shadow: 5px 5px 5px rgba(0,0,0,0.2) inset; } ul.src_content{ width:550px; height:300px; list-style:none; margin:0; margin-left:-40px; overflow:auto; } .src_content li{ display:none; background:#eee; padding:0px; margin:0; } .src_box pre{ margin:0; padding:20px; } .hide {display:none;}
src_boxクラスを設定したdivでソースコード群を囲む。 その中に、はてな記法(スーパーpre記法)でソースコードを書く。 >|言語|の言語名は必ず設定! これがタブになります。 以下、サンプル。 はてなが反応しちゃうwので記号は全角にしています。実際は半角です。 <div class="src_box"> >|javascript| ソース ||< >|css| ソース ||< >|html| ソース ||< </div> 上から順番にタブが作られて行きます。 はてな記法で使える言語なら対応可能。
うぁぁぁぁ~!!これ欲しいよぉぉぉぉ↓↓↓
箱の中身は付いてるの?付いてるの?
- 出版社/メーカー: エイムクリエイツ
- メディア: その他
- この商品を含むブログを見る
【JavaScript】ちょっとこなれた書き方(演算子編)
と言っても、そんなに大したことでは無いのです。
でもしばらくJavaScriptから離れていると忘れるのでメモ的に。
1 条件演算子
JavaScriptを習いたての人はこう書く。if文はこれが基本。
var age = 18; //ageに18を代入 var text; if(age >= 18){ //もしageが18歳以上なら text = "大人"; //textに"大人"をセット }else{ text = "子供"; //textに"子供"をセット }
他の言語でも大概通用するif文の書き方です。
これをこなれた風に書くと・・・
var age = 18; var text = (age >= 18) ? "大人" : "子供";
こんな感じで行数も少なくなりますね。
2 論理演算子
これは確実に忘れる(=混乱する)ので書いておきます。
例の「論理AND(&&)」とか「論理OR(||)」とか、疲れてると確実に間違う。
まずはこういう書き方が基本ですよね。
//aの値が3~10の範囲内にあればbにtrue、無ければfalse var a = 5; var b; if(a >= 3 && a <= 10){ b = true; }else{ b = false; }
こなれた風だと
var b = (a >= 3) && (a <= 10);
それに派生して、突然ですが問題です。
var a = true && false; var b = true || false;
aとbに入ってる値はそれぞれ何でしょう?って咄嗟に訊かれても・・・(´Д`)ね
(答)aはfalse、bはtrue
じゃこれは?
var a = "cat" && "mouse"; var b = "cat" || "mouse";
ネコとネズミの共通点ってなに?っていう話じゃなくて・・・
(答) aは"mouse"、 bは"cat"
・・・って、なんでそうなるの?
"cat"とか"mouse"は、trueと同等と考えると分かりやすいです。
そして式は、左側の値から評価して合致したらそれで終わりになるのです。
つまり必ず
false && なんでも → falseになるわけです。
true || なんでも → true
【確認】いろいろと値を変えてみてね(動くかな
var a = && → false
var b = || → false
とても久しぶり(1年ぶり?)にブログを更新したけど、
自分自身全く進歩してないのが痛い。
もっと気軽に書けるといいんだけどにゃぁ。
JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2010/11/27
- メディア: 大型本
- 購入: 29人 クリック: 673回
- この商品を含むブログ (48件) を見る