ラベル HTML・JavaScript の投稿を表示しています。 すべての投稿を表示
ラベル HTML・JavaScript の投稿を表示しています。 すべての投稿を表示

2010年10月8日金曜日

jTemplatesを使ってみる

ajaxでの通信後、HTML表示が面倒だなーと思ってたら、↓を発見。
業界的には気づくの遅いか？？

jTemplates

javascript内に書いたり、
HTMLコメントとして書いたり、
いろいろできるっぽいけど
テンプレートファイルに書き出すのがスマートっぽい。

テンプレートファイル


templateフォルダにsample.tplとか置いてみる。





JavaScript


jqueryと一緒に読み込んで、$(document).readyで書いてみる。
ちなみにjqueryは1.4.2






なんとまあ便利なんだろうか！！
投稿者 時刻: 0 件のコメント:
ラベル:

2010年1月30日土曜日

ウィンドウ名の取得

あんまり使わないと思ってたけど
意外と使う機会があった。
ウィンドウ名の取得。






メインウィンドウでない場合は、サイズを変えたいとか。
まあ、画面の使いまわし。
そういうの好きじゃないけど、
最後の最後ってとこで使えそう。
投稿者 時刻: 0 件のコメント:
ラベル:

2009年12月29日火曜日

ブラウザ機能抑止

ブラウザ機能抑止の世界では、

  • 右クリック

  • 戻るボタン

  • Ｆ５



あたりが抑止される対象だと思う。
まあ、ブラウザの機能を抑止するＷｅｂページってどうなんだ、
という議論は置いておいて。
（業務システムだとか、そういう場合かな）

またもや、jqueryを用いて抑止してみた。

一応、以下の場所ではBackspaceを許可。

  • <input type="text">

  • <input type="password">

  • <textarea></textarea>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Prohibit-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="css/default.css" type="text/css" />






</head>
<body>
<h2>最初のページ</h2>
<div>
テキストボックス：<input type="text" name="sampleText" id="sampleText" size="20" value="さんぷるてきすと">
<br>
パスワードボックス：<input type="password" name="samplePassword" id="samplePassword" size="10" value="">
<br>
テキストエリア：<textarea name="sampleArea" id="sampleArea" rows="10" cols="20">ああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいい
</textarea>

<a href="./sample2.html">次のページへ</a>
</div>

</div>

</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2009年10月18日日曜日

和暦→西暦＋曜日算出

よくよく考えてみると、
西暦に戻すと、月日は関係ないのかも。

ということで、一気に仕上げた。

曜日まで出すよ。



$(function(){
    $('#convertButton').click(function(){
        var d = $('#date_text').val();
        $('#result').html(d.getSeireki('漢字', true));
    });
});

var weeks = ["日","月","火","水","木","金","土"];

String.prototype.getSeireki = function(pattern, day) {
    var ret = this.match(/[0-9]+/g);
    var wareki = '';
    var year = -1;
    var month = -1;
    var date = -1;
    if (ret.length == 1) {
        year = ret[0];
        wareki = this.substring(0,this.indexOf(ret[0]));
    } else if (ret.length == 2) {
        year = ret[0];
        wareki = this.substring(0,this.indexOf(ret[0]));
        month = ret[1];
    } else if (ret.length == 3) {
        year = ret[0];
        wareki = this.substring(0,this.indexOf(ret[0]));
        month = ret[1];
        date = ret[2];
    } else {
        return '';
    }
    
    var result = '';
    if ("昭和" == wareki || "S" == wareki) {
        result = parseInt(year) + 1925;
    } else if ("平成" == wareki || "H" == wareki) {
        result = parseInt(year) + 1988;
    } else if ("大正" == wareki || "T" == wareki) {
        result = parseInt(year) + 1911;
    } else if ("明治" == wareki || "M" == wareki) {
        result = parseInt(year) + 1867;
    }
    
    var divYear = '';
    var divMonth = '';
    var divDate = '';
    if (pattern == undefined || pattern == '漢字') {
        pattern = 1;
        divYear = '年';
        divMonth = '月';
        divDate = '日';
    } else if (pattern == '-') {
        pattern = 2;
        divYear = '-';
        divMonth = '-';
        divDate = '';
    } else if(pattern == '/') {
        pattern = 3;
        divYear = '/';
        divMonth = '/';
        divDate = '';
    } else {
        pattern = 3;
    }
    
    if (ret.length == 1) {
        return result + divYear;
    } else if (ret.length == 2) {
        return result + divYear + month + divMonth;
    } else if (ret.length == 3) {
        var dispDay = '';
        if (day == true) {
            var strDate = result + '/' + (month) + '/' + date;
            var d = new Date(strDate);
            var youbi = weeks[d.getDay()];
            if (pattern == 1) {
                dispDay = ' ' + youbi + '曜日';
            } else if (pattern == 2 || pattern == 3) {
                dispDay = ' (' + youbi + ')';
            }
        }
        return result + divYear + month + divMonth + date + divDate + dispDay;
    }
}
投稿者 時刻: 0 件のコメント:
ラベル:

和暦→西暦

和暦→西暦変換について。

Stringオブジェクト（クラス？）を拡張して、
getSeirekiなるメソッドを作ってみた。

本当にこんな拡張でいいかは別にして。


最初と言うことで、
　和暦年　→　西暦年という変換だけど、

最終形は、
　和暦年月日　→　西暦年月日
ということだと思う。

たとえば、1989年1月8日は平成1年だけど、
1月7日だと昭和64年だということ。

今回のは、昭和56年　→　1981年という変換です。




投稿者 時刻: 0 件のコメント:
ラベル:

2009年10月15日木曜日

和暦

日本にいたら、一生？ついてまわる和暦。

西暦⇔和暦変換って、
JavaScriptでどうやろう。

とりあえず、

  • 明治が始まる日：1868/09/08

  • 大正が始まる日：1912/07/30

  • 昭和が始まる日：1926/12/25

  • 平成が始まる日：1989/01/08

  • そして...



出展：和暦西暦対応表

　　→　旧暦とか使ってるから、SEっぽくないなぁ。。。

という数字を持っていなければならないかな。
で、元号が分かるとアップデート。


とりあえず、ここが参考になるので、
読みながら勉強しよう。
投稿者 時刻: 0 件のコメント:
ラベル:

2009年9月10日木曜日

jqueryでDOM操作

xmlによるDOM操作をもうちょっと勉強してみた。

繰り返しとかeachでできるようになったけど、
子要素とか難しい。
childとか。

でも、だいたいできるようになった気がする。

ポイントは、dataTypeとか指定しないことかなぁー

　→　指定はずしたら、うまく動くようになった。。。

XMLソース


HTMLソース














投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月31日月曜日

XML解析①

JavaScriptの話ばかりですが、
やっぱりAjaxに触れないわけにはいかない、ということで、
ちょっとやってみました。

まず、一番大切なのは、xml解析かなと。

で、やっぱりjQueryかなと。

ここを参考にしてみました。
ありがとうございます。

で、使うjqueryはいつものやつ。
　→　テーブルソート①

ポイントは、xmlオブジェクトを

$(xml)

で扱えることかな。
findして、eachしてと、かなり便利。
jqueryに詳しいと簡単なことかと思うので、
今日はここまで。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" />

</head>
<body>

<div class="preview">
<ol id="samp-list">
</ol>

</div>

</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月30日日曜日

テーブルソート③

テーブルソートの第３回目

ダウンロードはここから。

  1. Table Sorting with Prototype [zipファイルをダウンロードします]



評価
  • 使いやすさ：○　何も指定しなくていいのは、実は楽かも。nosortもあるし。
  • 安心：prototypeは安心ですね。scriptaculousは使ったことないから、自分のスキルに若干不安あり。
  • その他：他のJavaScriptライブラリとの併用は大丈夫？統一すべきだよなー



jQueryのときと変わった部分
  1. 読み込むスクリプトが違うのは当然。
  2. scriptを読み込む＆class指定のみでソート可能



ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/style.css" type="text/css" media="print, projection, screen" />
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/scriptaculous/lib/prototype.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/fastinit.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/tablesort.js"></script>
</head>
<body>



ソートしたい場合は、class="sortable"を記述する
    
        
 
            first name 
            last name 
            age 
            total 
            discount 
            date 
        
 
     
     
        
 
            peter 
            parker 
            28 
            $9.99 
            20% 
            jul 6, 2006 8:14 am 
        
 
        
 
            john 
            hood 
            33 
            $19.99 
            25% 
            dec 10, 2002 5:14 am 
        
 
        
 
            clark 
            kent 
            18 
            $15.89 
            44% 
            jan 12, 2003 11:14 am 
        
 
        
 
            bruce 
            almighty 
            45 
            $153.19 
            44% 
            jan 18, 2001 9:12 am 
        
 
        
 
            bruce 
            evans 
            22 
            $13.19 
            11% 
            jan 18, 2007 9:12 am 
        
 
     



ソートしたくない場合は、class="nosort"を記述する
    
        
 
            first name 
            last name 
            age 
            total 
            discount 
            date 
        
 
     
     
        
 
            peter 
            parker 
            28 
            $9.99 
            20% 
            jul 6, 2006 8:14 am 
        
 
        
 
            john 
            hood 
            33 
            $19.99 
            25% 
            dec 10, 2002 5:14 am 
        
 
        
 
            clark 
            kent 
            18 
            $15.89 
            44% 
            jan 12, 2003 11:14 am 
        
 
        
 
            bruce 
            almighty 
            45 
            $153.19 
            44% 
            jan 18, 2001 9:12 am 
        
 
        
 
            bruce 
            evans 
            22 
            $13.19 
            11% 
            jan 18, 2007 9:12 am
</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月29日土曜日

テーブルソート②

続いてsortableTable

ダウンロードはここから。


  1. sortableTable.js [sortabletable.zipってやつ]

  2. MooTools [MooTools 1.2.3のJSMin]




評価


  • 使いやすさ：△　axis属性はどうなのか？明示的に指定するのは安心だけど面倒な面もあるね

  • 安心：○　mootoolsも安心かなぁ

  • その他：「矢印で幅を取られるのが困るけど、cssいじれば大丈夫だと思う。
    できれば下線にしたいな。」というのはjQueryのときと同じ意見



jQueryのときと変わった部分

1. 読み込むスクリプトが違うのは当然。

2. scriptの実行部分

script language="Javascript" type="text/javascript"><!--
    var myTable = {};
    window.addEvent('domready', function(){
            myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
    });
//--></script>

3. class指定不要


ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/sortableTable.css" type="text/css" media="print, projection, screen" />
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/mootools-1.2.3-core-jm.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/sortableTable.js"></script>
<script language="Javascript" type="text/javascript"><!--
    var myTable = {};
    window.addEvent('domready', function(){
            myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
    });
//--></script>
</head>
<body>


<table id="myTable" cellpadding="0" cellpadding="0">            
    <thead>
        <tr>
            <th axis="string">first name</th>
            <th axis="string">last name</th>
            <th axis="number">age</th>
            <th axis="number">total</th>
            <th axis="number">discount</th>
            <th axis="date">date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>peter</td>
            <td>parker</td>
            <td>28</td>
            <td>$9.99</td>
            <td>20%</td>
            <td>jul 6, 2006 8:14 am</td>
        </tr>
        <tr>
            <td>john</td>
            <td>hood</td>
            <td>33</td>
            <td>$19.99</td>
            <td>25%</td>
            <td>dec 10, 2002 5:14 am</td>
        </tr>
        <tr>
            <td>clark</td>
            <td>kent</td>
            <td>18</td>
            <td>$15.89</td>
            <td>44%</td>
            <td>jan 12, 2003 11:14 am</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>almighty</td>
            <td>45</td>
            <td>$153.19</td>
            <td>44%</td>
            <td>jan 18, 2001 9:12 am</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>evans</td>
            <td>22</td>
            <td>$13.19</td>
            <td>11%</td>
            <td>jan 18, 2007 9:12 am</td>
        </tr>
    </tbody>
</table>

</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月28日金曜日

テーブルソート①

[JS]ソートできるテーブルを実装するスクリプト10選に書いてあるテーブルソートを試してみようと思った。

使いやすさとか何かしらの評価が欲しい。

まずは、jQueryベースのやつ。

ダウンロードはここから。

  1. jQuery 1.3.2

  2. tablesorter [jquery.tablesorter.min.js]

  3. themes [blue]




評価

使いやすさ：○
安心：○　jQueryをただ信じてるだけ
その他：矢印で幅を取られるのが困るけど、cssいじれば大丈夫だと思う。
できれば下線にしたいな。



ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" />
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/jquery-1.3.2.min.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/jquery.tablesorter.min.js"></script>
<script language="Javascript" type="text/javascript"><!--
$(document).ready(function() {
    // call the tablesorter plugin
    $("#sample").tablesorter();
});
//--></script>
</head>
<body>


<table id="sample" class="tablesorter" cellspacing="1">            
    <thead>
        <tr>
            <th>first name</th>
            <th>last name</th>
            <th>age</th>
            <th>total</th>
            <th>discount</th>
            <th>date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>peter</td>
            <td>parker</td>
            <td>28</td>
            <td>$9.99</td>
            <td>20%</td>
            <td>jul 6, 2006 8:14 am</td>
        </tr>
        <tr>
            <td>john</td>
            <td>hood</td>
            <td>33</td>
            <td>$19.99</td>
            <td>25%</td>
            <td>dec 10, 2002 5:14 am</td>
        </tr>
        <tr>
            <td>clark</td>
            <td>kent</td>
            <td>18</td>
            <td>$15.89</td>
            <td>44%</td>
            <td>jan 12, 2003 11:14 am</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>almighty</td>
            <td>45</td>
            <td>$153.19</td>
            <td>44%</td>
            <td>jan 18, 2001 9:12 am</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>evans</td>
            <td>22</td>
            <td>$13.19</td>
            <td>11%</td>
            <td>jan 18, 2007 9:12 am</td>
        </tr>
    </tbody>
</table>

</body>
</html>

投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月20日木曜日

ショートカットキーを作る

ショートカットキーの作り方を考えた。

とりあえず、同時にCtrlが押されたとか、
そういうのは判断できた。

とはいっても、ここのサイトそのまんまだけど。。。


あとは、同時押しでCtrlと何が押されたかを判定できればOK
Ctrl判定すると、文字が取得できない。。。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="Javascript" type="text/javascript"><!--

function accesskey(e) {
    var ctrl = false;
    var shift = false;
    var alt = false;
    var keycode = -1;
    
    // Mozilla(Firefox, NN) and Opera
    if (e != null) {
            ctrl    = typeof e.modifiers == 'undefined' ? e.ctrlKey : e.modifiers & Event.CONTROL_MASK;
            shift = typeof e.modifiers == 'undefined' ? e.shiftKey : e.modifiers & Event.SHIFT_MASK;
            alt = typeof e.modifiers == 'undefined' ? e.altKey : e.modifiers & Event.ALT_MASK;
            // イベントの上位伝播を防止
            e.preventDefault();
            e.stopPropagation();
        
        } else { // Internet Explorer
            ctrl    = event.ctrlKey;
            shift = event.shiftKey;
            alt     = event.altKey;
            // イベントの上位伝播を防止
            event.returnValue = false;
            event.cancelBubble = true;
        }
        
        if (!ctrl && !shift && !alt) {
            if (e != null) {
                keycode = e.which;
            } else {
                keycode = event.keyCode;
            }
            // キーコードの文字を取得
            keychar = String.fromCharCode(keycode).toUpperCase();
        }
        
        document.getElementById('result0').innerHTML = keycode;
        document.getElementById('result1').innerHTML = keychar;
        
        // Ctrl同時押しの場合
        if (ctrl) {
            document.getElementById('result2').innerHTML = 'Ctrlが押されました';
        } else if (shift) {// Shift同時押しの場合
            document.getElementById('result2').innerHTML = 'Shiftが押されました';
        
        } else if (alt){ // Alt同時押しの場合
            document.getElementById('result2').innerHTML = 'Altが押されました';
        }
}

document.onkeydown = accesskey;
//--></script>
</head>
<body>
<div id="result0"></div>
<hr/>
<div id="result1"></div>
<hr/>
<div id="result2"></div>
</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月19日水曜日

ondblclick

リンクの連打を考えていたら、

ondblclick

っていう属性を知りました。
ダブルクリックイベントを拾います。

で、サンプルを書いてみた。
いまいち期待とおりの動作をしない。

onclickとondblclickの併用は付加？

それじゃあ、連打してると＃のリクエストがとぶような気がするのは？




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="Javascript" type="text/javascript"><!--
  function onclick_action() {
    document.getElementById('result').innerHTML = 'onclickイベント';
 return false;
  }
  
  function ondblclick_action() {
    document.getElementById('result').innerHTML = 'ondblclickイベント';
 return false;
  }
  
  function init() {
    document.getElementById('result').innerHTML = '';
 return false;
  }
//--></script>
</head>
<body>
  <ul>
    <li><a href="#" onclick="return onclick_action();">onclickイベント発動</a></li>
    <li><a href="#" ondblclick="return ondblclick_action();">ondblclickイベント発動</a></li>
 <li><a href="#" onclick="return onclick_action();"　ondblclick="return ondblclick_action();">どっちでもイベント発動</a></li>
 <li><a href="#" onclick="return init();">初期化</a></li>
  </ul>
  <div id="result"></div>
</body>
</html>





もうちょっと考えてみよっと。
投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)