jQuery 常用的Plugin

平時要用都忘記先記錄一下
行事曆
Full Calendar
日期選擇
bootstrap-datepicker
時間選擇
ClockPicker
多選
Select2
bootstrap-select
Css Animate.css

jQuery 好用的Select Box

個人覺得比jquery ui 的combobox好用的Select2

jQuery Table中CheckBox全選

我想這功能應該被寫爛了
但我常遇到一個畫面有好幾個table
這樣每個都需要寫一次
這樣很麻煩程式碼也很長

            <table>
                <thead>
                    <tr class="active">
                        <th>
                            <label>
                                <input type="checkbox" class="selectAll" />全選</label>
                        </th>                       
                    </tr>
                </thead>
                <tbody>
                   <tr>
                      <td>
                          <input type="checkbox" />
                      </td>
                   <tr>
                   <tr>
                      <td>
                          <input type="checkbox" />
                      </td>
                   <tr>
                   <tr>
                      <td>
                          <input type="checkbox" />
                      </td>
                   <tr>
                   <tr>
                      <td>
                          <input type="checkbox" />
                      </td>
                   <tr>
                </tbody>
             </table>

計畫是抓到這個checkbox的父table再向下抓
closest這個語法可以查到指定的最上層
然後再用find向下找
程式依文字解讀就變下面

   $('.selectAll').change(function () {              
               $(this).closest('table').find('tbody tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));
   });

這樣只要checkbox class指定好不管多少table都能共用
參考來源
.closest() | jQuery API Documentation

jQuery Table合並儲存格

一早接到一個需合併儲存的功能 搜尋了一下找到一個與法簡單又相當好用的 jquery請參考jQuery : 分享合併Table的欄位 (RowSpan、ColSpan) 語法

 $(function () {
      $('.tbspan').rowspan(1);//第幾個欄位做合併 0開始           
      $('.tbspan').rowspan(4, 0); //(合並那一個,那一個欄位一樣)    
      $('.tbspan').colspan(3);//第幾列做合併 0開始
});

參考來源
jQuery colspan and rowspan table using cell break
jQuery : 分享合併Table的欄位 (RowSpan、ColSpan) 語法

jQuery 如何判斷選擇的物件在不在

通常都會先把jQuery每個物件的功能都寫好
但有時在asp.net webform visable = false時就會找不到物件
因為dom裡並沒有所以要判斷一下物件是否存在

var aTag = $('#abc');
if (!aTag.length)
    return;

參考網址
點我前往

jQuery Table Scroll freeze

一整天都測試凍結視窗
試了快六種但都不太好套
StickyTableHeaders這個算不錯但不能凍結column
目前找到最好用的gridviewscroll使用簡單

jQuery window.opener寫法

相信跨頁傳值或控制父頁的元件都是用

window.opener.getElementById("abc").value  = 'abc';

那用jQeury怎麼做??

$('#abc', opener.document).attr("value",txt);

參考網址 點我前往

jQuery 將網頁導到https(SSL)

最近都在架構的網站都會走SSL
所以記來以後來會用到

  
        $(function () {
            if (window.location.protocol != "https:") {
                var sslUrl = location.href.replace(/^http/i, "https");
                window.location.href = sslUrl;
                return;
            }
        });
 

參考網站
Detect HTTP or HTTPS then force HTTPS in JavaScript

jQuery Master-Detail範例

相信Master Detail是很常用的架構
呈現方式百百種
我大多會用fanybox或window.open
因為做起來相當簡單還有
昨天看到一個相當簡單又實用的範例分享給需要的人
點我前往

jQuery go to Top Bottom PageUp PageDown

又來念一下做post機上用網頁系統真麻煩
但還是要克服，用法很簡單
top

$('#top').click(function () {
     $('body,html').animate({ scrollTop: 0 }, 300);
});

bottom

$('#bottom').click(function () {
     $('body,html').animate({ scrollTop: $(document).height() }, 300);
});

PageDown

$('#PageDown').click(function () {
     $('body,html').animate({ scrollTop:  $(window).scrollTop() + 300 }, 300);
});

PageUp

$('#PageUp').click(function () {
     $('body,html').animate({ scrollTop:  $(window).scrollTop() - 300 }, 300);
});

jQuery 抓取table tr td 的值

很簡單的語法相當實用

         $(function () {
             $('table > tbody > tr').each(function () {
                 var mWord = $.trim($(this).find("td:eq(1)").text()); //1是抓取第二欄的文字
                
             });
         });     

jQuery Loading且置中

html部份

<div id="divLoading" style="background-color: Red; color: White; visibility: hidden; position: absolute; top: 0px; left: 0px; z-index:9999"> 資料傳輸中，請稍候... </div>

js部份

 <script type="text/javascript"> 
 $(function () { 
  var positionleft = $(window).width() / 2 - $("#divLoading").outerWidth(true) / 2; 
  var positiontop = $(window).height() / 2 - $("#divLoading").outerHeight(true) / 2;
  $("#divLoading").css("left", positionleft + "px").css("top",positiontop); //設定不Cache 
  $.ajaxSetup({ cache: false });
  $("#divLoading").ajaxSend(function () {
   $(this).css("visibility", "visible");  
  $.ajax({ type: 'post', url: 'Handler1.ashx',     
   data: { q: "" }, 
   success: function (result) { 
    $('#content').html(result); 
    $('#content').trigger("create"); 
  } }); 
 }); 
</script> 

jQuery Mobile 開發相關網站整理

看了邊做邊學系列的jQuery Mobile後
發現原來網路有許多工具能幫助產生html

官網不用說啦
http://jquerymobile.com/

微軟邊做邊學
http://msdn.microsoft.com/zh-tw/hh875190.aspx

曹老師說的許多用jquery mobile
http://www.jqmgallery.com/

曹老師裡面說的"烤地瓜"
但是好像現在要錢了(經濟不好烤地瓜當然要錢阿)
http://www.codiqa.com/

於是找了一下網址如下
1個APP 4個畫面 "Free"
https://mockingbot.com/
好像不能匯出html

相當好用目前使用能免費
http://tiggzi.com/home
我覺得特殊的地方如下圖

連apk ipa都有還可以有source code太強大了
只是介面功能少了點但免錢的算是很讚了啦!!

jQuery Mobile開發教學
http://www.youtube.com/playlist?list=PL6E59B4F30BC7988F

以下陸續開發再增加

jQuery 每次都參考最新的jQuery

網路參考如下就是每次都最新的

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

jQuery 解決select 下拉被截斷(支援連動兩個select)

找了很久終於找到jquery改變select長度被截斷的問題

原程式網頁的網頁點我

但如果是連動例如DropDownList1連動DropDownList2就必需要用jquery live(邊學邊做系列有教大家可以去看看)

好像要jQuery 1.3.2版後才有這功能喔

 
$(function() {
$("#ctl00_ContentPlaceHolder1_DropDownList2")
.live("focus", function() {
$(this).data("selectWidth", $(this).css("width")).css("width", "auto");
$(this).css({ position: "absolute" });
})

$("#ctl00_ContentPlaceHolder1_DropDownList2")
.live("blur", function() {
$(this).css("width", $(this).data("selectWidth"));

}) 
});
 

jQuery 改變iframe的src

做這個卡了一早上

myiframe 是iframe的id

function search(word){
$('#myiframe').attr('src', 'ProductsS.aspx?q=' + word + '');
}

<input id="abcd" maxlength="20" name="" size="20" type="text" value="" />
<input onclick="search(getElementById('abcd').value)" type="button" value="查詢" /> 

jQuery Ckeditor 自定義字型跟ToolBar

網路上有許多相關的 找到ckeditor.js 加入字體

CKEDITOR.editorConfig = function(config) {
config.font_names = 'Arial;Arial Black;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;新細明體;細明體;標楷體;微軟正黑體';
}

自訂義ToolBar ,網路上有許多ToolBar的說可自行找找

CKEDITOR.editorConfig = function(config) {
config.toolbar = 'MyToolbar';

config.toolbar_MyToolbar =
[
['Source', 'Preview', '-'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks']

];

}