Coazure's Note: jquery

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

星期六, 12月 24, 2011

超酷的CSS3 Animate及Shadow

超酷的CSS3 Animate:
demo: http://daneden.me/animate/#cta
github: https://github.com/daneden/animate.css

順便也介紹一下一個用CSS3+jquery做出的陰影plugin
demo: http://syddev.com/jquery.shadow/
github: https://github.com/sydlawrence/jQuery-Shadow

[jquery] 強制使用跨域(cross domain) Ajax

很簡單，就只有一行code

$.support.cors = true;

不過別以為這樣就真的可以無視瀏覽器限制XD
只是當你有特別為cross domain設定時，這個才有用

不然還是會噴錯誤的!

星期六, 10月 01, 2011

javascript/jquery剖析網址 - parseUri(parseUrl)

這個parseUri是我修改Steven Levithan而成的

為了看起來整齊點，我將parseUri包在jquery下
不過其實並沒有用到jquery的東西，大家覺得用不順手可以自己改改

星期四, 9月 01, 2011

jquery plugin (3)

jsTree: 做樹狀圖的plugin，有點複雜不過功能很齊全，支援ajax、crrm等
http://www.jstree.com/documentation

jquery.hotkey: 熱鍵plugin，可以簡單實現網站上如ctrl+w的自訂功能
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js

jquery.cookie
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

printf: 在js上提供類似C的printf函式
http://plugins.jquery.com/project/printf

jquery.address: 類似jquery.history，可用簡單的方式實現deep link(ajax的上一頁)
官網文件 : http://www.asual.com/jquery/address/docs/
不錯的中文API: http://julabs.me/blog/front/jquery-plugin-deep-linking-methods/
簡介: http://blog.maxiang.net/jquery-address-for-deep-linking/59/

Tiny Scrollbar : 漂亮的捲軸
http://www.baijs.nl/tinyscrollbar/

附上一個很多分類plugin的網站
http://www.open-open.com/ajax/3_Tree.htm

星期一, 5月 16, 2011

jquery toast

之前就一直在找Toast工具，恰好有看到就紀錄一下

jquery-toastmessage-plugin

星期二, 5月 03, 2011

jquery上傳plugin

其實就是Uploadify，之前好像介紹過
這次又看到在紀錄一次囉

http://css9.net/t/56/
http://www.wowbox.com.tw/blog/article.asp?id=3430

另外有一個上傳效果也不錯，雖然他好像不是jquery (使用 ubr_file_upload.js )

http://www.zhuan-huan.com/convert-excel.php

星期日, 3月 20, 2011

[Blogger] code Highlight - 程式碼高亮

今天一直在找該怎麼把程式碼美美的貼在bloger上
試了很多種，有些不是不能用就是很麻煩
最後選了這套 Snippet ，這是用jqeury實現的，方法也很簡單
加上原本就有jquery的底，用起來更是順手 (不過缺點是肥了一點)

依網站上的教學可以快速地完成佈署
不過有些仍然沒有很完美，例如pre會換行..

程式碼換行感覺就蠻奇怪的..所以改了一下 css (加這行 white-space: nowrap; )
可是這樣好像又會被版型擋住，只好再寫一段小程式碼，讓滑鼠一過去時顯示捲軸

以下是我的設定檔，供大家參考

<link href='jquery.snippet.min.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='jquery-1.4.4.min.js'/>
<script language='javascript' src='jquery.snippet.js'/>

<script language='javascript'>
$(function(){
    $('pre.csharp').snippet('csharp', { transparent: true, style: 'ide-codewarrior' });
    $('pre.cpp').snippet('cpp', { transparent: true, style: 'ide-codewarrior' });
    $('pre.c').snippet('c', { transparent: true, style: 'ide-codewarrior' });
    $('pre.css').snippet('css', { transparent: true, style: 'ide-codewarrior' });
    $('pre.html').snippet('html', { transparent: true, style: 'ide-codewarrior' });
    $('pre.javascript').snippet('javascript_dom', { transparent: true, style: 'ide-codewarrior' });
    $('pre.php').snippet('php', { transparent: true, style: 'ide-codewarrior' });
    $('pre.python').snippet('python', { transparent: true, style: 'ide-codewarrior' });
    $('pre.sql').snippet('sql', { transparent: true, style: 'ide-codewarrior' });
    $('pre.xml').snippet('xml', { transparent: true, style: 'ide-codewarrior' });
    $('pre').hover(function(){ $(this).css('overflow','auto') }, function(){ $(this).css('overflow','hidden') });
});
</script>

在 jquery.snippet.min.css 改一下這段

.snippet-wrap pre.sh_sourceCode{
    padding:1em 0em 1em 0em;
    line-height:20px;
    overflow:hidden;
    position:relative;
    white-space: nowrap;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    box-shadow: 2px 2px 5px #000;
    -moz-box-shadow: 2px 2px 5px #000;
    -webkit-box-shadow: 2px 2px 5px #000;
}

不過一想到現在要把文章裡面的程式碼都翻新一便就很頭大~"~

星期五, 3月 11, 2011

jquery tiptip

tiptip還蠻好用的，只要標籤裡加個title就好了XD
而且也蠻好看的

可是又是因為跟mbExtruder衝突= =
在mbExtruder裡面就是不給我用((哭哭

說起來也不是非得用mbExtruder，不過這種效果的plugin似乎不常見
還是不懂得下關鍵字呢~"~

星期三, 3月 09, 2011

jquery fancybox

換了好幾個 lightbox plugin，原本已經選定用fancybox來做了
沒想到跟mbExtruder一起用的時候，發現在mbExtruder的tab開起來的時候開lightbox，tab就掛了((哭

所以只後重找適合的了
不過當時因為發現fancybox沒有像blockUI那樣的message功能，所以就自己寫了一個
需要的話放進fancybox裡就好了~

var messagebox, showbox;
    $.fancybox.message = function(html, options) {
    //first
    if(!messagebox || !messagebox) {
        $('body').append('<div style="display:none;"><div id="fbmessagebox"></div><a id="fbshowmessagebox" href="#fbmessagebox" /></div>');
        messagebox = $('#fbmessagebox');
        showbox = $('#fbshowmessagebox');
    }
    options = $.extend({}, {showCloseButton: false, scrolling: "no" }, options);
    messagebox.html(html);
    showbox.fancybox(options).click();
    setTimeout("$.fancybox.close()", 1000);
}

btw...
facebox用起來不太順手
所以目前應該是試試看shadowbox

補記
facebox雖然頗好看，可是個人覺得不太好用
基本的選標籤的部分就限制重重~"~

星期日, 3月 06, 2011

jquery 的一些 UI 組件

除了很普遍的jqueryUI之外，其實還有很多很棒的UI可以用
列出一些找到的，都很不錯

jQuery tools

Wijmo

還有之前提過的
mb.jQuery.components

星期六, 3月 05, 2011

jquery 圓形 plugin

$.fn.circle = function (size) {
 size = size.replace("px", "");
 var _size = size==null? Math.min(this.height(),this.width()) :size;
 this.height(_size);
 this.width(_size);
 this.corner((_size/2) + "px");
}

恰好有需要就寫了，不過好像不太實用XD
基於 http://jquery.malsup.com/corner/

星期一, 2月 28, 2011

開發 js 的一些工具

jQuery.parseJSON - 將 json 轉為 object
dump - 類似 php 裡面的 print_r / dump
JQuery Timers - 定時器
主要有三個函式
1. everyTime(時間間隔, [計時器名稱], 函式名稱, [次數限制], [等待函式程序完成])
2. oneTime(時間間隔, [計時器名稱], 呼叫的函式)
3. stopTime ([計時器名稱], [函式名稱])

http://remysharp.com/jquery-api/ 查API的好幫手 (網頁)

jquery plugin - template

真的是很棒的東西
不過在查的時候發現其實有不止一種，而且還長的很像

試了一下，還是這種最強大，而且版本也比較新 jQuery.template()

下面的看完就大概會了
jQuery Templates Plugin筆記1
jQuery Templates Plugin筆記2
jQuery Templates Plugin筆記3
jQuery Templates Plugin筆記4
jQuery Templates Plugin筆記5
jQuery Templates Plugin筆記6
jQuery Templates Plugin筆記7
jQuery Templates Plugin筆記8

特別注意如果抓到的東西要用 html 顯示，是使用 {{html data}} 而不是 ${html data}

jquery plugin (2)

這幾天一直在翻 plugin ，想找出一些有用的東西
順便也發現很多好東西，趕快紀錄一下

挑出一些個人覺得比較好的

HoverFade、Coda Slider Effect、Horinaja、jqPlot Charts and Graphs for jQuery
jqFancyTransitions、3d Tag Sphere
特別是 Growl ，跟 BlockUI 的 growl 差不多功能，可是我覺得這比較棒
以上皆參考用jquery插件創建視覺震撼的網站其他的plugin 到網頁裡看吧~

Uploadify - 很漂亮的上傳套件

Supersized - Full Screen Background/Slideshow jQuery Plugin

hoverIntent - 讓hover事件delay一下，避免一直觸發事件

其他網頁還有

14個最新jQuery插件_網頁設計中常用案例
15款提高表格操作的jQuery插件
50個加強表單的jQuery插件
50多個強大的jQuery插件應用實例
100+ jquery插件應用

codrops - js特效教學網站

星期六, 2月 26, 2011

jquery plugin (1)

這邊大概是以酷炫度/實用度來排列

分別是

mb.jQuery.components

只能說，真是相見恨晚
這個plugin能做出的效果是原本我以為在flash才能做出來的
http://pupunzi.open-lab.com/mb-jquery-components/

jQuery BlockUI Plugin
彈出視窗，用起來很方便，覺得不錯用
同一作者個其他 plugin (http://jquery.malsup.com/) 也都設計的小巧完善
例如: Form Plugin、jQuery Corner Demo

css-template-layout
用很酷炫的方法排版(排版方式: http://a.deveria.com/csstpl/)，不曉得實際應用起來怎樣

UI.Layout

簡易方便的layout

jQSlickWrap

可讓圖片貼齊文字

Equal Heights

讓元素同高

以上有部分參考 http://www.chinahtml.com/1006/127570360318874.html

Flip!

Quicksand

ImageFlow

Slideout Tips

AviaSlider

以上部分參考: http://www.chinahtml.com/1007/128011448019434.html

FontEffect

fancybox

tiptip

星期日, 10月 10, 2010

jQuery Plugin - form validation

下載及介紹請參考官網

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

因為資料太少了

所以用法是看原始碼才懂的...=~=

趕快記在這邊以免忘記!

原本的提示是英文的，自己簡單翻譯成中文

jquery.validationEngine-tw.js

(function($) {
$.fn.validationEngineLanguage = function() {};
$.validationEngineLanguage = {
newLang: function() {
$.validationEngineLanguage.allRules =  {
"required":{       // Add your regex rules here, you can take telephone as an example
"regex":"none",
"alertText":"* 需要填入此欄位",
"alertTextCheckboxMultiple":"* 請選擇一個選項",
"alertTextCheckboxe":"* 請選擇一個選項"},
"length":{
"regex":"none",
"alertText":"* 請填入 ",
"alertText2":" 到 ",
"alertText3": " 個字"},
"maxCheckbox":{
"regex":"none",
"alertText":"* 超過最大允許的字元數"}, 
"minCheckbox":{
"regex":"none",
"alertText":"* 請選擇選項 ",
"alertText2":" "}, 
"confirm":{
"regex":"none",
"alertText":"* 兩次輸入的值不相同"},  
"telephone":{
"regex":"/^[0-9\-\(\)\ ]+$/",
"alertText":"* 錯誤的電話號碼"}, 
"email":{
"regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
"alertText":"* 錯誤的電子郵件"}, 
"date":{
                         "regex":"/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/",
                         "alertText":"* 錯誤的日期, 請以 YYYY-MM-DD 的格式輸入"},
"onlyNumber":{
"regex":"/^[0-9\ ]+$/",
"alertText":"* 只允許數字"}, 
"noSpecialCaracters":{
"regex":"/^[0-9a-zA-Z]+$/",
"alertText":"* 不允許特殊字元"}, 
"ajaxUser":{
"file":"validateUser.php",
"extraData":"name=eric",
"alertTextOk":"* 此使用者已通過驗證", 
"alertTextLoad":"* 讀取中.. 請稍後",
"alertText":"* This user is already taken"}, 
"ajaxName":{
"file":"validateUser.php",
"alertText":"* This name is already taken",
"alertTextOk":"* This name is available", 
"alertTextLoad":"* Loading, please wait"},  
"onlyLetter":{
"regex":"/^[a-zA-Z\ \']+$/",
"alertText":"* 只允許輸入英文字母"},
"validate2fields":{
         "nname":"validate2fields",
         "alertText":"* 需要輸入姓和名"} 
} 
}
}
})(jQuery);
$(document).ready(function() { 
$.validationEngineLanguage.newLang()
});

接著

<script type="text/javascript" src="js/jquery.validationEngine-tw.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>

原本就不打算用內附的ajax
然而只有在form送出的時候，才會觸發驗證
我使用div的話就沒辦法

所以改用其他方法

送出:

function SubmitLoginForm()
{
$('#LoginForm').validationEngine({returnIsValid:true,promptPosition:"centerRight"});//.loadValidation('#LoginForm');
rs = $.validationEngine.isError;
if(rs == false)
{
$('#LoginForm').dialog("close");//*/
$.post('loginCheck.php',{ 'user': $('#user').val(), 'pass': $('#pass').val() }, function(data){ alert(data); });
}
else return false;
}

清除:

function ClearLoginForm()
{
$('#user').val("");
$('#pass').val("");
}

其他資料
http://www.36ria.com/1645

訂閱：文章 (Atom)