分类: 技术

  • MAS接口常遇问题

    1、运行地址(格式)如图
    http://127.0.0.1:9090/xxx/xxx/default/rrrff

    QQ图片20151106173138

    2、MAS结构
    文件元素的查找范围 Robot
    Robot,function(des){
    //add your web html pretreatment code to decrease DOM parsing time.
    var s=des.indexOf(‘<div class=”view_ti”>’);
    var e=des.indexOf(‘<div style=” clear:both; height:10px;”>’);
    //substring 范围界定
    return des.substring(s,e);
    //return des;
    }

    3、取到中间字段篇幅
    function list(tTit){
    var text = “<font color=gray>”;
    var endText = “</font>”;
    var ss= tTit.indexOf(text);
    var ee=tTit.indexOf(endText);
    return tTit.substring(ss+text.length,ee);
    }
    tit.push(list(tTit)); //push的是运行完的结果

    4、列表页和详情页结合轮播图代码汇总
    思路:先调取列表,在详情页面解决图片地址。利用索引值id调取背景图片。
    var namearr = [];
    var imgArr = [];
    function newsCarousel(){
    $toast(‘数据加载中…’);
    $.getJSON(‘http://127.0.0.1:8087/xxx/xxx/default/list’, function(data){
    //新闻图片轮播
    if (data.status == ‘0’ && data.data && data.data.length) {
    $closeToast();
    var dataLen = data.data;
    var tmpl = ‘<div class=”ub-fh” ontouchstart=”zy_touch(\’\’)” onclick=”openNewWin(\’news_articlecommon\’,\’news_articlecommon.html\’);”>’
    +'<div id=”img_${index:}” class=”ub ub-f1 ub-imgnews newsban ub-ae uh-for1 ${cb:name}” style=”background-image:url(http://www.sinosure.com.cn/sinosure/xwzx/xbdt/images/20140829/32045.jpg);”></div>’
    +'</div>’;
    var s = zy_tmpl(tmpl, dataLen, zy_tmpl_count(dataLen), function(a, b){
    namearr.push(a.name);
    $closeToast();
    });
    $$(‘slider’).innerHTML = s;
    //显示小点
    var str = ”;
    for (var i = 0; i < dataLen.length; i++) {

    if (i == 0) {
    str += ‘<div id=”num’ + i + ‘” class=”uc-a-for1 uwh-for1 c-wh3 umar-r-for”></div>’;
    }
    else {
    str += ‘<div id=”num’ + i + ‘” class=”uc-a-for1 uwh-for1 c-gra-for2 umar-r-for”></div>’;
    }
    }
    $$(‘proint’).innerHTML = str;

    //滑动时当前图片的小点颜色为蓝色
    var slider = new zySlide(“slider”, “H”, function(){
    var cur = slider.currentPoint;
    var length = slider.maxPoint;
    for (var n = 0; n <= length; n++) {
    if (n == cur) {
    $$(“num” + n).className = ‘uc-a-for1 uwh-for1 c-wh3 umar-r-for’;
    }
    else {
    $$(“num” + n).className = ‘uc-a-for1 uwh-for1 c-gra-for2 umar-r-for’;
    }
    }
    $$(‘title’).innerHTML = namearr[cur];
    }, false, function(e){});

    for(var j=0;j<5;j++){
    var url = dataLen[j].href;
    $.getJSON(‘http://127.0.0.1:8087/xxx/xxx/default/fff?index=’+j+’&url=’+url, function(data1){
    $$(‘img_’+data1.index).style.backgroundImage = ‘url(‘+data1.data[0].src+’)’;
    $$(‘title’).innerHTML=data1.title;
    });
    }
    }
    });
    }
    Mas接口 info
    var MEAP = require(“meap”);

    function run(Param, Robot, Request, Response, IF){
    LOG(“Param.params.index”,Param.params.index);
    var option={
    method : “GET”,
    url: Param.params.url,
    index:Param.params.index,
    Cookie : “true”,
    Charset:”gb2312″
    };

    MEAP.AJAX.Runner(option,function(err,res,data){
    if(!err)
    {
    //Add your normal handling code
    MEAP.PARSER.Runner(“HTML”,res.text, function(err,DOM){
    if(!err && DOM){
    var arr=[];
    var t=DOM.getElementsByTagName(‘div’);
    var tit =t.length;
    var tit=t[0].innerHTML;
    // var con=t[1].text();
    // var tit =t[0].innerHTML;
    var con =t[1].innerHTML;

    var timg=DOM.getElementsByTagName(‘IMG’);

    for( var i=0;i<timg.length;i++){
    var url =”http://www.sinosure.com.cn”+timg[i].src;
    if(timg==”||timg==undefined){
    //url=”http://www.sinosure.com.cn/sinosure/xwzx/xbdt/images/20140827/32026.jpg”;
    break;
    }
    var src = url.replace(“file:///D:/”,”/”);
    arr.push(src);
    }

    //Add your DOM handling code

    var answerStr = JSON.stringify(
    {
    status: 0,
    title: tit,
    content: con,
    index:Param.params.index,
    data: arr
    });
    var o = JSON.parse( answerStr);
    Response.end(JSON.stringify(o));
    }
    else {
    Response.end(JSON.stringify({
    status: 1,
    msg: “异常”

    }));
    }
    });
    }
    else {
    Response.end(JSON.stringify({
    status: 1,
    msg: “异常”
    }));
    }

    },Robot,function(des){
    var s=des.indexOf(‘<div class=”view_ti”>’);
    var e=des.indexOf(‘<div style=” clear:both; height:10px;”>’);
    return des.substring(s,e);
    });
    }

    exports.Runner = run;
    Mas接口 list
    var MEAP = require(“meap”);

    function run(Param, Robot, Request, Response, IF){

    var option={
    method : “GET”,
    url: “http://www.sinosure.com.cn/sinosure/xwzx/xbdt/default.html”, //列表页抓取页面
    Cookie : “true”,
    Charset:”gb2312″
    };

    MEAP.AJAX.Runner(option,function(err,res,data){
    if(!err)
    {
    //Add your normal handling code
    MEAP.PARSER.Runner(“HTML”,res.text, function(err,DOM){
    if(!err && DOM){
    var arr=[];
    //var tit=[];
    var oLi=DOM.getElementsByTagName(‘a’);
    function list(tTit){
    var text = “<font color=gray>”;
    var endText = “</font>”;
    var ss= tTit.indexOf(text);
    var ee=tTit.indexOf(endText);
    return tTit.substring(ss+text.length,ee);
    }
    for(var i=21;i<26;i++){
    var obj={};
    obj.title=list(oLi[i].innerHTML);
    obj.href=”http://www.sinosure.com.cn”+oLi[i].attributes[‘href’].value;
    arr.push(obj);
    }
    var answerStr = JSON.stringify(
    {
    status: 0,
    //title:tit,
    data: arr
    });
    var o = JSON.parse( answerStr);
    // eval(“var answerStr = ‘”+JSON.stringify(o)+”‘;”);
    Response.end(JSON.stringify(o));
    }
    else {
    Response.end(JSON.stringify({
    status: 1,
    msg: “异常”

    }));
    }
    });
    }
    else {
    Response.end(JSON.stringify({
    status: 1,
    msg: “异常”
    }));
    }

    },Robot,function(des){
    //add your web html pretreatment code to decrease DOM parsing time.
    var s=des.indexOf(‘<div class=”news_gray_k”>’);
    var e=des.indexOf(‘<div class=”gradual”>’);
    //var img=des.indexOf(‘<img’);
    //substring 范围界定
    return des.substring(s,e);
    //return des;
    });
    }

    exports.Runner = run;

  • 导航条hover时,用css解决中英文互换

    导航条默认为“英文”显示,鼠标hover的时候变为“中文”显示。如下图所示

    利用display的block和none进行切换显示

    1

    2

     

     

    <!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”>

    *{ margin:0;padding:0}

    ul,li{ list-style:none}

    a{text-decoration:none}

    em{ font-style:normal;}

    .box{ width:1000px; margin:30px auto; height:50px; background:#000; border-bottom:4px solid #f00;}

    .nav{ height:50px;line-height:50px; margin-left:30px;}

    .nav li{ width:100px; float:left; text-align:center;text-algin:center;}

    .nav li a{ color:#fff; display:block;}

    .nav li a span{ display:none}

    .nav li a:hover{ background:#f00;}

    .nav li a:hover span{display:block;}

    .nav li a:hover em{display:none;}

    </style>

    </head>

     

    <body>

    <div class=”box”>

    <ul class=”nav”>

    <li><a href=”#”><span>首页</span><em>index</em></a></li>

    <li><a href=”#”><span>产品</span><em>product</em></a></li>

    <li><a href=”#”><span>联系我们</span><em>contact</em></a></li>

    <li><a href=”#”><span>关于我们</span><em>about</em></a></li>

    <li><a href=”#”><span>新闻资讯</span><em>news</em></a></li>

    <li><a href=”#”><span>网站地图</span><em>site</em></a></li>

    </ul>

    </div>

    </body>

    </html>

     

  • flex弹性盒子

    概述

    UI3.0使用弹性盒子对页面进行布局,ui-box.css中就定义了弹性盒子的一些css3样式,弹性盒子模型是在指定大小的父容器里来为子元素分配空间,使用box架构可以更容易更方便的适配不同分辨率不同屏幕尺寸的手机

    CSS Variables

    Box架构

    定义:
    ub……
    说明:
    使用box弹性盒子模式对页面进行布局
    例子:
    ub定义元素的display属性为box。那么子元素就可以根据我们定义的比例来分配元素的空间,ub一般跟ub-f[1-4]搭配着使用

    Box架构元素空间大小分配比例

    定义:
    ub-f……
    说明:
    定义不同的box-flex属性值
    类别使用数字编号,定义不同的元素空间大小分配比例
    例子:

    ub-f1数字编号为1;定义box-flex:1
    ub-f1数字编号为2;定义box-flex:2
    ub-f1数字编号为3;定义box-flex:3
    ub-f1数字编号为4;定义box-flex:4
    ub-f[1-4]和ub搭配着使用

    解析:
    1、若子元素都使用ub-f1,那么子元素等比例的分配父元素的空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='ub-f1 sc-bg-alert'></div>
    3. <div class='ub-f1 bc-head'></div>
    4. </div>

    2、若子元素一个用ub-f1,另外一个用ub-f2.,那么子元素按照1:2的比例分配父元素的空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='ub-f1 sc-bg-alert'></div>
    3. <div class='ub-f2 bc-head'></div>
    4. </div>


    3、若子元素分别使用ub-f1,ub-f2,ub-f3,那么子元素会按照1:2:3的比例分配父元素的空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='ub-f1 sc-bg-alert'></div>
    3. <div class='ub-f2 bc-head'></div>
    4. <div class='ub-f3 sc-bg-active'></div>
    5. </div>


    4、若子元素中只有一个使用ub-f1,另外一个元素根据内容的多少定义大小,那么使用ub-f1的元素会自动适配元素的剩余空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='sc-bg-alert'>内容</div>
    3. <div class='ub-f1 bc-head'></div>
    4. </div>

    ub-f[1-4]和ub搭配着使用
    场景:

    1. <div class='uba b-gra c-wh us uc-a '>
    2. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis umh4'>
    3. <div class='ub-f1 ut-s'>设置</div>
    4. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    5. <div class='res8 lis-sw ub-img'></div>
    6. </div>
    7. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis umh4'>
    8. <div class='ub-f1 ut-s'>设置</div>
    9. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    10. <div class='res8 lis-sw ub-img'></div>
    11. </div>
    12. <div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis umh4'>
    13. <div class='ub-f1 ut-s'>设置</div>
    14. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    15. <div class='res8 lis-sw ub-img'></div>
    16. </div>
    17. </div>

    图例:

    Box架构元素垂直方向的位置排列

    定义:
    ub-ac,ub-ae……
    说明:

    ub-ac:垂直居中
    ub-ae:位于底边
    只有跟ub搭配着使用ub-ac,ub-ae的作用才生效

    例子:
    1、未使用ub-ac,ub-ae

    1. <div class='ub uinn umh4 uba b-gra uc-a'>
    2. <div class='ub-f1'>内容</div>
    3. <div class='res8 lis-sw ub-img'></div>
    4. </div>


    2、使用ub-ac

    1. <div class='ub uinn umh4 uba b-gra uc-a ub-ac'>
    2. <div class='ub-f1'>内容</div>
    3. <div class='res8 lis-sw ub-img'></div>
    4. </div>


    3、使用ub-ae

    1. <div class='ub uinn umh4 uba b-gra uc-a ub-ae'>
    2. <div class='ub-f1'>内容</div>
    3. <div class='res8 lis-sw ub-img'></div>
    4. </div>


    场景:

    1. <div class='uba b-gra c-wh us uc-a '>
    2. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>
    3. <div class='lis-icon ub-img im'></div>
    4. <div class='ub-f1 ut-s'>设置</div>
    5. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    6. <div class='res8 lis-sw ub-img'>></div>
    7. </div>
    8. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-grat-bla ub-ac lis'>
    9. <div class='lis-icon ub-img im'></div>
    10. <div class='ub-f1 ut-s'>设置</div>
    11. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    12. <div class='res8 lis-sw ub-img'></div>
    13. </div>
    14. <div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>
    15. <div class='lis-icon ub-img im'></div>
    16. <div class='ub-f1 ut-s'>设置</div>
    17. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    18. <div class='res8 lis-sw ub-img'></div>
    19. </div>
    20. </div>

    图例:

    Box架构元素水平方向的位置排列

    定义:
    ub-pc,ub-pe,ub-pj……
    说明:

    ub-pc:水平居中
    ub-pe:位于末尾
    ub-pj:两端对齐
    只有跟ub搭配着使用ub-pc,ub-pe,ub-pj的作用才生效

    例子:
    1、未使用ub-pc,ub-pe,ub-pj

    1. <div class='uinn2 c-gra ub'> <div class='umh5 umw3 sc-bg-alert'></div>
    2. <div class='umh5 umw3 bc-head'></div>
    3. <div class='umh5 umw3 sc-bg-active'></div>
    4. </div>

    2、使用ub-pc

    1. <div class='uinn2 c-gra ub-pc ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>


    3、使用ub-pe

    1. <div class='uinn2 c-gra ub-pe ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>


    4、使用ub-pj

    1. <div class='uinn2 c-gra ub-pj ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    Box架构元素垂直排列

    定义:
    ub-ver….
    说明:
    ub-ver:定义元素垂直排列
    只有跟ub搭配着使用ub-ver的作用才生效
    例子:
    1、未使用ub-ver

    1. <div class='uinn2 c-gra ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>


    2、使用ub-ver

    1. <div class='uinn2 c-gra ub ub-ver uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    Box架构元素排列方向

    定义:
    ub-rev……
    说明:
    ub-rev:定义元素排列方向
    只有跟ub搭配着使用ub-rev的作用才生效
    例子:
    1、未使用ub-rev

    1. <div class='uinn2 c-gra ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    2、使用ub-rev

    1. <div class='uinn2 c-gra ub ub-rev uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    Box架构实现横向滑动效果

    定义:
    ub-fh……
    说明:
    在box架构中ub-fh一般跟函数zyFlip()搭配着使用实现横向滑动效果

    Box架构实现纵向滑动效果

    定义:
    ub-fv……
    说明:
    在box架构中ub-fv一般跟函数iScroll()搭配着使用实现纵向滑动效果

    背景图片类别

    定义:
    ub-img[类别]……
    说明:
    前缀为ub-img
    类别为数字编号,用于定义不同的背景排列方式
    例子:

    ub-img类别为空,定义将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终包含在容器内
    ub-img1类别为1,定义将背景图片等比例缩放到完全覆盖容器,背景图像有可能超过容器
    ub-img2类别为2,定义背景图像横向平铺
    ub-img3类别为3,定义背景图像纵向平铺
    ub-img4类别为4,定义背景图像横向100%,纵向自适应;
    ub-img5类别为5,定义背景图像横向自适应,纵向为100%
    ub-img6类别为6,定义背景图像居中显示

    场景:

    1. <div class='uba b-gra c-wh us uc-a '>
    2. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>
    3. <div class='lis-icon ub-img im'></div>
    4. <div class='ub-f1 ut-s'>设置</div>
    5. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    6. <div class='res8 lis-sw ub-img'></div>
    7. </div>
    8. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis'>
    9. <div class='lis-icon ub-img im'></div>
    10. <div class='ub-f1 ut-s'>设置</div>
    11. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    12. <div class='res8 lis-sw ub-img'></div>
    13. </div>
    14. <div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>
    15. <div class='lis-icon ub-img im'></div>
    16. <div class='ub-f1 ut-s'>设置</div>
    17. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    18. <div class='res8 lis-sw ub-img'></div>
    19. </div>
    20. </div>

    图例:

    根本的就是

    <div style="width:300px; display:-webkit-box; display:box;">
    <div style="-webkit-box-flex:1.0; border:1px solid #f00;">12</div>
    <div style="-webkit-box-flex:2.0; border:1px solid #000;">12</div>
    </div>
    
    <div style="width:600px; display:-webkit-box;display:box;">
    <div style="-webkit-box-flex:1; border:1px solid #f00"></div>
    <div style="-webkit-box-flex:2; background:#ff0"></div>
    </div>

     

     

  • App内网址链接外部浏览器页面-kp appcan

    function ck(yWebsite){

    if (isAndroid) {

    //android设备

    uexWidget.loadApp(‘android.i appcanntent.action.VIEW’, ‘text/html’, yWebsite);

    }

    else {

    //IOS设备

    uexWidget.loadApp(yWebsite,null,null);

    }

    }

  • 自动切换选项卡

    //clearInterval(ID)
    //setInterval(函数名,时间)setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
    //oLi[i].index=i; 出现问题为“无法获取未定义或 null 引用的属性‘style’”
    //达到的效果,点击前进和后退皆可
    //问题点:当抛出点击箭头,直接点击onclick后,再点击箭头出现问题,回归到第一个箭头,不能从当前的地方开始。联系起来iNow和this.index
    //clearInterval() 方法可取消由 setInterval() 设置的 timeout。
    //clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。语法clearInterval(id_of_setinterval)除掉, 必须要返回的数值,句柄,setInter




    无标题文档

    • 内容一
    • 内容二
    • 内容三
    • 内容四




  • 1、表格隔行变色且隔td单元格变色,2、多色的th

    1、表格隔行变色且隔td单元格变色

    感谢 boahy给的思路,让我抛却了各种想的索引值的写法。不然还得在索引值的大坑里面扑腾下去。
    td,行和列交叉有重色块。 需要看每行的颜色。(这个地方的颜色要用
    “各一行一种样式
    Boahy 16:35:30
    写两种样式就够了
    Boahy 16:35:42
    然后交替显示每种样式
    Boahy16:35:55
    哪里有什么叠加”)“

    为了表现明显些,我准备把这张图由1 变成2.
    12014-07-25_094755
    22014-07-25_095722

    td颜色 第一行 32 32 32, 隔行 21 21 21(从每行来看,再找共同点奇偶行相同)

    //td颜色
    $('.tb tr:even td:even,.tb tr:odd td:odd').css({'background':'#ddd'});
    $('.tb tr:even td:odd').css({'background':'#ccc'});

    .tb tr:even td:even    tr:even 偶数行里面的 偶数td 和 奇数行里面的 奇数 td
    偶数第一行是tr th行。实际有表现的是 偶数第二行 标注黑色字号的2 1 2 1 中的 22 为#ddd是偶数td。

    .tb tr:odd td:odd    tr:odd  奇数行里面的 奇数td  32 32的2

    $(‘.tb tr:even td:odd’).css({‘background’:’#ccc’})    偶数行的 奇数td。

    以往做的时候多考虑,奇偶行数,这次把奇偶行数tr和奇偶表格td全考虑到了。

    (私以为不会有人会遇到这么奇葩的表格)

    2、多色的th ,这个用了两种方法

    ① 利用th索引值,添加递增样式。

     //th 的颜色
            $('.tb th').each(function(){
                            i=$(this).index();
                            $(this).addClass('tab_th'+i);
            });

    所需要建立多个class

    css文件

    .tb  .tab_th0{ background:#64badc;}
    .tb  .tab_th1{ background:#fdd059;}
    .tb  .tab_th2{ background:#ec985f;}
    .tb  .tab_th3{ background:#ec61ae;}
    .tb  .tab_th4{ background:#7ae85a;}
    .tb  .tab_th5{ background:#7b9ca3;}
    .tb  .tab_th6{ background:#f4c377;}
    .tb  .tab_th7{ background:#ca837b;}

    麻烦,不过有可能其他项目会用到

    ② 利用数组存储背景颜色赋值 √  这个好用,有多个表格也不怕了

    function tb_th(id){
    	//th颜色
    		var Arr=['#64badc','#fdd059','#ec985f','#ec61ae','#7ae85a','#7b9ca3','#f4c377','#ca837b'];
    		for(var j=0 ;j<Arr.length;j++){
    			$(id+' tbody tr th:eq('+j+')').css({'background':Arr[j]});
    		};
    	};
    	//表格添加th背景色
    	tb_th('#tb1');
    	tb_th('#tb2');

    ps:要保证Arr的颜色值个数= 最大的表格th个数。Arr.length  >=   th.length

    demo1(class名字)

    demo2(数组)

  • 选项卡-左右箭头

    3<!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">
    #box{width:300px; margin:0 auto;}
    #box input{ padding:4px 10px; background:#ccc; display:inline-block;}
    #box input.on{ background:red;}
    #box span{color:red; cursor:pointer;}
    #box div{ width:298px; border:1px solid #000; display:none; height:200px;}
    </style>
    <script>
    window.onload=function(){
    	var oBox=document.getElementById('box');
    	var oBtn=oBox.getElementsByTagName('input');
    	var oCon=oBox.getElementsByTagName('div');
    	var oPrev=document.getElementById('prev');
    	var oNext=document.getElementById('next');
    	var iNow=0;
    
    	for(var i=0;i<oBtn.length;i++){
    		oBtn[i].index=i;
    		oBtn[i].onmouseover=function(){
    			iNow=this.index;
    			tb();
    		}	
    	}
    	oPrev.onclick=function(){
    		iNow--;
    		if(iNow==-1){
    			iNow=2;
    		}
    		tb();
    	}
    	oNext.onclick=function(){
    		iNow++;
    		if(iNow==3){
    			iNow=0;
    		}
    		tb();
    	}
    	function tb(){
    		for(var i=0;i<oBtn.length;i++){
    			oBtn[i].className='';
    			oCon[i].style.display='none';
    		}
    		oBtn[iNow].className='on';
    		oCon[iNow].style.display='block';
    	}
    
    }
    
    </script>
    </head>
    
    <body>
    <div id="box">
    <input type="button" value="菜单一" /><input type="button" value="菜单二" /><input type="button" value="菜单三" />
    <span id="prev">←</span>  <span id="next">→</span>
    <div style="display:block">12121212</div>
    <div>22222222222</div>
    <div>33333333333</div>
    </div>
    </body>
    </html>

     Demo

  • 弹性菜单-js

    <!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>
    *{ padding:0; margin:0; list-style:none;}
    #ul1{ width:800px; position:relative; margin:10px auto; background:#9C0; height:30px;}
    #ul1 li{ width:200px; height:30px; line-height:30px; text-align:center; float:left; z-index:2; position:relative;}
    #ul1 li a{ display:block}
    #ul1 li.box{ position:absolute; background:#ff0; left:0; top:0; z-index:1;}
    </style>
    </head>
    <script>
    window.onload=function(){
    var oUl=document.getElementById('ul1');
    var aLi=oUl.children;
    var oBox=aLi[aLi.length-1];
    
    for(var i=0;i<aLi.length-1;i++){
    aLi[i].onmouseover=function(){
    startMove(oBox,this.offsetLeft);
    };
    }
    };
    var i=0;
    function startMove(obj,iTarget){
    obj.speed=obj.speed||0;
    obj.left=obj.left||obj.offsetLeft;
    
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    obj.speed+=(iTarget-obj.left)/5;
    obj.speed*=0.7;
    obj.left+=obj.speed;
    obj.style.left=Math.round(obj.left)+'px';
    
    if(Math.abs(obj.speed)<1&&obj.offsetLeft==iTarget){
    clearInterval(obj.timer);
    }
    document.title=i++;
    
    },30);
    }
    </script>
    <body>
    <ul id="ul1">
    <li><a href="http://www.gaigaiming.com">首页</a></li>
    <li><a href="javascript:;">作品</a></li>
    <li><a href="javascript:;">用户</a></li>
    <li><a href="javascript:;">论坛</a></li>
    <li class="box"></li>
    </ul>
    </body>
    </html>

     

    利用定位,运动展示弹性菜单。

    先清再定时器。

    DEMO

  • 吸顶菜单

    知识点:
    $(‘.nav’).offset():获取匹配元素在当前视口的相对偏移 offset().top offset().left
    返回对象包含两个属性:top和left。 此方法只对可见元素有效

    $(‘.nav’).width():取得匹配元素的当前计算的宽度值
    参数:设定css中的width值,可以是字符串或者数字,还可以是一个函数。返回要设置的数值。

    $(‘p’).width() 获取第一段的宽度
    把所有的段落的宽度设为20
    $(‘p’).width(20);

    函数接受两个参数,第一个参数是元素在原先集合中的做因为只,第二个参数为原先的宽度。
    function(index,width)

    以10像素的复读增加p元素的宽度

    $('button').click(function(){
    $('p').width(function(n,w){
    return w+10;
    })
    })

    $(window).scroll()|| $(‘.div’).scroll 当页面滚动条变化时,执行的函数
    scrollTop() 获取匹配元素相对滚动提条顶部的偏移
    demo

  • svn working copy locked问题

    问题描述:

               用svn在项目文件夹下commit或者update时会出现错误提示“working copy locked”

    解决:

             1、在项目文件夹下,单机鼠标右键,选择tortoisesvn-》cleanup;

             2、如果cleanup没有效果的话只好手动删除锁定文件。

                   cd 到svn项目目录下,然后执行如下命令

                   del lock /q/s

    本文使用Blog_Backup未注册版本导出,请到soft.pt42.com注册。