jquery on() 方法綁定動態元素

2015年7月8日 沒有評論

jQuery on()方法是官方推薦的綁定事件的一個方法。使用 on() 方法可以給將來動態創建的動態元素綁定指定的事件,例如append等。

<div id="test">
    <div class="evt">evt1</div>
</div>

錯誤的用法,下面方法只為第一個class 為 evt 的div 綁定了click事件,使用append動態創建的div則沒有綁定

<script>
    // 先綁定事件再添加div
    $('#test .evt').on('click', function() {alert($(this).text())});
    $('#test').append('<div class="evt">evt2</div>');
</script>

正確的用法如下:

<script>
    $('body').on('click', '#test .evt', function() {alert($(this).text())});
    $('#test').append('<div class="evt">evt2</div>');
</script>
分類: web前端 標簽:

uploadify 發送多余請求的問題

2015年7月8日 沒有評論

使用 uploadify 上傳控件上傳圖片時,發現當uploadify.swf加載完成后會再次發送一個請求,假設當前頁的URL是 http://www.twubdg.tw/demo/upload-test.php, 那么可以在瀏覽器中發現這個地址http://www.twubdg.tw/demo/的請求。想要讓其不發送這個多余請求,解決辦法是修改對應的js,在 js 中找到如下代碼:

this.settings.button_image_url=SWFUpload.completeURL(this.settings.button_image_url);

將上面的代碼修改為如下即可。注意可能某些版本中“=”前后會有空格,查找的時候可以只用 this.settings.button_image_url 這段作為關鍵詞

this.settings.button_image_url = this.settings.button_image_url ?  SWFUpload.completeURL(this.settings.button_image_url) : this.settings.button_image_url;
分類: web前端 標簽:

js 阻止事件冒泡

2013年9月22日 沒有評論

綁定在dom對象上的事件存在冒泡的特性。有時候不希望事件冒泡,就需要對默認的冒泡處理進行阻止。純js的做法是:

function stopBubble(e) {  
    if (e && e.stopPropagation) {     //非IE  
        e.stopPropagation();  
     } else {                        //IE  
         window.event.cancelBubble = true;  
    }  
}

如果使用jquery庫的進行綁定dom的事件,處理方式則為:

$(selector).click(
    function(event){  
        event.stopPropagation();
        //do somethine
    }
);
分類: web前端 標簽:

css3 box-shadow

2013年8月24日 沒有評論

利用box-shadow屬性可以給塊對象添加一個或多個陰影,支持該屬性的瀏覽器有IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1,其用法為:

box-shadow: x-offset y-offset blur spread color inset;

上述六個參數含義依次是水平方向的偏移(正值向右偏移,負值向左偏移)、垂直方向的偏移(正值向下偏移,負值向上偏移)、模糊距離、陰影的尺寸(擴展尺寸)、陰影的顏色以及陰影類型(默認是外陰影,使用inset表示為內陰影)。除了第一和第二個參數是必須的,其他的都是可選參數。當使用參數“0 0px 10px #333”時,注意第三個參數為陰影的模糊距離。

由于參數本身就多,而且還可以變,下面通過一些例子來加深一下理解。

先來看看什么是陰影,下面通過四個寬和高都為70px的div,使用如下box-shadow來看看顯示效果:

#d1 { box-shadow:0 0 0px #333;}

#d2 { box-shadow:70px 0 0px #333;}

#d3 { box-shadow:0 70px 0px #333;}

#d4 { box-shadow:70px 0px 0px #333;}

box-shadow_01
觀察上述圖,可以理解陰影其實是被原始塊對象遮蓋,但是可以通過x-offset和y-offset來移動陰影(相對于原始快對象)。

現在通過3個70x70px的div來看看模糊的效果,box-shadow設置如下:

#d5 { box-shadow:0 0 10px 0px #333;}

#d6 { box-shadow:70px 70px 20px 0px #333;}

#d7 { box-shadow:70px 70px 40px 0px #333;}

box-shadow_02
模糊就是對陰影由內到進行模糊處理,對比d6和d7,可以看到模糊參數值越大,模糊的面積也越大。

最后來看看看模糊距離參數,box-shadow設置如下:

#d8 { box-shadow:0px 0px 0px 10px #333;}

#d9 { box-shadow:80px 80px 0px 10px #333;}

#d10 { box-shadow:80px 80px 10px 10px #333;}

box-shadow_03

可以看到陰影距離其實就增大陰影的面積,如果同時使用模糊和陰影距離,模糊處理是在陰影面積增大的基礎上再進行模糊處理。

分類: web前端 標簽:

js 綁定事件

2013年8月8日 沒有評論

通常的做法是把函數指針賦值給dom對象,例如:

function loadProcess() {
    //do something
}

window.onload = loadProcess;
或
window.onload = function() {
    //do something
}

因為這種方法會出現覆蓋的問題,因此采用此種方法可能會由于其他地方也對window對象onload事件綁定事件造成上述代碼不會被執行。比較好的做法是通過attachEvent(針對IE)或addEventListener的方式來綁定事件。例如可以定義如下函數:

function bindEvent(obj, event, func) {
    if (obj.addEventListener) {
        obj.addEventListener(event, func, false);
    } else if (obj.attachEvent) {
        obj.attachEvent("on" + event, func);
    }	
}

調用方法為:
function loadProcess() {
    //do something
}

bindEvent(window, 'load', loadProcess);

或采用匿名函數的方式
bindEvent(window, 'load', function() {
   //do something
});

注意:event參數的值不需要“on”,如果同一個對象相同事件綁定了多次,則都會被執行。

javascript array sort用法

2013年8月6日 沒有評論

sort是array對象自帶的方法,可以對array中的元素按升序的方式進行排列。如果sort方法沒有指定參數,那么array的元素會按照字符的編碼數據進行排序。如果想對其他類型的元素進行排序,就需要自己實現一個比較函數作為參數傳遞給sort,此函數有兩個參數a和b,當 a 大于 b 返回大于0的數,a 等于 b 返回0,否則返回一個小于0的值。

需要注意的是排序是在原array上進行的,不會生成副本。

例如一個array為[20,17,15,30,100],默認排序后的結果為100,15,17,20,30。可以看到并不是按照數值的大小排序,如果想要按照數值的大小排序,可以自己實現一個function,如:

function intSort(a, b) {
  return a - b;
}

var arr = [20,17,15,30,100];
arr.sort(intSort);

//或通過匿名函數的方式

arr.sort(
  function(a, b) {
    return a - b;
  }
);

//倒序排序
arr.sort(intSort).reverse();

另外如果想按照倒序排列,可以先對array進行sort,然后調用reverse方法即可。

jquery table 排序

2013年8月3日 3 條評論

借助于強大的jquery庫,通過一些簡單的js代碼來實現對table數據列進行排序。排序是通過調整table的tr的順序重新顯示,全部在客戶端上完成,不需要和服務器交互,因此減輕了服務器的壓力。查看Demo請猛點這里

實現排序的js代碼如下:

function tableSort(jqTableObj) {
    jqTableObj.find('thead th').click(
        function(){
            var dataType = $(this).attr('dataType') || 'text';
            var index = jqTableObj.find('thead th').index(this) + 1;
            var arr = [];
            var row = jqTableObj.find('tbody tr');

            $.each(row, function(i){arr[i] = row[i]});

            if($(this).hasClass('current')){
                arr.reverse();
            } else {
                arr.sort(Utils.sortStr(index, dataType))

                jqTableObj.find('thead th').removeClass('current');
                $(this).addClass('current');
            }

            var fragment = document.createDocumentFragment();

            $.each(arr, function(i){
                fragment.appendChild(arr[i]);
            });

            jqTableObj.find('tbody').append(fragment);
        }
    );    

    var Utils = (function() {
        function sortStr(index, dataType){
            return function(a, b){
                var aText=$(a).find('td:nth-child(' + index + ')').attr('_order') || $(a).find('td:nth-child(' + index + ')').text();
                var bText=$(b).find('td:nth-child(' + index + ')').attr('_order') || $(b).find('td:nth-child(' + index + ')').text();

                if(dataType != 'text'){
                    aText=parseNonText(aText, dataType);
                    bText=parseNonText(bText, dataType);

                    return aText > bText ? -1 : bText > aText ? 1 : 0;
                } else {
                    return aText.localeCompare(bText)
                }
            }
        }

        function parseNonText(data, dataType){
            switch(dataType){
                case 'int':
                    return parseInt(data) || 0
                case 'float':
                    return parseFloat(data) || 0
                default :
                return filterStr(data)
            }
        }

        //過濾中文字符和$
        function filterStr(data){
            if (!data) {
                return 0;
            }

            return parseFloat(data.replace(/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/,'$1'));
        }

        return {'sortStr' : sortStr};
    })();
}

要想讓上面的代碼工作,需要在原有的table中注意幾點。
1、表頭的tr其父元素為thead,另外表頭列使用th,同時要使用dataType屬性名來標示數據的類型,類型可以為text(默認),int和float;
2、顯示table數據的tr父元素為tbody,顯示數據的列用td,可以使用_order屬性指定該字段的真實值。

table 示例如下:

<table>
  <thead>
    <tr>
      <th datatype="int">ID</th>
      <th datatype="text">Username</th>
      <th datatype="float" class="current">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1032</td>
      <td>Zhang</td>
      <td _order="127579">$ 127,579.00</td>
    </tr>
    <tr>
      <td>1074</td>
      <td>gm1</td>
      <td _order="37331">$ 37,331.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Summary</th>
      <th>$ 164,910.00
    </tr>
  </tfoot>
</table>
分類: web前端 標簽:

javascript window.open 父子窗口通訊

2013年7月27日 沒有評論

js中可以使用window.open來彈出一個新窗口。例如一下代碼可以彈出一個居中的窗口:

var __popupReference = null;

function openExplorerPopUp(url, width, height) {
    if (isNaN(width)) {
        width = 1000;
    }
    
    if (isNaN(height)) {
        height = screen.height * 0.8;
    }

    x = (screen.width - width) / 2;
    y = (screen.height - height) / 2;

    if ((null != __popupReference) && (undefined != __popupReference)) {
        __popupReference.close();
    }
    
    if (url.length > 0) {
        var style = "toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=no,status=no,width=" + width + ",height=" + height + ",left=" + x + ",top=" + y;
        __popupReference = window.open(url, '', style);
        
        try {
            if (window.focus()) {
                __popupReference.focus();
            }
        } catch(e) {}
    }
}

如何讓父窗口和彈出的新窗口進行通訊呢?下面分別闡述。

先看父窗口與子窗口如何通訊。注意上面代碼中有一行“__popupReference.close();”,其用途就是用于關閉彈出的窗口,我們知道在js中可以使用window.close()來關閉當前窗口,通過行為可以得出__popupReference對象其實就是window對象結論,只不過是子窗口的。所以window.open返回值也就是子窗口的句柄了,有了這個句柄,在父窗口就可以操作子窗口的DOM、js定義的function等。例如:__popupReference.document.getElementById(‘subDomId’).style.display = ‘none’; __popupReference.subWinDefineFunction()。

在子窗口中只要能拿到父窗口的句柄,那么就能進行通訊。在內置的window對象中有一個opener屬性,就是其父窗口的句柄。有了這個,通訊就很容易了。例如:
window.opener.getElementById(‘parentDomId’).style.display = ‘none’; window.opener.parentDefineFunction();

分類: web前端 標簽:

用css設置cellspacing

2013年7月16日 沒有評論

html的table標簽中單元格之間默認是有一個像素的間距,且是使用白色填充的。所以對于要對tr使用非白色背景時,顯示效果就很糟糕。可以使用table的cellspacing屬性來設置單元格之間間距,例如:cellspacing=“0”,就能取消單元格之間的間距。 cellspacing是table的屬性,不能使用在css中,如果要在table中控制單元格的間距,則是使用border-spacing,如:

border-spacing: 0;
分類: web前端 標簽:

chrome切換hosts插件 hostsadmin

2013年7月16日 沒有評論

HostAdmin是一款chrome插件,可以用于快速修改hosts文件中配置,達到切換域名對應的IP,真是WEB開發者的利器。例如需要把某個web應用的域名指向到本地的測試環境,只需要點幾下鼠標即可搞定。另外對于chrome,修改后立馬生效,不需要重新啟動瀏覽器。經測試該插件可以正常工作在Win XP和Mac osx中。

安裝方法很簡單,方法1:訪問地址:https://chrome.google.com/webstore/detail/hostadmin/oklkidkfohahankieehkeenbillligdn,在出現的頁面中點擊“添加至 CHROME”按鈕即可完成安裝;方法2:進入chrome store,輸入 hostsadmin 查詢,也可以找到該擴展程序,然后選定該擴展進行安裝。

安裝成功后,chrome的右上角會出現一個小圖標,如下圖:

點擊小圖標后列出系統hosts文件中的所有IP域名配置信息,如下圖:

IP前面打勾表示啟用該配置,可以通過點擊來進行開啟和關閉切換。另外點擊上方的“editor”按鈕,可以在瀏覽器中打開hosts文件,并且對其進行添加、刪除和更新操作。

分類: web前端, 其它 標簽:

無覓相關文章插件,快速提升流量

30选5怎么中奖