• css custome checkbox style in sench list


         itemTpl : new Ext.XTemplate(
                    '<tpl for=".">',
                    '<table style="100%"><tr>',
                    '<td class="reportname" title="reportname">{ReportName}</td>',
                    '<td class="categoryname" title="categoryname"> {DisplayName} </td>',
                    '<td class="date" title="date">',
                    '<tpl if ="DDate">{DDate}',
                    '<tpl elseif="MDate">{MDate}',
                    '</tpl></td>',
                    '<td class="alias" title="alias">{ReportAlias}</td>',
                    '<td class="email" title="email">{EMail}</td><td class="status" title="status">',
                    '<tpl if ="Status == 0">',
                    '<img title="statusimg" src="' + imageDomainUrl
                            + 'resources/images/red.png' + '">',
                    '<tpl elseif="Status == 1">',
                    '<img title="statusimg" src="' + imageDomainUrl
                            + 'resources/images/orange.png' + '">',
                    '<tpl elseif="Status == 2">',
                    // '<p class="geneIcon">Generated</p>',
                    '<p class="genedate" title="statusdate">{RunDate}<img title="statusimg" src="'
                            + imageDomainUrl + 'resources/images/green.png'
                            + '"></p>',
                    '</tpl>',
                    '</td>',
                    '<td class="check" title="check">',
                    '<tpl if ="IncludeInJob">',
                    '<input type="checkbox" checked class="reportCheckBox" title="itemCheckBox"/>',
                    '<tpl else>',
                    '<input type="checkbox" class="reportCheckBox" title="itemCheckBox"/>',
                    '</tpl>', '</td>', '</tr></table>', '</tpl>')

     上面是sencha list的itemTpl..............

    sench touch list 中嵌入checkbox,自定义其样式,来符合mobile端style

    <input type="checkbox" checked class="reportCheckBox"/>

    css:

    .reportCheckBox {
    background: url(../images/check2.png) no-repeat center center;
    -webkit-appearance: none;
    border: none;
    display: inline-block;
    font-size: 15px;
    padding: 0;
    width: 1.65em;
    height: 1.65em;
    -webkit-border-radius: 0.25em;
    vertical-align: middle;
    }
    
    input[type=checkbox]:checked {
    background: url(../images/check.png) no-repeat center center;
    }

    这是需要的图片:check2.png  check.png

    效果图:

  • 相关阅读:
    动态规划Dynamic Programming: Rod-Cutting Problem
    递归详解,全排列问题
    获取网站根目录Url
    oracle中操作表和权限
    mongo简单封装
    dapper的简单封装
    反射做字段更新日志
    nopcommerce +autofac +owin +webapi
    批处理命令执行程序
    MSMQ的简单使用
  • 原文地址:https://www.cnblogs.com/fengjian/p/3037971.html
Copyright © 2020-2023  润新知