學習筆記本: jquery ui

2018年6月7日星期四

【Jquery UI】拖移(sortable)抓到值

$(".cat1 .type-sort").sortable({update: function (e, ui){
$current_id = ui.item.attr('id');
$change_id = ui.item.prev().attr('id');
console.log(ui.item.attr('id')+'/'+ui.item.prev().attr('id'));

console.log($("#"+$current_id).html());
}});

2015年1月8日星期四

【Jquery】jQuery TWzipcode 地址縣市選擇

twzipcode 地址選擇縣市郵遞區號工具

方便的工具，不用自己寫ajax 官網

$(function(){
  $('#addr').twzipcode({ // ID 名稱
        countySel: '桃園市', // 城市預設值
        districtSel: '平鎮區', // 地區預設值
        zipcodeSel:'324', // 郵遞區號預設值
        readonly:true,  // 郵遞區號唯獨
        css: ['county', 'district', 'zip'], // 個別的CSS 要另外自己寫
        countyName: 'bill_county', // 城市欄位名稱
        districtName: 'bill_district', // 地區欄位名稱
        zipcodeName: 'bill_zip' // 郵遞區號欄位名稱
  });
});

2014年5月15日星期四

【Jquery】商品切換效果

範例一：右下左飄走
範例網址：演示

範例二：往右消失
範例網址：演示1 演示2

script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script>
var $i=0;
var $coupNum;
$(function (){
 $coupNum = $(".coup").length;
 $("#apDiv1 .coup").each(function(index, element) {
  $(this).css("z-index",$(this).css("z-index") - index);
 });
 setInterval("couponMove()",3000); 
});
function couponMove(){
 $("#apDiv1 .coup").eq($i).animate({left: "+=300"},1000,'easeInOutCubic',function (){
  $(this).css({left:"0px","z-index":"0"});
  $i++;
  $("#apDiv1 .coup").each(function(index, element) {
            $(this).css("z-index",$(this).css("z-index")+1);
        });
  if ($coupNum <= $i) $i=0;
 });
}
</script>
<style type="text/css">
body {
 padding:0px;
 margin:0px;
}
#main {
 position: relative;
 width:1251px;
 margin:0 auto;
 z-index: 1;
}
#apDiv1 {
 position: absolute;
 width: 223px;
 height: 163px;
 z-index: 2;
 left: 1027px;
 top: 474px;
 overflow:hidden;
}
.coup {
 position: absolute;
 z-index:100;
}
</style>
</head>

2013年2月20日星期三

【jquery ui】sort 存儲存值及限制個數

$( "ul.droptrue" ).sortable({
 connectWith: "ul"
});

$( "ul.dropfalse" ).sortable({
 connectWith: "ul",
 update: function( event, ui ) {
  var result = $(this).sortable('toArray');
  alert(result);
  if (result.length > 2){
   alert('最多只能放2個');
   $( ".droptrue" ).sortable( "cancel" );
  }
 }
});

2018年6月7日 星期四