顯示具有 jquery 標籤的文章。 顯示所有文章
顯示具有 jquery 標籤的文章。 顯示所有文章

2021-06-24

jQuery - event.originalEvent: 用來判定是否由user實際操作產生或是由script操作產生

標題有些繞口…

稍微解釋一下,就是,要怎麼判斷在 jQ 那些 $(selector).on(....) 事件觸發的源頭,是使用者自己的操作,是指真實的操作,透過 I/O ,而不是 script 去模擬出來的。

網路上找了一些,大概是有分兩個…

1) event.isTrigger

2) event.orignalEvent


大至上看了一下介紹後,我是選擇使用 event.orignalEvent === undefined 的條件下去確認它是由 script 模擬。

event.isTrigger 似乎是有在一些情況下時會異常!!!

2015-05-20

如果運用 css 或 php 來做 ellipsis (文字太長而省略) 的效果

在做在網頁的時候,尤其在文章呈現或條列式呈現文字的時候,因為不想要一次顯現出一堆文字而想要做摘要或部份文字顯示…這時候應該怎麼入手會比較好?

*ellipsis - 省略,在網頁上可以當作使用 ... 或 read more 的一種判斷
*text-overflow MDN

在下在網路上逛逛時發現幾個方式不錯…

1) css → text-overflow
text-overflow 應該是所有瀏覽器都有支援 ( 吧 ) ,至少我測過 IE6 ~ 11 、 Google Chrome 、 firefox 、 safari…電腦版的
大至上操作…如果是設定在 <div> ... </div> 中的話,要先記住幾個

  1. 要設定顯示長度 width: ???px ( % ) 
  2. 要設定不斷行 white-space: nowrap
  3. 超過長度的不顯示 overflow: hidden
  4. 設定文字超過時用 ... 方式省略 text-overflow: ellipsis

2014-01-16

jQuery selector使用多條件式

 <div>  
   <a id="a" href="url-1">url1</a><br>  
   <a id="b" href="url-2">url2</a><br>  
   <a id="c" href="url-3">url3</a><br>  
   <a id="d" href="url-4">url4</a><br>  
 </div>  

如上述,我若想要div中的所有a在click時有反應,通常會這樣寫

 $('div a').on('click', function(){  
   do-something....;  
 });  

若我想讓特定的「某個」id的有反應,會這樣寫

 $("div a[id='a']").on('click', function(){  
   do-something....;  
 });  

若我想讓特定的「某個」id沒有反應,其他都有反應,會這樣寫

 $("div a[id!='a']").on('click', function(){  
   do-something....;  
 });  

但我若想讓特定的「超過一個」有反應或沒反應,可以這樣寫(以下以沒反應為主)

 $("div a[id!='a'][id!='d']").on('click', function(){  
   do-something....;  
 });  

2013-12-27

有關於jquery colorbox在指定selector時有時會要click twice才會啟發的問題與解決方式

這一個其實不太算是「問題」,應該叫「操作」觀念上的問題。

這個問題大部份會發生在你要放入colorbox的東西是用ajax抓出來的時候比較容易發生。

但這個主要會發生的原因其實就是因為你的資料不是「原本」就出現在document(指的是受影響的網頁)身,因為ajax的東西操作發生的時候,我們大都會寫在
1:  $(document).ready({  
2:    balabalabalabalabalabala  
3:  });  

所以已經告知script的啟用是在document完畢之後,那當然你要放入colorbox的東西在document ready的當下還沒出現在document上面…

但,其實這不是point....

2013-08-23

javascript檢查是否使用行動裝置瀏覽器來開啟頁面

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// some code.. 
}
jquery本來有$.browser.mobile的方式,但後來在1.9的版本好像就移除了…

2013-01-30

JQuery ajax response值給與另一變數的用法

我們都知道,ajax可以得到由另一個url回饋的東西,但有時候並非會直接在ajax的success中使用,我們把值丟給另一個變數…

而通常我們(其實只有我自己?)下意識的寫法會這樣
var ajax_response = "";
$.ajax({
   url: http://xxx.xxx.xxx.xxx/xxx.xxx,
   success: function(msg) {
      ajax_response = msg;
   }
});
alert(ajax_response);
但其實ajax中的success的ajax_response與外層的ajax_response是不相干,應該說是同一個ajax_response,但在這種寫法底下msg並沒有丟到ajax_response

原因在:http://api.jquery.com/jQuery.ajax/
jquery在ajax的async屬性中寫到,預設是非同步發送(By default, all requests are sent asynchronously)。

那何謂非同步發送(或稱異步發送),其實就是為了保持頁面的執行效率,所以在ajax發送過程到url-server回應的中間,script會持續的往下運作,以免發生url-server timeout時間過久導致頁面delay的狀況。

但如同我們上述的寫法,在非同步的前提下,ajax_response是必須等到url-server回應之後才會取得msg(ajax的回饋),所以我們在alert(ajax_response)時會是空值…因為在alert之前,一般的url-server都沒有那麼快的回饋。

如果我們要改為同步,也就是必須先拿到ajax_response的話,只要在ajax的屬性中加上async: false即可。

2012-09-14

jQuery使用.html()或innerHTML將資料塞入table標簽的問題(與IE 6/7有關)

最近在寫用jquery .ajax()時發現一個古怪的問題。

網頁中,一開始我是這樣寫
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="jquery.js"></script>
<head></head>
<script language="javascript">
<!--
$(document).ready(function(){
   $.ajax({
      url: 'something.asp',
      type: 'POST',
      error: function(xhr) {
         alert("error");
      },
      success: function(xhr) {
         $('#something').html(xhr);
      }
   });
});
-->
</script>
<body>
<table id="something">
</table>
</body>
</html>