phpweb更换kindeditor编辑器的过程

 更新时间:2016年11月25日 16:57  点击:2042
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化了,下面我们就一起来看看phpweb更换kindeditor编辑器的过程,希望文章可帮助到各位。

都知道phpweb自带的编辑器很不好用,有的时候提交会出现很多问题! 今天开始动工把phpweb的编辑器给换了 首先更换news 模块下的编辑器

1.到kindeditor 官方网站上面下载最新的kindeditor包。
2.删除不用的文件夹,asp,jsp等
3.把kindeditor 的文件夹放入phpweb 根目录下
4.打开news/admin/news_conadd.php 大概108行处

 代码如下 复制代码

<input type=”hidden” name=”body” value=”<?php echo $body; ?>” />
<script type=”text/javascript” src=”../../kedit/KindEditor.js”></script>
<script type=”text/javascript”>
var editor = new KindEditor(“editor”);
editor.hiddenName = “body”;
editor.editorWidth = “680px”;
editor.editorHeight = “300px”;
editor.skinPath = “../../kedit/skins/default/”;
editor.uploadPath = “../../kedit/upload_cgi/upload.php”;
editor.imageAttachPath=”news/pics/”;
editor.iconPath = “../../kedit/icons/”;
editor.show();
function KindSubmit() { editor.data(); }
</script>

更换为

 代码如下 复制代码

<script charset=”utf-8″ src=”../../kindeditor/kindeditor.js”></script>
<script charset=”utf-8″ src=”../../kindeditor/lang/zh_CN.js”></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create(‘#editor_id’,{
width:’680px’,
height:’300px’,
uploadJson:’upload_json.php’,
fileManagerJson : ‘file_manager_json.php’,
allowFileManager : true,
syncType:”form”, afterCreate : function() { var self = this; self.sync(); }, afterChange : function() { var self = this; self.sync(); }, afterBlur : function() { var self = this; self.sync(); } }); }); </script>
<textarea  name=”body” id=”editor_id” style=”width:680px;height:300px;”/><?php echo $body;?></textarea>

注意:红色标注处,按照官方提供的demo.php文件中写的方法,得不到textarea 里面的内容! 5.复制kindeditorphp文件夹下面upload_json.php和file_manager_json.php (新版中存在 JSON.php也一起复制)文件到newsadmin下 修改2个文件

//文件保存目录路径 $save_path = $php_path . ‘../attached/'; //文件保存目录URL $save_url = $php_url . ‘../attached/';

//文件保存目录路径 $save_path = $php_path . ‘../pics/'; //文件保存目录URL $save_url = $php_url . ‘../pics/';

碰到问题

kindeditor 用ajax提交会出现如下问题: 提交第二次才能获取到真实的值。用如下方法解决:

加一个,afterChange: function (e) { this.sync() }  同步下数据即可

替换就ok:

本教程来学习如何用PHP+jQuery开发注册模块,教程包含了整个注册过程的截图,还有数据库设计,模块流程等。

/*
******* 环境: Apache2.2.8 + PHP5.2.6 + MySQL5.0.51b + jQuery-1.8.3.min.js *******
******* 其他组件:Zend_mail( Zend_framework 1.11.11 )
******* Date:2014-09-25
******* Author:小dee
*/

了一个简单的PHP+jQuery注册模块,需要填写的栏目包括用户名、邮箱、密码、重复密码和验证码,其中每个栏目需要具备的功能和要求如下图:

基于PHP+jQuery注册模块开发详解教程

在做这个模块的时候,很大程度上借鉴了网易注册( http://reg.163.com/reg/reg.jsp?product=urs )的功能和样式。但网易对于每个栏目的判断的做法是:在输入文字时,并不给出任何实时的检测结果,而在这个栏目失去焦点时,才把检测的结果展示出来,这种做法我认为会使用户在输入时视觉上比较统一,看到的是关于该栏目要求的提示,不会出现其他信息的打扰,但同时也不会得到正在输入的字符的检测提示。所以在做这个功能的时候,我把我自认为需要实时提示的一些信息做了相应的加强,比如用户名长度超过限制和密码的长度以及强弱,并且给邮箱的大写锁定做了简单的判断。

注:表单的提交按钮type为button而不是submit,因此所有栏目的回车( keydown )都统一设置为将焦点移至下一个栏目,除了最后一个栏目验证码,在验证码栏目使用回车( keydown )会触发提交事件。

功能分析

用户名栏目:

流程

①页面加载完即获得焦点,获得焦点时出现初始说明文字;
②鼠标点击用户名输入框,出现初始说明文字;
③输入字符,即时提示是否符合长度要求;
④失去焦点时首先判断是否为空,为空时提示不能为空;非空且长度满足要求时,开始检测用户名是否被注册;
⑤用户名已被注册,给出提示,如果没有注册,则提示可以注册;
⑥再次获得焦点时,不论输入框中是否有输入,或是否输入符合规定,都出现初始说明文字
⑦回车时将焦点移至邮箱栏目

如图:

基于PHP+jQuery注册模块开发详解教程

细节

可以使用任意字符,并且字数限制为:中文长度不超过7个汉字,英文、数字或符号长度不超过14个字母、数字或符号(类似豆瓣注册https://www.douban.com/accounts/register),即不超过14个字符

关于占位符(字符长度),一个汉字的占位符是2,一个英文(数字)的占位符是1,可以用php语句来计算字符的长度

 代码如下 复制代码

<?php
//php.ini开启了php_mbstring.dll扩展
$str="博客园小dee";
echo (strlen($str)+mb_strlen($str,'utf-8'))/2;


输出:11

而strlen($str) 输出的是15:4*3+3,汉字在utf-8编码下占3个字节,英文占1个,

mb_strlen($str,'utf-8') 输出的是7:一个汉字的长度是1,

如果用jquery的length来输出这个字符串,alert($("#uname").val().length),则会得到长度7,

这点要注意。

同时用户名两端不能含有空格,在检测以及注册时,程序会自动过滤用户名两端的空格。

register.html 用户名栏目的HTML代码片段:

 代码如下 复制代码
<!-- 用户名 -->       
<div class="ipt fipt">
    <input type="text" name="uname" id="uname" value="" placeholder="输入用户名"  autocomplete="off" />
    <!--提示文字-->
    <span id="unamechk"></span>
</div>


register.js公用部分的js代码:

 代码如下 复制代码
$(function(){
   
    //说明文字
    function notice(showMsg,noticeMsg){           
        showMsg.html(noticeMsg).attr("class","notice");
    }
    //显示错误信息
    function error(showMsg,errorMsg){   
        showMsg.html(errorMsg).attr("class","error");
    }   
    //显示正确信息
    function success(showMsg,successMsg){   
        showMsg.html(successMsg)               
                       .css("height","20px")
                       .attr("class","success");
    }

    //计算字符长度
    function countLen(value){
   
        var len = 0;
        for (var i = 0; i < value.length; i++) {
            if (value[i].match(/[^x00-xff]/ig) != null)
            len += 2;
            else
            len += 1;
        }
        return len;
    }                    

    //......
)};


register.js用户名部分的js代码:

 代码如下 复制代码
//检测用户名长度
function unameLen(value){
   
        var showMsg = $("#unamechk");

        /* (strlen($str)+mb_strlen($str))/2 可得出限制字符长度的上限,
        *  例如:$str为7个汉字:"博客园记录生活",利用上面的语句可得出14,
        *  同样,14个英文,利用上面的语句同样能得出字符长度为14
        */
        if(countLen(value) > 14){
                       
            var errorMsg = '用户名长度不能超过14个英文或7个汉字';
            error(showMsg,errorMsg);       
        }else if(countLen(value) == 0){
       
            var noticeMsg = '用户名不能为空';
            notice(showMsg,noticeMsg);
        }else{

            var successMsg = '长度符合要求';
            success(showMsg,successMsg);
        }

        return countLen(value);
    }

    //用户名
    unameLen($("#uname").val());
   
    $("#uname").focus(function(){
   
                    var noticeMsg = '中英文均可,最长为14个英文或7个汉字';
                    notice($("#unamechk"),noticeMsg);
                })
               .click(function(){
                   
                    var noticeMsg = '中英文均可,最长为14个英文或7个汉字';
                    notice($("#unamechk"),noticeMsg);
                })
               .keyup(function(){
   
                    unameLen(this.value);
                }).keydown(function(){
               
                    //把焦点移至邮箱栏目
                    if(event.keyCode == 13){
                       
                        $("#uemail").focus();
                    }
                })
                .blur(function(){
               
                    if($("#uname").val()!="" && unameLen(this.value)<=14 && unameLen(this.value)>0){
                        //检测中
                        $("#unamechk").html("检测中...").attr("class","loading");
                        //ajax查询用户名是否被注册
                        $.post("./../chkname.php",{
                       
                            //要传递的数据
                            uname : $("#uname").val()
                        },function(data,textStatus){
                           
                            if(data == 0){
                           
                                var successMsg = '恭喜,该用户名可以注册';
                                $("#unamechk").html(successMsg).attr("class","success");

                                //设置参数
                                nameval = true;
                            }else if(data == 1){
                           
                                var errorMsg = '该用户名已被注册';
                                error($("#unamechk"),errorMsg);
                            }else{
                           
                                var errorMsg = '查询出错,请联系网站管理员';
                                error($("#unamechk"),errorMsg);
                            }
                        });
                    }else if(unameLen(this.value)>14){
                   
                        var errorMsg = '用户名长度不能超过14个英文或7个汉字';
                        error($("#unamechk"),errorMsg);
                    }else{
                   
                        var errorMsg = '用户名不能为空';
                        error($("#unamechk"),errorMsg);
                    }
});

//加载后即获得焦点
$("#uname").focus();



checkname.php代码:

 代码如下 复制代码
<?php

header("charset=utf-8");

require_once("conn/conn.php");

if(isset($_POST['uname']) && $_POST['uname']!=""){

    $uname = trim(addslashes($_POST['uname']));
}

$sql = "select uname from user where uname='".$uname."'";

if($conne->getRowsNum($sql) == 1){

    $state = 1;
}else if($conne->getRowsNum($sql) == 0){

    $state = 0;
}else{

    echo $conne->msg_error();
}

echo $state;



提示文字( Chrome下 )

①初始获得焦点、再次获得焦点或点击时

基于PHP+jQuery注册模块开发详解教程

 

       基于PHP+jQuery注册模块开发详解教程


②输入时实时检测长度

基于PHP+jQuery注册模块开发详解教程 基于PHP+jQuery注册模块开发详解教程

 

③删除至空且未失去焦点时,使用蓝色图标提示不能为空——用户在输入时看起来不突兀

     基于PHP+jQuery注册模块开发详解教程

 
④失去焦点且不为空,检测是否被注册( 非常短暂,一闪而过 )

基于PHP+jQuery注册模块开发详解教程
⑤失去焦点时为空、可以注册、已被注册时

基于PHP+jQuery注册模块开发详解教程

基于PHP+jQuery注册模块开发详解教程

基于PHP+jQuery注册模块开发详解教程


用户名分析至此完毕。

 

邮箱栏目:

流程

①当栏目获得焦点或者点击时不论栏目为空、填写正确或者填写错误时都出现说明文字;
②用户输入时出现下拉菜单显示多种邮件后缀供用户选择;
③失去焦点时首先判断邮箱格式是否正确,如果正确则检测邮箱是否被注册 ;
④在使用回车选择下拉菜单时,将自动填充邮箱栏目;没有出现下拉菜单时,将焦点移至密码栏目

如图:

基于PHP+jQuery注册模块开发详解教程
register.html 邮箱栏目HTML代码片段:

 代码如下 复制代码
<!-- email -->           
<div class="ipt">
    <input type="text" name="uemail" id="uemail" value="" placeholder="常用邮箱地址" />
    <span id="uemailchk"></span>
    <ul class="autoul"></ul>
</div>


下拉功能emailup.js同之前的博文《jQuery实现下拉提示且自动填充的邮箱》,略有修改,注意用回车( keydown和keyup事件 )在不同情况下触发的不同动作:

 代码如下 复制代码
$(function(){
   
    //初始化邮箱列表
    var mail = new Array("sina.com","126.com","163.com","gmail.com","qq.com","hotmail.com","sohu.com","139.com","189.cn","sina.cn");

    //把邮箱列表加入下拉
    for(var i=0;i<mail.length;i++){
   
        var $liElement = $("<li class="autoli"><span class="ex"></span><span class="at">@</span><span class="step">"+mail[i]+"</span></li>");

        $liElement.appendTo("ul.autoul");
    }

    //下拉菜单初始隐藏
    $(".autoul").hide();
   
    //在邮箱输入框输入字符
    $("#uemail").keyup(function(){
    
        if(event.keyCode!=38 && event.keyCode!=40 && event.keyCode!=13){

            //菜单展现,需要排除空格开头和"@"开头
            if( $.trim($(this).val())!="" && $.trim(this.value).match(/^@/)==null ) {

                $(".autoul").show();
                //修改
                $(".autoul li").show();

                //同时去掉原先的高亮,把第一条提示高亮
                if($(".autoul li.lihover").hasClass("lihover")) {
                    $(".autoul li.lihover").removeClass("lihover");
                }
                $(".autoul li:visible:eq(0)").addClass("lihover");
            }else{//如果为空或者"@"开头
                $(".autoul").hide();
                $(".autoul li:eq(0)").removeClass("lihover");
            }

            //把输入的字符填充进提示,有两种情况:1.出现"@"之前,把"@"之前的字符进行填充;2.出现第一次"@"时以及"@"之后还有字符时,不填充
            //出现@之前
            if($.trim(this.value).match(/[^@]@/)==null){//输入了不含"@"的字符或者"@"开头
                if($.trim(this.value).match(/^@/)==null){

                    //不以"@"开头
                    //这里要根据实际html情况进行修改
                    $(this).siblings("ul").children("li").children(".ex").text($(this).val());
                }
            }else{

                //输入字符后,第一次出现了不在首位的"@"
                //当首次出现@之后,有2种情况:1.继续输入;2.没有继续输入
                //当继续输入时
                var str = this.value;//输入的所有字符
                var strs = new Array();
                strs = str.split("@");//输入的所有字符以"@"分隔
                $(".ex").text(strs[0]);//"@"之前输入的内容
                var len = strs[0].length;//"@"之前输入内容的长度
                if(this.value.length>len+1){

                    //截取出@之后的字符串,@之前字符串的长度加@的长度,从第(len+1)位开始截取
                    var strright = str.substr(len+1);

                    //正则屏蔽匹配反斜杠""
                    if(strright.match(/[]/)!=null){
                        strright.replace(/[]/,"");
                        return false;
                    }
                
                    //遍历li
                    $("ul.autoul li").each(function(){

                        //遍历span
                        //$(this) li
                        $(this).children("span.step").each(function(){

                            //@之后的字符串与邮件后缀进行比较
                            //当输入的字符和下拉中邮件后缀匹配并且出现在第一位出现
                            //$(this) span.step
                            if($("ul.autoul li").children("span.step").text().match(strright)!=null && $(this).text().indexOf(strright)==0){
                               
                                //class showli是输入框@后的字符和邮件列表对比匹配后给匹配的邮件li加上的属性
                                $(this).parent().addClass("showli");
                                //如果输入的字符和提示菜单完全匹配,则去掉高亮和showli,同时提示隐藏
                               
                                if(strright.length>=$(this).text().length){
                                       
                                    $(this).parent().removeClass("showli").removeClass("lihover").hide();
                                }
                            }else{
                                $(this).parent().removeClass("showli");
                            }
                            if($(this).parent().hasClass("showli")){
                                $(this).parent().show();
                                $(this).parent("li").parent("ul").children("li.showli:eq(0)").addClass("lihover");
                            }else{
                                $(this).parent().hide();
                                $(this).parent().removeClass("lihover");
                            }
                        });
                    });

                    //修改
                    if(!$(".autoul").children("li").hasClass("showli")){

                        $(".autoul").hide();
                    }
                }else{
                    //"@"后没有继续输入时
                    $(".autoul").children().show();
                    $("ul.autoul li").removeClass("showli");
                    $("ul.autoul li.lihover").removeClass("lihover");
                    $("ul.autoul li:eq(0)").addClass("lihover");
                }
            }
        }//有效输入按键事件结束

        if(event.keyCode == 8 || event.keyCode == 46){
    
          $(this).next().children().removeClass("lihover");
          $(this).next().children("li:visible:eq(0)").addClass("lihover");
        }//删除事件结束 
       
       if(event.keyCode == 38){
         //使光标始终在输入框文字右边
          $(this).val($(this).val());
       }//方向键↑结束
       
       if(event.keyCode == 13){
       
            //keyup时只做菜单收起相关的动作和去掉lihover类的动作,不涉及焦点转移
            $(".autoul").hide();
            $(".autoul").children().hide();
            $(".autoul").children().removeClass("lihover");         
       }
    });   
   
    $("#uemail").keydown(function(){

        if(event.keyCode == 40){

            //当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条(可见的)li
            if ($("ul.autoul li").is(".lihover")) {

                //如果还存在下一条(可见的)li的话
                if ($("ul.autoul li.lihover").nextAll().is("li:visible")) {

                    if ($("ul.autoul li.lihover").nextAll().hasClass("showli")) {

                        $("ul.autoul li.lihover").removeClass("lihover")
                                .nextAll(".showli:eq(0)").addClass("lihover");
                    } else {

                        $("ul.autoul li.lihover").removeClass("lihover").removeClass("showli")
                                .next("li:visible").addClass("lihover");
                        $("ul.autoul").children().show();
                    }
                } else {

                    $("ul.autoul li.lihover").removeClass("lihover");
                    $("ul.autoul li:visible:eq(0)").addClass("lihover");
                }
            }
        }

        if(event.keyCode == 38){

            //当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条(可见的)li
            if($("ul.autoul li").is(".lihover")){

                //如果还存在上一条(可见的)li的话
                if($("ul.autoul li.lihover").prevAll().is("li:visible")){


                    if($("ul.autoul li.lihover").prevAll().hasClass("showli")){

                        $("ul.autoul li.lihover").removeClass("lihover")
                                .prevAll(".showli:eq(0)").addClass("lihover");
                    }else{

                        $("ul.autoul li.lihover").removeClass("lihover").removeClass("showli")
                                .prev("li:visible").addClass("lihover");
                        $("ul.autoul").children().show();
                    }
                }else{

                    $("ul.autoul li.lihover").removeClass("lihover");
                    $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover");
                }
            }else{

                //当键盘按下↓时,如果之前没有一条li被选中的话,则第一条(可见的)li被选中
                $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover");
            }
        }

        if(event.keyCode == 13){                           

            //keydown时完成的两个动作 ①填充 ②判断下拉菜单是否存在,如果不存在则焦点移至密码栏目。注意下拉菜单的收起动作放在keyup事件中。即当从下拉菜单中选择邮箱的时候按回车不会触发焦点转移,而选择完毕菜单收起之后再按回车,才会触发焦点转移事件
            if($("ul.autoul li").is(".lihover")) {

                $("#uemail").val($("ul.autoul li.lihover").children(".ex").text() + "@" + $("ul.autoul li.lihover").children(".step").text());
            }

            //把焦点移至密码栏目
            if($(".autoul").attr("style") == "display: none;"){
   
                $("#upwd").focus();
            }
        }
    });

   
    //把click事件修改为mousedown,避免click事件时短暂的失去焦点而触发blur事件
    $(".autoli").mousedown(function(){
 
        $("#uemail").val($(this).children(".ex").text()+$(this).children(".at").text()+$(this).children(".step").text());
        $(".autoul").hide();
       
        //修改
        $("#uemail").focus();
    }).hover(function(){

        if($("ul.autoul li").hasClass("lihover")){

            $("ul.autoul li").removeClass("lihover");
        }
        $(this).addClass("lihover");
    });

    $("body").click(function(){

        $(".autoul").hide();
    });
});



register.js邮箱代码片段:

 代码如下 复制代码
//邮箱下拉js单独引用emailup.js
$("#uemail").focus(function(){
   
                    var noticeMsg = '用来登陆网站,接收到激活邮件才能完成注册';
                    notice($("#uemailchk"),noticeMsg);
                })
                .click(function(){
   
                    var noticeMsg = '用来登陆网站,接收到激活邮件才能完成注册';
                    notice($("#uemailchk"),noticeMsg);
                })
                .blur(function(){
               
                    if(this.value!="" && this.value.match(/^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/)!=null){
                   
                        //检测是否被注册
                        $("#uemailchk").html("检测中...").attr("class","loading");
                        //ajax查询用户名是否被注册
                        $.post("./../chkemail.php",{
                       
                            //要传递的数据
                            uemail : $("#uemail").val()
                        },function(data,textStatus){
                           
                            if(data == 0){
                           
                                var successMsg = '恭喜,该邮箱可以注册';
                                $("#uemailchk").html(successMsg).attr("class","success");

                                emailval = true;
                            }else if(data == 1){
                           
                                var errorMsg = '该邮箱已被注册';
                                error($("#uemailchk"),errorMsg);
                            }else{
                           
                                var errorMsg = '查询出错,请联系网站管理员';
                                error($("#uemailchk"),errorMsg);
                            }
                        });
                    }else if(this.value == ""){
                   
                        var errorMsg = '邮箱不能为空';
                        error($("#uemailchk"),errorMsg);
                    }else{
                   
                        var errorMsg = '请填写正确的邮箱地址';
                        $("#uemailchk").html(errorMsg).attr("class","error");
                    }
});


提示文字( Chrome下 )

①获得焦点时、点击时

 

基于PHP+jQuery注册模块开发详解教程


②输入时

基于PHP+jQuery注册模块开发详解教程


③失去焦点为空、格式错误、已被注册、可以注册时分别为

基于PHP+jQuery注册模块开发详解教程

基于PHP+jQuery注册模块开发详解教程

基于PHP+jQuery注册模块开发详解教程

基于PHP+jQuery注册模块开发详解教程


 邮箱功能至此结束。

 

密码栏目:

要求

①6-16个个字符,区分大小写(参考豆瓣和网易)
②密码不能为同一字符
③实时提示是否符合要求以及判断并显示密码强度,:

1.输入时如果为空(删除时)则用蓝色符号提示不能为空,超过长度时用红色符号
2.密码满足长度但是为相同字符的组合时:密码太简单,请尝试数字、字母和下划线的组合
3.密码强度判断有多种规则,有直接依据长度和组合规则作出判断,也有给每种长度和组合设置分数,通过验证实际密码的情况计算出最后分数来判断强弱。在这个模块中采用比较简单的一种形式,也是网易注册采用的方法:

     密码满足长度且全部为不同字母、全部为不同数字或全部为不同符号时为弱:弱:试试字母、数字、符号混搭
           密码满足长度且为数字、字母和符号任意两种组合时为中
     密码满足长度且为数字、字母和符号三种组合时为强

④输入时大写提示

如图:

基于PHP+jQuery注册模块开发详解教程


register.html 密码栏目HTML代码片段:

 代码如下 复制代码
<div class="ipt">
    <input type="password" name="upwd" id="upwd" value="" placeholder="设置密码" />
    <div class="upwdpic">
       <span id="upwdchk"></span>
       <img id="pictie" />
    </div>
</div>

register.js密码代码片段:

 代码如下 复制代码
function noticeEasy(){
   
        //密码全部为相同字符或者为123456,用于keyup时的notice
        var noticeMsg = '密码太简单,请尝试数字、字母和下划线的组合';
        return notice($("#upwdchk"),noticeMsg);
    }

    function errorEasy(){
   
        //密码全部为相同字符或者为123456,用于blur时的error
        var errorMsg = '密码太简单,请尝试数字、字母和下划线的组合';
        return error($("#upwdchk"),errorMsg);
    }
   
    //检测密码长度函数
    //检测密码长度
    function upwdLen(value,func){
   
        var showMsg = $("#upwdchk");

        if(countLen(value) > 16){
                       
            var errorMsg = '密码不能超过16个字符';
            error(showMsg,errorMsg);
           
            $("#pictie").hide();
        }else if(countLen(value) < 6){
       
            //使用notice更加友好
            var noticeMsg = '密码不能少于6个字符';
            notice(showMsg,noticeMsg);

            $("#pictie").hide();
        }else if(countLen(value) == 0){
       
            //使用notice更加友好
            var noticeMsg = '密码不能为空';
            notice(showMsg,noticeMsg);

            $("#pictie").hide();
        }else{
       
            upwdStrong(value,func);//如果长度不成问题,则调用检测密码强弱
        }

        return countLen(value);//返回字符长度
    }

    //检测密码强弱
    function upwdStrong(value,func){
   
        var showMsg = $("#upwdchk");

        if(value.match(/^(.)1*$/)!=null || value.match(/^123456$/)){
       
            //密码全部为相同字符或者为123456,调用函数noticeEasy或errorEasy
            func;
        }else if(value.match(/^[A-Za-z]+$/)!=null || value.match(/^d+$/)!=null || value.match(/^[^A-Za-z0-9]+$/)!=null){

            //全部为相同类型的字符为弱
            var successMsg = '弱:试试字母、数字、符号混搭';
            success(showMsg,successMsg);

            //插入强弱条
            $("#pictie").show().attr("src","images/weak.jpg");

            pwdval = true;

        }else if(value.match(/^[^A-Za-z]+$/)!=null || value.match(/^[^0-9]+$/)!=null || value.match(/^[a-zA-Z0-9]+$/)!=null){
       
            //任意两种不同类型字符组合为中强( 数字+符号,字母+符号,数字+字母 )
            var successMsg = '中强:试试字母、数字、符号混搭';
            success(showMsg,successMsg);

            $("#pictie").show().attr("src","images/normal.jpg");

            pwdval = true;
        }else{
       
            //数字、字母和符号混合
            var successMsg = '强:请牢记您的密码';
            success(showMsg,successMsg);

            $("#pictie").show().attr("src","images/strong.jpg");

            pwdval = true;
        }
    }
   
    $upper = $("<div id="upper">大写锁定已打开</div>");
   
    $("#upwd").focus(function(){
   
                    var noticeMsg = '6到16个字符,区分大小写';
                    notice($("#upwdchk"),noticeMsg);

                    $("#pictie").hide();
            })
             .click(function(){
           
                    var noticeMsg = '6到16个字符,区分大小写';
                    notice($("#upwdchk"),noticeMsg);

                    $("#pictie").hide();
            }).keydown(function(){
           
                    //把焦点移至邮箱栏目
                    if(event.keyCode == 13){
                       
                        $("#rupwd").focus();
                    }
            })
             .keyup(function(){
            
                    //判断大写是否开启
                    //输入密码的长度
                    var len = this.value.length;                   
                    if(len!=0){

                        //当输入的最新以为含有大写字母时说明开启了大写锁定
                        if(this.value[len-1].match(/[A-Z]/)!=null){
                       
                            //给出提示
                            $upper.insertAfter($(".upwdpic"));
                        }else{
                       
                            //移除提示
                            $upper.remove();
                        }
                    }else{
                   
                        //当密码框为空时移除提示
                        if($upper){
                       
                            $upper.remove();
                        }
                    }//判断大写开启结束
           
                    //判断长度及强弱
                    upwdLen(this.value,noticeEasy());   
             })
             //keyup事件结束
               .blur(function(){
              
                    upwdLen(this.value,errorEasy());
                    //upwdLen函数中部分提示使用notice是为了keyup事件中不出现红色提示,而blur事件中则需使用error标红
                    if(this.value == ""){
                   
                        var errorMsg = '密码不能为空';
                        error($("#upwdchk"),errorMsg);

                        $("#pictie").hide();
                    }else if(countLen(this.value)<6){
                   
                        var errorMsg = '密码不能少于6个字符';
                        error($("#upwdchk"),errorMsg);

                        $("#pictie").hide();
                    }
});


大写锁定的思路是:判断输入的字符的最新一位是否是大写字母,如果是大写字母,则提示大写锁定键打开。这种方法并不十分准确,网上有一些插件能判断大写锁定,在这里只是简单地做了一下判断。

 提示文字( Chrome下 )

①获得焦点、点击时

 

基于PHP+jQuery注册模块开发详解教程

基于PHP+jQuery注册模块开发详解教程


②输入时

基于PHP+jQuery注册模块开发详解教程

基于PHP+jQuery注册模块开发详解教程     失去焦点时与此效果相同

基于PHP+jQuery注册模块开发详解教程    失去焦点时与此效果相同

基于PHP+jQuery注册模块开发详解教程     失去焦点时与此效果相同

基于PHP+jQuery注册模块开发详解教程                 失去焦点时与此效果相同

③失去焦点为空时

基于PHP+jQuery注册模块开发详解教程


④出现大写时

基于PHP+jQuery注册模块开发详解教程

密码栏目至此结束。

 

重复密码:失去焦点时判断是否和密码一致

reister.html代码片段:

 代码如下 复制代码
<div class="ipt"> <input type="password" name="rupwd" id="rupwd" value="" placeholder="确认密码" /> <span id="rupwdchk"></span> </div>

register.js代码片段:

 代码如下 复制代码
$("#rupwd").focus(function(){
   
                    var noticeMsg = '再次输入你设置的密码';
                    notice($("#rupwdchk"),noticeMsg);
            })
               .click(function(){
           
                    var noticeMsg = '再次输入你设置的密码';
                    notice($("#rupwdchk"),noticeMsg);
            }).keydown(function(){
           
                    //把焦点移至邮箱栏目
                    if(event.keyCode == 13){
                       
                        $("#yzm").focus();
                    }
            })
                .blur(function(){
           
                    if(this.value == $("#upwd").val() && this.value!=""){
                   
                        success($("#rupwdchk"),"");

                        rpwdval = true;
                    }else if(this.value == ""){
                   
                        $("#rupwdchk").html("");
                    }else{
                   
                        var errorMsg = '两次输入的密码不一致';
                        error($("#rupwdchk"),errorMsg);
                    }
});

提示文字:

①获得焦点、点击时

 

基于PHP+jQuery注册模块开发详解教程

②失去焦点时和密码不一致、一致时分别为

基于PHP+jQuery注册模块开发详解教程

基于PHP+jQuery注册模块开发详解教程

至此重复密码结束。
 

验证码:不区分大小写

验证码采用4位,可以包含的字符为数字1-9,字母a-f

点击验证码和刷新按钮都能刷新验证码

register.html验证码代码部分:

 代码如下 复制代码
<div class="ipt iptend">
    <input type='text' id='yzm' name='yzm' placeholder="验证码">
    <img id='yzmpic' src='' style="cursor:pointer"> <!-- 验证码图片 -->
    <a style="cursor:pointer" id='changea'>
        <img id="refpic" src="images/ref.jpg" alt="验证码"> <!-- 验证码刷新按钮图片 -->
    </a>
    <span id='yzmchk'></span>
    <input type='hidden' id='yzmHiddenNum' name='yzmHiddenNum' value=''> <!-- 隐藏域,内容是验证码输出的数字,用户输入的字符与其进行对比 -->
</div>

register.js验证码部分:

 代码如下 复制代码
//验证码按钮
$("#refpic").hover(function(){
       
            $(this).attr("src","images/refhover.jpg");
        },function(){
       
            $(this).attr("src","images/ref.jpg");
        }).mousedown(function(){
       
            $(this).attr("src","images/refclick.jpg");
        }).mouseup(function(){
       
            $(this).attr("src","images/ref.jpg");
        });
       
        //生成验证码函数
        function showval() {

            num = '';
            for (i = 0; i < 4; i++) {

                tmp = Math.ceil(Math.random() * 15);//Math.ceil上取整;Math.random取0-1之间的随机数
                if (tmp > 9) {
                    switch (tmp) {
                        case(10):
                            num += 'a';
                            break;
                        case(11):
                            num += 'b';
                            break;
                        case(12):
                            num += 'c';
                            break;
                        case(13):
                            num += 'd';
                            break;
                        case(14):
                            num += 'e';
                            break;
                        case(15):
                            num += 'f';
                            break;
                    }
                } else {
                    num += tmp;
                }

                $('#yzmpic').attr("src","../valcode.php?num="+num);
            }
            $('#yzmHiddenNum').val(num);
        }

        //生成验证码以及刷新验证码
        showval();
        $('#yzmpic').click(function(){
       
            showval();
        });
        $('#changea').click(function(){
       
            showval();
        });

        //验证码检验
        function yzmchk(){
       
            if($("#yzm").val() == ""){
           
                var errorMsg = '验证码不能为空';
                error($("#yzmchk"),errorMsg);
            }else if($("#yzm").val().toLowerCase()!=$("#yzmHiddenNum").val()){
           
                //不区分大小写
                var errorMsg = '请输入正确的验证码';
                error($("#yzmchk"),errorMsg);
            }else{
           
                success($("#yzmchk"),"");

                yzmval = true;
            }
        }

        //验证码的blur事件
        $("#yzm").focus(function(){
       
            var noticeMsg = '不区分大小写';
            notice($("#yzmchk"),noticeMsg);
        }).click(function(){
       
            var noticeMsg = '不区分大小写';
            notice($("yzmdchk"),noticeMsg);
        }).keydown(function(){
           
            //提交
            if(event.keyCode == 13){               
               
                //先检验后提交
                yzmchk();
                formsub();
            }
        }).blur(function(){
       
            yzmchk();
});

valcode.php验证码生成php代码:

 代码如下 复制代码
<?php

    header("content-type:image/png");
    $num = $_GET['num'];
    $imagewidth = 150;
    $imageheight = 54;
   
    //创建图像
    $numimage = imagecreate($imagewidth, $imageheight);
   
    //为图像分配颜色
    imagecolorallocate($numimage, 240,240,240);

    //字体大小
    $font_size = 33;
   
    //字体名称
    $fontname = 'arial.ttf';
   
    //循环生成图片文字
    for($i = 0;$i<strlen($num);$i++){
       
        //获取文字左上角x坐标
        $x = mt_rand(20,20) + $imagewidth*$i/5;
       
        //获取文字左上角y坐标
        $y = mt_rand(40, $imageheight);
       
        //为文字分配颜色
        $color = imagecolorallocate($numimage, mt_rand(0,150),  mt_rand(0,150),  mt_rand(0,150));
       
        //写入文字
        imagettftext($numimage,$font_size,0,$x,$y,$color,$fontname,$num[$i]);
    }
   
    //生成干扰码
    for($i = 0;$i<2200;$i++){
        $randcolor = imagecolorallocate($numimage, rand(200,255), rand(200,255), rand(200,255));
        imagesetpixel($numimage, rand()%180, rand()%90, $randcolor);
    }
   
    //输出图片
    imagepng($numimage);
    imagedestroy($numimage);
?>
注:把字体"Arial"放在服务器的相应目录

提示文字:

 

①获得焦点时、点击时

基于PHP+jQuery注册模块开发详解教程

②为空且失去焦点时

基于PHP+jQuery注册模块开发详解教程

③输入错误、输入正确且失去焦点时分别为

基于PHP+jQuery注册模块开发详解教程

基于PHP+jQuery注册模块开发详解教程

验证码至此结束。
 

使用协议:默认勾选;

register.html相应代码:

 代码如下 复制代码
<span class="fuwu">
        <input type="checkbox" name="agree" id="agree" checked="checked">
        <label for="agree">我同意  <a href="#">" 服务条款  "</a> 和  <a href="#">" 网络游戏用户隐私权保护和个人信息利用政策 "</a>
        </label>
</span>
register.js相应代码:

 代码如下 复制代码
if($("#agree").prop("checked") == true){
   
        fuwuval = true;
    }

$("#agree").click(function(){
   
        if($("#agree").prop("checked") == true){

            fuwuval = true;
            $("#sub").css("background","#69b3f2");
        }else{
       
            $("#sub").css({"background":"#f2f2f2","cursor":"default"});
        }   
});

效果图:

①勾选之后

 

基于PHP+jQuery注册模块开发详解教程

②未勾选

基于PHP+jQuery注册模块开发详解教程



提交按钮:检测是否所有栏目都填写正确,否则所有填写错误的栏目将给出错误提示。全部填写正确后提交并且发送验证邮件到注册邮箱中,邮件的验证地址在3日后失效

首先在register.js开始部分定义几个参数:nameval,emailval,pwdval,rpwdval,yzmval,fuwuval,全部设为0;当相应栏目符合规定之后,把相应的参数设为true。当所有的参数都为true之后,提交至registerChk.php,否则return false。

register.html相应代码:

 代码如下 复制代码
<button type="button" id="sub">立即注册</button>
register.js相应代码:

参数设置:

 代码如下 复制代码
var nameval,emailval,pwdval,rpwdval,yzmval,fuwuval = 0;
提交事件:

 代码如下 复制代码
function formsub(){
        if(nameval != true || emailval!=true || pwdval!=true || rpwdval!=true || yzmval!=true || fuwuval!=true){
       
            //当邮箱有下拉菜单时点击提交按钮时不会自动收回菜单,因为下面的return false,所以在return false之前判断下拉菜单是否弹出
            if(nameval != true && $("#unamechk").val()!=""){
           
                var errorMsg = '请输入用户名';
                error($("#namechk"),errorMsg);
            }

            if($(".autoul").show()){
           
                $(".autoul").hide();
            }

            //以下是不会自动获得焦点的栏目如果为空时,点击注册按钮给出错误提示
            if($("#uemail").val() == ""){
           
                var errorMsg = '邮箱不能为空';
                error($("#uemailchk"),errorMsg);       
            }

            if($("#upwd").val() == ""){
           
                var errorMsg = '密码不能为空';
                error($("#upwdchk"),errorMsg);       
            }

            if($("#rupwd").val() == ""){
           
                var errorMsg = '请再次输入你的密码';
                error($("#rupwdchk"),errorMsg);       
            }

            if($("#yzm").val() == ""){
           
                var errorMsg = '验证码不能为空';
                error($("#yzmchk"),errorMsg);       
            }

        }else{
       
            $("#register-form").submit();
        }
    }

    $("#sub").click(function(){
       
        formsub();
});

显示效果:

 

基于PHP+jQuery注册模块开发详解教程


注册以及发送邮件:

使用了Zend Framework( 1.11.11 )中的zend_email组件。Zend Framework的下载地址是:https://packages.zendframework.com/releases/ZendFramework-1.11.11/ZendFramework-1.11.11.zip。在Zend Framework根目录下library路径下,剪切Zend文件至服务器下,在注册页面中引入Zend/Mail/Transport/Smtp.php和Zend/Mail.php两个文件。

当点击提交按钮时,表单将数据提交至register_chk.php,然后页面在当前页跳转至register_back.html,通知用户注册结果并且进邮箱激活。

验证邮箱的地址参数使用用户名和一个随机生成的key。

register_chk.php:

 代码如下 复制代码
<?php

    include_once 'conn/conn.php';
    include_once 'Zend/Mail/Transport/Smtp.php';
    include_once 'Zend/Mail.php';
   
    //激活key,生成的随机数
    $key = md5(rand());
   
    //先写入数据库,再发邮件
    //写入数据库
    //判断是否开启magic_quotes_gpc
    if(get_magic_quotes_gpc()){
   
        $postuname = $_POST['uname'];
        $postupwd = $_POST['upwd'];
        $postuemail = $_POST['uemail'];
    }else{
       
        $postuname = addslashes($_POST['uname']);
        $postupwd = addslashes($_POST['upwd']);
        $postuemail = addslashes($_POST['uemail']);
    }

    function check_input($value){
   
        // 如果不是数字则加引号
        if (!is_numeric($value)){
       
            $value = mysql_real_escape_string($value);
        }
        return $value;
    }
   
    $postuname = check_input($postuname);
    $postupwd = check_input($postupwd);
    $postuemail = check_input($postuemail);

    $sql = "insert into user(uname,upwd,uemail,activekey)values('".trim($postuname)."','".md5(trim($postupwd))."','".trim($postuemail)."','".$key."')";

    $num = $conne->uidRst($sql);
    if($num == 1){
       
        //插入成功时发送邮件
        //用户激活链接
        $url = 'http://'.$_SERVER['HTTP_HOST'].'/php/myLogin/activation.php';
        //urlencode函数转换url中的中文编码
        //带反斜杠
        $url.= '?name='.urlencode(trim($postuname)).'&k='.$key;
        //定义登录使用的邮箱
        $envelope = 'dee1566@126.com';
       
        //激活邮件的主题和正文
        $subject = '激活您的帐号';
        $mailbody = '注册成功,<a href="'.$url.'" target="_blank">请点击此处激活帐号</a>';
       
        //发送邮件
        //SMTP验证参数
        $config = array(
               
                'auth'=>'login',
                'port' => 25,
                'username'=>'dee1566@126.com',
                'password'=>'你的密码'
                );
       
        //实例化验证的对象,使用gmail smtp服务器
        $transport = new Zend_Mail_Transport_Smtp('smtp.126.com',$config);
        $mail = new Zend_Mail('utf-8');
       
        $mail->addTo($_POST['uemail'],'获取用户注册激活链接');
        $mail->setFrom($envelope,'发件人');
        $mail->setSubject($subject);
        $mail->setBodyHtml($mailbody);
        $mail->send($transport);

        echo "<script>self.location="templets/register_back.html";</script>";

    }else{
   
        echo "<script>self.location="templets/register_back.html?error=1";</script>";
    }
?>


邮箱中收取的邮件截图:

 

基于PHP+jQuery注册模块开发详解教程

然后点击邮箱中的链接进行激活,把数据库中的active设置为1。

activation.php:

 代码如下 复制代码
<?php
session_start();
header('Content-type:text/html;charset=utf-8');
include_once 'conn/conn.php';

$table = "user";

if(!empty($_GET['name']) && !is_null($_GET['name'])){
                   
    //urlencode会对字符串进行转义。所以这里要进行处理
    if(get_magic_quotes_gpc()){
   
        $getname = stripslashes(urldecode($_GET['name']));
    }else{
   
        $getname = urldecode($_GET['name']);
    }

    //urldecode反转url中的中文编码
    $sql = "select * from ".$table." where uname='".$getname."' and activekey='".$_GET['k']."'";

    $num = $conne->getRowsNum($sql);
    if($num>0){
       
        $rs = $conne->getRowsRst($sql);   

        //此时数据库里的字符串是不会带反斜杠的   
        //因此要为下面的SQL语句加上反斜杠
        $rsname = addslashes($rs['uname']);

        $upnum = $conne->uidRst("update ".$table." set active = 1 where uname = '".$rsname."' and activekey = '".$rs['activekey']."'");

        if($upnum>0){
           
            $_SESSION['name'] = urldecode($getname);
            echo "<script>alert('您已成功激活');window.location.href='main.php';</script>";
        }else{
           
            echo "<script>alert('您已经激活过了');window.location.href='main.php';</script>";
        }
    }else{
       
        echo "<script>alert('激活失败');window.location.href='templets/register.html';</script>";
    }
}

?>

关于注册成功后的邮件页和跳转页,这里不做了。

关于数据库防注入的几种方式magic_quote_gpc,addslashes/stripslashes,mysql_real_eascpae_string,我做了一张表格

 

基于PHP+jQuery注册模块开发详解教程



数据库设计:

user表

 代码如下 复制代码
create table user (id int primary key auto_increment,
uname varchar(14) not null default '',
upwd char(32) not null default '',
uemail varchar(50) not null default '',
active tinyint(4) default '0',
activekey char(32) not null defalut '')engine=innodb default charset=utf8
说明:md5的长度是32。

模块的目录结构如下:

ROOT:
├─conn
│ ├─conn.php

├─templets
│ ├─css
│ │ ├─common.css
│ │ ├─register.css
│ │
│ ├─images
│ │
│ └─js
│ ├─jquery-1.8.3.min.js
│ ├─register.js
│ ├─emailup.js

├─chkname.php
├─chkemail.php
├─valcode.php
├─register_chk.php
├─activation.php
├─arial.ttf

└─Zend

模块至此结束。

 

phpweb是一个企业建站系统了可以快速的实现企业群站创建了,但这款使用的编辑器并不是百度编辑器对于小编来讲是非常喜欢百度编辑器了,下面一起来看看phpweb更换百度编辑器的配置。

准备工作:

1.从UEditor 官网上面下载 最新版本的UEditor,现在最新版本为ueditor1_4_3-utf8-php,请下载php版本。

2.我们更换的是 news 模块下的编辑器,也就是新闻模块,请确保news/admin/下面,news_conadd.php,news_conmod.php,已经破解出源码,如果没有,请自行百度!

开始动手:

1.解压下载的压缩包直接到phpweb根目录

2.打开news_conadd.php文件夹

找到以下代码:

 代码如下 复制代码

<input type="hidden" name="body" value="<?php echo $body; ?>" />
<script type="text/javascript" src="../../kedit/KindEditor.js"></script>
<script type="text/javascript">

var editor = new KindEditor("editor");
 editor.hiddenName = "body";
 editor.editorWidth = "680px";
 editor.editorHeight = "300px";
 editor.skinPath = "../../kedit/skins/default/";
 editor.uploadPath = "../../kedit/upload_cgi/upload.php";
 editor.imageAttachPath="news/pics/";
 editor.iconPath = "../../kedit/icons/";
 editor.show();
   function KindSubmit() {
editor.data();
 }

 </script>

然后直接注释掉,或者删除。

加入

 代码如下 复制代码
<script id="container" name="body" type="text/plain"></script>

然后在下面插入

 代码如下 复制代码
<!-- 配置文件 -->
<script type="text/javascript" src="../../ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="../../ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container',{
   initialFrameWidth:"800",
   initialFrameHeight:"200"
  });
  
</script>

这样,新闻的添加就好了。

下面就是新闻的修改;

步骤和添加一样只是在实例化编辑器后面加入

 代码如下 复制代码

 <script type="text/javascript">
var ue = UE.getEditor('container',{
   initialFrameWidth:"800",
   initialFrameHeight:"200",
   
  });
  
  ue.ready(function() {
   //设置编辑器的内容
   ue.setContent('<?php echo htmlspecialchars_decode($body);?>');
   
   
  });
  
</script>

这样 修改就可以了。

注意:更换完成编辑器后,原来phpweb自带的分页就不能使用了

phpweb更换百度编辑器的配置教程

phpweb更换百度编辑器的配置教程

下面是修改新闻的时候:

phpweb更换百度编辑器的配置教程

写在最后:
百度UEditor 的上传图片路径是统一默认的,如果要修改,请打开 ueditor/php/config.json 下面进行修改。
现在这种多选择功能在很多网站都有,如现在很多电商网站都有N个条件选择了,下面小编为各位介绍一个简单的多级分类筛选实现方法。

主要注意这边有一个 $$这是变量的变量。 以后估计会常用这个做开发。

 代码如下 复制代码

<?php
 
$conditions = array('price','color','metal');//要进行筛选的字段放在这里
 
$price = $color = $metal='';//先给需要筛选的字段赋空值,这些值将输出到页面的hidden fileds 中
 
//以下循环给已经进行的筛选赋值,以便能够在下一次筛选中保留
 
foreach($conditions as $value){
 
    if(isset($_GET[$value])){
        $$value = $_GET[$value];
    }
 
}

 
//以下是演示输出$_GET数据
 
echo '<pre>';
 
print_r($_GET);
 
echo '</pre>';
 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>分类筛选演示</title>
 
<style type="text/css">
 
body{font-size:14px;font-family:Tahoma,"宋体"}
 
</style>
 
<script type="text/javascript">
 
function Filter(a,b){
 
    var $ = function(e){return document.getElementById(e);}
 
    var ipts = $('filterForm').getElementsByTagName('input'),result=[];
 
    for(var i=0,l=ipts.length;i<l;i++){
 
        if(ipts[i].getAttribute('to')=='filter'){
 
           result.push(ipts[i]);
 
       }
 
    }
 
   if($(a)){
 
        $(a).value = b;
 
        for(var j=0,len=result.length;j<len;j++){
 
           if(result[j].value==''){
 
               result[j].parentNode.removeChild(result[j]);
 
           }
 
       }
 
        document.forms['filterForm'].submit();
 
    }
 
    return false;
 
}
 
</script>
 
</head>
 
<body>
 
<form id="filterForm" action="test.php" method="get">
 
<!--
 
form的id 要和程序里统一
 
为避免与其他使用的隐藏域冲突,添加了to属性
 
以下是筛选字段隐藏域
 
需要筛选的隐藏域需要加 to 属性
 
-->
 
<input to="filter" type="hidden" id="price" name="price" value="<?=$price?>" />
 
<input to="filter" type="hidden" id="color" name="color" value="<?=$color?>" />
 
<input to="filter" type="hidden" id="metal" name="metal" value="<?=$metal?>" />
 
</form>
 
<!--
 
要筛选的属性可以由程序生成,注意规律!
 
-->
 
价格:<a href="javascript:Filter('price','');">不限</a>

<a href="javascript:Filter('price','100-1000');">100-1000</a>
 
      <a href="javascript:Filter('price','1001-2000');">1001-2000</a>
 
     <a href="javascript:Filter('price','2001-3000');">2001-3000</a><br/>
 
颜色:<a href="javascript:Filter('color','红色');">红色</a>
 
      <a href="javascript:Filter('color','蓝色');">蓝色</a><br />
 
材质:<a href="javascript:Filter('metal','纯金');">纯金</a>
 
      <a href="javascript:Filter('metal','纯银');">纯银</a><br />
 
</body>
 
</html>

以下是最近工作中总结的几个Drupal小问题,Drupal性能模块之简明分析对比,实现view动态输出的步骤方法,为Drupal主题添加主题内自带图片的正确方法。其中第一个是在网上找到的翻译国外内容,这此感谢这些默默翻译的高手。

Drupal性能模块的简明分析对比

原文:

Varnish

We explored various caching solutions available for Drupal. We shortlisted Varnish, Boost and Authcache modules. We performed a number of tests using these modules. We tested over 1000 pages from different locations. The average page load time without any caching was above 4.0 seconds. The average page load time with Drupal's default caching was 2.5 seconds. The average page load time with the Authcache module was reduced to 1.8 seconds. The average page load time with the Boost module was 1.7 seconds. The average page load time with Varnish module was 1.5 seconds. Therefore we preferred using the Varnish module. These stats are for this site only, the results may vary for other sites.

我简单翻译下:

用1000个不同的页面作的测试,

1.不用任何缓存模块:平均加载时间4秒以上;
2.使用drupal自带缓存:平均加载时间2.5秒;
3.使用Authcache模块,平均加载时间1.8秒;
4.使用Boost模块,平均加载时间1.7秒;
5.使用Varnish模块,平均加载时间1.5秒;

-----------------------------------------------

实现view动态输出的步骤方法

1、在 view 的属性页,选择 header
2、选择 Global: Text area
3、在弹出框里,覆写 输出
4、只有Replacement patterns 显示出来的字段,才能被调用
5、注意勾选 *Use replacement tokens from the first row

-----------------------------------------------

为Drupal主题添加主题内自带图片的正确方法

在为drupal的主题添加主题自带的一些图片的时候,会碰到一些路径问题,使用下面这些方法添加的图片,才能正确显示在页面上:

<img src="<?php print $base_path . drupal_get_path('theme', 'yourtheme');?>/image/act-title.jpg">

在php标签里面输出url的时候要使用 $base_path 与 主题路径拼接出来的url 然后再加上主题目录里面的静态图片的路径,才能正确的显示.

[!--infotagslink--]

相关文章

  • php KindEditor文章内分页的实例方法

    我们这里介绍php与KindEditor编辑器使用时如何利用KindEditor编辑器的分页功能实现文章内容分页,KindEditor编辑器在我们点击分页时会插入代码,我们只要以它为分切符,就...2016-11-25
  • SQL SERVER迁移之更换磁盘文件夹的完整步骤

    这篇文章主要给大家介绍了关于SQL SERVER迁移之更换磁盘文件夹的完整步骤,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
  • 超漂亮的Bootstrap 富文本编辑器summernote

    Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建。对bootstrap 文本编辑器相关知识感兴趣的朋友一起学习吧...2016-04-06
  • 帝国CMS会员注册字段增加编辑器、发送短消息改为编辑框

    通过本教程可以实现帝国CMS后台给前台注册用户发消息,把内容输入框改为编辑器,可上传图片,等打开文件\e\admin\member\SendMsg.php 大约84行<textarea name="msgtext" cols="6...2016-01-27
  • ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    这篇文章主要给大家介绍了ASP.NET百度Ueditor编辑器1.4.3这个版本实现上传图片添加水印效果的相关资料,文中通过图文及示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。...2021-09-22
  • C# RichTextBox制作文本编辑器

    这篇文章主要为大家详细介绍了C# RichTextBox制作文本编辑器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • KindEditor编辑器调用方法

    KindEditor编辑器调用方法,这个编辑器可使用到任何语言中,他是一个纯js的编辑器,但它默认的编辑是utf-8如果是gb2312编辑的朋友就是KindEditor.js打开,重保存为gb2312...2016-11-25
  • C#实现简单文本编辑器

    这篇文章主要为大家详细介绍了C#实现简单文本编辑器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • 同一页面放多个百度编辑器 Ueditor 并用PHP获取 Ueditor 的值的实例

    UEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,本文我们解决在同一个页面上如何放多个 UEditor ,然后再用 PHP 接收 UEditor 的值...2016-11-25
  • PHP编辑器PhpStrom运行缓慢问题

    小编推荐的这篇文章介绍了PHP编辑器PhpStrom运行缓慢问题的解决办法,有兴趣的同学快来看看吧 最近在使用phpstorm开发项目的时候,在加载文件运行时,不管有多大,如果项...2017-07-06
  • 浅析Yii2集成富文本编辑器redactor实例教程

    yii2集成另外一个强大好用的富文本编辑器Redactor。接下来通过本文给大家介绍Yii2集成富文本编辑器redactor实例教程,感兴趣的朋友一起学习吧...2016-04-28
  • ArtEditor富文本编辑器增加表单提交功能

    artEditor是一款基于jQuery的移动端富文本编辑器,支持插入图片,后续完善其他功能。接下来通过本文给大家介绍ArtEditor富文本编辑器增加表单提交功能,对arteditor编辑器相关知识感兴趣的朋友一起学习吧...2016-04-19
  • iPhone不越狱更换微信铃声的方法

    最近和朋友在一起,5个人5台iPhone,一来微信信息所有人都看手机,搞得好麻烦,我看过一篇修改微信铃声的教程,表示需要对苹果手机进行越狱才可以修改铃声,越狱实在太麻烦了,算了,还是看看小编给大家分享iPhone不越狱更换微信铃声的方法...2016-07-04
  • 如何在sublime编辑器中安装python

    这篇文章主要介绍了如何在sublime编辑器中安装python,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-20
  • 网站更换模板对网站的影响分析

    网站更换模板对网站的影响分析,经常看到一些新手SEOer在那里说,网站做好之后就不要再乱动了,否则会被降权的。网站模板不要随便更换,否则会拔毛或者降权的。我并不是说他...2016-10-10
  • php 中调用fckeditor网页编辑器方法

    下面中要在html 中调用就行了 <script src=”fckeditor/fckeditor.js”></script> <script type=”text/网页特效”> function showfck(){...2016-11-25
  • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法

    这篇文章主要介绍了yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法的相关资料,需要的朋友可以参考下...2016-04-23
  • Unity编辑器下重启的方法

    这篇文章主要介绍了Unity编辑器下重启的方法的相关资料,希望通过本文能帮助到大家,让大家学习理解这部分内容,需要的朋友可以参考下...2020-04-25
  • dotnet封装的kindeditor编辑器控件

    KindEditor很不错,没有ForNet的扩展,我是搞.net开发的,就用它简单封装了一个控件,拖过来即可使用,使用更加简单...2021-09-22
  • 新浪在线可视化编辑器PHP版

    调用 <?php /** * 新浪博客编辑器PHP版封装类调用方法 * */ header(\'Content-Type:text/html;Charset=utf-8;\'); include_once(\'sinaEditor.class.php\'...2016-11-25