Anymoore

标签： 设计

  • IxEdit-简化Web交互开发的JavaScript库

    IxEdit是一个为简化Web交互开发而设计的一个js库，基于jQuery&UI库，用它可以快速敏捷的实现很多时下比较主流的交互效果，操作简便。

    在使用它之前确认你的浏览器已经安装Google Gear，或者使用了Google Chrome作为默认浏览器。IxEdit目前放出的是beta版，使用上基本问题不大，生成的代码足够简洁，同时你还可以自行对代码进行优化。

    想了解更多详细信息：

    1.官方的用户手册 UserGuide（英文）:

    2.阿一前辈的视频教程（推荐）。

  • 双击实现文本元素修改

    此效果多应用于后台栏目名称修改上，双击以创建input元素，onblur事件实现异步调用无刷新提交。

    JS部分：

    <code><script type=”text/javascript”>
    function showInput(element)
    {
    var defaultValue = element.innerHTML;   //取得默认内容
    var inputEle= document.createElement(‘input’);   //创建input元素
    inputEle.type = ‘text’;   //添加类型
    inputEle.value=defaultValue;
    inputEle.className=”tip”;
    element.innerHTML = ”;
    element.appendChild(inputEle);   //添加子元素
    inputEle.focus();   //获得焦点
    inputEle.onfocus = function()
    {
    element.ondblclick=”;//取消元素的双击事件
    }
    inputEle.onblur = function()
    {
    element.innerHTML = this.value ? this.value : defaultValue;   //触发时判断值是否为空
    var any= $(this).attr(‘value’);
    $.ajax({
    type: “POST”,
    url: “insert.php”,
    data: “name=”+ any,
    success: function(){
    $(“#show”).prepend(“<li>提交成功：”+any+”</li>”);
    $(“#show li:first”).fadeIn(“slow”);
    }
    });
    element.ondblclick = function()//还原
    {
    showInput(this);
    }
    }
    }
    </script></code>

    样式：

    <style type=”text/css” media=”all”>
    #show{
    margin-top:100px;
    width:300px;
    height:200px;
    border:1px solid #F5F5F5;
    overflow:hidden;
    }
    #show li{
    background:#FDF5E6;
    list-style:none;
    }
    .tip{
    border:2px solid #FDF5E6;
    }
    </style>

    HTML部分：

    <span>双击下面文字：</span>  <br /><br />
    <span ondblclick=”showInput(this)” >天道酬勤</span> <br />
    <div id=”show”></div>

    注意，该效果的实现用到了jQuery,请在HTML头部包含之。

    点击预览效果.

  • WP页面加入自定义侧边栏

            在前面一篇文章中简要介绍了如何创建wordpress自定义页面，在此，介绍一下在自定义页面中加入个性化的侧边栏(sidebar.php),顶部(header.php)及底部(footer.php)。关于如何创建自定义页面，可参考此文：自定义WordPress的页面模板。
    下面以侧边栏为例：

    我们知道在page.php(页面模板)，single.php(文章模板)，调用头部侧边底部的方法分别是：get_header(),get_sidebar(),get_footer(),在get_sidebar()方法中，有一段代码：

    function get_sidebar( $name = null ) {
    do_action( ‘get_sidebar’, $name );
    $templates = array();
    if ( isset($name) )
    $templates[] = “sidebar-{$name}.php”;
    $templates[] = “sidebar.php”;

    ……

    所以，我们只需要建一个以sidebar.php为母版的个性化sidebar-{YourName}.php文件，在页面模板的调用中将默认get_sidebar()修改为get_sidebar(“YourName”)即可。

    同理你也可以按此方法，自定义自己的header.php,footer.php 。
    本站的一个搜索页面示例：点击浏览.