定时弹出新窗口

Select Code
1
2
3
4
5
6
7
<script type="text/jscript" language="javascript">  
function pp()
{
window.open("http://www.baidu.com","new","height=280,width=800,top=10,left=20,resizable=no, location=no",false);  
}
setInterval("pp()",5000);
</script>

jQuery实现网页定位滚动导航条

实际效果

实现原理

主要知识点
滚动事件:scroll

当用户滚动指定的元素时,会发生 scroll 事件。

jQuery 代码:

Select Code
1
$(window).scroll( function() { /* ...do something... */ } );

find()

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

位置

  • scrollTop:获取匹配元素相对滚动条顶部的偏移。
  • offset:获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。

attr()

设置或返回被选元素的属性值。

css类

  • addClass:为每个匹配的元素添加指定的类名。
  • removeClass:从所有匹配的元素中删除全部或者指定的类。

HTML结构

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div id="menu">
<ul>
 	<li><a class="current" href="#item1">1F 男装</a></li>
 	<li><a href="#item2">2F 女装</a></li>
 	<li><a href="#item3">3F 美妆</a></li>
 	<li><a href="#item4">4F 数码</a></li>
 	<li><a href="#item5">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>美丽说</h1>
<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<ul>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妆</h2>
<ul>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 数码</h2>
<ul>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母婴</h2>
<ul>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
</ul>
</div>
</div>

JS部分

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
    $(document).ready(function () {
        $(window).scroll(function () {
            var items = $("#content").find(".item");
            var menu = $("#menu");
            var top = $(document).scrollTop();
            var currentId = "";
            items.each(function () {
                var m = $(this);
                if (top > m.offset().top  - 100) {
                    currentId = "#" + m.attr("id");
                } else {
                    return false;
                }
            });

            var currentLink = menu.find(".current");
            if (currentId && currentLink.attr("href") != currentId) {
                currentLink.removeClass("current");
                menu.find("[href=" + currentId + "]").addClass("current");
            }
        });
    })
</script>

实用列表页, 弹出框, 图片上传JS整理

知识点
submit([[data],fn])
概述: 当提交表单时,会发生 submit 事件。该事件只适用于表单元素。
http://jquery.cuishifeng.cn/submit.html

each(callback)
概述: 以每一个匹配的元素作为上下文来执行一个函数。意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。
http://jquery.cuishifeng.cn/each.html

serializeArray()
概述: 序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。”’注意”’,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
http://jquery.cuishifeng.cn/serializeArray.html

1. 全选/反选(Jquery实现)

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*HTML结构*/
<input type="checkbox" id="check_all">

<table class="table">
...
</table>

/*全选按钮*/
    $("#check_all").click(function () {
        if(this.checked) {
            $('.table :checkbox').prop("checked", true);
        } else {
            $('.table :checkbox').prop("checked", false);
        }
    })

2. 列表页提交:弹窗表单框,点击提交后自动关闭

第1步:添加按钮

Select Code
1
<a href="javascript:void(0)" class="btn btn-primary" onclick="add_edit_article(0)">添加文章</a>

第2步:添加按钮点击事件

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*添加文章*/
function add_edit_article(id) {
    if (id>0) {
        // 修改
    } else {
        var url = "{:U('Ucenter/Seo/add_article', array('call_back'=>'call_back_fun'))}";
        layer.open({
            type: 2,
            title: '发布文章',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '80%'],
            content: url,
        });
    }
}

/*回调函数,关闭窗口*/
function call_back_fun(v) {
    layer.closeAll();
    location.href = "弹出页面的URL";
}

第3步:弹出的页面

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public function add_article()
{
    header("Content-Type:text/html; charset=utf-8");
    if ($this->isPost()) {
        $postData = $this->_post();

        // TODO:数据校验

        // 写入数据库操作

        $call_back = $this->_get("call_back","","call_back_fun");
        echo "<script>parent.{$call_back}('success');</script>";
        exit();
    }

    $this->display();
}

3. 图片插件的使用

演示效果:

插件官网:http://www.uploadify.com/

第1步:HTML表单制作

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<form action="{:U('Ucenter/Seo/add_video')}" method="post" id="videoForm">
<div class="form-group">
    <label for="v_name">视频名称:</label>
    <input type="text" class="form-control" id="v_name" placeholder="视频名称" name="v_name"/>
</div>
<div class="form-group">
    <label for="cate_id">选择视频分类:</label>
    <select name="cat_id" id="cate_id" class="form-control" style="width: 300px;">
        <option value="0">请选择视频分类</option>
        <volist name="videos_category" id="vo">
            <option value="{$vo.vc_id}">{$vo.vc_name}</option>
        </volist>
    </select>
</div>
<div class="form-group">
    <label for="type">选择课程类型:</label>
    <select name="v_lesson_id" id="type" class="form-control" style="width: 300px;">
        <option value="0">请选择课程类型</option>
        <volist name="videos_lesson" id="vo" key="k">
            <option value="{$vo.l_id}">{$vo.l_name}</option>
        </volist>
    </select>
</div>
<div class="form-group">
    <label for="v_teacher">选择博主:</label>
    <select name="v_teacher_id" id="v_teacher" class="form-control" style="width: 300px;">
        <option value="0">请选择博主</option>
        <volist name="videos_teacher" id="vo" key="k">
            <option value="{$vo.t_id}">{$vo.t_name}</option>
        </volist>
    </select>
</div>
<div class="form-group">
    <label for="v_code">播放码:</label>
    <input type="text" class="form-control" id="v_code" placeholder="填写视频播放码" name="v_code"/>
</div>
<div class="form-group">
    <label for="keywords">关键字:</label>
    <input type="text" class="form-control" id="keywords" placeholder="关键字" name="keywords"/>
</div>
<div class="form-group">
    <label for="file_upload">封面图片:</label>
    <input type="file" id="file_upload" multiple="true"/>
    <img src="" style="display: none" id="upload_image" width="200"/>
    <input type="hidden" name="image" id="upload_image_input" multiple="true" value=""/>
</div>
<div class="form-group">
    <label for="description">短描述:</label>
    <textarea name="description" id="description" class="form-control" name="keywords" cols="30"
              rows="3"></textarea>
</div>
<button type="button" class="btn btn-default" onclick="checkForm()">提交</button>
<input type="reset" class="btn btn-default" value="重置">
<div></div>
</form>

第2步:引入JS,CSS文件

Select Code
1
2
3
<script src="__PUBLIC__/uploadify/jquery.min.js" type="text/javascript"></script>
<link href="__PUBLIC__/uploadify/uploadify.css" rel="stylesheet">
<script src="__PUBLIC__/uploadify/jquery.uploadify.js" type="text/javascript"></script>

第3步:编写JS

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<script type="text/javascript">
    // 检查表单内容
    function checkForm() {
        var v_name = $("input[name='v_name']").val();
        var v_code = $.trim($("input[name='v_code']").val());
        var keywords = $("input[name='keywords']").val();
        var image = $("input[name='image']").val();
        var cat_id = $("select[name='cat_id']").val();
        var v_lesson_id = $("select[name='v_lesson_id']").val();
        var v_teacher_id = $("select[name='v_teacher_id']").val();
        var description = $.trim($("textarea[name='description']").val());
        var error = "";

        if (v_name == "") {
            error += "视频名称不能为空<br />";
        }
        if (v_code == "") {
            error += "播放码不能为空<br />";
        }
        if (v_code.length != 32) {
            error += "播放码长度必须为32<br />";
        }
        if (keywords == "") {
            error += "关键字不能为空<br />";
        }
        if (image == "") {
            error += "必须上传封面图片<br />";
        }
        if (cat_id == "" || cat_id == "0") {
            error += "请选择视频类别<br />";
        }
        if (v_lesson_id == "" || v_lesson_id == "0") {
            error += "请选择课程类别<br />";
        }
        if (v_teacher_id == "" || v_teacher_id == "0") {
            error += "请选择博主<br />";
        }
        if (description == "") {
            error += "描述内容不能为空<br />";
        }
        if (description.length > 250) {
            error += "描述内容最多250字<br />";
        }

        if (error) {
            layer.alert(error);
            return false;
        }
        return $("#videoForm").submit();
    }

    var SWF = '__PUBLIC__/uploadify/uploadify.swf';
    var UPLOAD_IMG = '{:U("Home/Image/upload")}';

    $(function () {
        $("#file_upload").uploadify({
            height: 40,
            swf: SWF,
            uploader: UPLOAD_IMG,
            width: 120,
            buttonText: '图片上传',
            fileObjName: 'file',
            fileTypeExts: '*.gif;*.jpg;*.png',
            onUploadSuccess: function (file, data, response) {
                if (response) {
                    var obj = JSON.parse(data);
                    if (obj.status == 0) {
                        alert(obj.info);
                        return false;
                    }
                    $("#upload_image").attr("src", obj.img_url);
                    $("#upload_image").show();
                    $("#upload_image_input").attr("value", obj.img_url);

                }
            }
        });
    });

</script>

第4步:表单提交

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
public function add_video()
{
    header("Content-Type:text/html; charset=utf-8");

    $videos_category = M("VideosCategory")->field('vc_id,vc_name')->select();
    $videos_teacher = M("VideosTeacher")->field('t_id,t_name')->select();
    $videos_lesson = M("VideosLesson")->field('l_id,l_name')->select();
    $this->assign('videos_category', $videos_category);
    $this->assign('videos_teacher', $videos_teacher);
    $this->assign('videos_lesson', $videos_lesson);

    if ($this->isPost()) {
        $postData = $this->_post();
        // TODO:数据校验

    $data = array(
            'v_name' => $postData['v_name'],
            'v_lesson_id' => $postData['v_lesson_id'],
            'v_teacher_id' => $postData['v_teacher_id'],
            'v_code' => $postData['v_code'],
            'v_picture' => $postData['image'],
            'v_keywords' => $postData['keywords'],
            'v_description' => $postData['description'],
            'zan_num' => 0,
            'create_time' => date('Y-m-d H:i:s')
        );

    $model = M('');
        $model->startTrans();
        $video_id = D("VideosInfo")->add($data);
        if (!$video_id) {
            $model->rollback();
        }

        $data_body = array(
            'video_id' => $video_id,
            'cat_id' => $postData['cat_id'],
        );

        $result = D("VideosCategoryInfo")->add($data_body);
        if ($result) {
            $model->commit();
        } else {
            $model->rollback();
        }

        $call_back = $this->_get("call_back","","call_back_fun");
        echo "<script>parent.{$call_back}('success');</script>";
        exit();
    }

    $this->display();
}

第5步:图片上传图片方法

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public function upload()
{
    import('ORG.Net.UploadFile');
    $upload = new UploadFile();
    $upload->maxSize = 3145728;
    $upload->allowExts = array('jpg','png','gif', 'jpeg');
    $upload->savePath = './Public/Uploads/video/';
    if (!$upload->upload()) {
        $data = array(
            'status' => 0,
            'info' => $upload->getErrorMsg(),
        );
    } else {
        $info = $upload->getUploadFileInfo();
        $data = array(
            'status' => 1,
            'info' => 'ok',
            'img_url' => ltrim($info[0]['savepath'] . $info[0]['savename'], '.'),
        );
    }
    $this->ajaxReturn($data, 'JSON');
}

KindEditor异步图片上传实现

1、引入KindeEditor编辑器,这里可以参考官方文档

2、上传文件的php

Select Code
1
2
3
4
5
6
7
8
<script>
  KindEditor.ready(function(K) {
    window.editor = K.create('#editor_singcms',{
      uploadJson : '{:U("Image/kindupload")}',
      afterBlur : function(){this.sync();}, //
    });
  });
</script>

2、返回格式(JSON)

Select Code
1
2
3
4
5
6
7
8
9
10
//成功时
{
 "error" : 0,
 "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
 "error" : 1,
 "message" : "错误信息"
}

封装一个函数:

Select Code
1
2
3
4
5
6
7
8
9
10
function showKind($status, $data)
{
	header('Content-type:application/json;charset=UTF-8');
	if ($status==0) {
		// 成功时
		exit(json_encode(array('error'=>0, 'url'=>$data)));
	}
	// 失败时
	exit(json_encode(array('error'=>1, '上传失败')));
}

文档:http://kindeditor.net/docs/upload.html

3、上传图片部分,见上一篇文章:
异步上传图片

kindeditor图片异步上传效果

Uploadify异步上传图片效果

1、上传插件Uploadify出现Http Error 302错误

http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误。

2、Uploadify异步上传图片(TP框架下的源码)

效果:
uploadify

控制器源码:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
class ImageController extends Controller
{
	public function ajaxuploadimage()
	{
		$res = D("UploadImage")->imageUpload();

		if ($res===false) {
			return show(0, '上传失败', '');
		} else{
			return show(1, '上传成功', $res);
		}
	}
}

image.js部分

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
 * 图片上传功能
 */
$(function() {
    $('#file_upload').uploadify({
        'swf'      : SCOPE.ajax_upload_swf,
        'uploader' : SCOPE.ajax_upload_image_url,
        'buttonText': '上传图片',
        'fileTypeDesc': 'Image Files',
        'fileObjName' : 'file',
        //允许上传的文件后缀
        'fileTypeExts': '*.gif; *.jpg; *.png',
        'onUploadSuccess' : function(file,data,response) {
            // response true ,false
            if(response) {
                var obj = JSON.parse(data); //由JSON字符串转换为JSON对象
                
                $('#' + file.id).find('.data').html(' 上传完毕');

                $("#upload_org_code_img").attr("src",obj.data);
                $("#file_upload_image").attr('value',obj.data);
                $("#upload_org_code_img").show();
            }else{
                alert('上传失败');
            }
        },
    });
});

上传图片Model类:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
 * 上传图片类
 * @author  singwa
 */
class UploadImageModel extends Model {
    private $_uploadObj = '';
    private $_uploadImageData = '';

    const UPLOAD = 'upload';

    public function __construct() {
        $this->_uploadObj = new \Think\Upload();

        $this->_uploadObj->rootPath = './'.self::UPLOAD.'/';
        $this->_uploadObj->subName = date(Y) . '/' . date(m) .'/' . date(d);
    }

    public function imageUpload() {
        $res = $this->_uploadObj->upload();
        // print_r($res);die;

        if($res) {
            return '/02/' .self::UPLOAD . '/' . $res['file']['savepath'] . $res['file']['savename'];
        }else{
            return false;
        }
    }
}

城市选择器3级联动源码分享及使用方法

1、HTML中调用JS显示3级联动的下拉选项。
https://github.com/webjust/case-study
3_level_city

Select Code
1
2
3
省:<select id="province"></select>
市:<select id="city"></select>
区:<select id="area"></select>

2、JSON格式的城市数据,转换成普通变量array格式,批量导入到数据库。
2016-08-22_211617

city_array

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// $data是存储的JSON格式,转换成数组时,第2个参数必须填写,默认转换成数组对象。
$arr = json_decode($data, true);

$arr2 = array();
// 转换索引
foreach ($arr as $key => $value) {
	$arr2[$key]['data_id'] = $value['id'];
	$arr2[$key]['code'] = $value['code'];
	$arr2[$key]['name'] = $value['name'];
	$arr2[$key]['pid'] = $value['pid'];
}

// 实例化模型对象,批量导入数据到MySQl
D("City")->addAll($arr2);

3、存储到数据库中的地址是value值。(如图所示)
shop_city2

shop_city
4、写函数将地址转换成中文格式。

在送货地址表shop_address中,address_id和customer_id关联,查找当前默认地址。
ER_Cart

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 根据address_id查找详细的地址
public function findDefaultAddress($address_id)
{
	try{
		$ret = M('address')->where('address_id='.$address_id)->find();
		$address = $this->findCity($ret['province'], $ret['city'], $ret['area']).$ret['address'];
		return $address;
	}catch(Exception $e){
		return $e->getMessage();
	}
}

// 根据value值查找城市
private function findCity($value1, $value2, $value3)
{
	if ($value1 == 0 || $value2 == 0 || $value3 == 0) {
		return '****城市信息缺失****';
	}
	try{
		$address = M("city");
		return $address->where("data_id=".$value1)->getField('name').$address->where("data_id=".$value2)->getField('name').$address->where("data_id=".$value3)->getField('name');
	} catch(Exception $e)
	{
		return $e->getMessage();
	}
	
}