xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > CSS3自定义美化Checkbox实现代码,列表分页处理和

CSS3自定义美化Checkbox实现代码,列表分页处理和

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-10 21:40

首先先感谢朋友们对小编的支持,关注小编的文章,和小编一起学习进步,一直的陪伴,小编也一定会再接再厉,为大家分享更多精彩的文章。

效果图:

在上篇基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局、菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用。

在分享的过程中遇到了一些问题,这也给了我很大的启发,大家在搜索相关文章时都没有针对此类问题进行的系统整理文章,这也是小编需要在今后进行改进的。

图片 1

在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理。

所以本文就吸取这个经验,针对Bootstrap教程进行系统整理,希望对大家的学习有所帮助,便于大家学习。

是不是比默认的好看多了,个人的审美观应该还是可以的。

1、列表展示和分页处理1)数据的列表展示

小编的水平能力都很有限,还望大牛多给一些建议和看法,帮助小编进行改正和提高,如果文中确有不妥之处,还请谅解。希望能和大家共同成长,共同进步,感受到分享的快乐。

接下来我们一起来看看实现这款美化版Checkbox的源代码,主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。

在很多页面里面,我们一般都需要对数据库记录进行列表展示并进行分页。

下面就进入主题:

先来看看HTML代码:

图片 2

BootStrap3.0系列导航总体规划大致主要分为五个部分

<div class="wrapper">
  <ul>
   <li>
    <p>Gender:</p>
   </li>
   <li>
    <input type="radio" name="radio-btn" />Male
   </li>
   <li>
    <input type="radio" name="radio-btn" />Female
   </li>
  </ul>
  <ul>
   <li>
    <p>推荐网站:</p>
   </li>
   <li>
    <input type="checkbox" name="check-box" /> 何问起

   </li>
   <li>
    <input type="checkbox" name="check-box" /> 柯乐义

   </li>
   <li>
    <input type="checkbox" name="check-box" /> hwq2.com

   </li>
   <li>
    <input type="checkbox" name="check-box" /> hovertree.net

   </li>
  </ul>
 </div>

左侧的树列表下面小节介绍,右边就是我们一般的数据查询显示区域,分为查询内容和数据列表两部分,查询内容,我们一般放在一个表单里面进行处理,用户触发查询的时候,我们对事件进行处理,并从MVC后台的控制器里面请求对应的数据返回给页面前端,对数据进行显示和分页处理即可。

一、Bootstrap 介绍

然后我们用jQuery代码来为每一个checkbox和radiobox创建一个div,这个div的classname为check-box和radio-btn。

如菜单页面的查询代码如下所示。

二、Bootstrap 基础知识

$("input[name="radio-btn"]").wrap("<div class="radio-btn"><i></i></div>");
$("input[name="check-box"]").wrap("<div class="check-box"><i></i></div>");

 <form class="form-horizontal" id="ffSearch">
   <div class="col-md-3 col-sm-3 col-xs-6">
    <div class="form-group">
    <label class="control-label col-md-4">显示名称</label>
    <div class="col-md-8">
     <input name="WHC_Name" type="text" class="form-control">
    </div>
    </div>
   </div>
   <div class="col-md-3 col-sm-3 col-xs-6">
    <div class="form-group">
    <label class="control-label col-md-4">功能ID</label>
    <div class="col-md-8">
     <input name="WHC_FunctionId" type="text" class="form-control">
    </div>
    </div>
   </div>
   <div class="col-md-3 col-sm-3 col-xs-6">
    <div class="form-group">
    <label class="control-label col-md-4">Web连接地址</label>
    <div class="col-md-8">
     <input name="WHC_Url" type="text" class="form-control">
    </div>
    </div>
   </div>
   <div class="col-md-3 col-sm-3 col-xs-6">
    <div class="form-group">
    <label class="control-label col-md-4">Web菜单图标</label>
    <div class="col-md-8">
     <input name="WHC_WebIcon" type="text" class="form-control">
    </div>
    </div>
   </div>
   </form>

三、Bootstrap Component 组件教程

那么我们接下来要让原来的checkbox隐藏,同时设置模拟div的样式:

我们在页面的JS代码里面,处理页面初始化后,对数据进行查询的处理操作,如下脚本所示。

四、Bootstrap JavaScript Plug-in 插件教程

.radio-btn input[type="radio"], .check-box input[type="checkbox"] {
 visibility: hidden;
}


.check-box {
 width: 22px;
 height: 22px;
 cursor: pointer;
 display: inline-block;
 margin: 2px 7px 0 0;
 position: relative;
 overflow: hidden;
 box-shadow: 0 0 1px #ccc;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 background: rgb(255, 255, 255);
 background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ededed", GradientType=0);
 border: 1px solid #ccc;
}
.check-box i {
 backgroundnull:url("http://hovertree.com/texiao/html5/32/css/check_mark.png") no-repeat center center;
 position: absolute;
 left: 3px;
 bottom: -15px;
 width: 16px;
 height: 16px;
 opacity: .5;
 -webkit-transition: all 400ms ease-in-out;
 -moz-transition: all 400ms ease-in-out;
 -o-transition: all 400ms ease-in-out;
 transition: all 400ms ease-in-out;
 -webkit-transform:rotateZ(-180deg);
 -moz-transform:rotateZ(-180deg);
 -o-transform:rotateZ(-180deg);
 transform:rotateZ(-180deg);
}
.checkedBox {
 -moz-box-shadow: inset 0 0 5px 1px #ccc;
 -webkit-box-shadow: inset 0 0 5px 1px #ccc;
 box-shadow: inset 0 0 5px 1px #ccc;
 border-bottom-color: #fff;
}
.checkedBox i {
 bottom: 2px;
 -webkit-transform:rotateZ(0deg);
 -moz-transform:rotateZ(0deg);
 -o-transform:rotateZ(0deg);
 transform:rotateZ(0deg);
}
/*Custom radio button*/
 .radio-btn {
 width: 20px;
 height: 20px;
 display: inline-block;
 float: left;
 margin: 3px 7px 0 0;
 cursor: pointer;
 position: relative;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
 border: 1px solid #ccc;
 box-shadow: 0 0 1px #ccc;
 background: rgb(255, 255, 255);
 background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ededed", GradientType=0);
}
.checkedRadio {
 -moz-box-shadow: inset 0 0 5px 1px #ccc;
 -webkit-box-shadow: inset 0 0 5px 1px #ccc;
 box-shadow: inset 0 0 5px 1px #ccc;
}
.radio-btn i {
 border: 1px solid #E1E2E4;
 width: 10px;
 height: 10px;
 position: absolute;
 left: 4px;
 top: 4px;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
}
.checkedRadio i {
 background-color: #898A8C;
}/* 何问起 hovertree.com */
 //页面初始化
 $(function () {
  initJsTree(); //初始化树
  BindEvent(); //绑定事件处理
  Search(currentPage);//初始化第一页数据
  InitDictItem(); //初始化字典信息
 });

五、Bootstrap 经典实例分享

上面这段CSS3代码就是用样式来自定义div,让div的样式和checkbox和radiobox一样。

而数据的显示部分,HTML代码如下所示。主要就是显示了表头内容,表格的主体内容grid_body则有脚本动态构建并显示

六、Bootstrap 学习笔记

最后我们来模拟点击选中和取消选中,这部分也是用jQuery来实现:

<table id="grid" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
   <thead id="grid_head">
    <tr>
    <th class="table-checkbox" style="width:40px"><input class="group-checkable" type="checkbox" onclick="selectAll(this)"></th>
    <th>显示名称</th>
    <th>排序</th>
    <th>功能ID</th>
    <th>菜单可见</th>
    <th>Web连接地址</th>
    <th>Web菜单图标</th>
    <th>系统编号</th>
    <th style="width:90px">操作</th>
    </tr>
   </thead>
   <tbody id="grid_body"></tbody>
   </table>
   <div class="paging-toolbar">
   <ul id='grid_paging'></ul>
   </div>

第一部分:**Bootstrap介绍**

$(".radio-btn").on("click", function () {
 var _this = $(this),
  block = _this.parent().parent();
 block.find("input:radio").attr("checked", false);
 block.find(".radio-btn").removeClass("checkedRadio");
 _this.addClass("checkedRadio");
 _this.find("input:radio").attr("checked", true);
});



$.fn.toggleCheckbox = function () {
 this.attr("checked", !this.attr("checked"));
}
$(".check-box").on("click", function () {
 $(this).find(":checkbox").toggleCheckbox();
 $(this).toggleClass("checkedBox");
});/* 何问起 hovertree.com */

而数据的显示,是在页面准备完成后,通过Search脚本函数进行处理,处理的时候,先序列号表单的条件和分页的条件信息,传入MVC控制器,获取对应的列表数据,在界面上进行动态绑定即可完成整个处理过程了。具体代码截图如下所示。

1.开启BootStrap学习之旅 //www.jb51.net/article/83510.htm

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

图片 3

2.Bootstrap每天必学之简单入门 //www.jb51.net/article/75154.htm

您可能感兴趣的文章:

  • 利用jQuery实现CheckBox全选/全不选/反选的简单代码
  • jquery获取复选框checkbox的值实现方法
  • jquery获取复选框checkbox的值的简单实现方法
  • jquery判断checkbox是否选中及改变checkbox状态的实现方法
  • jquery获取所有选中的checkbox实现代码
  • JQuery点击行tr实现checkBox选中的简单实例
  • jQuery判断checkbox选中状态
  • jQuery 更改checkbox的状态,无效的解决方法

而其中的代码

第二部分:**Bootstrap 基础知识**

tr  = getActionHtml(item.ID);

3.Bootstrap每天必学之栅格系统(布局)//www.jb51.net/article/75386.htm

则是通过脚本生成一些操作按钮,界面如下所示。

4.学习使用bootstrap3栅格系统 //www.jb51.net/article/82291.htm

图片 4

5.Bootstrap每天必学之基础排版 //www.jb51.net/article/75181.htm

2)数据分页处理

6.Bootstrap每天必学之表格 //www.jb51.net/article/75249.htm

我们页面显示的数据一般不是固定的记录,因此分页也是很必要的处理,可以提高性能,也可以提高用户的友好体验,其中的数据分页是采用了Bootstrap的插件Bootstrap Paginator进行处理的。这个控件用的很多,是一个很强大的分页插件。

7.Bootstrap每天必学之表单 //www.jb51.net/article/75285.htm

Bootstrap Paginator它的GitHub代码地址为:

8.Bootstrap每天必学之按钮 //www.jb51.net/article/75457.htm

它的使用例子介绍,可以参考:

第三部分:**Bootstrap Component 组件教程**

该控件使用的时候,引入Jquery和Bootstrap样式和类库后,通过下面的代码行即可添加使用。

9.Bootstrap每天必学之下拉菜单 //www.jb51.net/article/75392.htm

<script src="/js/bootstrap-paginator.min.js"></script>

10.Bootstrap每天必学之导航 //www.jb51.net/article/75462.htm

该控件分页可以通过处理page-clicked和page-changed事件进行实现。

11.Bootstrap每天必学之导航条 //www.jb51.net/article/75534.htm

分页展示内容,我们通过在HTML代码里面添加一个DIV进行,声明一个ID为grid_paging的UL元素,代码如下所示。

12.Bootstrap每天必学之标签与徽章 //www.jb51.net/article/75537.htm

 <div class="paging-toolbar">
  <ul id='grid_paging'></ul>
 </div>

13.Bootstrap每天必学之缩略图与警示窗 //www.jb51.net/article/75590.htm

然后具体的JS里面处理代码如下所示。

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:CSS3自定义美化Checkbox实现代码,列表分页处理和

关键词: bbin手机客户端