zoukankan      html  css  js  c++  java
  • 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

    效果图:

  • 相关阅读:
    Java 对文件的操作
    快速排序算法
    Java 时间和字符换的处理
    Redis 数据结构之Keys
    [转] Redis系统性介绍
    【转】JAVA 接口
    [转] Python 代码性能优化技巧
    几道关于面试的题目
    随手笔记2
    随手笔记
  • 原文地址:https://www.cnblogs.com/fengjian/p/3037971.html
Copyright © 2011-2022 走看看