PIXNET Logo登入

經驗交流分享與備忘

跳到主文

感情最痛恨 劈腿. 背叛 與 欺騙

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 2月 12 週二 201304:31

  • [轉貼] ‘Back to top’ link using jQuery

If you noticed I have a ‘Back to top’ link appearing at the bottom right everytime you scroll down the page. Wonder how it was made? I’ll tell you. It’s quite simple. What you need is a div containing the text, apply some css and add an event using jQuery.


First, create the div:








<div id="toTop">^ Back to Top</div>


Then add style to it, add this in your css file or inside <style> tag:








#toTop {

 width:100px;

 border:1px solid #ccc;

 background:#f7f7f7;

 text-align:center;

 padding:5px;

 position:fixed; /* this is the magic */

 bottom:10px; /* together with this to put the div at the bottom*/

 right:10px;

 cursor:pointer;

 display:none;

 color:#333;

 font-family:verdana;

 font-size:11px;

 }


And last, the jQuery code:








<script src="path/to/js/jquery.js"></script>

 <script type="text/javascript">

 $(function() {

 $(window).scroll(function() {

 if($(this).scrollTop() != 0) {

 $('#toTop').fadeIn(); 

 } else {

 $('#toTop').fadeOut();

 }

 });

  

 $('#toTop').click(function() {

 $('body,html').animate({scrollTop:0},800);

 }); 

 });

 </script>


There you have it! Simple isn’t it? :)
This works in Firefox 3.0.10 – 3.6.13, Internet Explorer 7 (Strict Mode) and 8, Google Chrome, jQuery 1.4.3.
Remember: On IE 7, your page needs to be at strict mode, just add a doctype at the top of your page:








<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Hope that helps :)
Sorry no IE 6 support and also I think it doesn’t work in Quirks Mode (will see if it’s possible) :(
Let me know if something is missing in the code sample, for some reason it always gets deleted every time I update the post in the visual editor.
Check a working sample here.
Comments closed due to spamming. If you have questions, please send me an email which can be found here.
原文取自：http://agyuku.net/2009/05/back-to-top-link-using-jquery/
參考來源：http://webdesignandsuch.com/10-jquery-back-to-top-link-solutions-for-websites/
(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(0) 人氣(233)

  • 個人分類：JavaScript
▲top
  • 9月 25 週二 201212:06

  • [轉貼][jQuery] 倒數計時(還有X天X時X分X秒)

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(0) 人氣(2,135)

  • 個人分類：JavaScript
▲top
  • 6月 22 週三 201110:12

  • [轉貼] How to add records in json-store

How to add records in json-store ?? Using ExtJS

You need to define a record type, create it and at it, e.g:
 
(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(0) 人氣(125)

  • 個人分類：JavaScript
▲top
  • 6月 17 週五 201115:35

  • [轉貼] ext CheckboxSelectionModel 设置选中状态


var checkBox = new Ext.grid.CheckboxSelectionModel({});
var ds= new Ext.data.Store({  
                    proxy: new Ext.data.HttpProxy({url:'contentAction_list.do'}),//调用的动作  

                    reader:_jsonReader,
                    listeners : {  
                    load : function(ds) {  
                        var records = new Array(); 
                        var index=0;
                        ds.each(function(record) {  
                         if(record.data.p3 != 0) {
                                 records.push(record);  //这个push同javaHashSet一样可以去重复的
                                 //checkBox.setValue(true);
                             //checkBox.selectRow(index);//用这个也是可以的
                            }index++;
                           
                        });  
                        checkBox.selectRecords(records, true);// 以后每次load数据时，都会默认选中  
                    }  
                }  
                }); 
               var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
 checkBox,...略
 var grid = new Ext.grid.GridPanel({   
                     region:'center', 
                    ds : ds,  
                    store: ds,   
                    cm:cm,
                     sm:checkBox,
 
--- 网络上有个某个列禁止被选择的用这个事件：beforerowselect：这个监听可以写在：CheckboxSelectionModel({});里面。
添加beforerowselect 在选中之前触发的事件，return就不能选择了。
添加事件CheckboxSelectionModel{
beforerowselect: function () {
return;
}
}
(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(0) 人氣(326)

  • 個人分類：JavaScript
▲top
  • 1月 22 週六 201114:43

  • [轉貼] How to have jQuery restrict file types on upload?


I would like to have jQuery limit a file upload feild
to only jpg/jpeg, png, and gif. I am doing backend checking with php
already. I am running my submit button through a javascript function
already so I really just need to know how to check for the filetypes
before submit or alert.
Thanks!

You can get the value of a file field just the same as any other field. You can't alter it, however.
So to superficially check if a file has the right extension, you could do something like this:
var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：JavaScript
▲top
  • 11月 14 週日 201011:41

  • [轉貼] jquery select option 操作相关知识


jQuery 是一个非常强大的JS类库，现在越用觉得越好用了。
使用jquery如何操作select(下拉框)呢？

主要讲下怎么动态添加option  动态选择option，假如我们的select 控件的 id 属性为 sel
jquery 清空option         $("#sel").empty();
jquery 增加option        $("#sel").append('<option value="1">动态增加</option>'');
jquery选择option        $("#sel").val(1);    使用这个就可以将 select 中值为 1 的项设定为选中状态
jQuery获取Select选择的Text和Value:
1. $("#select_id").change(function(){//code...});    //为Select添加事件，当选择其中一项时触发
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添加/删除Select的Option项：
1. $("#select_id").append("<option value='Value'>Text</option>");   //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>");   //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove();   //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove();   //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove();   //删除Select中Text='4'的Option
内容清空：
$("#charCity").empty();
原文轉貼自 http://blog.ghost80.com/?tid=3&cid=32&id=224 
(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(0) 人氣(21,265)

  • 個人分類：JavaScript
▲top
  • 10月 30 週六 201023:34

  • [轉貼] Select 選項 readonly

由於select 的選項有效參數只有disable，readonly 的參數對select 無作用。
有時是為了做一些限制，不讓使用者選擇，

但預設選擇的欄位值(form field value)仍是要傳遞(submit)。
使用了部份的方式來達到這樣的作用。
<form onsubmit="this.s1.disabled=false">
   <select name="s1" disabled>
      <option value="001">1</option>
      <option value="002" selected>2</option>
      <option value="003">3</option>
   </select>
   <input type="submit">
</form>
說明：在submit 時，才把select un-disable，如此一來，欄位值仍會被 submit 出去。
<form>
   <select name="s1" onfocus="defaultValue=this.value" onchange="this.value=defaultValue">
      <option value="001">1</option>
      <option value="002" selected>2</option>
      <option value="003">3</option>
   </select>
   <input type="submit">
</form>
說明：使用default select 的 value 來達到不管再怎麼選還是原來選的那一個
<form>
   <select name="s1" onfocus="defaultIndex=this.selectedIndex" onchange="this.selectedIndex=defaultIndex">
      <option value="001">1</option>
      <option value="002" selected>2</option>
      <option value="003">3</option>
   </select>
   <input type="submit">
</form>
說明：使用 default select 的 index 來達到不管再怎麼選還是原來選的那一個
(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(1) 人氣(11,530)

  • 個人分類：JavaScript
▲top
  • 10月 08 週五 201022:51

  • [轉貼] JQUery 光棒效果

//光棒效果  
var _bgColor;  //存放原始的 背景颜色  

$(document).ready(function()  
{     
    //所有的行鼠标移进时变色  
    $("tr").hover(function ()  
    {  
        _bgColor = $(this)[0].style.backgroundColor;  
        $(this).css({'background-color' : '#f5f5f5', 'font-weight' : 'bolder'});  
    },   
    //移除还原颜色  
    function () {var cssObj = {'background-color':_bgColor,'font-weight':''}  
        $(this).css(cssObj);  
    });  
      
    //交替行变色  
    var trs =  $("table").find("tr");  
    for(i = 0;i<trs.length;i++)  
    {  
        var obj = trs[i];  
        if(i %2 == 0)  
            obj.style.backgroundColor = "#F5FAFE";  
    }  
}); 
(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(0) 人氣(380)

  • 個人分類：JavaScript
▲top
  • 10月 02 週六 201022:19

  • [轉貼] jQuery Set Select Index

Hello,
I have an select box:

<select id="selectBox"> 
<option value="0">Number 0</option> 
<option value="1">Number 1</option> 
<option value="2">Number 2</option> 
<option value="3">Number 3</option> 
<option value="4">Number 4</option> 
<option value="5">Number 5</option> 
<option value="6">Number 6</option> 
<option value="7">Number 7</option> 
</select> 
(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(0) 人氣(4)

  • 個人分類：JavaScript
▲top
  • 7月 01 週四 201014:26

  • [轉貼] jQuery Attributes 筆記

@addClass( class )
// 在節點裡加入class = "selected"
// 移除 : removeClass( class ).
$("p").addClass("selected")

@attr( name )
// 取得<img src="test" alt="" /> 裡的src值
// before : <img src="test.jpg" alt="" />
// Result : test.jpg
$("img").attr("src");
 
@attr( properties )
// 將<img alt="" /> 加入 src="test.jpg" alt="Test Image"
// before : <img alt="" />
// Result : <img src="test.jpg" alt="Test Image" />
$("img").attr({ src: "test.jpg", alt: "Test Image" });
 
@attr( key, value )
// 指定物件 的 key 並 設定 value
// 將 <img alt="" /> 加入 src = "test.jpg"
// before : <img alt="" />
// Result : <img src="test.jpg" alt="" />
$("img").attr("src","test.jpg");
// 將
<input /> 加入 value = "test.jpg"
// before :
<input />
// Result :
<input value="test.jpg" />
$("input").attr("value","test.jpg");
 
@attr( key, fn )
// 在<img alt="" />裡加入 title
//title 值 則是用function 回傳
//Before: <img src="test.jpg" alt="" />
//Result: <img title="test.jpg" src="test.jpg" alt="" />
$("img").attr("title", function() { return this.src });
//Before : <img title="pic" alt="" /><img title="pic" alt="" /><img title="pic" alt="" />
//Result: <img title="pic1" alt="" /><img title="pic2" alt="" /><img title="pic3" alt="" />
$("img").attr("title", function(index) { return this.title + (++index); });
 
@html()
// 取得
<div> xxx</div>
xxx <= 取得的東西
// Before :
<div> xxx</div>
// Result : xxx
$("div").html()
 
@html( val )
// 改變
<div>xxx</div>
為
<div><strong>new stuff</strong></div>
// Before :
<div> xxx</div>
// Result :
<div><strong>new stuff</strong></div>
$("div").html("<strong>new stuff</strong>");
 
@removeAttr( name )
//移除
<input disabled="disabled" />
// Before :
<input disabled="disabled" />
// Result :
<input />
$("input").removeAttr("disabled")
 
@removeClass( class )
//移除裡的 class
// Before :
Hello
// Result :
Hello
 
$("p").removeClass()
// Before :
Hello
// Result :
Hello
 
$("p").removeClass("selected")
// Before :
Hello
// Result :
Hello
 
$("p").removeClass("selected highlight")
 
@text()
//取得裡的字串
// Before :
<strong>Test</strong> Paragraph.
Paraparagraph
 
// Result : Test Paragraph.Paraparagraph
$("p").text();
 
@text( val )
//取代內的字串
// Before :Test Paragraph.
 
// Result :
<strong>Some</strong> new text.
 
$("p").text("<strong>Some</strong> new text.");
// Before :
Test Paragraph.
// Result :
<strong>Some</strong> new text.
 
$("p").text("<strong>Some</strong> new text.", true);
 
@toggleClass( class )
// 將有 移除 , 如果沒有 則加入
// Before :
Hello
Hello Again
// Result :
Hello,Hello Again
 
$("p").toggleClass("selected")
 
@val()
// 抓取 INPUT 的 VALUE值
// Before :
<input type="text" value="some text" />
// Result : "some text"
$("input").val();
 
@val( val )
// 將INPUT 的 VALUE 值 改變為指定
// Before :
<input type="text" value="some text" />
// Result :
<input type="text" value="test" />
$("input").val("test");
(繼續閱讀...)
文章標籤

本熊 發表在 痞客邦 留言(0) 人氣(569)

  • 個人分類：JavaScript
▲top
123»

參觀人氣

  • 本日人氣：
  • 累積人氣：

文章分類

toggle 作業系統相關 (9)
  • FreeBSD (8)
  • IPv6 Logo (2)
  • Visual C# (1)
  • Visual C# (1)
  • Mac使用心得 (5)
  • Synology NAS應用 (0)
  • 系統應用 (49)
  • 防毒防駭 (5)
  • 系統安裝 (30)
toggle 投資理財 (2)
  • 科技產業 (8)
  • 投資學習 (9)
toggle 網頁設計相關 (6)
  • Flex程式設計 (5)
  • MySQL資料庫 (13)
  • ASP.NET程式設計 (1)
  • CSS樣式表應用 (5)
  • Flex (1)
  • PHP程式設計 (51)
  • Perl 程式設計 (1)
  • Windows系統應用 (2)
  • 好書推件 (1)
  • Android程式設計 (10)
  • C程式設計 (2)
  • Linux相關應用 (18)
  • Java程式設計 (6)
  • JAVAt程式設計-GWT (7)
  • Eucalyptus XEN (2)
  • 喻道故事 (1)
  • 下載資源 (2)
  • 終生學習 (7)
  • Goolge 新玩意 (1)
  • 英文學習心得 (3)
  • 工商服務 (12)
  • 勵志成長 (18)
  • 新聞時事 (17)
  • 讀者服務 (3)
  • JavaScript (22)
  • 省錢大作戰 (15)
  • 搶錢大作戰 (2)
  • 趣味分享 (50)
  • 感情生活 (15)
  • 用DSLR寫日記 (20)
  • 程式設計 (7)
  • 職場人生 (16)
  • 健康生活 (63)
  • 未分類文章 (1)