分类: 技术

  • 不定宽度的div始终居中(css方式)

    //需求:ul不能定具体宽度,只能根据li的个数来计算宽度。
    22

    <!DOCTYPE HTML>
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>特殊性</title>
    
    <style type="text/css">
    
    *{padding:0; margin:0;}
    
    ul,li{ list-style:none;}
    
    .wrap{ float:left; position:relative; left:50%;}
    
    .wrap ul{ background:#f00; height:30px; line-height:30px; left:-50%; position:relative;}
    
    .wrap ul li{ float:left;}
    
    .wrap ul li a{ color:#fff; display:block; padding:0 10px;}
    
    </style>
    
    </head>
    
    <body>
    
    <div class="wrap">
    
    <ul>
    
    <li><a href="#">首页</a></li>
    
    <li><a href="#">网站地图</a></li>
    
    <li><a href="#">网站地图</a></li>
    
    <li><a href="#">网站地图</a></li>
    
    <li><a href="#">网站地图</a></li>
    
    <li><a href="#">网站地图</a></li>
    
    <li><a href="#">首页</a></li>
    
    <li><a href="#">首页</a></li>
    
    </ul>
    
    </div>
    
    </body>
    
    </html>

     

     

     

    //可以实现不定宽度居中,可是元素左右两侧空白宽度之和(绿色箭头部分的)要大于ul本身不定宽度元素的宽度。不然就会出现滚动条。

    //so不建议使用,用js解决吧,纠结的同学们

  • clientX、 screenX和pageX

    document.onclick = function(evt){

    var e = evt || window.event;
    // 浏览器可视区域左上角的坐标 可视区域坐标 client clientX
    box1.innerHTML=e.clientX+","+e.clientY;

    // 电脑的屏幕坐标,screen 屏幕坐标
    box2.innerHTML = e.screenX+","+e.screenY;

    // 根坐标,有些版本不兼容可用clientY+scrollTop (IE8)
    box3.innerHTML = e.pageX+","+e.pageY;
    }

  • viewport

    <meta name=”viewport” content=”target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″>
    appcan header内的自适应

    Viewport语法

     <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

     

    target-densitydpi=device-dpi(在csdn中线有人在2013年就说这个不支持webkit了,腾讯的博客有在2012年还探讨,在使用appcan的时候制作appweb的时候会出现乐视华为三星宽屏手机在UC浏览器的兼容问题,去掉这个可以解决)
    使用

    width:控制viewport的大小,一般情况下指定为device-width(单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.

    height:和width相应,指定高度。

    initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。

    maximum-scale:允许用户缩放到的最大比例。

    minimum-scale:允许用户缩放到的最小比例。

    user-scalable:用户是否可以手动缩放。
    参考资料
    http://isux.tencent.com/mobile-development-essential-knowledge.html
    http://bbs.csdn.net/topics/390403828

    其中解决的过程中使用了rem,然并卵,又换成了em
    使用css3单位rem,有人这样解释rem,root-em,就是根部的em,想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。到这里我们也就了解了rem的用法了,那么怎么用rem来实现不同尺寸屏幕的自适应呢?在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅),假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100,px与rem之间很好换算,除以100就可以,这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size,计算:100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

    rem px em pt 需要了解

  • 随机数Math.random()

  • wordpress 多语言国际化

     

      1. 在主题文件functions.php中加入

        function is_lang($lang) {

           return (ICL_LANGUAGE_CODE == $lang) ? true : false;

        }

     

    1. 2

      在相应位置处调用方式:

      <?php if (is_lang(‘en’)) : ?>

      //英文状态下显示内容,is_lang()里面填写语言标识fr(法语),de(德语)等等···

      <?php else :?>

      //非英文下显示内容

      <?php endif;?>

       
  • Appcan使用遇到问题和方法整理

    1、抽屉页面效果注意点
    退回上一页(抽屉里面的返回上一页)
    <div class=”umw4 ub ub-ac ub-pc” ontouchstart=”zy_touch(‘btn-act’)” onclick=”closeWin();”>
    <div class=”t-btn-a1 ub-img uwh-tBtn”></div>
    </div>
    抽屉页面(修改完毕后,只能放在连接内部有用)
    Ⅰ. right.html(首页)
    Root要改掉 window.uexOnload = function(type){
    if (!type) {
    //uescript(‘root’,’openPover()’);
    uescript(‘right_drawer’,’openPover()’);
    zy_con(“content”, “right_content.html”, 0, $$(“header”).offsetHeight);
    var plat = uexWidgetOne.getPlatform();
    Ⅱ. right_drawer.html(可以预览的抽屉效果,内容是清除条件和确认。)
    Ⅲ. right_content.html(right的content内容)
    Ⅳ. Filer.html(抽屉内的选项)
    当出现抽屉里面的效果有滚动条的时候,变header为
    <!DOCTYPE html>
    <html class=”um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px”>
    <head>
    <title></title>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”target-densitydpi=device-dpi,initial-scale=1″>
    <link rel=”stylesheet” href=”css/ui-on.css”>
    2、一般页面返回上一页(系统默认)
    <!–按钮开始–>
    <div class=”ub btn btn-l”>
    <div class=”btn-al”>
    </div>
    <div class=”btn-ac ub ub-ac ulim uinn1″ onmousedown=”zy_touch(”);” ontouchstart=”zy_touch(”)” onclick=”winClose();”>
    返回
    </div>
    <div class=”btn-ar”>
    </div>
    </div>
    3、修改页面内的元素名字,调取数据,可以直接F5预览,修改样式图片之类的,需要重新加载预览
    4、鼠标按下去的效果用
    <div class=”umw4 ub ub-ac ub-pc” ontouchstart=”zy_touch(‘btn-act’)” onmousedown=”zy_touch(‘btn-act’);” onclick=”winClose();”>
    <div class=”t-btn-a1 ub-img uwh-tBtn”></div>
    </div>
    加class名,可以修改在按下去瞬间的样式,可以改变颜色和大小等。
    5、get获取json值
    zy_init();
    var pageSize = 10;
    var pageLen = 1;
    var isLoading = false;
    window.uexOnload = function(type){
    if (!type) {
    sortList();
    // uexWindow.setBounce(“1”);
    setPageBounce(1, function(){
    //刷新
    pageLen = 1;
    sortList();
    }, function(){ //加载更多
    pageLen++;
    sortList();
    // alert(pageLen);
    });
    }
    }

    function sortList(){
    $toast(‘数据加载中…’);
    $.getJSON(‘http://10.1.97.139:18080/10000000/public/BDP/bdpservice?func=listAllProjects&body={“arg0″:”UN0366″,”arg1″:’ + pageSize + ‘,”arg2″:’ + pageLen + ‘,”arg3″:0}’, function(data){
    $closeToast();
    //$.getJSON(http://10.1.97.139:18080/10000000/public/PBD/”)
    // $.getJSON(‘http://10.1.2.206:9090/xxxx/xxxx/default/soap?loginName=040021genglm&pass=ss’,function(data){
    // alert(data.netLoginInfo.loginName);
    isLoading = false;
    resetBV(0);
    resetBV(1);
    if (data.status == ‘0’ && data.data && data.data.projectBasicInfoList.length) {
    $closeToast();
    var dataLen = data.data.projectBasicInfoList;
    var tmpl = ‘<div class=”ub t-bla ulev0 ubb b-gra uinn5″ ontouchstart=”zy_touch(\’\’)” onclick=”openGoods(event);”>’ +
    ‘<div class=” b-gra ub-f1 uc-l1″>’ +
    ‘<div class=”ub ub-ver t-bla”>’ +
    ‘<div class=”b-gra uc-t1 umar-t”>${serialno}</div>’ +
    ‘<div class=”b-gra “>${money}3323</div>’ +
    ‘</div>’ +
    ‘</div>’ +
    ‘<div class=”ub-f1 ulev0″>’ +
    ‘ <div class=”ub ub-ver”>’ +
    ‘ <div class=” b-gra uc-t1″> U${countryCode}</div>’ +
    ‘<div class=” b-gra ulev0 t-orgs”>${projectWorkUserId}</div>’ +
    ‘<div class=” uc-b1 ulev-1″>${style}OA ${deathline}56天 USD</div>’ +
    ‘</div>’ +
    ‘</div>’ +
    ‘<div class=”ub-f1 uc-r1 ulev0″>’ +
    ‘<div class=”ub ub-ver t-bla”>’ +
    ‘<div class=” b-gra uc-t1″>部分收匯</div>’ +
    ‘<div class=” b-gra ulev-1 “>${statusDate}</div>’ +
    ‘<div class=” uc-b1 ulev-1″> ${projectWorkcorpId}</div>’ +
    ‘</div>’ +
    ‘</div>’ +
    ‘</div>’
    var s = zy_tmpl(tmpl, dataLen, zy_tmpl_count(dataLen));
    var d = document.createElement(‘DIV’);
    d.innerHTML = s;
    $$(‘sortList’).appendChild(d);
    }
    else {
    if (pageLen == 1) {
    $$(‘sortList’).innerHTML = ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’
    }
    else {
    $toast(‘没有更多数据’, 2000);
    }
    }
    });
    }

    function toFront(){
    uexWidnow.bringToFront();
    }

    function openGoods(e){
    if (isPhone && e.type == ‘click’)
    return;
    openNewWin(‘r_content’, ‘r_content.html’);
    }
    Post取值
    function List(){
    var tmpl;
    $toast(“正在加载中”);
    //浏览器http协议缓过来的关键字
    var j=[
    {‘key’:’questiontitle’,’type’:’0′,’value’:$$(“KeyWord”).value},
    {‘key’:’currentPage’,’type’:’0′,’value’:pageLen},
    {‘key’:’pageSize’,’type’:’0′,’value’:15}
    ];
    $.getJSON(Lurl,function(data){
    $closeToast();
    isLoading = false;
    resetBV(0);resetBV(1);
    if (data.type == ‘0’ && data.data.items&&data.data.items.length){
    var dataLen = data.data.items;
    for(var i=0;i<dataLen.length;i++){
    tmpl +='<ul ontouchstart=”zy_touch(\’btn-act\’)” onmousedown=”zy_touch(\’btn-act\’)” onclick=”openDetail(\”+dataLen[i].questionid+’\’)” class=”uc-t ubb ub b-gra t-bla ub-ac lis”>’
    +'<li class=”ub-f1 ut-s”>’+dataLen[i].questiontitle+'</li>’
    +'<li class=”tx-r t-dgra ulev-1″>’+dataLen[i].state+'</li>’
    +'<li class=”listIcon lis-sw ub-img”></li>’
    +'</ul>’
    }
    if(pageLen==1){
    $$(“content0″).innerHTML=tmpl;
    }else{
    var child = document.createElement(‘div’);
    child.innerHTML = tmpl;
    $$(‘content0’).appendChild(child);
    }
    }else{
    if(data.data.pageCount==0){
    $$(‘content0’).innerHTML = ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’
    }else{
    $toast(“没有更多数据”,2000)
    }
    }
    },’json’,function(e){
    alert(“输入异常”);
    },’POST’,j)}
    6、应用生成地址D:\appcan\AppCanStudioEnterprise\Mobile-Applications
    7、Svn导入文件要有.project dssam10013 打包才能成功
    设置搜索引擎 安卓 sdksuit_3.0_0820_01
    8、产品服务代码 列表-列表-详情
    ①function openDetails(i){
    var Arr=[‘短期出口信用保险’,’中长期出口信用保险’,’海外投资/租赁保险’,’国内贸易信用保险’,’资信服务’,’担保’,’信保融资’,’理赔服务’]
    setLocVal(‘pName’,JSON.stringify(Arr[i]));
    setLocVal(‘pNo’,JSON.stringify(i)); //传值
    openNewWin(‘adCon_list’, ‘adCon_list.html’);
    }
    ②列表页面
    var hNo = JSON.parse(getLocVal(“pNo”));//获得传值
    function openDetails(i){
    var ArrNo=[‘du’,’zh’,’h’,’g’,’z’,’d’,’x’,’l’];
    //中小企业综合险无 短期出口信用保险 出口买方信贷保险无 中长期出口信用保险
    var ArrTit=[
    [‘index’,’zhbx’,’tdmfbx’,’tdhtbx’,’mfwybx’,’ckxybx-yx-bxd’,’ckxybx-fft-bxd’],
    [‘index’,’ckmfxdbx’,’ckmfxdbx’,’zrzbx’],
    [‘index’,’hwtz-gq-bx’,’hwtz-zq-bx’,’hwzlbx’],
    [‘index’],
    [”],
    [‘index’],
    [”],
    [‘index’,’dxal’,’ywdy’]
    ];
    if(hNo==4||hNo==6){
    alert(“信保融资为空和资信服务为空”);
    return “信保融资为空和资信服务为空”;
    }
    //setLocVal(‘href’,JSON.stringify(‘http://10.1.97.139:9090/dssam10007/public/product/’+ArrNo[hNo]+’_’+e));
    setLocVal(‘href’,JSON.stringify(‘http://127.0.0.1:8087/xxx/xxx/product/’+ArrNo[hNo]+’_’+ArrTit[hNo][i]));
    openNewWin(‘adCon_detail’, ‘adCon_detail.html’);
    }
    ③详情页
    var liPath = JSON.parse(getLocVal(“href”)); //获得传值
    function sortList(){
    $$(‘Info’).innerHTML=””;
    $toast(‘数据加载中…’);
    $.getJSON(liPath, function(data){
    if (data!=0) {
    $closeToast();
    tmpl = ‘<div class=”ubb b-gra ub uinn3″>’
    +'<div class=”t-org ulev-app2″>${title}</div>’
    +'</div>’
    +'<div class=”uinnh1 t-gra1 ulev-app2″>’
    +'<span>${text}</span>’
    +'</div>’;
    var s = zy_tmpl(tmpl, data, zy_tmpl_count(data));
    $$(‘Info’).innerHTML=s;
    }
    else {
    $toast(‘无数据’);
    }
    });
    }
    9、传值
    setLocVal(‘path’,JSON.stringify(e)); 设置传值 变成JSON字符串 双引号
    var liPath = JSON.parse(getLocVal(“path”)); 获取传值 变成对象
    10、省略class
    Ub ut-s
    11、附件下载常用代码
    function Down(e){
    var Durl=’http://10.1.97.139:9090/dssam10007/public/BMsg/OpenSoldsPdfWS?path=’;
    //Console.Log(Durl+e);
    alert(Durl+e);
    downloadFile(Durl,”1111.pdf”);
    }

    12、Zy-tmpl.js 截取字段

    var ar=c.split(‘.’);
    var res=d;
    for(var key in ar)
    if(ar[key].match(/.*sub:.*/)){
    var ts = ar[key];
    var tsar = ts.split(“:”);

    if(tsar.length > 1){
    var num = tsar[1];
    var numar = num.split(‘-‘);
    if(numar.length > 1){
    res = res.substring(numar[0],numar[1]);
    }else if(numar.length == 1){
    res = res.substring(numar[0]);
    }
    }
    }else{
    res=res[ar[key]];
    }
    ${workDate.sub:0-10} 0到10索引值
    ${workDate.sub:11} 索引值11之后
    13、IOS android取值
    var sVal=encodeURIComponent($$(“search”).value);
    if(!isAndroid){
    var sVal=$$(“search”).value;
    }
    14、文本分散对齐
    iOS
    .tx-w{text-align:justify;text-justify:distribute-all-lines; text-align-last:justify; display:inline-block;}
    Android
    15、如果打包成功后,仅在iOS上面安装验证失败,则考虑上传代码中,页面name有汉字或者有不可识别文件格式,例如.psd文件

  • html5本地存储-localStorage

    html5本地存储有两类。
    localStorage -一般保存在客户端计算机,在移动端浏览器中,一般情况是永久保存
    sessionStorage – 数据保存在当前会话中,或者当前窗口,当前窗口新建的窗口,相关联的标签

    1、在使用之前先检查浏览器是否可以支持Web Storage。

    if(window.localStorage){ 
    } 
    if(window.sessionStorage){
    }

    2、赋值和调取

    var userData={
    name:"www",
    account:"san",
    level:2,
    disbled:true
    }
    //存储userData数据
    localstorage.setItem("userData",JSON.stringify(userData));
    
    //读取userData并赋值给新变量
    var newUserData=JSON.parse(localStorage.getItem("userData"))

     

    3、删除数据

    //删除本地存储的key为那么的Item
    localStorage.removeItem("name");
    
    //删除localStorage所有key/value键值对,Item
    localStorage.clear()

     

    PS:JSON.stringify()把字符串转换成对象;JSON.parse()把对象转换成原来的数据格式。

    手机App实例:

    /**
    * localStorage保存数据
    * @param String key 保存数据的key值
    * @param String value 保存的数据
    */
    function setLocVal(key,value){
    window.localStorage[key] = value;
    }

    /**
    * 根据key取localStorage的值
    * @param String key 保存的key值
    */
    function getLocVal(key){
    if(window.localStorage[key])
    return window.localStorage[key];
    else
    return “”;
    }

    /**
    * 清除缓存
    * @param String key 保存数据的key,如果不传清空所有缓存数据
    */
    function clearLocVal(key){
    if(key)
    window.localStorage.removeItem(key);
    else
    window.localStorage.clear();
    }

    a页面存储

    function openDetails(i){
    var Arr=[‘投保指南’,’投保流程’,’常见问题’];
    setLocVal(‘mName’,JSON.stringify(Arr[i]));
    setLocVal(‘mNo’,JSON.stringify(i)); //
    openNewWin(‘wytb’, ‘wytb.html’);
    }

    b列表页面接收

    var mN = JSON.parse(getLocVal(“mN”));
    var mNn = JSON.parse(getLocVal(“mNo”));

    function showGoods(){
    $toast(‘数据加载中…’);
    if(mNn==2){
    $closeToast();
    $.getJSON(mN, function(data){
    if (status==0&&data&&data.data.length) {
    $closeToast();
    var arrData = data.data;
    var tmpl = ‘<div class=\”ub ub-ac ub-pc ub-pj uinn umar-t c-wh\” ontouchstart=\”zy_touch(\’t-org\’)\” onmousedown=\”zy_touch(\’t-org\’);\” onclick=\”openDetails(\’${href}\’);\”>’
    +'<div class=”ulev-app2″>${title}</div>’
    +'<div class=”arrow ub-img umwh”>’
    +'</div>’
    +'</div>’
    var s = zy_tmpl(tmpl, arrData, zy_tmpl_count(arrData));
    $$(‘mytb’).innerHTML=s;
    Imgclick();
    }else {
    $$(‘mytb’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
    }
    });
    }else{
    $.getJSON(mN, function(data){
    if (data&&data.length) {
    $closeToast();
    var arrData = data;
    arrData=JSON.stringify(arrData);
    arrData=arrData.replace(/height.*?\/>/gi,”\/>”);
    arrData=JSON.parse(arrData);
    var tmpl = ‘<div class=\”uba b-gra ub ub-ver c-wh uinn umar-t\”>’ +
    ‘<div class=\”ubb b-gra ub uinn3\”>’ +
    ‘<div class=\”t-org ulev-app2\”>${title}</div>’ +
    ‘</div>’ +
    ‘<div class=\”uinnh1 t-gra1 ulev-app2 c-wh\”>’ +
    ‘<span>${text}</span>’ +
    ‘</div>’ +
    ‘</div>’
    var s = zy_tmpl(tmpl, arrData, zy_tmpl_count(arrData));
    $$(‘mytb’).innerHTML=s;
    Imgclick();
    }else {
    $$(‘mytb’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
    }
    });
    }
    }

    //打开详情页面
    function openDetails(url){
    setLocVal(‘mHref’,JSON.stringify(lPath+’?url=’+url));//存值
    openNewWin(‘wytb_detail’,’wytb_detail.html’);
    }

    //手机相册调取
    function Imgclick(){
    var Img = document.getElementsByTagName(‘img’);
    for (var i = 0; i < Img.length; i++) {
    Img[i].onclick=function(){
    uexImageBrowser.open([this.src]);
    }
    }
    }

     

    c页面-详情页面

    function sortList(){
    $$(‘Info’).innerHTML=””;
    $toast(‘数据加载中…’);
    $.getJSON(liPath, function(data){
    $closeToast();
    if (data!=0) {
    data.content=data.content.replace(/FONT-SIZE: 12pt/gi,””);

    //详情模板

    var liPath = JSON.parse(getLocVal(“mHref”));
    var tmpl = ‘<div class=”ubb b-gra ub uinn3″>’
    +'<div class=”t-org ulev-app2″>’+data.title+'</div>’
    +'</div>’
    +'<div class=”uinnh1 t-gra1 ulev-app2 c-wh”>’
    +'<span>’+data.content+'</span>’
    +'</div>’;
    $$(‘Info’).innerHTML=tmpl;
    }
    else {
    $$(‘Info’).innerHTML= ‘<div class=”ub ub-ac ub-pc uinn”>暂时没有数据</div>’;
    }
    });
    }

     

     

     

     

  • 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>