跑給程式追: jquery

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

2013年5月14日星期二

jQuery.ptTimeSelectA jQuery Plugin

網址：http://pttimeselect.sourceforge.net/example/index.html
功能：用來選擇時間的功能。
簡述：使用UI來做。

2013年4月30日星期二

針對IE 改寫 table

使用時機：table 沒有特定下使用

//針對div .mintabletwo底下數個table 且沒有class。
$(function(){
 var version = $.browser.msie;
  
 if(version){ //因為ie會把表格線弄的很淡，所以在這邊動點手腳。如果會影響到表格的影響，請更改之。
  $('.mintabletwo table').each(function(index){
   var wid_var=$(this).attr('border');
   if (typeof wid_var === "undefined"|| wid_var=='0'){
    $('.mintabletwo table:eq('+index+')').addClass('noLine');
   }else{
    $('.mintabletwo table:eq('+index+')').addClass('haveLine');
   }
  })
  $('.haveLine').css('border', '1px solid black');
 }
})

補充說明：
.eq() 教學連結
.find() 教學連結
.addClass() 教學連結

2013年3月25日星期一

jquery 應用

html

<form >
<table >
<caption><b>處理功能</b></caption>
<tr><th width='100px'>是否接受預約?</th>   <td><input type='radio' name='f_ok' id='f_ok' value='ok'>准許

<input type='radio' name='f_ok' id='f_no' value='no'>不准許
<div id='f_noarea' style='margin-left:20px'>
<input type='checkbox' name='a1' id='a1' class='checkNo' value='同時段XXX。'>同時段如有二位以上預約者時，XXXxxxXXX。

<input type='checkbox' name='a2' id='a2' class='checkNo' value='預約人XXXxxXXX。'>預約人XXXxxXXX。

<input type='checkbox' name='a3' id='a3' class='checkNo' value='不外借XXXxxXXX'>不外借XXXxxXXX。

<input type='checkbox' name='a4' id='a4' class='checkNo'>其他<input type='text' size='30' name='a4_note'>。

</div>
<input type='submit' value='送出' id='s01'></td></tr>
</table>
</form>

2013年1月28日星期一

HTML FORM 中使用屬性 disabled readonly , submit丟出去的處理狀況

readonly只能用在屬性input裡面。form送出去後的name value是可以被使用的。
disalbed=>select,input 都可以使用，但form送出後的name value是不可以被使用的。

Q:目前是想把select在按下 "確認資料"成功後是不能被更變的

A:目前是想把select在按下 "確認資料"成功後是不能被更變的，但readly 卻不能使用在select上面，
為了讓select不能被更變，只好使用disalbed，但form送出去，disabled的值是不能使用的，只好在form底下
設一個hidden的input 底下的name 跟 select 的name是相同的。

當按下 input type submit(確認資料)後 select被jquery 設了disalbed。

記得在form底碼加一個跟select 相同ID 的 input hidden 並指定selected 的value。
這樣就可以處理這件事了。

2012年8月21日星期二

針對某個瀏覽器做css的調整(瀏覽器視窗高度)

判別瀏覽器：
jQuery.browser.version
jQuery 提供了 browser 物件來讓我們能判斷現在的訪客是用什麼瀏覽器及版本

可參考 [jQ]jQuery.browser.version 在 IE 中版本判斷的 Bug

判斷是否為ie瀏覽器可以使用：$.browser.msie

[JQuery][轉錄] 如何取得瀏覽器視窗高度及寬度 (跨瀏覽器)

2012年7月18日星期三

基本選擇器

* $('*')
獲取檔案中的所有元素(包括html, head, body, etc)。
$('*')
$('#all *') id="all"的所有后代元素

#id $('#id')
根据指定的ID属性匹配一个元素。也可以结合CSS选择器的规则获取元素。

$('#id')
$('#id_1, #id_2') id="id_1"和id="id_2"的元素
$('#id_1 #id_2') id="id_1"的元素包含id="id_2"的元素

element $('element')
根据给定的元素名获取所有元素

$('div')

.class $('.class')
根据给定的类名获取所有元素(多个元素可以拥有相同的类名，一个元素可以有多个类名)

$('.class')

$('selector1, selector2, selectorN')
合并给定选择器的结果并返回，selector必须是合法的jQuery选择器。

$('div, #id, p.class')

2012年7月12日星期四

plugin: Password Validation

Current version: 1.0.0
License: MIT/GPL

Required

jQuery 1.2.6+, compatible with 1.3.2
jQuery Validation Plugin 1.5+

WEB

plugin Validation

Current version: 1.9.0
Minified filesize (even less with GZip): 21,601 bytes
License: MIT/GPL
WEB:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
DEMO

jquery 官方

http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods

另一個比較常用的驗證程式。

<link href="xx/script/form_validator/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<link href="xx/script/form_validator/css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="xx/script/form_validator/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="xx/script/form_validator/js/jquery.validationEngine.js"></script>

<script>
$(document).ready(function(){
$("#upp").validationEngine();

})

</script>
<form id='upp'>
<input type='text' class="validate[required,custom[email]] text-input ">
</form>

功能DEMO

原網站.最新版本v2.6.1(2013.04.18更改)

2012年2月1日星期三

change(下拉式選單)

圖示：

2012年1月17日星期二

jquery 衝突

因為引用多個jquery的關係，有機會引起jquery的互相衝突。
解決方式：
將其中的jquery 自訂一個捷徑：

var $j=jQuery.noConfilict();
  $j(function(){
     })

鋒利的jQuery第1-20頁有提到。

2012年1月16日星期一

Jquery 的show 及hide

ID：check 為checkBox ID: cCArea 為顯示的AREA
利用check Box來顯示或隱藏。
2013.04.08加入有多個check需要使用顯示與隱藏。加入副程式 same_check以減少程式碼。

//副程式
function same_check(m_objc,objc){
   if(m_objc){
     $(objc).show("fast");  
   }else{
     $(objc).hide("fast");
   }
}

//jquery 主要的
    $("#check").click(function(){
      same_check($(this).is(":checked"),"#cCArea");
   })

從多個checkbox中判斷哪一個被選取，和要顯示的區域

案例：只有兩個checkbox ，從中2選一。
if($("#cch2").attr("checked")){
 $("#cck1Area").show("fast");
 $("#cck2Area").hide("fast");
 }

2012年1月5日星期四

UI Datepicker

demo:http://jqueryui.com/demos/datepicker/






<script type="text/css">

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</script>

2012/09/26 新增

<script src='../script/jquery-1.8.0.min.js'></script>  

   <link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery-ui.css" type="text/css" media="all">  
<script src="../script/jquery.ui.core.js"></script>
<script src="../script/jquery.ui.widget.js"></script>
<script src="../script/jquery.ui.datepicker.js"></script>


<script>
 $(function() {
  $( "#datepicker" ).datepicker();
 });
 </script>

2012/09/26 下午新增
datetimepick2

<script language="javascript" type="text/javascript" charset="utf-8" src="../script/datetimepicker2/datetimepicker_css.js"></script>
 <img src="../script/datetimepicker2/images/cal.gif" style="width:16px;height:16px;cursor:pointer;" border="0" alt="Pick a date" onclick="javascript:NewCssCal('order_pay_date','yyyymmdd','arrow',true,'24')"><small>按圖示即可輸入時間</small><input type="text" id="order_pay_date" name="order_pay_date"  disabled="disabled">

2011年12月27日星期二

引用google的jquery

聽說可以減少連結的時間。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

參考如下：
網址：http://code.google.com/intl/zh-TW/apis/libraries/devguide.html
http://www.ezdiy.org/forum/viewtopic.php?id=362

jquery 丟值到textarea

$("textarea#showMerchandiseContent").html('654');
$("textarea#ExampleMessage").val(result.exampleMessage);

dom中有value属性的是Button ImageButton、 CheckBox、 File、 Hidden、Password、Radio、 Reset 、Submit、 Text、 Option、 textarea

textarea

属性:

    Common -- 一般属性
    cols -- 多行输入域的列数
    rows -- 多行输入域的行数
    accesskey -- 表单的快捷键访问方式
    disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
    readonly -- 输入域可以选择,但是无法修改
    tabindex -- 输入域,使用"tab"键的遍历顺序

2011年12月26日星期一

1.6 版才有的 .prop()


    if($("#update_submit").prop("disabled")==false)
      $("#update_submit").prop("disabled",true)

1.6以前的.attr可以使用。
但在1.6後使用會有問題。

延伸閱讀：http://blog.xuite.net/vexed/tech/44905647

訂閱：文章 (Atom)

跑給程式追

Android

2013年5月14日星期二

jQuery.ptTimeSelectA jQuery Plugin

2013年4月30日星期二

針對IE 改寫 table

2013年3月25日星期一

jquery 應用

2013年1月28日星期一

HTML FORM 中使用屬性 disabled readonly , submit丟出去的處理狀況

2012年8月21日星期二

針對某個瀏覽器做css的調整(瀏覽器視窗高度)

2012年7月18日星期三

基本選擇器

2012年7月12日星期四

plugin: Password Validation

plugin Validation

2012年2月1日星期三

change(下拉式選單)

2012年1月17日星期二

jquery 衝突

2012年1月16日星期一

Jquery 的show 及hide

從多個checkbox中判斷哪一個被選取，和要顯示的區域

2012年1月5日星期四

UI Datepicker

2011年12月27日星期二

引用google的jquery

jquery 丟值到textarea

2011年12月26日星期一

1.6 版才有的 .prop()

天空雲

Links

Android

2013年5月14日 星期二

2013年4月30日 星期二

2013年3月25日 星期一

2013年1月28日 星期一

2012年8月21日 星期二

2012年7月18日 星期三

2012年7月12日 星期四

2012年2月1日 星期三

2012年1月17日 星期二

2012年1月16日 星期一

從多個checkbox中判斷哪一個被選取，和要顯示的區域

2012年1月5日 星期四

2011年12月27日 星期二

2011年12月26日 星期一

2013年5月14日星期二

2013年4月30日星期二

2013年3月25日星期一

2013年1月28日星期一

2012年8月21日星期二

2012年7月18日星期三

2012年7月12日星期四

2012年2月1日星期三

2012年1月17日星期二

2012年1月16日星期一

2012年1月5日星期四

2011年12月27日星期二

2011年12月26日星期一