Markdownで書いたQiita:Teamの投稿に追加して使えそうなjQueryを使ったjavaScript集です。
※IE/Safari/Chromeで動作確認してます。IEだと毎回実行確認の警告が出ます。
コード (``` ～ ```)
前置き:コードについて
こんなMarkdownを書くと
```txt:コードのタイトル
コードの本文
```
こんな感じでコードが表示されます。
コードのタイトル
コードの本文
出力されるhtmlです。divのcode-frameをキーに色々できそうです。
コードはこんな感じで出力されます。
<div class="code-frame" data-lang="txt">
<div class="code-lang">
<span class="bold">コードのタイトル</span>
</ div>
<div class="highlight">
<pre>
コードの本文
</pre>
</ div>
</ div>
コード開閉
長いコードの開閉です。
テストコード
テストコード
・・・
・・・
・・・
直後の```で囲ったコードを開閉させます。
コードの直前に置く開閉
<a class="open"><i class="fa fa-folder-open"/> <font color=blue>[ソースコード開閉]</font></a>
リンククリックで開閉処理。ページの適当な場所に記述
<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
//クリックした時の開閉処理
$("a.open").on("click",function(){$(this).parent().next("div.code-frame").find("pre").slideToggle(200);});
//最初に閉じて置く場合
$('a.open').each(function(index,elm){$(elm).parent().next("div.code-frame").find("pre").slideToggle(0);});
});
//]]>
</script>
コードスクロール
長いソースコードをスクロールさせます。
テストコード
1.・・・
2.・・・
3.・・・
4.・・・
5.・・・
6.・・・
7.・・・
8.・・・
9.・・・
直後の```で囲ったコードをスクロールさせます。
コードの直前に置く
<div class="scroll"/>
最大の高さを変更します("max-height":"100px"の部分)。
コードのスクロール。ページの適当な場所に記述
<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('div.scroll').each(function(index,elm){
$(elm).next("div.code-frame").find("pre").css({"overflow":"auto","max-height":"100px"});
});
});
//]]>
</script>
全コードのスクロール。ページの適当な場所に記述
<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('div.code-frame').each(function(index,elm){
$(elm).find("pre").css({"overflow":"auto","max-height":"400px"});
});
});
//]]>
</script>
コード全選択ボタン
コードをボタン押下で全選択します。
テストコード
1.・・・
2.・・・
コードの直前に置く
<input type="button" id=btnSelect />
コード全選択ボタン。ページの適当な場所に記述
<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
btnSelect.value="全選択";
btnSelect.onclick=function(){
var selection=window.getSelection();
selection.removeAllRanges();
var range=document.createRange();
range.selectNodeContents($('input#btnSelect').parent().next("div.code-frame").find("pre")[0]);
window.getSelection().addRange(range);
};
//]]>
</script>
テーブル
テーブルフィルタ
リストボックスでテーブルのフィルタ機能です。
| OS | 機種 |
|---|---|
| iOS | iPhone5S |
| iOS | iPhone6 |
| Android | Xperia A |
直後のテーブルにフィルタを追加します。
テーブルの直前に置く
<div id="jsOutSelect"/>
|OS|機種|
|:--|:--|
|iOS|iPhone5S|
|iOS|iPhone6|
|Android|Xperia A|
リスト選択で絞込み。ページの適当な場所に記述
<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
//tdタグのテキスト取得
function tdText(elmTr,idx){return $(elmTr).find('td').eq(idx).text();}
//リストボックス作成
$(jsOutSelect).next("table").find('tr:first th').each(function(idxTh,elmTh){
var elmSelect=$('<select class="tableSelect">');
$(elmTh).append('<BR>').append(elmSelect);
//リスト要素作成
elmSelect.append($("<option>").val("all").text("全て"));
$(elmTh).closest("table").find('tbody tr').each(function(idx,elmTr){
var name=tdText(elmTr,idxTh);
if(name&&elmSelect.find("[value='"+name+"']").length == 0){
elmSelect.append($("<option>").val(name).text(name.slice(0,25)));
}
elmTr.value=~0;
});
});
//リストを変更した時の絞り込み処理
$("select.tableSelect").on("change", function() {
var sel=this,col=$(this).parent().index();
$(this).closest("table").find('tbody tr').each(function(idx,elmTr){
if(sel.value=="all"||sel.value==tdText(elmTr,col))
{elmTr.value|=(1<<col);}else{elmTr.value&=~(1<<col);}
if(elmTr.value==~0){$(elmTr).show();}else{$(elmTr).hide();}
});
});
});
//]]>
</script>
リストボックスの表示最大文字数は、.text(name.slice(0,25))の部分。
trタグのvalueに、行の各カラムの一致状態をビットフラグで保持してます。
テーブルソート
テーブルのソート機能です。矢印ボタンで文字ソートします。
| 機種 | Version |
|---|---|
| iPhone4S | 9.0 |
| iPhone5 | 8.3 |
| iPhone6 | 8.0.1 |
直後のテーブルにソートボタンを追加します。
テーブルの直前に置く
<div id="jsOutSort"/>
|機種|Version|
|:--|:--|
|iPhone4S|9.0|
|iPhone5|8.3|
|iPhone6|8.0.1|
テーブルソート。ページの適当な場所に記述
<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
//tdタグのテキスト取得
function tdText(elmTr,idx){return $(elmTr).find('td').eq(idx).text();}
//ソートボタン作成
$(jsOutSort).next("table").find('tr:first th').each(function(){
$(this).append('<input type="button" value="▼" class="sortButton">');
});
//クリックイベント設定
$("input.sortButton").on("click", function() {
var col=$(this).parent().index();
var rows=$(this).closest("table").find('tbody tr');
rows.sort(this.value=="▼"
?function(a,b){return tdText(a,col) < tdText(b,col)?1:-1;}
:function(a,b){return tdText(a,col) > tdText(b,col)?1:-1;});
this.value=(this.value=="▼"?"▲":"▼");
$(this).closest("table").children('tbody').html(rows);
});
});
//]]>
</script>
テーブル結合
テーブルの結合機能です。空白のセルを横方向に結合します。
| A | B | C | |
|---|---|---|---|
| a | |||
| b | |||
| c | |||
| a | b | c | ｄ |
テーブルの空白セルを結合
|A|B|C||
|:--|:--|:--|:--|
|a||||
||b|||
|||c||
|a|b|c|ｄ|
テーブル結合。ページの適当な場所に記述
<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" id="jsMergeCell">
//<![CDATA[
$(document).ready(function(){
$(jsMergeCell.parentNode).find("table").find('tr').each(function(){
var celm,cols=0;
$(this).children().each(function(){
if (celm && !this.innerHTML){
celm.setAttribute('colspan',++cols);
$(this).remove();
} else {
celm = this;
cols = 1;
}
});
});
});
//]]>
</script>