Coazure's Note: Web Design

顯示具有 Web Design 標籤的文章。顯示所有文章

星期二, 7月 26, 2011

如果再ul li用了display:inline-block，li雖然會列成一排，但是li間就會出現空格
一般來說這種列表通常是用float:left達成，不過有些時候用第一個方法會比較靈活
但是要怎麼解決中間有空白呢?

請參考下面:
ul { letter-spacing:-10px; }
li { letter-spacing:normal; }

就是在ul將letter-spacing調至看不到空白的狀況(請自己多試幾次，找到適合的值)
再設定li回正常的letter-spacing:normal;

本篇參考用display:inline-block做產品列表

星期二, 5月 03, 2011

Cufon 網頁字體渲染

想在網頁上用特殊字體就用它囉

使用 Cufon 渲染網頁字體
Cufon中文字符無法識別的解決方案

星期二, 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月 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;
}

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

星期一, 2月 28, 2011

jquery plugin - template

真的是很棒的東西
不過在查的時候發現其實有不止一種，而且還長的很像

試了一下，還是這種最強大，而且版本也比較新 jQuery.template()

下面的看完就大概會了
jQuery Templates Plugin筆記1
jQuery Templates Plugin筆記2
jQuery Templates Plugin筆記3
jQuery Templates Plugin筆記4
jQuery Templates Plugin筆記5
jQuery Templates Plugin筆記6
jQuery Templates Plugin筆記7
jQuery Templates Plugin筆記8

特別注意如果抓到的東西要用 html 顯示，是使用 {{html data}} 而不是 ${html data}

jquery plugin (2)

這幾天一直在翻 plugin ，想找出一些有用的東西
順便也發現很多好東西，趕快紀錄一下

挑出一些個人覺得比較好的

HoverFade、Coda Slider Effect、Horinaja、jqPlot Charts and Graphs for jQuery
jqFancyTransitions、3d Tag Sphere
特別是 Growl ，跟 BlockUI 的 growl 差不多功能，可是我覺得這比較棒
以上皆參考用jquery插件創建視覺震撼的網站其他的plugin 到網頁裡看吧~

Uploadify - 很漂亮的上傳套件

Supersized - Full Screen Background/Slideshow jQuery Plugin

hoverIntent - 讓hover事件delay一下，避免一直觸發事件

其他網頁還有

14個最新jQuery插件_網頁設計中常用案例
15款提高表格操作的jQuery插件
50個加強表單的jQuery插件
50多個強大的jQuery插件應用實例
100+ jquery插件應用

codrops - js特效教學網站

星期六, 2月 26, 2011

jquery plugin (1)

這邊大概是以酷炫度/實用度來排列

分別是

mb.jQuery.components

只能說，真是相見恨晚
這個plugin能做出的效果是原本我以為在flash才能做出來的
http://pupunzi.open-lab.com/mb-jquery-components/

jQuery BlockUI Plugin
彈出視窗，用起來很方便，覺得不錯用
同一作者個其他 plugin (http://jquery.malsup.com/) 也都設計的小巧完善
例如: Form Plugin、jQuery Corner Demo

css-template-layout
用很酷炫的方法排版(排版方式: http://a.deveria.com/csstpl/)，不曉得實際應用起來怎樣

UI.Layout

簡易方便的layout

jQSlickWrap

可讓圖片貼齊文字

Equal Heights

讓元素同高

以上有部分參考 http://www.chinahtml.com/1006/127570360318874.html

Flip!

Quicksand

ImageFlow

Slideout Tips

AviaSlider

以上部分參考: http://www.chinahtml.com/1007/128011448019434.html

FontEffect

fancybox

tiptip

星期二, 10月 05, 2010

Oracle 安裝

在 Windows 上啟用 PHP OCI8 擴展

Instant Client 二進制文件是 PHP 的 Windows 預構建二進制文件的補充。

下載 PHP 二進制壓縮文件（不是安裝程序版本）和 Apache。按照 PHP 手冊中的 Windows 系統上的安裝安裝它們。OTN 的開放源代碼開發人員中心包含有用背景資料的鏈接，如「在 Windows 2000/XP 上安裝 Oracle、PHP 和 Apache」，它介紹了如何安裝傳統、完整的 Oracle 10g 版本（Instant Client 不需要此版本）。
繼續操作之前檢查 PHP 是否正常運行。此階段未啟用 Oracle 支持。
從 OTN 的 Instant Client 頁面下載用於 Windows 的 Instant Client Basic 程序包。此壓縮文件的大小大約為 30MB。
創建一個子目錄（例如，c:\instantclient10_1），然後從壓縮文件中複製以下庫：
- oraociei10.dll
- orannzsbb10.dll
- oci.dll
這三個文件的總大小大約為 80MB。
要使用 PHP 老版本的「oracle」擴展（在 php.ini 中使用「extension=php_oracle.dll」啟用），則複製 ociw32.dll 而非 oci.dll。
編輯此環境，將 c:\instantclient10_1 添加到 PATH 中（位於其他 Oracle 目錄之前）。
例如，在 Windows 2000 上，依次單擊「開始」->「設置」->「控制面板」->「系統」->「高級」->「環境變量」，編輯系統變量列表中的 PATH。
如果使用了 tnsnames.ora 文件定義 Oracle Net 服務名稱，則將 tnsnames.ora 複製到 c:\instantclient10_1，並將用戶環境變量 TNS_ADMIN 設置為 c:\instantclient10_1。也可以在用戶環境變量 LOCAL 中定義默認的服務名稱。
設置必要的 Oracle 全球化語言環境變量，如 NLS_LANG。如果沒有設置，則使用默認的本地環境。有關更多詳細信息，請參見Oracle PHP 應用程序全球化概述。
無需設置不必要的 Oracle 變量，如 ORACLE_HOME 和 ORACLE_SID。
編輯 php.ini，並不要將 OCI8 擴展設為註釋：
```
extension=php_oci8.dll
```
將 extension_dir 指令設置為完整的 PHP 擴展 DLL 路徑。在 PHP 4 中，DLL 位於 PHP 軟件的「extensions」子目錄中。在 PHP 5 中，它們位於「ext」中。
重新啟動 Apache。

要檢查是否配置了擴展，請在 web 服務器可以讀取的地方創建一個簡單的 PHP 腳本。

<?php 
phpinfo();
?>

使用「http://」URL 將此腳本加載到瀏覽器中。瀏覽器頁面應包含一個顯示「OCI8 Support enabled」的「oci8」部分

參考至官網: http://www.oracle.com/technology/global/cn/pub/notes/technote_php_instant.html
其他參考:
http://a159874a.pixnet.net/blog/post/12647770
http://blog.ixpub.net/16565802/viewspace-364481

星期二, 9月 28, 2010

jquery 打字機效果

<script src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script>
$(function(){
var str = $('#typewriter').text();
var i = 0;
var typing_inst = setInterval(typing, 100);
function typing()
{
    if(i < str.length -1)
    {
        $('#typewriter').text(str.substr(0,i) + "_");
        i++;
    }
    else if(i == str.length-1)
    {
        $('#typewriter').text(str);
        clearInterval(typing_inst);
    }
}
});
</script>
<div id='typewriter'>
嚕啦啦~嚕啦啦~嚕啦嚕啦咧~~
</div>

做成hta的話把jquery 直接貼進去比較快

星期三, 9月 15, 2010

Ajax Control Toolkit

http://ajaxcontroltoolkit.codeplex.com/

http://renjin.blogspot.com/2008/09/ajax-modalpopup-extender-in-gridview.html
http://www.microsoft.com/taiwan/msdn/aspnetajax/downloads/

星期四, 8月 12, 2010

Microsoft.Jet.OLEDB.4.0 提供者並未登錄於本機電腦上

因為Microsoft Jet 沒有支援 64 位元的版本的Driver 所以才會發生錯誤

解決辦法:
1. 請點選標準工具中的「方案組態」下拉方塊，然後選擇「組態管理員」。如下圖：
http://img818.imageshack.us/img818/9089/3e56b726a8784cfeada0a1e.png

2. 點選「使用中的方案平台」下拉方塊，然後選擇「新增」，如下圖：
http://img829.imageshack.us/img829/1417/47eecc1abebf4baaaf165b6.png
3. 當出現「新增方案平台」對話方塊時，請在上方的「輸入或選擇新平台」下拉方塊選擇「x64」，然後按確定，再按「關閉」即可。如下圖：
http://img251.imageshack.us/img251/4138/6f30363a9dde47aa855a0f5.png

出自阿彬