潮人街

Ueditor百度编辑器中的 setContent()方法的使用

Thu, 31 Oct 2024 20:38:13 +0800

百度编辑器Ueditor所提供的setContent()方法作用是：设置或者改变编辑器里面的文字内容或html内容

函数说明：setContent(string,boolean);

参数string 是需要设置到编辑器里面的内容，可以含有HTML代码，最后插入到编辑器中的内容是经过编辑器内置过滤器过滤后的内容，同时该函数会出发selectionchange 事件。

参数:boolean,(true/false) true表示清空编辑器俩面的内容，在内容后面添加内容，默认是true；false表示清空当前编辑器的内容后，在插入内容。

注意：不能单独使用setContent(string,boolean);

必须是在创建好编辑器后才能使用，那么如何知道编辑器创建好并且准备好了呢？使用一下方法就可实现在编辑器中插入内容了：

$(function(){
    var content =$('#daily_content').val();
    //判断ueditor 编辑器是否创建成功
    ue.addListener("ready", function () {
        // editor准备好之后才可以使用
        ue.setContent(content);
 
    });
});

flex布局设置单个子元素靠右

Thu, 31 Oct 2024 20:37:44 +0800

父元素设置了flex 布局

display: flex;
align-items: center;

如何让某个子元素靠右呢?

方法一

flex: 1;
text-align: right;

方法二

margin-left: auto;

小结：

· 父盒子加了display: flex，就相当于起到浮动的效果，盒子会自行排列成一排；

· 若想让父盒子里的某一个盒子靠右显示，其他盒子居左，只需要在父盒子里面，加入display: flex，在想要移动的盒子里面，加入margin-left: auto即可；

· 同理，如果你想让第一个盒子向左显示，其余盒子都向右显示，只需要给左边的第一个盒子设置 margin-right:auto即可；

实现checkbox 翻页后，仍保持选中状态

Thu, 31 Oct 2024 20:36:25 +0800

使用的技术

localStorage.setItem(key,val);

localStorage.getItem(key);

<input type="checkbox" value="1" name="ids" onclick="save_storage(this)"/>小明
<input type="checkbox" value="2" name="ids" onclick="save_storage(this)"/>小李
<input type="checkbox" value="3" name="ids" onclick="save_storage(this)"/>小王

选中时存value，不选时移除value的js方法

//存或减选中的值
        function save_storage(obj) {
            var val=$(obj).val();
            var select_ids=localStorage.getItem('select_ids');
            if($(obj).prop("checked")){
                //选中时，加上里面的值
                if(select_ids!=null){
                    if(select_ids.indexOf(val)==-1){
                        localStorage.setItem('select_ids',select_ids+','+val);
                    }
                }else{
                    localStorage.setItem('select_ids',val);
                }
            }else{
                //不选中是去掉里面的值
                if(select_ids.indexOf(val)!=-1){
                    var temp=select_ids.replace(','+val,'');
                    localStorage.setItem('select_ids',temp);
                }
            }
        }

每一次翻页（刷新）时，选中checkbox的js方法

//设置选中
function set_select() {
            var select_ids=localStorage.getItem('select_ids');
            $("input[name='ids']").each(function (i,o) {
                var val=$(o).val();
                if(select_ids.indexOf(val)!=-1){
                    $(o).prop("checked",true);
                }
            });
}

使用ready方法设置每次翻页时（刷新），都执行该方法

$(document).ready(function () {
set_select();
});

滚屏加载–无刷新动态加载数据技术的应用

Thu, 31 Oct 2024 20:34:45 +0800

滚屏加载技术，就是使用Javascript监视滚动条的位置，每次当滚动条到达浏览器窗口底部时，触发一个Ajax请求后台PHP程序，返回相应的数据，并将返回的数据追加到页面底部，从而实现了动态加载，其实就是一个典型的Ajax应用。本文将使用jQuery，结合 PHP，mysql以及JSON，为您讲解如何应用滚屏加载技术到您的项目中去。当然，阅读本文的前提是您需要有jQuery和PHP相关基础。

index.php

我们默认要显示15条数据，因此，我们先从数据库取开始的15条数据显示在页面。后面新加载的数据，我们也按每次15条的方式展示。

为了讲解尽量简单，我使用原生的PHP和mysql查询语句。首先，需要连接数据库，包含连接信息的connnect.php。这里我定义了几个用户id。

然后查询数据表，获得结果集，并循环输出，代码如下：

<?php 
require_once('connect.php'); 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
?> 
<div id="container"> 
    <?php 
    $query=mysql_query("select * from say order by id desc limit 0,15"); 
    while ($row=mysql_fetch_array($query)) { 
    ?> 
    <div class="single_item"> 
        <div class="element_head"> 
              <div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div> 
              <div class="author"><?php echo $user[$row['userid']];?></div> 
         </div> 
         <div class="content"><?php echo $row['content'];?></div> 
    </div> 
    <?php } ?> 
 </div>  
<div class="nodata"></div>

jQuery

1、首先，我们要获取浏览器可视区域页面的高度：

var winH = $(window).height();

2、然后，当滚动页面的时候需要做的事情是：计算页面总高度（当滚动底部时，页面新加载数据，所以页面总高度是动态变化的），计算滚动条位置（滚动条位置也是随着加载页面的高度动态变化的），然后构造一个公式，计算相对比例。

$(window).scroll(function () { 
    var pageH = $(document.body).height(); //页面总高度 
    var scrollT = $(window).scrollTop(); //滚动条top 
    var aa = (pageH-winH-scrollT)/winH; 
});

3、当滚动条接近页底时，触发ajax加载，在本例中我们使用jQuery的getJSON方法，向服务端result.php发送请求，请求的参数为page，即页数。

if(aa<0.02){ 
    $.getJSON("result.php",{page:i},function(json){ 
        ..... 
    }); 
}

4、如果请求响应成功返回JSON数据，则解析JSON数据，并将数据追加到页面DIV#container后，如果没有JSON数据返回，则说明数据全部显示完毕。

if(json){ 
    var str = ""; 
    $.each(json,function(index,array){ //遍历 
        var str = "..."; //获取的JSON数据 
        $("#container").append(str); //追加 
    }); 
    i++;  //页数+1 
}else{ 
    $(".nodata").show().html("别滚动了，已经到底了。。。"); 
    return false; 
}

完整的jQuery代码如下：

$(function(){ 
    var winH = $(window).height(); //页面可视区域高度 
    var i = 1; //设置当前页数 
    $(window).scroll(function () { 
        var pageH = $(document.body).height(); 
        var scrollT = $(window).scrollTop(); //滚动条top 
        var aa = (pageH-winH-scrollT)/winH; 
        if(aa<0.02){ 
            $.getJSON("result.php",{page:i},function(json){ 
                if(json){ 
                    var str = ""; 
                    $.each(json,function(index,array){ 
                        var str = "<div class="single_item"><div class="element_head">"; 
                        var str += "<div class="date">"+array['date']+"</div>"; 
                        var str += "<div class="author">"+array['author']+"</div>"; 
                        var str += "</div><div class="content">"+array['content']+"</div></div>"; 
                        $("#container").append(str); 
                    }); 
                    i++; 
                }else{ 
                    $(".nodata").show().html("别滚动了，已经到底了。。。"); 
                    return false; 
                } 
            }); 
        } 
    }); 
});

result.php

当滚动到页面底部时，前端Ajax请求到result.php，该后台程序将根据请求的数据页数：page，查询数据表中对应的记录，并将记录集以json的格式输出返回给前端处理。

require_once('connect.php'); //连接数据库 
 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
$page = intval($_GET['page']);  //获取请求的页数 
$start = $page*15; 
$query=mysql_query("select * from say order by id desc limit $start,15"); 
while ($row=mysql_fetch_array($query)) { 
    $arr[] = array( 
        'content'=>$row['content'], 
        'author'=>$user[$row['userid']], 
        'date'=>date('m-d H:i',$row['addtime']) 
    ); 
} 
echo json_encode($arr);  //转换为json数据输出

PHP实现将textarea的值根据回车换行拆分至数组

Thu, 31 Oct 2024 20:33:57 +0800

textarea回车换行为 \r\n

$keyword_list = trim($_REQUEST['keywords']);
$keyword_arr = explode("\r\n", $keyword_list);

这个地方需要注意是要去除textarea 前后的空格，否则会多出一个

或者使用explode也是可以的

只是\r\n只能用双引号，不能用单引号

滚轮滚动时让div背景图片移动的相对缓慢

Thu, 31 Oct 2024 20:33:12 +0800

鼠标滚轮滚动时，这一个div的移动速度相对较慢，下面其他div内容能够追上并超越它。

css代码：

.banner { width: 100%; position: fixed; top:0;}

js代码：

//banner 缓升

var BannerBox = $(".banner");
BannerHeight();
$(window).scroll(function(){
    BannerHeight();
})
function BannerHeight(){
    BannerBox.css({
        "top" : -$(window).scrollTop()/5+"px"
    })
}

纯CSS解决锚点跳转偏移

Thu, 31 Oct 2024 20:32:40 +0800

能用css自然不想用js解决，因为在加载方面，css总是先加载，并且速度很快。

.div{
   position:relative;
   padding-top:50px;
   margin-top: -50px;
}

完美兼容chrome和Firefox，其他浏览器未测试。

css来控制img正方形自适应

Thu, 31 Oct 2024 20:31:51 +0800

该方法主要用来做网站自适应的，同时可以实现撑起内容高度。

实现方法很多，其中简洁的方法就是直接在img的父元素上加padding-bottom

<div class="img-box">
	<img src="123.jpg"/>
</div>

.img-box{
	padding-bottom:100%;
}
.img-box img{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	margin:auto;
}

.img-box img里的宽度100%，高度100%就可以填满整个正方形框，如果都不填则自动水平居中和垂直居中div框内

jq动画重复执行的解决方法

Thu, 31 Oct 2024 20:31:13 +0800

1. 在你的点击事件中加上一个判断，假设产生动画效果目标的是div这个节点，那么你要加上这个判断它会确保你的动画只会在上一个动画结束后才能产生，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉。

if(!$("div").is(":animated")){
//执行你的操作
}

2. stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。

第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；

第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候

个人比较喜欢使用stop(true,false);

$("div").stop(true,false).animate({...},1000);

a标签的为空链接和返回上一页的设置方法

Thu, 31 Oct 2024 20:30:17 +0800

a标签中的href值是一个地址，指示点击这个标签时，转向的地址。但是当使用a标签来做按钮，不需要跳转时，href值即为空。

我们需要使用以下两种方式：

1：<a href="javascript:;">链接</a>表示当点击这个a标签时，执行javascript后面的语句，但是为空，就说明没有任何改变；

2：<a href="javascript:void(0);">链接</a>表示点击时执行void(0)这句话，返回值为undefined，也是没有任何改变。

在制作网页的时候，经常在网页上要用到“返回上一页”的功能。

这是我将比较常用方法：

<a href="javascript:history.back(-1)">返回上一页</a>或：<a href="#" onClick="javascript:history.back(-1);">返回上一页</a>