星期二, 3月 22, 2011

二進位轉十六進位

最近才知道javascript的parseInt還可以設定基數XD
真是方便呀~


var val = parseInt("11111111", 2); //將 "11111111" 以2為基數剖析 , val = 255
var.toString(16); //將 val 換成16進位表示的字串

有了這兩個方法就可以簡單的完成二進位轉十六進位的程式囉

以下是我試寫的程式碼範例


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二進位轉十六進位</title>
<script>
function convert(){
    var source = document.getElementById("source");
    var target = document.getElementById("target");
    var arr = source.value.split("\n");
    target.value = "";
    for (var i in arr )
    {
        var binval = parseInt(arr[i], 2);
        if(!isNaN(binval))
            target.value += "0x" + binval.toString(16).toUpperCase() + "\n";
        else
            target.value += "\n";
    }
}
document.onkeyup = convert;

</script>
</head>

<body >
    <h2>二進位轉十六進位</h2>
    <div style="width:50%; float:left;">
        <span style="font-size: 20px;">二進位</span>
        <textarea id="source" style="width:100%; height:400px;"></textarea>
    </div>
    <div style="width:50%; float:left;">
        <span style="font-size: 20px;">十六進位</span>
        <textarea id="target" style="width:100%; height:400px;"></textarea>
    </div>
    <div style="text-align:center;">
        <button onclick="convert()" >轉換</button>
    </div>
</body>

星期一, 3月 21, 2011

星期日, 3月 20, 2011

[Blogger] code Highlight - 程式碼高亮

今天一直在找該怎麼把程式碼美美的貼在bloger上
試了很多種,有些不是不能用就是很麻煩
最後選了這套 Snippet ,這是用jqeury實現的,方法也很簡單
加上原本就有jquery的底,用起來更是順手 (不過缺點是肥了一點)

依網站上的教學可以快速地完成佈署
不過有些仍然沒有很完美,例如pre會換行..

程式碼換行感覺就蠻奇怪的..所以改了一下 css  (加這行 white-space: nowrap; )
可是這樣好像又會被版型擋住,只好再寫一段小程式碼,讓滑鼠一過去時顯示捲軸

以下是我的設定檔,供大家參考

<link href='jquery.snippet.min.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='jquery-1.4.4.min.js'/>
<script language='javascript' src='jquery.snippet.js'/>

<script language='javascript'>
$(function(){
    $('pre.csharp').snippet('csharp', { transparent: true, style: 'ide-codewarrior' });
    $('pre.cpp').snippet('cpp', { transparent: true, style: 'ide-codewarrior' });
    $('pre.c').snippet('c', { transparent: true, style: 'ide-codewarrior' });
    $('pre.css').snippet('css', { transparent: true, style: 'ide-codewarrior' });
    $('pre.html').snippet('html', { transparent: true, style: 'ide-codewarrior' });
    $('pre.javascript').snippet('javascript_dom', { transparent: true, style: 'ide-codewarrior' });
    $('pre.php').snippet('php', { transparent: true, style: 'ide-codewarrior' });
    $('pre.python').snippet('python', { transparent: true, style: 'ide-codewarrior' });
    $('pre.sql').snippet('sql', { transparent: true, style: 'ide-codewarrior' });
    $('pre.xml').snippet('xml', { transparent: true, style: 'ide-codewarrior' });
    $('pre').hover(function(){ $(this).css('overflow','auto') }, function(){ $(this).css('overflow','hidden') });
});
</script>


在 jquery.snippet.min.css 改一下這段

.snippet-wrap pre.sh_sourceCode{
    padding:1em 0em 1em 0em;
    line-height:20px;
    overflow:hidden;
    position:relative;
    white-space: nowrap;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    box-shadow: 2px 2px 5px #000;
    -moz-box-shadow: 2px 2px 5px #000;
    -webkit-box-shadow: 2px 2px 5px #000;
}


不過一想到現在要把文章裡面的程式碼都翻新一便就很頭大~"~

C# RichTextBox 文字分段改變顏色的方法

因為RichTextBox 的 SelectionColor 指的是選中的文字顏色,所以也包含之後加入的文字
如果需求只是簡單的改變下一行文字的顏色的話,可以這麼用


private void writeMsg(string msg, Color color = new Color())
{
    processBox.SelectionColor = color;
    processBox.AppendText(msg + Environment.NewLine);
}
/*
writeMsg("黑色文字");
writeMsg("紅色文字", Color.Red);
*/

Firefox 開發用套件

xpath checker - 檢視xpath

Tamper data - 檢視POST/GET的資料

Firebug - 這個不用介紹了吧

Modify Headers - 改送出的 Header , 對有些檢查賄IE only的網站可以騙過

HtmlAgilityPack C#的一個很方便的html paser

比較詳細的介紹可在這邊看
http://msdn.microsoft.com/zh-tw/ee787055


簡單範例:

HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(targetHTML);
HtmlNode n = doc.DocumentNode.SelectSingleNode("/html[1]/body[1]/table[1]/tr[1]/td[2]/font[1]");
string activity = HtmlEntity.DeEntitize(n.InnerHtml).Trim();
HtmlNode node;
if (key == "sex")
    node = doc.DocumentNode.SelectSingleNode("//input[@name='" + key + "' and @checked]");
else
    node = doc.DocumentNode.SelectSingleNode("//input[@name='" + key + "' ]");
if (node != null) signData.Add(key, node.Attributes["value"].Value);
else if ((signData.ContainsKey("chkmeal") && signData["chkmeal"] == "1") && key == "meal")
{
    if (foodDic.ContainsKey(food))
        signData.Add(key, foodDic[food]);
    else
        signData.Add(key, foodDic["不用餐"]);
}



不過不知道為甚麼..  它用XPath分析出來的的東西跟我想的有點差距
因為這樣我還用了Firefox的xpath checker去看,出來的東西果然不一樣


分享一個我的解決辦法~
先設定中斷點在 SelectNodes 方法* 後,然後直接下需要的XPath的Html tag (EX: //input)
之後在每個 HtmlNode 都會有它的絕對XPath路徑,直接去看那邊吧

* SelectSingleNode 是取單一個tag,傳回HtmlNodeCollection
  SelectNodes 是取多個符合的,傳回HtmlNode

星期六, 3月 19, 2011

找icon的好地方

iconfinderhttp://www.iconfinder.com/
有很多icon,搜尋也很方便

conventico: http://www.convertico.com/
有時候iconfinder只能抓png檔,這個網站可以線上轉換png以及其他種類的圖檔成.ico檔

星期五, 3月 11, 2011

jquery tiptip

tiptip還蠻好用的,只要標籤裡加個title就好了XD
而且也蠻好看的


可是又是因為跟mbExtruder衝突=   =
在mbExtruder裡面就是不給我用((哭哭

說起來也不是非得用mbExtruder,不過這種效果的plugin似乎不常見
還是不懂得下關鍵字呢~"~

星期三, 3月 09, 2011

jquery fancybox

換了好幾個 lightbox plugin,原本已經選定用fancybox來做了
沒想到跟mbExtruder一起用的時候,發現在mbExtruder的tab開起來的時候開lightbox,tab就掛了((哭

所以只後重找適合的了
不過當時因為發現fancybox沒有像blockUI那樣的message功能,所以就自己寫了一個
需要的話放進fancybox裡就好了~


var messagebox, showbox;
    $.fancybox.message = function(html, options) {
    //first
    if(!messagebox || !messagebox) {
        $('body').append('<div style="display:none;"><div id="fbmessagebox"></div><a id="fbshowmessagebox" href="#fbmessagebox" /></div>');
        messagebox = $('#fbmessagebox');
        showbox = $('#fbshowmessagebox');
    }
    options = $.extend({}, {showCloseButton: false, scrolling: "no" }, options);
    messagebox.html(html);
    showbox.fancybox(options).click();
    setTimeout("$.fancybox.close()", 1000);
}




btw...
facebox用起來不太順手
所以目前應該是試試看shadowbox


補記
facebox雖然頗好看,可是個人覺得不太好用
基本的選標籤的部分就限制重重~"~

星期日, 3月 06, 2011

jquery 的一些 UI 組件

除了很普遍的jqueryUI之外,其實還有很多很棒的UI可以用
列出一些找到的,都很不錯

jQuery tools









還有之前提過的
mb.jQuery.components

星期六, 3月 05, 2011

jquery 圓形 plugin

$.fn.circle = function (size) {
 size = size.replace("px", "");
 var _size = size==null? Math.min(this.height(),this.width()) :size;
 this.height(_size);
 this.width(_size);
 this.corner((_size/2) + "px");
}


恰好有需要就寫了,不過好像不太實用XD
基於 http://jquery.malsup.com/corner/

星期四, 3月 03, 2011

dotplurk 的 getplurks bug

會出這麼嚴重的錯也太誇張了

這個 bug 會導致在 getPlurks 時,怎麼設 offset 都沒用
總覺得這應該是頗常用到的 function ,卻 google 不到甚麼資料
還是用 .net 開發 plurk bot 的人太少了XD
要不是有去翻 source code 我現在應該還是怎麼做都做不出來...


言歸正傳
這個bug是因為作者不知道為甚麼在傳offset參數時多了一個中括號
只要把中括號刪掉就好囉

主要是更動下面兩部分

public plurks getPlurks(DateTime offset, int limit, string filter)
{
    ...
    var url = string.Format("{0}/{1}?api_key={2}&offset={3}&limit={4}&filter={5}", apiUrl, apiAction, apiKey, offset.ToUniversalTime().ToString("s"), limit, filter);
    ...
}
public plurks getPlurks(DateTime offset, int limit)
{
    ...
    var url = string.Format("{0}/{1}?api_key={2}&offset={3}&limit={4}", apiUrl, apiAction, apiKey, offset.ToUniversalTime().ToString("s"), limit);
    ...
}



這樣就OK了
懶惰的人也可以下載我改過的檔案  PlurkApi.dll [載點不保證永久有效]
另外我也將這個bug回報了,希望能快點修好囉