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

    效果图:

  • 相关阅读:
    VC编程规范
    socket编程FTP客户端demo
    Win7下微软拼音等中文输入法默认英文标点解决办法
    <转载>一般筛法和快速线性筛法求素数
    聚类算法的设计与实现
    面试题集锦_7
    面试题集锦_8
    中点画线算法程序
    HTML解析类 ,让你不使用正则也能轻松获取HTML相关元素 C# .NET
    .NET C# 使用S22.Imap.dll接收邮件 并且指定收取的文件夹的未读邮件,并且更改未读准态
  • 原文地址:https://www.cnblogs.com/fengjian/p/3037971.html
Copyright © 2011-2022 走看看