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

玩玩 jsbin.com

好用的jsbin,http://jsbin.com是一套前端的編輯工具線上,可在撰寫前端程式碼,然後可即時反應,也不用自己F5,XD

開始玩一下吧


在JavaScript區塊中來個JSON如下,完成JSON後,再按CTRL+S,進行存檔
{ 
  
  "name": "jsbin",
  "age": 99,
  "birthday": "1988/02/02",
  "mails": {"home": "hotmail@mail.com", "work": "yahoo@mail.com"},
  "phones": {"mobile": "0923456789", "home": "048353868" }
            
}



將網址列的URL記下來,等一下會用到


再開一個新的jsbin,在JavaScript區塊中來個一段如下

$.ajax({
  url: 'http://jsbin.com/dijeyodote/2/edit?js',
  dataType: 'json',
  success: function(data) {

    var json_str=JSON.stringify(data);
    var json = JSON.parse(json_str);
    alert(json.phones.mobile);   
    
  }
    
});


完成,顯示JSON的mobile值


好,收工 XD


JSON.parse(), 將字串JSON物件

JSON.parse(), 將字串JSON物件

//JSON string 
var json_str = '{"name":"jsbin","age":99,"birthday":"1988/02/02"';
json_str.concat(',"mails":{"home":"hotmail@mail.com","work":"yahoo@mail.com"}');
json_str.concat(',"phones":{"mobile":"0923456789","home":"048353868"}}');

//轉JSON物件
var json = JSON.parse(json_str);
alert(json.mails.home);

收工

JSON.stringify(), JSON資料轉字串

JSON.stringify(), JSON資料轉字串

//JSON資料
var data = { 
  "name": "jsbin",
  "age": 99,
  "birthday": "1988/02/02",
  "mails": {"home": "hotmail@mail.com", "work": "yahoo@mail.com"},
  "phones": {"mobile": "0923456789", "home": "048353868" }
}

//轉字串
var json_str = JSON.stringify(data);
alert(json_str);

JSON.parse(), 將字串JSON物件

//JSON string 
var json_str = '{"name":"jsbin","age":99,"birthday":"1988/02/02"';
json_str.concat(',"mails":{"home":"hotmail@mail.com","work":"yahoo@mail.com"}');
json_str.concat(',"phones":{"mobile":"0923456789","home":"048353868"}}');

//轉JSON物件
var json = JSON.parse(json_str);
alert(json.mails.home);

收工

下載與啟動web2py-01

到這去http://web2py.com/init/default/index
選這-->

選自己的OS下載-->


下載完解壓



解壓到你喜歡的位置去, 我喜歡D:\


找到D:\web2py\web2py.exe檔後 , double click it,  就會出現


你要設定一組密碼給它, 記的要記住哦, 呵呵...我輸入的是!@#$%^&,
咳...咳!! 白吃哦, 我怎會告訴你勒 >_< , 輸完密碼後按 start server 就可以了

登登~登登, 你的web的首頁出現了, 酷吧!!

下回再說明如何處理web2py這傢伙, 881








最近的新玩具web2py-00

最近在想幫朋友找尋一個簡單的web app planform
特點
1. 可以跨作業系統運作
2. 不用安裝就可以工作
3. 線上資源好找

這個好像有點.............沒錯, 找到了! 就是使用python語言的web2py
沒錯! web2py正是我想要找的

web2py這兩天試玩了一下, 感覺還不賴, 時間有限, 改天再為各位介紹

這有文件
http://web2py.com/books/default/chapter/35/00
http://web2py.com/init/default/documentation

這有影音
https://vimeo.com/user315328/videos

顯示當前正在輸入密碼後自動隱藏 iPass

iPass 是一款, 讓網頁密碼輸入也能跟iphone般一樣, 擁有蒙面密碼輸入的提醒效果, 癈話不多說見下圖吧。

演示位置

引自: http://codecanyon.net/item/ipass/146135



jquery - Arrows and boxes 套件

一個可以產生類似像組織圖的套件, 感覺很不錯, 這是公司同事alex分享的, 趕快記錄下來
http://www.headjump.de/article/arrows-and-boxes

jquery-barcode 條碼套件

日前客戶有個產生條碼的需求, 隨便上網找找, 就有許多解決方案。來介紹一個名為 jquery-barcode 的套件, 這個套件是運用在網頁上, 能使網頁快速的產生條碼項目。因為已經有範例, 所以只提供位置給大家參考不做DEMO

http://code.google.com/p/jquery-barcode/
http://jquery-barcode.googlecode.com/svn/trunk/jquery-barcode/demo/demo.html
http://abgne.tw/jquery/jquery-plugins/jquery-barcode-plugin-0-3.html

JQuery UI Dialog和ASP.NET Button

今天實作了 jquery ui dialog 的運用 , 郤發現 jquery ui dialog 控件內加入了一個
伺服器提交鈕 , 郤沒有反應. 在g了之後...有了解決辦法.

$(function () { 
var dlg = $("#testDialog").dialog(); 
dlg.parent().appendTo(jQuery("form:first")); 
});


原文自:http://www.52live.com.cn/b/post/fix-asp-net-button-not-work-in-jquery-ui-dialog.aspx

jQuery取得JSON資料

http://blog.xuite.net/ahdaa/blog1/30797195

jQuery 外掛特輯 :Query String Object-GET參數的取得與設定

Sever side程式語言通常都會有用來處理Query String的類別或方法,像是PHP可以透過$_GET['key']取得對應的值。而C#也可以用Request.QueryString["key"]的方式取得對應的值。


但是在Client端的javascript卻沒有如此方便的方法可以使用,所幸在jQuery流行的現在,我們可以從網路上找到一些jQuery外掛可以方便的處理Query String。以下我找到了三個外掛,分別是:
jqURL
getUrlParam
Query String Object

我選擇使用Query String Object,做為我的開發工具,因為從jQuery Plugin專案頁面上日期顯示,作者依然有持續在維護這個專案,最後一次release是在2009-10-16感覺似乎比較可靠(?)。

接下來我簡單說明一下如何使用這個外掛取得網址的GET參數。

如果現在有一串這樣的網址
http://www.url.com/test.php?id=12&num=20&name=finalevil
你可以透過下列語法取得對應的GET參數

var str = $.query.get('id');

如此一來,取得的數值存入str變數中,所以str變數的值即為12


除了取得GET參數,此外掛當然也可以用來設定GET參數,否則只能取得不能設定未免也太遜了吧XD

var newUrl = $.query.set("id", 22).set("num", "100").toString();

這樣設定以後newUrl變數中的字串就是?id=22&num=100
另外,你可以呼叫Remove方法,移除GET參數中的某個數值,像這樣:
如果現在有一串這樣的網址 http://www.url.com/test.php?id=12&num=20&name=finalevil

var newUrl = $.query.REMOVE("id");

 呼叫REMOVE方法,移除參數id,這個時候的newUrl為
?num=20&name=finalevil
以上簡單介紹了這個外掛最重要的三個方法,get、set、REMOVE,供大家參考。


來源文章 http://blog.finalevil.com/2009/10/jquery08query-string-object.html

jquery $(document).ready 與 window.load

之前一直覺得$(document).ready和window.onload事件是一樣的,前陣子才豁然驚覺原來兩者是不一樣的。這真是令我汗顏Orz,以下我將兩者的差異做了一個比較表格來進行說明:

window.onload$(document).ready
事件javascript原生事件模擬 W3C DOM 標準的 DOMContentLoaded 事件
觸發時機整個網頁下載完成後觸發。 因此如果網頁中包含圖檔,則事件觸發的時間會比較晚。全部的DOM元素下載完成後觸發。 因為不需等待圖檔載入完成,因此事件觸發的時間較早。
複寫前一次設定給window.onload的函式會被後一次所設定的函式覆蓋。不會覆蓋,前一次跟後一次所設定的函式都會被執行。

複寫的部份僅用文字說明有些難以表達,直接用一個簡短的程式說明無疑是比較簡單的方式!範例1使用window.onload,範例2使用document ready的方式,說明兩者的不同。


window.onload=function() { alert('alert1'); };
window.onload=function() { alert('alert2'); };


在範例1使用window.onload的方式,當整個頁面載入完畢(包含圖片),則僅會執行第二個alert,這是因為後面那個function覆蓋了前面的function。


$(document).ready(function() { alert('alert1'); });
$(document).ready(function() { alert('alert2'); });


同樣的狀況,在使用document ready時卻有不同的結果。在範例2,當DOM元素載入完畢,兩個alert都會被執行,function不會被覆蓋。 列表中最重要的差異點其實是觸發時機,請大家多多注意唷。這實在是一個很容易遺漏的小細節^^

原文自 : http://blog.finalevil.com/2009/09/jquerydocumentreadyonload.html

Timers Plugin

一般的方式是使用Javascript的原生計時器函式clearInterval、clearTimeout、setInterval、setTimeout,不過原生函式在使用上不太直覺,而且無法快速的指定套用在某個特定的網頁元素,另外他的間隔單位是以毫秒去計算(1秒=1000毫秒),嗯…我想要每5分鐘做一次,那我要設定…60*60*1000=3600000秒…對吧?還是360000秒?這時候快從哆啦B夢口袋拿出了JQuery Timers這個法寶就能解決這麻煩的問題。

JQuery Timers提供了三個函式

1. everyTime(時間間隔, [計時器名稱], 函式名稱, [次數限制], [等待函式程序完成])
2. oneTime(時間間隔, [計時器名稱], 呼叫的函式)
3. stopTime ([計時器名稱], [函式名稱])

官方雖然有Demo,但是卻沒有列出使用的原始碼,即便右鍵檢視原始碼,裡面也沒有完整針對每一種情況寫出一組程式說明,所以我只好試著測試函式了。以下為測試程式報告:


/*************************************************************
* everyTime(時間間隔, [計時器名稱], 函式名稱, [次數限制], [等待函式程序完成])
*************************************************************/
//每1秒執行函式test()
function test(){
//do something...
}
$('body').everyTime('1s',test);

//每1秒執行
$('body').everyTime('1s',function(){
//do something...
});

//每1秒執行,並命名計時器名稱為A
$('body').everyTime('1s','A',function(){
//do something...
});

//每20秒執行,最多5次,並命名計時器名稱為B
$('body').everyTime('2das','B',function(){
//do something...
},5);

//每20秒執行,無限次,並命名計時器名稱為C
//若時間間隔抵到,但函式程序仍未完成則需等待執行函式完成後再繼續計時
$('body').everyTime('2das','C',function(){
//執行一個會超過20秒以上的程式
},0,true);

/***********************************************************
* oneTime(時間間隔, [計時器名稱], 呼叫的函式)
***********************************************************/
//倒數10秒後執行
$('body').oneTime('1das',function(){
//do something...
});

//倒數100秒後執行,並命名計時器名稱為D
$('body').oneTime('1hs','D',function(){
//do something...
});

/************************************************************
* stopTime ([計時器名稱], [函式名稱])
************************************************************/
//停止所有的在$('body')上計時器
$('body').stopTime ();

//停止$('body')上名稱為A的計時器
$('body').stopTime ('A');

//停止$('body')上所有呼叫test()的計時器
$('body').stopTime (test);

如果你試著打開他的原始碼,你可以發現下列這段程式碼,正是時間間隔的字串縮寫,所以我們也可以自訂自己所需要的縮寫字串,像是分,時之類的

// Yeah this is major overkill...
'ms': 1,
'cs': 10,
'ds': 100,
's': 1000,
'das': 10000,
'hs': 100000,
'ks': 1000000,
//自訂單位
'm': 60000,
'h': 360000


另外該作者也在網頁的開頭說明,他將程式碼移至jQuery區來做統一發佈管理,所以如果要下載該作者較新版的程式碼,請到http://plugins.jquery.com/project/timers 這邊下載,目前我所見到的是1.1.2版。

引用自 : http://doublekai.org/blog/?p=774

slideViewer plugin

一款類似 lightbox 的 jquery plugin 組件 , 提供另外一種 picture book 的選擇應用 , 我覺得還不錯呢...@.@


slideViewer
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

slideViewerPro 1.0
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html

語法基礎 of jQuery

http://webdesign.enjoyitsimply.com/jquery/

http://webdesign.enjoyitsimply.com/jquery/jquery_basics

http://webdesign.enjoyitsimply.com/jquery/jquery_selectors

http://webdesign.enjoyitsimply.com/jquery/jquery_attributes_css

http://webdesign.enjoyitsimply.com/jquery/jquery_traversing

http://webdesign.enjoyitsimply.com/jquery/jquery_events

http://webdesign.enjoyitsimply.com/jquery/jquery_effects

http://webdesign.enjoyitsimply.com/jquery/jquery_ajax

以上是不錯的學習指南 , 中文教學雖然有幫助 , 當然....如果真的要其它的相關資訊一定要

非英文不可了 , 以下也是學習jquery必到的地方...報告到此...散會!

http://docs.jquery.com/Main_Page

http://visualjquery.com/

jquery summary

The Write Less, Do More, JavaScript Library.
jQuery is a new type of JavaScript library. jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.


What does jQuery code look like? The quick and dirty:


$("p.surprise").addClass("ohmy").show("slow");

jquery code download

http://code.google.com/p/jqueryjs/downloads/list

jQuery實現表格隔行分色顯示

<html>
    <head>
    <title>New Document</title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">   
      $(document).ready(function(){   
        $('tr:odd').addClass('oddColor');   
        $('tr:even').addClass('evenColor');   
        $('td:contains("Christen")').addClass('highlight')   
    });   
       
      </script>
    <style type="text/css">   
    <!--   
    .oddColor {   
    background-color:#ffc;   
    }   
    .evenColor {   
    background-color:#cef;   
    }   
    .highlight{   
    font-weight:bold;   
    color:#f00}   
    -->   
    </style>
    </head>
    <body>
        <table>
            <tr>
                <td>我是奇数行</td>
                <td>Christen</td>
                <td>我是奇数行</td>
                <td>我是奇数行</td>
            </tr>
            <tr>
                <td>我是偶数行</td>
                <td>Pinkey</td>
                <td>我是偶数行</td>
                <td>我是偶数行</td>
            </tr>
            <tr>
                <td>我是奇数行</td>
                <td>我是奇数行</td>
                <td>Maomao</td>
                <td>我是奇数行</td>
            </tr>
            <tr>
                <td>我是偶数行</td>
                <td>我是偶数行</td>
                <td>我是偶数行</td>
                <td>我是偶数行</td>
            </tr>
        </table>    
    </body>
</html>