分类目录归档:Jquery

Jquery的一些事~!

jQuery上传插件Uploadify 3.2使用

我今天介绍的Uploadify 3.2的,以前旧版本的并不适用,说到这个,我就火大,我也是第一次使用,也百度了下使用手册,结果坑爹的那些手册都是旧版的,新版的Uploadify接口和旧版的差太多了。废话不多说,进入正题。
Uploadify下载地址:http://www.uploadify.com/download/ 这里下载最新版的3.2的。
下载下来解压后估计里面很多文件,其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦,jQuery库那是必须的。
在你使用的项目中,把jquery.uploadify.js引入以后,用法和大多数JQ插件一样。同时也要记得引入swfobject.js这个插件,版本2.2以上的。使用方法例如:

<pre>

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

 

</pre>

file_upload_1其实也就是一个容器ID,比如,上面的只是简单的事例,下面我就把我在项目中做的发出来,每个都有解释:

<pre>

$(document).ready(function() {
    $("#file_upload").uploadify({
        //开启调试
        'debug' : false,
        //是否自动上传
        'auto':false,
        //超时时间
        'successTimeout':99999,
        //附带值
        'formData':{
            'userid':'用户id',
            'username':'用户名',
            'rnd':'加密密文'
        },
        //flash
        'swf': "uploadify.swf",
        //不执行默认的onSelect事件
        'overrideEvents' : ['onDialogClose'],
        //文件选择后的容器ID
        'queueID':'uploadfileQueue',
        //服务器端脚本使用的文件对象的名称 $_FILES个['upload']
        'fileObjName':'upload',
        //上传处理程序
        'uploader':'imageUpload.php',
        //浏览按钮的背景图片路径
        'buttonImage':'upbutton.gif',
        //浏览按钮的宽度
        'width':'100',
        //浏览按钮的高度
        'height':'32',
        //expressInstall.swf文件的路径。
        'expressInstall':'expressInstall.swf',
        //在浏览窗口底部的文件类型下拉菜单中显示的文本
        'fileTypeDesc':'支持的格式:',
        //允许上传的文件后缀
        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
        //上传文件的大小限制
        'fileSizeLimit':'3MB',
        //上传数量
        'queueSizeLimit' : 25,
        //每次更新上载的文件的进展
        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
             //有时候上传进度什么想自己个性化控制,可以利用这个方法
             //使用方法见官方说明
        },
        //选择上传文件后调用
        'onSelect' : function(file) {

        },
        //返回一个错误,选择文件的时候触发
        'onSelectError':function(file, errorCode, errorMsg){
            switch(errorCode) {
                case -100:
                    alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!");
                    break;
                case -110:
                    alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!");
                    break;
                case -120:
                    alert("文件 ["+file.name+"] 大小异常!");
                    break;
                case -130:
                    alert("文件 ["+file.name+"] 类型不正确!");
                    break;
            }
        },
        //检测FLASH失败调用
        'onFallback':function(){
            alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
        },
        //上传到服务器,服务器返回相应信息到data里
        'onUploadSuccess':function(file, data, response){
            alert(data);
        }
    });
});

</pre>

12款不容错过的新款jQuery插件

本文来自CodeGeekz,作者是Gavin。jQuery是一款快速、简明的JavaScript类库,jQuery的语法设计可以简化HTML文档对象、事件处理、选择DOM元素、制作动画效果、使用Ajax以及其他功能。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

下面收集的这12款刚发布的jQuery插件将会对你的开发任务起到事半功倍的效果。

1. Responsive Elements

Responsive Elements作为jQuery的一个插件,使得在Web网页里需要使用元素这一过程变得更加简单。此插件在元素里添加各种类(如大于100、小于150小于200),这就能告诉我们“每个元素的确切大小是多少”。另外,使用这些预定义的类可以帮助我们为每一个场景创建不同的风格。类的范围(从X像素到Y像素)和类的区间也是可以自定义的。

2. CLNDR.js

CLNDR.js是一个jQuery插件,用于创建日历并且可以按自己需求随意定制。该插件没有产生任何标记,而是使用Underscore.js HTML模板填充数据。它还有“随时可用”选项确定星期抵消,日期会在最初加载的时候显示,随意点击事件(例如下一月/上一月)等功能。值得一提的是,CLNDR.js并不是一个利用玩的方式来创建日历的,而是一个功能丰富的、能把人们心目中想要的独一无二的日历创建出来的一个样板。

3. AnimateScroll

AnimateScroll只是一个很小的jQuery插件,其功能是为滚动添加相对宽松的效果。可以自定义滚动的风格(30个滚动效果)和滚动的速度。此外还有一个“填充”选项,用来控制滚动结束的位置。AnimateScroll插件并不仅仅局限于页面的整个部分,但特定包装器元素也可以有针对性。

4. JInvertScroll

JInvertScroll是一个能够巧妙地处理默认滚动行为同时可以实施水平滚动的jQuery插件。这个轻于1KB的轻量级插件无需安装就可以使用。添加一个特定的类来包装器元素和调用一个JavaScript函数就已经足够了。与此同时,它还简化了利用onScroll回调方式来创建视差效果的步骤,这个视差效果可以决定激活哪一个元素。

5. Intention.js

Dow Jones创建了Intention.js插件,它可以更加简便的开发出响应式布局。这个插件可以减少对CSS媒体查询的需求,还能为重组HTML提供一个高度灵活的解决方案。它有3个基本的操作方法、属性、类和配置,它们都可以用HTML属性来设置。Intention.js插件带有“随时可用”的设置,可以控制宽度临界值、触摸设备、高分辨率显示器和一个后退,所有的这些都是可以完全自定义的。

6. NProgress

NProgress插件是一个纳米进度条,应用于复杂网页的细长进度条。可以说它的来源是从Google、YouTube和Medium那里得到的创作灵感。以现实的细流动画为特色,来让你的用户相信有些重要的事情正在发生。插件NProgress.js对于Turbolinks、Pjax和其他的Ajax级别的App来说简直是完美的搭配。

7. Flowtype.js

FlowType.JS是一款jQuery插件,它能根据容器的宽度自动调整字体大小以及行间距,这样内容就能像我们想要的那样显示出来。

8. Failsafe.js

FailSafe.是一个可以在危险环境下帮助App正确运行的jQuery插件。换句话说,它甚至考虑到了在断网情况下和低电量情况下如何运行——插件会很友好的向用户发送提示信息。在某些断网或高电压情况下,这个插件无法正常使用网页上的一些元素。

9. jQuery Fullscreen Editor Plugin

这一插件可以将文本域转换到可定制的编辑器里,既可以在表格中使用也可以单独使用。如果在全屏编辑器里的时候可以调整最大宽度和高度,还可以在编辑器后面覆盖上一层半透明的覆盖物。切换全屏模式时候的过渡效果可以是淡入淡出式或滑入式的。

10. jQuery Tweetable.js 

Tweetable.js插件可以更加简便的把语句和代码片段tweet给你的用户。那样就抓住所有可tweet数据元素的属性,并创建可点击的链接。如果所说的属性有一个固定的值,那么tweet文本就会被设置成那个值。链接在默认的情况下是没有什么特色的,但是这些链接都是用给定的类创建的(默认情况下是可以tweet出去的)。

11. Glide.js

Glide.js是一款响应式和对触摸友好的jQuery滑块。基于CSS3转换实现,并在低版本浏览器降级处理。Glide.js简单,重量轻,快速,适用于智能手机,平板电脑和台式机。它支持Swipe事件,箭头和子弹导航,键盘导航,公共API回调,自动播放和悬停暂停功能。

12. EasyDropDown

EasyDropDown是一个jQuery插件,你可以毫不费力地将简陋的Select元素设置为可定制风格的下拉菜单,用于表单或者一般的导航。和著名的下拉插件Chosen很像,但是具有自己的特点,例如:简洁、语义标记、兼容表单验证、完整的键盘控制、滚动支持、在触摸设备上降级为原生UI等等众多优点。另外,提供了Default、Metro、Flat三套不同风格的主题,相信能够满足你的需要。

6款移动网站开发的 jQuery 图片滑块插件

 随着智能手机的普及,越来越多的用户喜欢通过手机中浏览网页。今天这篇文章为大家推荐最佳6款用于移动应用的 jQuery 图片滑块插件,这些插件很好的处理了触屏事件,效果平滑,帮助你构建用户体验良好的移动网站。

PhotoSwipe

PhotoSwipe 是一款免费的 jQuery 图片库插件,支持 iPhone, iPad, Android, Blackberry 等各种移动设备。

Mobile Photo Album

Mobile Photo Album 是一款非常易用的相册插件,帮助你在移动网站中构建优秀的相册功能。

Unoslider

Responsive jQuery Slider Plugins

特别推荐 unoslider 这款幻灯片插件,基于响应式设计,拥有众多切换效果,支持触屏。

Touch Gallery

Touch Gallery 帮助你在移动浏览器中实现类似原生的照片浏览应用的效果。

swipejs

Swipe 是一款轻量的,用于移动网站开发的 jQuery 图片滑块插件,简单易用。

TN3 Gallery

压轴的这款 jQuery 相册插件是这里面功能最丰富的,支持幻灯片展示、不同的布局方式以及多样的切换效果。

20 款 jQuery 的音频和视频插件

Blueimp Gallery:

DEMO || DOWNLOAD

1. Blueimp Gallery

Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器。可定制视频和相片,支持触摸操作,支持全屏播放等。

YoutubeTV:

DEMO || DOWNLOAD

2. YoutubeTV

该插件可以让你直接在网页上播放来自 YouTube 的视频,支持播放列表

Osvaldas:

DEMO || DOWNLOAD

3. Osvaldas

提供水平和垂直显示的播放器

Shadowbox:

DEMO || DOWNLOAD

4. Shadowbox

Shadowbox is a great plugin and is a perfect web-based media viewer app and the best part is that it supports entire list of media publishing formats. This app can be customized way too easily.

Jplayer:

DEMO || DOWNLOAD

5. Jplayer

jPlayer是一个用于控制和播放mp3文件的jQuery插件。它在后台使用Flash来播放mp3文件,前台播放器外观完全可以使用 XHML/CSS自定义。

Video.js:

DEMO || DOWNLOAD

Video.js-HTML5-and-Flash-Video-Player

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器

ILightBox:

DEMO || DOWNLOAD

7. ILightBox

If you are looking to build exquisite responsive overlay windows, ILightBox is perfect for you. It offers you friendly API and a wide variety of beautiful skins. It supports all browsers and Android.

IView Slider:

DEMO || DOWNLOAD

iView-Slider-Responsive-Slider-jQuery-Plugin

This is basically an image slider designed with jQuery and also displays animated captions. The layout is obviously responsive and the best part is that you can add as many images and captions as you want. You can use it for presentations and banner ads.

Webdesign Tutsplus:

DEMO || DOWNLOAD

webdesign-tutsplus-Skin-Orman-Clark’s-Video-Interface-Using-jPlayer-and-CSS

This can be a great demo if you are looking to build a video player interface. Here, we will be following Orman clark’s premium pixel design and let me tell you, it will be a great fun.

Last.FM:

DEMO || DOWNLOAD

Last.FM-for-jQuery

This one is my personal favorite as it can help in tracking your few last played songs from Last.FM APIs. Soon they will be launching additional features which will help you in tracking your favorite and most listened songs.

MaxImage 2.0:

DEMO || DOWNLOAD

MaxImage-20-jQuery-Cycle-plugin-as-Fullscreen-Background-Slideshow

It allows you to view a slideshow on full screen and supports all sorts of transitions, which is great.

Mediaelement.js:

DEMO || DOWNLOAD

mediaelementjs-HTML5-audio-and-video-players

It does not offer latest browsers an HTML5; instead it allows users to upgrade with custom flash and Silverlight plugins. Once this plugin is installed, you’ll see the magic happen as it will support all browsers.

Youmax 1.0:

DEMO || DOWNLOAD

Youmax-jQuery-plugin-Show-complete-Youtube-channel-on-your-website

This can prove to be a lot beneficial because with this, you can have your own Youtube on your website because it works just like that. Other users can view your uploaded files and you can display your playlist and a lot more.

Bootstrap Video Player jQuery plugin:

DEMO || DOWNLOAD

Bootstrap-Video-Player-jQuery-Plugin

This is actually based on Bootstrap UI and is highly customizable. It enables you to auto play a song of your choice, shows progress bar, shows video timer and volume bar. There a lot of other features included as well.

JWeb Audio:

DEMO || DOWNLOAD

jWebAudio-jQuery-Web-Audio-library-for-games

Controlling your audio just gets easier, thanks to JwebAudio. It basically helps users in controlling the sounds of web games. Also, adding sound effects with the help of JWebAudio is very easy. You can even add 3D sound effects.

J-media element HTML5 Video player:

DEMO || DOWNLOAD

This a jQuery based plugin and this element is basically a multimedia framework. It allows you to embed multi-media content in a great way.

JW Player:

DEMO || DOWNLOAD

JW-Player-JavaScript–HTML5-&-Flash-Video-Player

JW FLV MEDIA PLAYER是一个开源的在网页上使用的Flash视频、音频以及图片播放器,支持 Sliverlight 播放,可以通过一个XML文件使播放器自动切换显示一组图片,并播放背景音乐。

jQuery Multimedia Portfolio:

DEMO || DOWNLOAD

jQuery-Multimedia-Portfolio

This is a simple one yet effective. This allows automatic detection of the media player being used and will apply the adapted player.

jQuery Multimedia Portfolio 2:

DEMO || DOWNLOAD

jQuery-Multimedia-Portfolio-2

This jQuery plugin is for unremarkable, manageable and malleable multi-media embedding.

via inspiretrends

PHP的JSON中文兼容处理类包含了测试实例PHP模板引擎,SQL简约封装,配置引入文件所有测试代码

具体看代码,不做一一解释,方便记录

config.php
[cce_php]
<?php
header(‘Content-Type:text/html;charset=gbk’);
require_once ‘class/db.class.php’;
require_once ‘class/html.class.php’;

$linksql = array(‘localhost’,’root’,’maoqiang’);
list($host,$user,$pass) = $linksql;
$db = new db($host,$user,$pass);

?>

db.class.php
[cce_php]
<?php
class db{

    function __construct($host,$user,$pass){
        $this->linkdb($host, $user, $pass);
    }

    function linkdb($host,$user,$pass){
        $linkdb = mysql_connect($host,$user,$pass) or die(‘db to link error:’.mysql_error());
        mysql_select_db(‘nzw’,$linkdb);
        mysql_query(‘SET NAMES GBK’);
    }

    function assoc(&$_Select){
        $_sql = $this->query($_Select);
        $_result = array();
        while (!!$row = mysql_fetch_assoc($_sql)){
            $_result[]=$row;
        }
        $this->resOut($_sql);
        return $_result;
    }

    function all(&$_Select){
        $_sql = $this->query($_Select);
        $_result = array();
        while (!!$row = mysql_fetch_assoc($_sql)){
            $_result[]=$row;
        }
        $this->resOut($_sql);
        foreach ($_result as $key=>$value){
            $show = $value;
        }
        return $show;
    }

    /**
     * @param unknown $result
     */
    function resOut($result){
        //echo is_object($result);
        if(is_resource($result)){
            $result = mysql_free_result($result);
            $result = mysql_close();
            $result = null;
        }
    }

    function query($sql){return mysql_query($sql);}

}

[/cce_php]

html.class.php
[cce_php]

<?php 
class html{ 

    public $vars ; 
    public $path; 

    function __construct($path){ 
        $this->vars = array(); 
        $this->path = $path; 
    } 

    function setHtml($name,$value){
        $this->vars[$name] = $value; 
    } 

    function getFile($file){
        extract($this->vars); 
        ob_start(); 
        include ($this->path.$file); 
        $contents = ob_get_contents(); 
        ob_end_clean(); 
        return $contents; 
    } 

}//edn html 
?>
[/cce_php]

index.php 包含JSON中文转义的类和递归
[cce_php]

<?php

    header('Content-Type:text/html;charset=gb2312');
    require 'class/config.php';

    $name = $_POST['name'];

    if(isset($name)){
        $name = strtolower($name);
        $sql="SELECT a.userid,a.sitedomain,a.brandlogo,a.brand,a.areaname,b.hits    FROM phpcms_member_company a,phpcms_yp_stats b WHERE a.userid=b.userid AND a.brandlogo!='' AND a.sitedomain LIKE '%$name%' ORDER BY b.userid DESC LIMIT 0,10";
        $row = $db->assoc($sql);
        foreach ($row as $key=>$value){
            $json[] =$value;
        }
        //echo JSON($json);
        echo ecJson::Json($json);
    }

class ecJson{

    /**************************************************************
     *
    *    使用特定function对数组中所有元素做处理 递归
    *    @param    string    &$array        要处理的字符串
    *    @param    string    $function    要执行的函数
    *    @return boolean    $apply_to_keys_also        是否也应用到key上
    *    @access public
    *
    *************************************************************/
    private function arrJson(&$array, $function, $apply_to_keys_also = false){
        static $recursive_counter = 0;
        if (++$recursive_counter > 1000) {
            die('possible deep recursion attack');
        }
        foreach ($array as $key => $value) {
            if (is_array($value)) {
                self::arrJson($array[$key], $function, $apply_to_keys_also);
            } else {
                $array[$key] = $function($value);
            }

            if ($apply_to_keys_also && is_string($key)) {
                $new_key = $function($key);
                if ($new_key != $key) {
                    $array[$new_key] = $array[$key];
                    unset($array[$key]);
                }
            }
        }
        $recursive_counter--;
    }

    /**************************************************************
     *
    *    将数组转换为JSON字符串(兼容中文)
    *    @param    array    $array        要转换的数组
    *    @return string        转换得到的json字符串
    *    @access public
    *
    *************************************************************/
    static public function Json($array) {
        self::arrJson($array, 'urlencode', true);//arrJson($array, 'urlencode', true);
        $json = json_encode($array);
        return urldecode($json);
    }

}//End class to ecjson 
?>
[/cce_php]

html or jquery

[cce_html]
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="http://127.0.0.20/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {
        //$('.flexslider').flexslider();
        $(".linkajax").click(function(){
            var value = $(this).text();
            var urlPost = "http://127.0.0.20/index.php";
            $.post(urlPost,{name:value},function(data){
                    //alert(data);
                $("#ajax").html(data);
            }),"json";    
        });
    });        
</script>

<style type="text/css">
    *{ margin:0; padding:0;}
    .name{ margin:60px 0 0 60px;}
    .name ul li{ float:left; margin:0 10px;}

</style>

</head>

<body>

    <div>
        <ul>
                    <li>A</li>
                    <li>B</li>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                    <li><a href="#">E</a></li>
                    <li><a href="#">F</a></li>
                    <li><a href="#">G</a></li>
                    <li><a href="#">H</a></li>
                    <li><a href="#">I</a></li>
                    <li><a href="#">J</a></li>
                    <li><a href="#">K</a></li>
                    <li><a href="#">L</a></li>
                    <li><a href="#">M</a></li>
                    <li><a href="#">N</a></li>
                    <li><a href="#">O</a></li>
                    <li><a href="#">P</a></li>
                    <li><a href="#">Q</a></li>
                    <li><a href="#">R</a></li>
                    <li><a href="#">S</a></li>
                    <li><a href="#">T</a></li>
                    <li><a href="#">U</a></li>
                    <li><a href="#">V</a></li>
                    <li><a href="#">W</a></li>
                    <li><a href="#">X</a></li>
                    <li><a href="#">Y</a></li>
                    <li><a href="#">Z</a></li>
                    <li><a href="#">其他</a></li>
        </ul>
</div>
    <br />
    <div id="ajax"></div>
</body>
</html>
[/cce_html]

					

PHP、Smarty与jQuery Ajax 分页插件jquery.pager.js的使用

1.首先建立一个PHP文件,用于查询数据:

(具体查询数据及显示可以根据需要修改,本例中使用了一个Dept表,有两个字段:DeptCodeDeptName,处理结果集的方式也可以根据自己使用的数据访问方式来修改。)

<?php
include_once(“./class.config.php”);
include_once(“./class.login.php”);
include_once(“include/BaseFunction.php”);

$PerPageCount=2;
//如果传递了pager参数
if(isset($_POST[‘pager’]) && isset($_POST[‘count’]))
{
echo GetDeptpager($_POST[‘count’],$_POST[‘pager’]);
}
else
{
$rs= $db->SelectSQL(“select count(*) as cc from dept”);
if($r=$db->Fetch($rs))
{
$reccount=$r[‘cc’];
}
$totalpagecount=ceil($reccount/$PerPageCount);
//显示第一页数据
$FirstContent=GetDeptPager($PerPageCount,1);
$Smarty->assign(“totalpagecount”,$totalpagecount);
$Smarty->assign(“PerPageCount”,$PerPageCount);
$Smarty->assign(“FirstContent”,$FirstContent);
$Smarty->display(“DeptPager.html”);
}
function GetDeptPager($count,$pager)
{
global $db;
global $PerPageCount;
$rs= $db->SelectSQL(“select * from dept limit “.($pager-1)*$PerPageCount.”,”.$PerPageCount);
while ($r=$db->Fetch($rs))
{
$temp[]=$r;
}
if(!isset($temp))
{
return “不会吧?没有查询到任何结果!”;
}
$s=”<table border=1>”;
$s.=”<tr><th>部门编码</th><th>部门名称</th></tr>”;
foreach($temp as $k=>$v)
{
$s.='<tr><td>’.$v[‘DeptCode’].'</td><td>’.$v[‘DeptName’].'</td></tr>’;
}
$s.=”</table>”;
$s=’每页记录数:‘.$count.’当前页码:‘.$pager.$s;
return $s;
}
?>

 

 

2.引入js:

<link href=”../CSS/Pager.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”../Library/jquery1.3.1/dist/jquery.js”></script>
<script type=”text/javascript” src=”../Library/jquery1.3.1/jquery.pager.js”></script>

其中,pager.css参考样式为: 

#pager ul.pages {
display:block;
border:none;
text-transform:uppercase;
font-size:10px;
margin:10px 0 50px;
padding:0;
}

#pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}

#pager ul.pages li:hover {
border:1px solid #003f7e;
}

#pager ul.pages li.pgEmpty {
border:1px solid #eee;
color:#03F;
}

#pager ul.pages li.pgCurrent {
border:1px solid #003f7e;
color:#000;
font-weight:700;
background-color:#FF9;
}

 

 

3.在页面中定义脚本

<script type=”text/javascript” language=”javascript”>

var TotalPageCount=2;
var PerPageCount=10;

$(document).ready(function(){
TotalPageCount=document.getElementById(‘totalpagecount’).value;
$(“#pager”).pager({ pagenumber: PerPageCount, pagecount: TotalPageCount, buttonClickCallback: PageClick });
});
function CreateQueryString(pageclickednumber)
{
var querystr=”pager=”+pageclickednumber+”&count=”+PerPageCount;
return querystr;
}

function TestClick(pageclickednumber)
{
$.ajax({
type:”POST”,
url:”../DeptPager.php”,
data:CreateQueryString(pageclickednumber),
success:function(data){
$(“#input”).html(data);
}
});

}
PageClick = function(pageclickednumber)
{
TestClick(pageclickednumber);
$(“#pager”).pager({ pagenumber: pageclickednumber,
pagecount: TotalPageCount, buttonClickCallback: PageClick });
}

</script>

 

4.页面中需要保留的区域:

<div id=”input”><{$FirstContent}></div>
<input type=”hidden” id=”totalpagecount” value=”<{$totalpagecount}>” />
<input type=”hidden” id=”perpagecount” value=”<{$perpagecount}>” />
<div id=”pager” ></div>

 

PHP数组不同格式导致ajax解析JSON结果不同的例子

PHP数组不同格式导致ajax解析JSON结果不同的例子:

// json_encode() JSON 输出规律: 从0开始的‘顺序’数字key结果前台解析为数组;从0开始不连续数字key或从非零开始的无论连续数字key或者字符key则前台解析为标准对象

$t = array(
1 => array(‘name’=>’bb’),
2 => array(‘name’=> ‘bc’)
);
echo json_encode($t); // 输出 {“1”:{“name”:”bb”},”2″:{“name”:”bc”}}

$t = array(
0 => array(‘name’=>’bb’),
2 => array(‘name’=> ‘bc’)
);
echo json_encode($t); // {“0”:{“name”:”bb”},”2″:{“name”:”bc”}}

$t = array(
0 => array(‘name’=>’bb’),
1 => array(‘name’=> ‘bc’)
);
echo json_encode($t); // [{“name”:”bb”},{“name”:”bc”}]

$t = array(
‘0’ => array(‘name’=>’bb’),
‘1’ => array(‘name’=> ‘bc’)
);
echo json_encode($t); // [{“name”:”bb”},{“name”:”bc”}]

$t = array(
‘A’ => array(‘name’=>’bb’),
‘b’ => array(‘name’=> ‘bc’)
);
echo json_encode($t); // {“A”:{“name”:”bb”},”b”:{“name”:”bc”}}

jQuery Ajax请求状态管理器

现在的网站,在一个网页中有异步请求甚至许多个异步请求已经不足为奇。Ajax已经成为了现在网站必须的基本功能,使网页应用更接近于桌面应用。

然而,无论有多么接近,通过客户端与服务端的一来一回,必定会有等待加载数据的时间。所以,大多数网站都通过一个Gif动态图标或 ‘Loading…’等字样来告知用户数据还在加载中。但有时候这个问题会非常繁琐和麻烦,要么将这个‘Loading’显示在ajax请求之前,然 后在ajax成功后隐藏它,或者将它写在jquery的ajax的全局事件jQuery.ajaxStart()jQuery.ajaxStop()中来控制整个页面的ajax状态。前者方法使用起来太琐碎,每个请求都要写一遍这个‘Loading’,而且无论请求成功或失败都需要隐藏它。后者是全局的,也就是整个页面的请求状态,有时候无法满足在局部显示加载状态的要求。

为了解决这些问题,我开发了jQuery的插件,名为:Ajax请求状态管理器。使用这个插件可以让loading不再那么麻烦了。你可以在触发ajax请求前,用该插件事先添加写好所有请求,你要做的只是在用户交互的事件中执行下.request()方法。你可以将一个页面上所有请求设置为独立显示loading,也可以设置为全局显示(只显示一个loading)。下面是插件的具体使用方法:

自定义loading的css样式:

.state-loading { background: #fff url(images/icon-ajax-loader.gif) ... }

引用jquery最新版本文件:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

注意:该插件只在jquery1.4.4及之后的版本中测试通过。

引用Ajax请求状态管理器插件文件:

<script src="js/jquery-ajaxloader.js"></script>

在jquery的ready事件中执行.install()方法:

$.loader.install( className, isGlobal );

参数说明:

className:string,表示你自定义的loading的class名称,比如上面css定义的state-loading。

isGlobal:boolean,定义是否是全局显示还是独立显示loading,默认值是true,该参数可以省略。

添加所需的ajax请求参数和成功后的回调方法:

$.loader( key ).add( modules, settings , callback );

参数说明:

key:string,通过这个key来创建或获取指定模块的加载器。当然,同一个key可以执行多次add()方法来添加不同的module,但是settings和callback是对于这个key是共享的,所以之后添加的settings和callback会覆盖之前的。

modules:jquery object,一个页面中同一个请求可以处理多个模块的数据,所以,如果之前install()方法是设置为false的,在执行ajax请求时,添加到这个loader的所有module都会显示loading状态。

settings:map,jquery的ajax settings参数,但不要设置ajax事件,这样会覆盖插件中的回调方法,默认请求类型为GET。

callback:function,成功后的回调函数,它有一个参数data,默认是json类型返回的对象。

add()方法返回一个由’module’前缀的字符串数组,比如你添加了3个元素,那结果为[‘module1’, ‘module2’, ‘module3’]。你可以通过返回的数组来删除指定的其中一个模块的loading,也可以不指定,也就是全部删除,当然如果你需要这样做的话。

remove()方法删除指定的模块:

$.loader( key ).remove( moduleId );

参数说明:

moduleId:string或者array,指定为string的话会删除其中一个module,指定为数组会批量删除模块,如果未指定参数,会将模块全部删除。

示例

添加2个模块到名为userinfo的加载器中:

var id1 = $.loader( 'userinfo' ).add( $( '#userinfo, #top-userinfo' ), { url: 'server/userinfo.php' }, function( data ) { updateContent( $( '#userinfo, #topsection, #footer-userinfo' ), data ); } );

再添加一个模块到userinfo的加载器中:

var id2 = $.loader( 'userinfo' ).add( $('#footer-userinfo') ); var idList = id1.concat( id2 ); // result: [ 'module1', 'module2', 'module3' ]

删除第2个模块的loading,也就是‘#top-userinfo’:

var ret = $.loader( 'userinfo' ).remove( idList[1] ); // result: true, modules: [ 'module1', 'module3' ]

在交互事件中执行.request()方法:

$.loader( key ).request();

当然,你也可以抛弃之前add的ajax settings和callback,在交互事件中自己写$.ajax或$.get等。然后在请求前调用$.loader( key ).show(),在回调函数内调用$.loader( key ).hide()。这样也可以灵活控制loading的状态。

示例
$( '#getUserInfo' ).bind( 'click', function() { $.loader( 'userinfo' ).request(); });

你也可以从新重新写请求:

$( '#getUserInfo' ).bind( 'click', function() { $.loader( 'userinfo' ).show(); $.get( 'server/userinfo.php', function( data ) { $.loader( 'userinfo' ).hide(); updateContent( $( '#userinfo, #topsection, #footer-userinfo' ), data ); }) });

注意:一个请求反复触发时,管理器会执行abor()来阻止之前未完成的请求,重新发布新的请求,然而如果你在页面中通过jquery的ajaxError事件输出错误信息,会把该信息一并认为是错误的,所以如果有必要的话,需要你自行过滤。

示例
// 输出错误日志 $( 'body' ).bind( 'ajaxError', function( event, xhr, setting, thrownError ) { // 过滤掉 abort 的错误信息 if ( xhr.status === 0 || xhr.readyState === 0 || xhr.statusText === 'abort' ) { return; } $( '#log' ).append( '<p>' + thrownError + '</p>' ); });

该插件简单易用,代码逻辑也不是很复杂,但本人能力和技术水平有限,如遇到使用问题或任何bug请通过邮件方式告诉我:nicolas-zhao@hotmail.com。谢谢捧场!

打包下载:Ajax请求状态管理器

 

来自:http://www.cnblogs.com/nicolaszhao/archive/2012/04/25/2470080.html

2013年优秀jQuery插件连载(一期)

2013年优秀jQuery插件连载(一期)
在 2012年,W3cplus每个月都为大家整理和推荐了一些优秀的jQuery插件。这些插件涉及到各方面的Web应用,资深的Javascript工程 师可能不消这些插件,但对于Javascript不是很熟悉的同学,这些插件对我们平时的工作还是有很大的帮助。那么在2013年我们依旧会搜集和整理一 些优秀的jQuery插件,希望这些插件能帮助大家解决工作中所遇到的效果。

今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件、图片放大插件、表单元素中自定义select 插件,google 地图插件、文件拖放上传插件、tooltip提示插件、3D旋转菜单等等。这些插件的官网都提供了详细的API和相关代码下载,也提供了一些案例展示,可 以说稍懂一点前端的同学按照他们提供的API就会使用这些插件。

1、Makisu : jQuery CSS 3D Dropdown Menu concept

Makisu : jQuery CSS 3D Dropdown Menu concept

Makisu是一个jQuery和css3制作3D下拉菜单的插件,目前仅在chrome下能正常运行。

2、jQuery.Shapeshift

jQuery.Shapeshift

一款轻量级的网格系统插件,可以制作濗布流效果,同时具有拖动、Responsive和touch功能。

3、Rainbow

Rainbow

Rainbow是一个让你代码高亮显示的插件。

4、gmaps

gmaps

gmaps用来制作google地图的一个插件。

5、jQuery jkit

jQuery jkit

jQuery jkit是一个依赖于jQuery库的插件,里面包含了Web常用交互效果。

6、dropzone.js

dropzone.js

dropzone.js是一个js脚笨库,实用文件的拖拽上传文件,而且还可以预览上传后的文件。

7、Image Picker

Image Picker

Image Picker是一个简单的jQuery插件,它将一个选择元素变成一个更加友好的用户图形界面。

8、Elevate Zoom

Elevate Zoom

Elevate Zoom是一款图片放大的jQuery插件。

9、Opentip

Opentip

Opentip是一款强大的tooltip插件,支持所有现代浏览器以及IE7+浏览器。

10、Selectik

Selectik

Selectik是一款自定义表单的select样式的jQuery插件。

如需转载,烦请注明出处:http://www.w3cplus.com/source/best-jquery-plus-2013-part1.html

在线浏览PDF文件的实用jquery插件推荐

在web开发当中我们经常需要进行需要在线浏览PDf内容,在线嵌入动态pdf,传统的解决方法安装客户端PDF阅读器,如果是在谷歌是可以在线浏览的,因为他自身就带了一些插件,以前遇到这样的问题往往是费时又费力,很不好解决,

今天就给大家分享一系列使用javascript实现的pdf插件效果,无需借助第三方插件就可以实现在线浏览功能,非常实用,

PDFObject

PDFobject可以帮助你在页面直接嵌入pdf文件,有时候有些项目需要动态地嵌入PDF文件。PDFObject为此而设计的,他能够快速和容易的嵌入PDF文件,PDFObject使用JavaScript来产生相同的符合标准的<OBJECT>标记,然后插入<OBJECT>到您的HTML元素的选择。您可以填满整个浏览器窗口,或将PDF格式转换成一个<DIV>或其他块级元素。

pdf.js

和 Google Chrome 使用的源自 Foxit 的闭源 PDF 浏览插件不同,PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品

pdf.js 是一个主要用于HTML5 平台上在线阅读PDF文档的小插件,基于JavaScript技术编写而成,无需任何本地技术支持。

pdf.js是由Mozilla Labs发布的。他们的目标是创建一个通用的,基于标准的网络平台,能够解析和渲染PDF文件,并最终发布一个PDF阅读器扩展,毫无疑问 pdf.js 将被整合入 Gecko 成为 Firefox 的内嵌 PDF 阅读器,但是具体整合时间表尚未确定

jsPDF

jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件,服务端脚本或是浏览器脚本中使用它。客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持。。

jQuery Media Plugin

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根据当前的脚本配置,自动将a标签替换成div,并生成object, embed甚至是iframe代码,至于生成object还是embed,jQuery Media会根据当前平台自动判别,因此兼容性方面非常出色下面这段代码是jQuery Media生成后的结果:

 

<div>

<object width=”450″ height=”250″ attr1=”attrValue1″ attr2=”attrValue2″

codebase=”http://www.apple.com/qtactivex/qtplugin.cab”

classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B”>

<param name=”src”      value=”myBetterMovie.mov”>

<param name=”autoplay” value=”true”>

<param name=”param1″   value=”paramValue1″>

<param name=”param2″   value=”paramValue2″>

<embed width=”450″ height=”250″ src=”myBetterMovie.mov” autoplay=”true”

attr1=”attrValue1″ attr2=”attrValue2″ param1=”paramValue1″ param2=”paramValue2″

pluginspage=”http://www.apple.com/quicktime/download/” > </embed>

</object>

</div>

 

具体使用方法

html标记代码

 

<a href=”sample.mov”>My Quicktime Movie</a>

<a href=”sample.swf”>My Flash Movie</a>

<a href=”sample.wma”>My Audio File</a>

初始化脚本:

1

$(‘.media’).media();

 

Google Docs PDF viewer

ZOHO Viewer

Anychart:使用JavaScript导出PDF

下图可以导出为PNG或JPG格式的静态图像或嵌入式静态图像,图表或一个完全互动的功能图

jQuery Document Viewer

Document Viewer是一个jQuery插件,可以让你在网页中直接查看多种文件格式。文档浏览器支持的文件格式:PDF文件,文本文件,代码,图像,音频,视频等。