前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端表单帮助文档

前端表单帮助文档

作者头像
用户1149182
发布2020-10-28 11:29:55
2.1K0
发布2020-10-28 11:29:55
举报

1.单选框

代码语言:javascript
复制
 @Html.RadiosFor("Sex", "09:30-10:30", new string[] { "1", "2", "3" }, new string[] { "男", "女", "未定" })     

获取选中值

代码语言:javascript
复制
  //radio改变时候获取到值
  $('input[type=radio][name=TimeBetween]').change(function () {
        var val =$("input[name='TimeBetween']:checked").val();
  });

2.复选框

代码语言:javascript
复制
   @Html.ChecksFor("ckLable", Model.Lable, new string[] { "客厅", "餐厅", "卧室"}, new string[] { "客厅", "餐厅", "卧室"})

获取选中的值逗号隔开

代码语言:javascript
复制
        var ids = new Array();
            //获取所有选中的值,将其用逗号隔开
            $('input[name="ckLable"]:checked').each(function (index, value) {
                ids.push($(this).val());
            })
            $("#Lable").val(ids.join(','));

3.日期格式

代码语言:javascript
复制
<input id="BeginTime" name="BeginTime" value="" type="text" class="Wdate" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss', isShowToday: true, isShowClear: false,lang:'zh-cn' })" />

4.DataGri行内状态样式

代码语言:javascript
复制
<span class='label label-success'>成功</span>
<span class='label label-error'>失败</span>
<span class='label label-info'>信息</span>
<span class='label label-warning'>警告</span>

5.DataGrid操作按钮样式

代码语言:javascript
复制
{
                    field: 'Oper', title: '@Resource.操作', width: 80, sortable: false, align: 'center', formatter: function (value, row, index) {
                        return "<a class='fa fa-plus btn-icon-success' title='Create' onclick='Create(\"" + row.Id + "\");'></a>" +
                            "<a class='fa fa-pencil btn-icon-warning' title='Edit' onclick='Edit(\"" + row.Id  + "\");'></a>" +
                            "<a class='fa fa-trash btn-icon-danger' title='Delete' onclick='Delete(\"" + row.Id  + "\");'></a>";
                   }
},

6.Tips提示信息框

代码语言:javascript
复制
<div class="showtip" id="showtip">
    <div>
        Tips:这是一条信息帮助的提示
    </div>
</div>

7.超链接

代码语言:javascript
复制
<div><a href="#" class="a-org a-unline">橘红色</a></div>
    <div><a href="#" class="a-blue a-unline">蓝色</a></div>
    <div><a href="#" class="a-red a-unline">红色</a></div>
    <div><a href="#" class="a-black a-unline">黑色</a></div>
    <div><a href="#" class="a-org a-unline">橘红色带下划线</a></div>
    <div><a href="#" class="a-blue a-unline">蓝色带下划线</a></div>
    <div><a href="#" class="a-red a-unline">红色带下划线</a></div>
    <div><a href="#" class="a-black a-unline">黑色带下划线</a></div>

注:后面会继续补充

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-05-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.单选框
  • 2.复选框
  • 3.日期格式
  • 4.DataGri行内状态样式
  • 5.DataGrid操作按钮样式
  • 6.Tips提示信息框
  • 7.超链接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档