[JQuery] 讓AJAX運作的時候，跳出loding的訊息

[程式][JQuery] 讓AJAX運作的時候，跳出loding的訊息。－Part 1 @ 四處流浪的阿基。I am Vagrant Walker :: 痞客邦 PIXNET ::
http://expect7.pixnet.net/blog/post/39829979-%5B%E7%A8%8B%E5%BC%8F%5D%5Bjquery%5D-%E8%AE%93ajax%E9%81%8B%E4%BD%9C%E7%9A%84%E6%99%82%E5%80%99%EF%BC%8C%E8%B7%B3%E5%87%BAloding%E7%9A%84%E8%A8%8A

[JQuery] 讓textfield 看的到 但不能用

$("input[type=text]").focus(function(){
 this.blur();
 });

[JQuery] on() bind() delegate()

bind(type, [data], fn)

on(type,[selector],[data],fn)


on可以有selector



delegate()可以指定未來元素 取代live()


.on()是最新的1.9版本整合了之前的三種方式的新事件綁定機制

[JQuery] 動態調整字大小 div大小

$("#try2").click(function(){
 
 
      $("#t").css({
   
      height:function(index,value){
        return parseFloat(value)/1.2;
      },
     
        fontSize:function(index,value){
          return parseInt(value)*1.2;
        }
    });
 
 
 
  });

字大小要用parseInt

JQuery造成相衝的解決方式

http://summer10920.blogspot.tw/2011/05/joomla-15-jquery.html

jquery抓RADIO的值

    var item = $('input[name=member.type]:checked').val();

利用jquery disable或是enable

前言：
htmle裡的「disabled」和「checked」一樣 不管是=true false 都是true

所以只能靠js解決==

可以用removeAttr把disabled的這屬移移掉：
 $('.checkboxN').removeAttr('disabled');

或是設為空字串：
$('.element').attr('disabled', '');



如果是要disable

可以增加屬性：
$('.element').attr('disabled', 'disabled');

jquery 抓request的attribute

var myNewVariable  = '${myValueName}';

jQuery 的 toggle

上次寫過 「jquery radio 顯示或隱藏一段顯示文字」

但如果是按同一個button 或是同一個div或同一個span 也可以有顯示/隱藏效果
(雖然用jsp也能解決...但麻煩很多)

現在可以利用toggle解決

jQuery 寫法：
  $(document).ready(function(){                      
        $('#iswitch').toggle(
        function(){      
            $('#contentView').show();
        },
        function(){      
            $('#contentView').hide();
        }
    );
    });


利用jquery submit form

如果有一個form
<s:form action="Member/insert"   theme="simple"  >
.
.
.

</s:form>

利用jquery去submit的話 一般只要這樣寫：

$( "#Member_insert" ).submit();


但如果是要指定別的action (insertVIP)：

$( "#Member_insert" ).attr("action", "insertVIP.do").submit();


如果method後面有要帶參數也可以：

$( "#Member_insert" ).attr("action", "insertVIP.do?dept=A1&code=XYZ").submit();



HTML5 的新屬性：Placeholder

網頁表單的文字方塊 有時會有看到預設的說明文字 像這樣：

輸入時 字會自動消失

以前的方式是要用js 

語法差不多會是

<input name="user_name" type="text" size="28" id="user_name" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';}">

[jQuery] Colorbox

可以有燈箱效果 或是用來網站的廣告覆蓋整個頁面等等等


網站：http://www.jacklmoore.com/colorbox/

目前只是用來做網頁覆蓋

在網頁中加上

$.colorbox({href:"memo.html"});

就能在原本網頁上 蓋上memo的網頁內容

不只這麼陽春 還可以再加入一些參數 變得更客製化

例如：

$.colorbox({href:"${includePage}", height:"90%",width:"50%",opacity:0.7,closeButton:true })

${includePage} ←←是由下面set好

<s:set name="includePage"   >
        http://i-memo.blogspot.tw
</s:set>     

opacity←←底的透明度

closeButton:true ←←要不要closeButton

如果想要在網頁一load時就能有效果：
<script type="text/javascript">
        $(document).ready(function(){
            setTimeout(function() {
                $.colorbox({href:"${includePage}", height:"90%",width:"50%",opacity:0.7,closeButton:true });
            });
        });
            
</script>

如果不想讓使用者關掉：
<script type="text/javascript">
        $(document).ready(function(){
            setTimeout(function() {
                $.colorbox({href:"${includePage}", height:"90%",width:"50%",opacity:0.7 , escKey:false, overlayClose:false,onLoad: function() {                                   $('#cboxClose').remove();
}});
            });
        });
            
</script>


其他網頁上有更詳細的介紹

jQuery教學－浮動式固定上選單

http://www.minwt.com/js/8891.html

範例 ：http://img.minwt.com/file/sampleView/jQuery/top-menu/top-menu-minwt.html

#top-bar{ width:100%; height:50px; background:#32b3bf; position:fixed; top:-65px; /* CSS3 陰影*/ -webkit-box-shadow: 0px 8px 15px #333; -moz-box-shadow: 0px 8px 15px #333; box-shadow: 0px 8px 15px #333; }

jquery radio 顯示或隱藏一段顯示文字

<script type="text/javascript">
$(document).ready(function(){
$('#d1').hide();
$("input[name='r1']").click(function(){
var item = $('input[name=r1]:checked').val();
if(item==1)
 $('#d1').show();
else
 $('#d1').hide();
});
});



</script>
<input type=radio name="r1" value="1">Show
<input type=radio name="r1" value="2">Hide


<div id="d1">
HIHIHIHI
</div>



資料來源：http://blog.bestdaylong.com/2013/07/jquery-radio.html