BlueSpace: jQuery

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

2013-06-22

表單(form)中 button 會做 submit 事件

意外發現這問題。
在表單中如有 button 時，點擊它會 submit
https://github.com/tedshd/web-develop/blob/master/demo/jquery_submit_test.html

目前的解法是把 button 去做 e.preventDefault();
來阻擋事件發生

2011-11-23

jQuery判斷頁面是否複雜

在網路上看到一篇文章
內容提到用jQuery的$('*').length
來判斷頁面是否過於複雜,這道理非常簡單
這語法的意思是頁面中所有的元素(或者是說tag)的長度(數量)
數值越多就代表很多的元素,頁面載入就會較慢(當然js也會影響),這算是一種較簡單的判斷方法
在Html code中加入

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function()
  {
  alert($('*').length);
  });
  </script>

再把頁面重新載入就會跳出alert顯示數值

2011-08-27

背景隨視窗縮放

背景隨視窗縮放這可用CSS3中的background-size:100% 100%;來實現,但IE不支援CSS3
可是偏偏又看見國外一堆網站有這種效果,在IE也行
於是便隨便找一個網站來看看它的原始碼
便發現原來它是用jQuery再用插件改的
jQuery Backstretch
看了一下這插件大致上是用視窗大小去改背景的高寬,寫出這插件的作者真厲害

2011-08-25

jQuery 取代原本的捲軸

由於網頁標準化
使得CSS中的捲軸設定無用(但IE還可用)
而要自由的變化捲軸變得不容易,但國外還是是有許多的高手利用JavaScript的基礎,再利用jQuery寫出許多富變化性的捲軸
由於這類的中文資訊太少,所以便整理一下
jscrollpane
這是我目前找到較簡單易於使用的
就如他所說的一樣把download裡所需的js和css下齊
然後再中填入

<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
 
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
 
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
 
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

代表要載入的js和css,要注意路徑,它預設

js是放在script中

css是放在style中

jquery.jscrollpane.css便是可以改捲軸的樣式

然後再<script type="text/javascript"></script>中放入

$(function()
{
 $('.scroll-pane').jScrollPane();
});

這代表要用的捲軸類型,不同的捲軸要放入不同的function

具體可以看Demo

要注意的是有捲軸的區塊要設class="scroll-pane"

並用css做設定

下面還有一些其他的捲軸可以試試

鐵人二號的設計手札

我是派10-jquery客製捲軸下載

BlueSpace