jquery – LPC影子技术分享 https://www.mudbest.com 行影不离,忘之却步. Wed, 09 Jan 2013 15:05:09 +0000 zh-Hans hourly 1 https://wordpress.org/?v=7.1.3 Jquery倒计时插件Countdown timer jQuery Plugin https://www.mudbest.com/jquery%e5%80%92%e8%ae%a1%e6%97%b6%e6%8f%92%e4%bb%b6countdown-timer/ Wed, 09 Jan 2013 15:03:58 +0000 http://www.mudbest.com/?p=1747 阅读更多]]> 一个项目里用到了团购倒计时，本来想用递减的方式手写一个，但是想到兼容性问题，还是用封装好的Jquery插件吧。
今天在这里推荐的是“Countdown timer jQuery Plugin”，它是一个轻量级且灵活的倒计时插件，直接用实例说明吧。

首先包含主体的文件：

<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/jquery.jcountdown1.3.js" type="text/javascript"></script>

然后在模板页面加上以下JQUERY代码

<script type="text/javascript">
$(document).ready(function() {
 
    $("#time").countdown({date:"july 1, 2011"}); //Just date
    $("#time").countdown({date:"july 1, 2011 18:00:00"}); //Date and Time (in 24 hour format)
 
    //More options
    $("#time").countdown({
        date: "july 1, 2011 19:24",
        onChange: function( event, timer ){
 
            /*
            Tips:
 
            event.target is DOM Element
            this is DOM element
            $(this) is jQuery Element
            timer is interval for countdown
 
            If a countdown should end early you could do:
 
            clearInterval( timer );
            $(this).trigger('complete');
            */
 
        },
        onComplete: function( event ){
 
            $(this).html("Completed");
        },
        minus: false //defaults to false anyway
        leadingZero: true
    });
});
</script>

在模板里增加一个ID。

<p id="time"></p>

例子CSS，可忽略。

p#time{
    color:#c21017;
    text-align: center;
}
p#time span{
    display:inline;
    color:#222222;
    font-size:0.8em;
}

配置里大概修改说明如下：

date: 'June 11, 2010', //Date to countdown to
 
updatetime: 1000, //Time to update timer (milliseconds)
 
//Replaces the following flags with date values
%{d} = day
%{h} = hour
%{m} = minutes
%{s} = seconds
 
//jquery.jcountdown1.3.js 主要修改在这里
htmlTemplate: "%{d} <span class="small">days</span> %{h} <span class="small">hours</span> %{m} <span class="small">mins</span> %{s} <span class="small">sec</span>"
 
//If countdown timer should go into minus values instead of 00:00:00:00 when countdown time has passed
minus: false
 
//Gets called each time the countdown timer updates
//Can access element with countdown timer on it, as well as the timer interval itself
onChange: function( event, timer ){}
 
//Gets called when countdown completes
onComplete: function( event ){} //Can access element with countdown timer on it
 
//Whether time should have a leading zero e.g 02 days 01 hours 09 seconds
leadingZero: falsecountdown1.3

JS时间处理部分代码一并带出：

var date = new Date();

//时间格式替换修改
var str = '2008-10-09 21:35:28';//PHP中对应的UNIX时间戳为1223559328
var new_str = str.replace(/:/g,'-');
new_str = new_str.replace(/ /g,'-');
var arr = new_str.split("-");
var datum = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));

//转换为英文时间格式
var dt = new Date();
var m=new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec");
var w=new Array("Monday","Tuseday","Wednesday","Thursday","Friday","Saturday","Sunday");
var d=new Array("st","nd","rd","th");
mn=date.getMonth();
wn=date.getDay();
dn=date.getDate();

var dns;
if(((dn%10)<1) ||((dn%10)>3)){
	dns=d[3];
}else{
	dns=d[(dn%10)-1];
	if((dn==11)||(dn==12)){
	dns=d[3];
	}
}
document.write("<hr>"+m[mn]+" "+dn+dns+" " +w[wn-1]+" "+dt.getFullYear()+"<hr>");
]]> Jquery的idTabs使用 https://www.mudbest.com/jquery%e7%9a%84idtabs%e4%bd%bf%e7%94%a8/ Wed, 12 Dec 2012 11:19:47 +0000 http://www.mudbest.com/?p=1725 阅读更多]]> idTabs是基于JQUERY编写封装的一个插件，主要用于选项卡的实现。今天正碰到一个需求，这时候开始用到它了。

首先需要在HTML页面加载JQEURY和idTabs的库。

<script type="text/javascript" src="http://img3.tieyou.com/js/jquery.idTabs.min.js"></script>

如果你细心的话，打开jquery.idTabs.min.js后你会发现在里面已经加载了JQUERY的latest类库了，这说明，这个插件是基于JQUERY的latest库编写的，如果使用就要引用
jquery-latest.min.js这个类库了，不过idTabs已经帮你引用进来了。

idTabs使用基本介绍如下：

<ul class="idTabs"> 
  <li><a href="#jquery">jQuery</a></li> 
  <li><a href="#official">Tabs 3</a></li> 
</ul> 
<div id="jquery">If you haven't checked out ...</div> 
<div id="official">idTabs is only a simple ...</div>

通常的使用方法如下：

<div id="usual1" class="usual"> 
  <ul> 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
  <div id="tab1">This is tab 1.</div> 
  <div id="tab2">More content in tab 2.</div> 
  <div id="tab3">Tab 3 is always last!</div> 
</div> 
 
<script type="text/javascript"> 
  $("#usual1 ul").idTabs(); 
</script>

选择默认选项卡的示例如下：

<div id="usual2" class="usual"> 
  <ul> 
    <li><a href="#tabs1">Tab 1</a></li> 
    <li><a class="selected" href="#tabs2">Tab 2</a></li> 
    <li><a href="#tabs3">Tab 3</a></li> 
  </ul> 
  <div id="tabs1">This is tab 1.</div> 
  <div id="tabs2">More content in tab 2.</div> 
  <div id="tabs3">Tab 3 is always last!</div> 
</div> 
 
<script type="text/javascript"> 
  $("#usual2 ul").idTabs("tabs2"); 
</script>

更自由的使用方法如下：

<ul id="freedom" class="idTabs"> 
  <li>Freedom</li> 
  <li><a class="selected" href="#one">First</a></li> 
  <li><a href="#two">Second</a></li> 
  <li><a href="#three">Third</a></li> 
  <li><a href="#four">Fourth</a></li> 
</ul> 
 
<div class="tabContainer"> 
  <h3>Tab Container</h3> 
  <p id="one">This is my first tab.</p> 
  <p id="two">This is my second tab.</p> 
</div> 
 
<img id="three" src="jquery_logo.gif" alt="Even images can be a tab"> 
 
<span id="four">Message four over here!</span>

打破传统的列表的方法如下：

<div class="imagebox idTabs"> 
  <a class="selected" href="#img1">1</a> 
  <a href="#img2">2</a> 
  <a href="#img3">3</a> 
  <a href="#img4">4</a> 
  <img id="img1" src="http://www.sunsean.com/images/symbol/_brace.png"> 
  <img id="img2" src="http://www.sunsean.com/images/symbol/_lambda.png"> 
  <img id="img3" src="http://www.sunsean.com/images/symbol/_beta.png"> 
  <img id="img4" src="http://www.sunsean.com/images/symbol/_paren.png"> 
</div> 
 
<script type="text/javascript"> 
  $(".imagebox").idTabs("!mouseover"); 
</script>

带参数和URL的changing方法如下：

<div id="adv1" class="usual"> 
  <ul> 
    <li><a href="#t1">Tab 1</a></li> 
    <li><a class="selected" href="#t2">Tab 2</a></li> 
    <li><a href="#t3">Tab 3</a></li> 
  </ul> 
  <div id="t1">This is tab 1.</div> 
  <div id="t2">More content in tab 2.</div> 
  <div id="t3">Tab 3 is always last!</div> 
</div> 
 
<script type="text/javascript"> 
  var settings = { start:1, change:false }; 
  $("#adv1 ul").idTabs(settings,true); 
</script>

带渐隐效果的方法如下：

<div id="adv2"> 
  <ul> 
    <li><a class="selected" href="#ani1">1</a></li> 
    <li><a href="#ani2">2</a></li> 
    <li class="split"></li> 
    <li><a href="#ani3">3</a></li> 
    <li><a href="#ani4">4</a></li> 
  </ul> 
  <span> 
    <p style="display: block; opacity: 0.266035;" id="ani1">Click on the tabs to see a nice fade.</p> 
    <p id="ani2">You're not impressed?</p> 
    <p id="ani3">But it's so cool... in a nerdy way.</p> 
    <p id="ani4">Download idTabs and have your cake. You can eat it too.</p> 
  </span> 
</div> 
 
<script type="text/javascript"> 
  $("#adv2").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
    for(i in list) 
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  }); 
</script>

自定义功能的方法如下：

<span id="adv3"> 
  <a class="selected" href="#cake">Cake</a> vs <a href="#pie">Pie</a> 
  <p id="cake">Cake is great</p> 
  <p id="pie">So is pie</p> 
  <div id="message">It's so delicous and moist!</div> 
</span> 
 
<script type="text/javascript"> 
  $("#adv3").idTabs(function(id){ 
    switch(id){ 
      case "#cake": $("#message").html("It's so delicous and moist!"); break; 
      case "#pie":  $("#message").html("Just the way mom makes it."); break; 
    } return true; 
  }); 
</script>

以上idTabs官方的使用方法都已列出。

以下是今天需求所编写的：

<div id="idTableAjax">
<div class="NavBox">
	<ul class="idTabs">
    	<li><a href="#shanghai" class="selected">上海</a></li>
    	<li><a href="#beijing">北京</a></li>
    	<li><a href="#tianjing">天津</a></li>
    	<li><a href="#guangzhou">广州</a></li>
    	<li><a href="#shenzhen">深圳</a></li>
    	<li><a href="#nanjing">南京</a></li>
    	<li><a href="#suzhou">苏州</a></li>
    	<li><a href="#hangzhou">杭州</a></li>
    	<li><a href="#wuxi">无锡</a></li>
    	<li><a href="#wuhan">武汉</a></li>
    	<li><a href="#changsha">长沙</a></li>
    	<li><a href="#qingdao">青岛</a></li>
    	<li><a href="#jinan">济南</a></li>
    	<li><a href="#chongqing">重庆</a></li>
    	<li><a href="#chengdu">成都</a></li>
    	<li><a href="#xian">西安</a></li>
    	<li><a href="#xiamen">厦门</a></li>
    	<li><a href="#hainan">海南</a></li>
    	<li><a href="#dalian">大连</a></li>
    	<li><a href="#zhengzhou">郑州</a></li>
    	<li><a href="#shenan">沈阳</a></li>
    </ul>
</div>
<div class="wrap">

    <div id="shanghai"></div>
    
    <div id="beijing"></div>
    
    <div id="tianjing"></div>
    
    <div id="guangzhou"></div>
    
    <div id="shenzhen"></div>
    
    <div id="nanjing"></div>
    
    <div id="suzhou"></div>
    
    <div id="hangzhou"></div>
    
    <div id="wuxi"></div>
    
 	<div id="wuhan"></div>
    
    <div id="changsha"></div>
    
    <div id="qingdao"></div>
    
    <div id="jinan"></div>
    
    <div id="chongqing"></div>
    
    <div id="chengdu"></div>
    
    <div id="xian"></div>
    
    <div id="xiamen"></div>
    
    <div id="hainan"></div>
    
    <div id="dalian"></div>
    
    <div id="zhengzhou"></div>
    
    <div id="shenan"></div>
</div>

</div>


<script type="text/javascript" language="javascript">
/**
* str 城市名
* type 类型
*/
function tableAjax(str,htmlId,message,type){
	var params = {};
	params['cityname'] = str;
	if(str == ''){
		return ;
	}
	
	$.ajax({
		url:"http://www.tieyou.com/index.php?param=/ajax/complexHotelSpecial",//AJAX地址
		type:'get',//提交方式
		dataType:'html', //返回数据格式
		data:params,//参数以及值
		timeout:1000, //超时时间
		beforeSend:function(){
			$('#'+htmlId).html(message);
			//表单提交的过程，加载中....	
		},

		success:function(data){
			$('#'+htmlId).html(data);
			//$('#beijing').html(data);
		},
		error:function(data) {
			//错误事件处理
		},
		complete:function(data) {
			//最后相应事件处理
		}		
		});
}

//根据点击的事件自动加载对应的AJAX
  $("#idTableAjax").idTabs(function(id,list,set){ 
	if(id != ''){
		//正则匹配id
		var reg = new RegExp(/^#(.*?)$/gi);
		//获取id
		if(reg.test(id))
		{
			//获取html值
			var str = this.innerHTML;
			//获取过滤后的ID参数
			var htmlId = RegExp.$1;
			//设定message状态文本
		
			//判断是否存在这个ID
			if(htmlId != '' && str != ''){
				//alert(htmlId);
				tableAjax(str,htmlId);
			}
		} 	
	}
 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
	
    for(i in list){
		//由于正则替换后，原来的选项卡数组里会产生"#"这样的字符串，过滤掉这些字符串
		if(list[i] != "#"){
			//console.log(list);
			$(list[i]).hide();
		}
	}
    $(id).fadeIn(); 
    return false; 
  }); 
</script>

到此结束。

]]> jquery解决AJAX跨域问题 https://www.mudbest.com/jquery%e8%a7%a3%e5%86%b3ajax%e8%b7%a8%e5%9f%9f%e9%97%ae%e9%a2%98/ https://www.mudbest.com/jquery%e8%a7%a3%e5%86%b3ajax%e8%b7%a8%e5%9f%9f%e9%97%ae%e9%a2%98/#comments Fri, 23 Nov 2012 08:04:55 +0000 http://www.mudbest.com/?p=1706 阅读更多]]> 以PHP服务端为例。

页面ajax.php

<?php
//首先定义一个全局变量用于AJAX跨域返回值获取
$strJsonCallBack = $_REQUEST["jsoncallback"];
//定义一个测试数组
array['data'] = array('测试','再测试');
//再将数组进行JSON格式化，并在最前面加上刚刚定义的AJAX跨域返回值的标示
echo $strJsonCallBack."(".json_encode(array['data']).")";
exit;
?>


页面index.html

<!--引入Jquery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
//访问JSON服务端返回值
var url = 'http://www.mudbest.com/ajax.php'; 
//&jsoncallback用于跨域获取的标示
$.getJSON(url+'&jsoncallback=?', {},function(data){
        //获取返回的JSON字符串
        data = data.data;
  }
);
</script>
]]> https://www.mudbest.com/jquery%e8%a7%a3%e5%86%b3ajax%e8%b7%a8%e5%9f%9f%e9%97%ae%e9%a2%98/feed/ 1