隨筆-5  評論-1  文章-0  trackbacks-0
            置頂隨筆
               摘要: 語法解釋:
          1. $("#select_id").change(function(){//code...}); //為Select添加事件,當(dāng)選擇其中一項時觸發(fā)
          2. var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的Text
          3. var checkValue=$("#select_id").val(); //獲取Select選擇的Value
          4. var checkIndex=$("#select_id ").get(0).selectedIndex; //獲取Select選擇的索引值
          5. var maxIndex=$("#select_id option:last").attr("index"); //獲取Select最大的索引值
          jQuery設(shè)置Select選擇的Text和Value:
          語法解釋:
          1. $("#select_id ").get(0).selectedIndex=1; //設(shè)置Sel  閱讀全文
          posted @ 2011-12-14 23:04 古木天琪 閱讀(7158) | 評論 (1)編輯 收藏
            2011年12月22日
               摘要: RequireJS 發(fā)布 1.0.0 了,很值得關(guān)注,看是否有可借鑒之處。
          本次比較不涉及具體實現(xiàn)代碼,主要比較兩者的 API 設(shè)計。

          http://requirejs.org
          http://seajs.com

          從定位談起

          首先,從 requirejs.org 首頁可以得知,RequireJS 的定位是:

          RequireJS 是一個 JavaScript 文件和模塊加載器,特別為瀏覽器優(yōu)化,同時也可運行在 Rhino 和 Node 環(huán)境中。

          SeaJS 的定位是:

          SeaJS 是一個適用于瀏覽器端的 JavaScript 模塊加載器。

          不要小看這兩句話,任何類庫/框架的定位,或者說愿景/目標(biāo),最終會決定該類庫/框架的方方面面  閱讀全文
          posted @ 2011-12-22 23:01 古木天琪 閱讀(2287) | 評論 (0)編輯 收藏
            2011年12月14日
               摘要: 語法解釋:
          1. $("#select_id").change(function(){//code...}); //為Select添加事件,當(dāng)選擇其中一項時觸發(fā)
          2. var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的Text
          3. var checkValue=$("#select_id").val(); //獲取Select選擇的Value
          4. var checkIndex=$("#select_id ").get(0).selectedIndex; //獲取Select選擇的索引值
          5. var maxIndex=$("#select_id option:last").attr("index"); //獲取Select最大的索引值
          jQuery設(shè)置Select選擇的Text和Value:
          語法解釋:
          1. $("#select_id ").get(0).selectedIndex=1; //設(shè)置Sel  閱讀全文
          posted @ 2011-12-14 23:04 古木天琪 閱讀(7158) | 評論 (1)編輯 收藏
            2011年11月16日
          一、有點俗態(tài)的開場白

          要是兩年前,實現(xiàn)“兼容性的漸變效果”這個說法估計不會被提出來的,那個時候,說起漸變背景,想到的多半是IE的漸變?yōu)V鏡,其他瀏覽器尚未支持,但是,在對CSS3支持日趨完善的今天,實現(xiàn)兼容性的漸變背景效果已經(jīng)完全成為可能,本文就將展示如何實現(xiàn)兼容性的漸變背景效果。在眾多的瀏覽器中,目前不支持Opera瀏覽器。

          本文實例效果都是同樣的效果,就是垂直漸變,起始顏色紅色,結(jié)束顏色藍(lán)色,結(jié)束的藍(lán)色的透明度是0.5。

          二、IE瀏覽器下的漸變背景

          IE瀏覽器下漸變背景的使用需要使用IE的漸變?yōu)V鏡。如下代碼:

          filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

          相關(guān)說明:
          上面的濾鏡代碼主要有三個參數(shù),依次是:startcolorstr, endcolorstr, 以及gradientType。
          其中g(shù)radientType=1代表橫向漸變,gradientType=0代表縱向淅變。startcolorstr=”色彩” 代表漸變漸變起始的色彩,endcolorstr=”色彩” 代表漸變結(jié)尾的色彩。

          上面代碼實現(xiàn)的是紅色至藍(lán)色的漸變,但是不含透明度變化,這是由于IE目前尚未支持opacity屬性以及RGBA顏色,要實現(xiàn)IE下的透明度變化,還是需要使用IE濾鏡,IE的透明度濾鏡功能比較強(qiáng)大,這種強(qiáng)大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸變的用法類似。例如下面的使用:

          filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

          其中各個參數(shù)的含義如下:
          opacity表示透明度,默認(rèn)的范圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。
          finishopacity 是一個可選參數(shù),如果想要設(shè)置漸變的透明效果,就可以使用他們來指定結(jié)束時的透明度。范圍也是0 到 100。
          style用來指定透明區(qū)域的形狀特征:
          0 代表統(tǒng)一形狀
          1 代表線形
          2 代表放射狀
          3 代表矩形。
          startx 漸變透明效果開始處的 X坐標(biāo)。
          starty 漸變透明效果開始處的 Y坐標(biāo)。
          finishx 漸變透明效果結(jié)束處的 X坐標(biāo)。
          finishy 漸變透明效果結(jié)束處的 Y坐標(biāo)。

          綜合上述,實現(xiàn)IE下含透明度變化紅藍(lán)垂直漸變的代碼如下:

          .gradient{
              width:300px;
              height:150px;
              filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 
          progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
              -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 
          progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
          }
          
          <div class="gradient"></div>
          

          結(jié)果如下圖:

          IE6下含半透明的漸變背景效果 張鑫旭-鑫空間-鑫生活

          三、Firefox瀏覽器下的漸變背景

          對于Firefox瀏覽器下(Firefox 3.6+)漸變背景的實現(xiàn)需使用CSS3漸變屬性,-moz-linear-gradient屬性,在之前文章我詳細(xì)介紹了Firefox3.6下漸變背景的實現(xiàn),您有興趣可以狠狠地點擊這里:CSS漸變之CSS3 gradient在Firefox3.6下的使用 。這里我就不再具體講述了,對于本文開頭提到的要實現(xiàn)的效果的實現(xiàn)可以參見下面的代碼:

          .gradient{
              width:300px;
              height:150px;
              background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
          }
          
          <div class="gradient"></div>
          

          此段代碼在Firefox3.6瀏覽器下的效果是:

          Firefox3.6下含半透明的漸變背景效果 張鑫旭-鑫空間-鑫生活

          四、chrome/Safari瀏覽器下的漸變背景實現(xiàn)

          對于webkit核心的瀏覽器,如Chrome/Safari瀏覽器下漸變背景的實現(xiàn)也是使用CSS3 漸變方法,css-gradient,具體為-webkit-gradient,使用語Firefox瀏覽器是有一些差異的。我在上上一篇文章對此進(jìn)行了非常詳細(xì)的介紹,您可以狠狠地點擊這里:CSS gradient漸變之webkit核心瀏覽器下的使用 。具體使用就不詳述了,參見下面的代碼:

          .gradient{
              width:300px;
              height:150px;
              background:-webkit-gradient(linear, 0 0, 0 bottom,

          from(#ff0000), to(rgba(0, 0, 255, 0.5)));
          }
          
          <div class="gradient"></div>
          

          此段代碼在Safari 4瀏覽器下的效果是:

          Safari下含半透明的漸變背景效果 張鑫旭-鑫空間-鑫生活

          補(bǔ)充于2011-04-07
          Opera11也支持了CSS3漸變。其用法與Firefox一致,需要使用-o-的前綴。另外,Chrome的漸變用法也開始向FireFox瀏覽器下的用法靠攏。

          五、綜合 – 兼容性的漸變背景效果

          相關(guān)代碼如下:

          .gradient{
              width:300px;
              height:150px;
              filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 
          progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
              -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 
          progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
              background:red; /* 一些不支持背景漸變的瀏覽器 */
              background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
              background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
              background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
          }
          
          <div class="gradient"></div>
          

          效果分別為上面三個分類的截圖。
          您可以狠狠地點擊這里:兼容性的漸變背景效果demo

          六、結(jié)語

          CSS3的潛力非常的大,就漸變這一塊可以創(chuàng)建很多精湛的UI效果,而以往這些效果都只能使用圖片實現(xiàn)。CSS漸變背景的實現(xiàn)可以有效降低網(wǎng)頁的圖片數(shù),也就是降低了HTTP請求,是非常受用的。但是IE瀏覽器一直蹲在茅廁邊啃雞腿——自以為美味,得使用資源消耗很高的濾鏡才能實現(xiàn)漸變效果。所以,目前而言,漸變背景的的應(yīng)用與否還是有待于利弊權(quán)衡的。

           

          來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
          原文地址: http://www.zhangxinxu.com/wordpress/?p=743

          posted @ 2011-11-16 23:33 古木天琪 閱讀(199) | 評論 (0)編輯 收藏
            2011年10月17日
               摘要: 本文會給你們展示50個jquery代碼片段,這些代碼能夠給你的javascript項目提供幫助。其中的一些代碼段是從jQuery1.4.2才開始支持的做法,另一些則是真正有用的函數(shù)或方法,他們能夠幫助你又快又好地把事情完成。如果你發(fā)現(xiàn)你任何可以做得更好的地方的話,歡迎把你的版本粘貼在評論中!1. 如何修改jQuery默認(rèn)編碼(例如默認(rèn)UTF-8改成改GB2312): $.ajaxSetup({ a...  閱讀全文
          posted @ 2011-10-17 11:44 古木天琪 閱讀(272) | 評論 (0)編輯 收藏
            2011年9月28日

           

          函數(shù)節(jié)流技術(shù)的主要思路是,通過一個定時器,阻斷連續(xù)重復(fù)的函數(shù)調(diào)用。對于我們自己內(nèi)部使用的函數(shù),這通常意義不大,也不推薦使用這個技術(shù),它可能會丟失對某些數(shù)據(jù)的處理。但是對于在用戶界面調(diào)用的函數(shù),卻非常有意義。例如一個 mousemove 或者 IE 中 resize 事件的監(jiān)聽函數(shù)。

          JavaScript 函數(shù)節(jié)流

          這類事件監(jiān)聽函數(shù)往往伴隨著兩個主要特征:1. 短時間內(nèi)連續(xù)多次重復(fù)觸發(fā) ; 2. 大量的 DOM 操作。眾所周知,DOM 操作對內(nèi)存和 CPU 的開銷是比較大的,特別是當(dāng)同時滿足特征1時,往往給瀏覽器造成不小的壓力。函數(shù)節(jié)流技術(shù)的意義在于在用戶察覺范圍外,降低函數(shù)調(diào)用的頻率,從而提升性能。

          這個技巧的大概模式如下面這樣:

           1 var processor = {
           2     timeoutId: null,
           3                    
           4     performProcessing: function(){
           5             // 要執(zhí)行的代碼
           6     },
           7 
           8     process: function(){
           9         clearTimeout(this.timeoutId);
          10         this.timeoutId  = setTimeout(function(){
          11             processor.performProcessing();
          12         }, 100);
          13     }
          14 };
          15                    
          16 //調(diào)用
          17 processor.process();
          performProcessing 是真正要調(diào)用的函數(shù),而程序的入口在 process,每次進(jìn)入 process,真正要調(diào)用的函數(shù) performProcessing 都會被延遲 100 毫秒執(zhí)行,如果在此期間,process 再次被調(diào)用,則會重置前一次的計時器,重新開始計時,這樣保證了 performProcessing 中的代碼至少要間隔 100 毫秒才會被執(zhí)行一次,原理非常的簡單,下面這個函數(shù)也是利用這個原理,通過閉包達(dá)到了同樣的目的,它接受兩個參數(shù),第一個是要真正要執(zhí)行的函數(shù),第二個是間隔的時間。
          function throttle(fn, delay) {
              var timer = null;
              return function () {
                  var context = this, args = arguments;
                  clearTimeout(timer);
                  timer = setTimeout(function () {
                  fn.apply(context, args);
              }, delay);
            };
          }

          另外,有人為 jQuery 寫了相同功能的插件:點擊這里傳送到 jQuery plugins

          Google Closure Library 也有類似的 API:點擊這里傳送到 Google Code

          posted @ 2011-09-28 15:50 古木天琪 閱讀(261) | 評論 (0)編輯 收藏
          僅列出標(biāo)題  
          主站蜘蛛池模板: 平乡县| 资源县| 泾源县| 霍林郭勒市| 炉霍县| 晋州市| 昂仁县| 台北市| 垫江县| 大理市| 华安县| 紫云| 长丰县| 华阴市| 宿松县| 武城县| 榆林市| 建水县| 屯门区| 阿克苏市| 湖北省| 惠州市| 山阳县| 孝昌县| 昌邑市| 涡阳县| 四平市| 繁昌县| 英吉沙县| 焦作市| 仙游县| 会泽县| 亳州市| 当雄县| 逊克县| 富顺县| 桃园市| 汝南县| 金塔县| 连江县| 柘荣县|