设置点击文本框或图片弹出日历控件的实现代码

2017年02月06日 10 阅读

<input id="startDate" value="" readonly="true" type="text" style="cursor: pointer" class="user_datepicker "><input class="canlderImg" data-tag="start" type="image" src="../../i/canlder1.png"><span>结束:</span>...

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

2017年02月06日 9 阅读

大家对Bootstrap框架知识了解多少Bootstrap是一个前端的技术框架，很多平台都可以采用，JAVA/PHP/.NET都可以用来做前端界面，整合JQuery可以实现非常丰富的界面效果，目前也有很多Bootstrap的插件能够提供给大家使用，但是在国内很多基于Bootstrap的介绍很多还是停留在教学的基础上，介绍Bootstrap的各种基础知识和简单的使用；本文希望以基于C#的MVC实际项目的基础上，对Bootstrap开发框架进行全面的案例介绍，...

20分钟轻松创建自己的Bootstrap站点

2017年02月06日 10 阅读

本文的主要目的让你在20分钟内学会使用twitter bootstrap创建一个站点，如何建立站点，下文为大家介绍：首先需要说的是twitter bootstrap是非常优秀的一个前端开源框架，它为所有的组键都提供了详细的用例，让你能够轻易地通过复制黏贴而附加到你的设计中。基本的HTML模板我们需要以一个基本的HTML模板，这样我们能够把所需要的bootstrap文件包含进来。下面就是我们twitter bootstrap项目的开头，复制这些代码到一个文件...

去除字符串左右两边的空格（实现代码）

2017年02月06日 10 阅读

在日常工作中，过滤表单中的一些特殊的字符是很常见的功能，比如文本中要求输入单纯的数字，但用户有时会误输入一些多余的空格或其他字符混合的文本，这显然不符合输入要求。下面一起来学习怎么样去除字符串左右两边的空格。过滤前： 过滤后： HTML代码： <div class="main"> <input id="userName" type="text" placeholder="请输入用户名"> <input id="rule" ...

基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

2017年02月06日 10 阅读

在上篇基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理，介绍了Bootstrap开发框架的一些基础性概括，包括总体界面效果，以及布局、菜单等内容，本篇继续这一主题，介绍页面内容常用到的数据分页处理，以及Bootstrap插件JSTree的使用。在数据的界面显示当中，表格数据的展示以及分页是非常常见的处理操作，利用Bootstrap的样式布局，以及JQuery的Ajax数据处理，就能很好实现数据的动态展示和分页处理。1、...

20分钟成功编写bootstrap响应式页面 就这么简单

2017年02月06日 10 阅读

最近发现一个叫 Bootstrap 的好东西，Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备。使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了 Bootstrap 后，再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap，并且带领大家一起实现一个响应式页面。图 1. 移动优先，适应不同设备一...

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

2017年02月06日 10 阅读

在上篇基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用，介绍了数据的分页处理，使用了Bootstrap Paginator插件，另外对树形列表，采用了JSTree插件，本篇继续介绍在编辑页面中常用到的控件Select2，这个控件可以更加丰富传统的Select下拉列表控件，提供更多的功能和更好的用户体验。1、Select2控件介绍这个插件是基于Select的扩展插件，能够提供更加丰富的功能和用户体验，它的gi...

使用bootstrap3开发响应式网站

2017年02月06日 10 阅读

本文实例为大家分享了bootstrap3响应式网站开发代码，供大家参考，具体内容如下第一次使用bootstrap3,发现对移动支持得不错，可以很快的开发出一个支持移动和PC端的网站。下面就是本文的实例，具体代码：时间线来自国外网站，使用到的css如下.timeline {list-style: none;padding: 20px 0 20px;position: relative;}.timeline:before {top: 0;bottom: 0;p...

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

2017年02月06日 10 阅读

在前面的一篇随笔基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理,介绍了菜单模块的处理，主要介绍如何动态从数据库里面获取记录并构建菜单列表。其中菜单信息的图标样式，也是从数据库里面获取的，因此要求我们能够动态取得Bootstrap里面的各种图标定义了。本篇主要介绍如何提取Bootstrap的图标信息，存储到数据库里面为我所用。1、菜单的显示及各种Bootstrap图标我们从下图可以看到，为了菜单的美观，每个菜单项（这里...

基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

2017年02月06日 10 阅读

Bootstrap文件上传插件File Input是一个不错的文件上传控件，但是搜索使用到的案例不多，使用的时候，也是一步一个脚印一样摸着石头过河，这个控件在界面呈现上，叫我之前使用过的Uploadify 好看一些，功能也强大些，本文主要基于我自己的框架代码案例，介绍其中文件上传插件File Input的使用。1、文件上传插件File Input介绍这个插件主页地址是：http://plugins.krajee.com/file-input，可以从这里看到...

基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化

2017年02月06日 10 阅读

在各种Web开发过程中，对话框和提示框的处理是很常见的一种界面处理技术，用得好，可以给用户很好的页面体验，Bootstrap开发也一样，我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据，删除则可能使用一个提示确认框，如果操作成功，我们可以使用更丰富的提示框来处理，本篇主要对比说明在Bootstrap开发中用到的这些技术要点。1、Bootstrap对话框的使用常规的Bootstrap有几种尺寸的对话框，包括默认状态的小对话框，中等宽...

基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理

2017年02月06日 11 阅读

在很多系统模块里面，我们可能都需要进行一定的数据交换处理，也就是数据的导入或者导出操作，这样的批量处理能给系统用户更好的操作体验，也提高了用户录入数据的效率。本文基于Bootstrap的框架基础上，再对这个模块进行更新处理，以及Office文档或者图片等附件的查看处理。1、数据的导入操作一般系统模块里面，都有数据导入和导出操作，因此在界面自动生成的时候，我都倾向于给用户自动生成这些标准的查询、导入、导出等操作功能，界面效果如下所示。导入操作，在Bootst...

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

2017年02月06日 10 阅读

本文主要介绍这个Bootstrap框架的总体性功能界面，介绍其中用到的知识点和整体性的界面。希望读者对框架有一个更加直观、真实的认识了解，界面设计以及相关思路可以借鉴提高，也可以对相关的内容进行相互探讨，共同提高。1、《基于Metronic的Bootstrap开发框架》技术特点1）采用最新最炫的Bootstrap响应式框架技术整个基于Metronic的Bootstrap开发框架，界面部分采用较新的Bootstrap技术，采用当前最新的Bootstrap3....

基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作

2017年02月06日 10 阅读

本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识，一起学习吧！1、Web页面打印的问题在此之前，我一般使用比较好用的LODOP来执行打印的操作，这个在我之前有很多文章都有涉及，这个控件是一个ActiveX的控件，需要下载安装后就可以在页面是进行打印的排版设计，预览，打印等操作，还是很方便的一个控件，因此都很适合普通内容的打印，证件的套打等操作。不过随着浏览器技术的更新，这个插件在Chrome或者FireFox上好像不受支持了，基本上摒弃...

深入浅析JavaScript中with语句的理解

2017年02月06日 10 阅读

JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象.with语句的作用是暂时改变作用域链、减少的重复输入。其语法结构为： with（object）{ //statements } 举一个实际例子吧： with（document.forms[]）{ name.value = "lee king"; address.value = "Pekin...

jQuery CSS3自定义美化Checkbox实现代码

2017年02月06日 10 阅读

效果图：是不是比默认的好看多了，个人的审美观应该还是可以的。接下来我们一起来看看实现这款美化版Checkbox的源代码，主要思路是利用隐藏原来的checkbox和radiobox，用一个div来模拟checkbox/radiobox，并使用jQuery来完成选择切换时的动画效果。先来看看HTML代码：<div class="wrapper"><ul> <li><p>Gender:</p> <...

使用jQuery.form.js/springmvc框架实现文件上传功能

2017年02月06日 10 阅读

使用的技术有jquery.form.js框架， 以及springmvc框架。主要实现异步文件上传的同时封装对象，以及一些注意事项。功能本身是很简单的，但是涉及到一些传递参数类型的问题。例如：jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数，具体细节将在下一篇博客中分享。重点： html表格三要素： action="fileUpload/fileUpload" method="post" enctype="multi...

JavaScript的模块化开发框架Sea.js上手指南

2017年02月06日 10 阅读

Sea.js所有源码都存放在 GitHub 上：https://github.com/seajs/examples，目录结构为：examples/ |-- sea-modules 存放 seajs、jquery 等文件，这也是模块的部署目录 |-- static存放各个项目的 js、css 文件 | |-- hello | |-- lucky | `-- todo `-- app 存放 html 等文件|-- hello.html|-- lucky.htm...

判断JS对象是否拥有某属性的方法推荐

2017年02月06日 10 阅读

两种方式，但稍有区别1，in 运算符var obj = {name:"jack"}; alert（"name" in obj）; // --> true alert（"toString" in obj）; // --> true 可看到无论是name，还是原形链上的toString，都能检测到返回true。2，hasOwnProperty 方法var obj = {name:"jack"}; obj.hasOwnProperty（"name"）...

jQuery中$.each（）函数的用法引申实例

2017年02月06日 10 阅读

语法：$.each（ collection, callback（indexInArray, valueOfElement） ） 值得一提的是，forEach 可以很方便的遍历数组和 NodeList ，jQuery 中的 jQuery 对象本身已经部署了这类遍历方法，而在原生 JavaScript 中则可以使用 forEach 方法，但是 IE 并不支持，因此我们可以手动把 forEach 方法部署到数组和 NodeList 中:if （ ！Array.p...