XiaoLian

使用JQuery前，需要引用Jquery元件及FixedHeaderTable元件。 固定Table的標頭(Header)，適用於資料量無法在一個頁面呈現，卻不用分頁的一個顯示方式，易於閱讀。 格式語法︰ <table>    <!-- 頁首標題 start -->   <thead> <tr>      <th></th> </tr>   </thead>   <!-- 頁首標題 end -->   <!-- 頁尾標題 start (若不需要顯示頁尾，則可省略) -->   <tfoot> <tr>  <td></td> </tr>   </tfoot>   <!-- 頁尾標題 end (若不需要顯示頁尾，則可省略)-->   <!-- 內容 start -->   <tbody> <tr>  <td></td> </tr>   </tbody>   <!-- 內容 end --> </table> HTML 頁面(參考)︰ <div class=" fullScreenTable " > <table cellspacing="1" id="GridView1" border="1" > <!-- 頁首標題 start --> <thead> <tr> <th>Name</th> <th>Major</th> <th>Sex</th> <th>English</th> <th>Geometry</th> </tr> </thead> ...

基於工作上關係，需將固定某些欄資訊，並可捲動觀看右邊欄位內的資料。此做法有很多種方式，看過大部分做法都使用Jquery元件，好處是簡單易上手。若不使用任何元件是否可以達到？答案是可以的。   觀念作法： 左邊一個Table，右邊一個Table，如要變動右邊，需要將Div包覆右邊Table（DIV用意產生捲軸之用途，可詳 My Blog:區塊內捲軸呈現 ），最後被一個大Table包覆 。       示意圖：   部分HTML（參考）︰ <!--Big Table Start--> <table width=" 400 "  border='0' cellpadding='1' cellspacing='0' bordercolor='#000000' align='center' style='table-layout:fixed' >   <tr>     <td width=" 80 "> <!--Left Table Start--> <table width="80"  border='1' cellpadding='1' cellspacing='0' bordercolor='#000000' class='style3'>   <tr align='center' valign='middle' height='25'>     <td width="80"><div align="center">姓名月份</div></td>   </tr>     … 省略 … </table> <!--Left Table End--> </td>     <td width=" 320 ">  <!--Right Tab...

CHARINDEX和PATINDEX函數常常用來在一段字符中搜索字符或者字符串。 如果被搜索的字符中包含有要搜索的字符，那麼這兩個函數返回一個非零的整數，這個整數是要搜索的字符在被搜索的字符中的開始位數。 PATINDEX函數支持使用通配符來進行搜索，然而CHARINDEX不支持通佩符。 CHARINDEX： 此函數返回一個整數，返回的整數是要找的字符串在被找的字符串中的位置。假如CHARINDEX沒有找到要找的字符串，那麼函數整數「0」。 語法： CHARINDEX ( expression1 , expression2 [ , start_location ] )  說明： expression1是要到expression2中尋找的字符中，start_location是CHARINDEX函數開始在expression2中找expression1的位置。 Ex： SELECT CHARINDEX('Jason', 'Hello~Welcome to Jason blog') => 18 PATINDEX： 函數返回字符或者字符串在另一個字符串或者表達式中的起始位置，PATINDEX函數支持搜索字符串中使用通配符，這使PATINDEX函數對於變化的搜索字符串很有價值。 語法： PATINDEX ( '%pattern%' , expression ) 說明： pattern是你要搜索的字符串，expression是被搜索的字符串。一般情況下expression是一個表中的一個字段，pattern的前後需要用「%」標記，除非你搜索的字符串在被收縮的字符串的最前面或者最後面。 Ex： SELECT PATINDEX('%Jason%', 'Hi~My name is Jason Lian') => 15

使用JQuery前，需要引用Jquery元件。 手風琴式選單，適用於網頁中左邊區塊做為功能式選單。其效果有滑鼠over及滑鼠click HTML 頁面(參考)︰ <!--滑鼠click--> <div style="float:left" >   <p><strong>&nbsp;Works on clicking </strong></p>   <div id=" firstpane " class="menu_list"> <!--Code for menu starts here-->    <!-- Header-1 start -->   < p class="menu_head" > Header -1</p>      <div class="menu_body">          <a href="#">Link-1</a>          <a href="#">Link-2</a>          <a href="#">Link-3</a>    </div>    <!-- Header-1 End -->   <!-- 多個則參考Header-1區塊格式-->   … 省略 …      </div>  <!--Code for menu ends here--> </div> <!--滑鼠over--> <div style="float:left; ma...

部分HTML（參考）︰ <div class=" DIV22 " > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 省略之... </div> CSS（參考）︰ <style type="text/css"> .DIV22 { scrollbar-DarkShadow-Color:#9FB7D7;    scrollbar-Track-Color:#F7F7F7;        scrollbar-Face-Color:#C7CFFF;         scrollbar-Shadow-Color:#FFFFFF;         scrollbar-Highlight-Color:#FFFFFF;    scrollbar-3dLight-Color:#C7CFF7;      scrollbar-Arrow-Color:#4F5F87; //以上是捲軸美化相關設定     overflow-y: auto;   //x捲軸的顯示  【註1】 overflow-x: auto;   //y捲軸的顯示  【註1】 HEIGHT:580px;  margin-top:15px;  margin-left:0px; Color:#000000; } </style> 執行畫面︰ 【註1】︰ 捲軸顯示有四種狀態 visible(預設) ︰內容完全顯示不嵌入顯示區域。 auto ︰內容嵌入顯示區域，並視情況顯示水平與垂直捲軸。 scroll ︰內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動。 hidden ︰內容嵌入顯示區域，捲軸不會出現。

使用JQuery前，需要引用Jquery元件及Curvycorners元件 。 網頁中的區塊呈現圓角效果，做法有很多種，在工作上遇到大部分的人是用切圖方式加上搭配CSS相關設定。無意間在網路上發現Jquery好用簡單元件，就算網頁程式設計師不懂切圖做圖，也可以輕鬆達到區塊呈現圓角效果。 HTML 頁面（參考）︰ < div class=" myBox " > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 省略之... < /div > Javascript︰ $(function(){    settings = {           tl: { radius: 20 },           tr: { radius: 20 },           bl: { radius: 20 },           br: { radius: 20 },           antiAlias: true,           autoPad: true,           validTags: [" div "]       }   $(' .myBox ').corner(settings); });; CSS（參考）︰ <style type="text/css"> .myBox {     margin:  10px 0 0 0px;     border: 0px solid #ffffff;     Color:#000000;     width: 90%;    height: 100px;     padd...

CSS最令人頭痛的就是瀏覽器校正問題，因為每個瀏覽器對CSS的解釋都不太一樣， 尤其是IE瀏覽器最為嚴重，每一個版本支援度有些不同，至於Firfox及Chrome算是比較照規矩來，處理上比較簡單。 拜Google所賜，擷取兩篇文並整理引用之。其目的最主要讓不同瀏覽器對CSS字符有不同區別並分別定義之。  轉貼引用︰ ☆區別IE和Firefox 【辨識符號】：「 \9 」 【範例練習】： #tip { background:blue;     /*Firefox 背景變藍色*/ background:red \9 ; /*IE6、IE7、IE8背景變紅色*/ } 【說明】： 因為IE瀏覽器看得懂「\9」，但是非IE的瀏覽器一律看不懂， 因此就可以用這個語法來區分IE和Firefox(非IE瀏覽器，像是Opera、Google Chrome、Safari等)， 因此以上CSS範例中，非IE瀏覽器是顯示藍色背景，IE系列瀏覽器是顯示紅色背景。 ========================================================================================== ☆區別IE6、IE7、IE8、Firefox 【辨識符號】：「 \9 」、「 * 」、「 _ 」 【範例練習】： #tip { background:blue;     /*Firefox 背景變藍色*/ background:red \9 ;   /*IE8 背景變紅色*/ * background:black;   /*IE7 背景變黑色*/ _ background:orange;  /*IE6 背景變橘色*/ } 【說明】： 因為IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號)，另外IE6可辨識「_」(底線)， 因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得CSS語法， 所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、Google Chrome、Safari等)。 ===========================================================================...

雖然目前IE6人數使用上比例減少，為了顧及少數族群及追求完美，針對PNG在IE6上底色無法變透明之問題， 網路上解決方式很多種，本篇只介紹其中一種（PNG為底圖）。 語法︰ background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='xxxx.png', sizingMethod='crop'); ※sizingMethod參數 scale 值的意思是依你設div寬高大小，讓底圖延展隨寬高範圍延展。 image 值的意思是照圖片原本尺寸顯示，無論你div值設大設小，都依圖片大小顯示。 crop 是不管你圖大圖小，都僅在div框架範圍裡，有多少就露多少，不比例縮放。 範例參考： #fixed-ad {   /*標準版本*/   background-image:url(/img/back1.png);   width:50px;   height:50px;   position:fixed; } *html #fixed-ad {   /* for IE 6.0以前版本 （*html->IE6） */   background-image: none;   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/back1.png', sizingMethod='crop');   width:50px;   height:50px;   position:fixed;   }

使用JQuery前，需要引用Jquery元件及jqplot相關元件，不同的圖表所需引用的.JS檔不同，詳情請參照 jqplot官網範本 ，本篇介紹以長條圖為例。   檔案引用（僅供參考）︰ <script type="text/javascript" src="inc/jquery-1.4.3.min.js"></script> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="inc/excanvas.min.js"></script><![endif]--> <script type="text/javascript" src="inc/jquery.jqplot.min.js"></script> <script type="text/javascript" src="inc/jqplot.barRenderer.min.js"></script> <script type="text/javascript" src="inc/jqplot.categoryAxisRenderer.min.js"></script> <script type="text/javascript" src="inc/jqplot.pointLabels.min.js"></script> <link rel="stylesheet" type="text/css" href="inc/jquery.jqplot.min.css" /> HTML 頁面（參考）︰ <div id=" chart1 " style="margin-top:20px; margi...