一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

[转]阻止浏览器记住密码功能干扰表单填充

这里先不说废话，我知道有4种方法，具体可以详细去试试看，针对不同的浏览器有不同的方法： 1.把input type=”password” 改成 input type=”text” 并在后面加上 onfocus=”this.type=’password’”， 2.在文档加载完成后将密码输入框设置为空： window.load = function(){ document.getElementById('密码域ID').value="; }; 3.在用户名和密码之间加上一个隐藏的文本框： <input type="text" name="name"> <input type="hidden"> <input type="password" name="pass"> 4.使用html5的属性： <pre name="code" class="html"><input type="text" name="name" autocomplete="off"> <input type="password" name="pass" autocomplete="off"> from:http://blog.csdn.net/playboyanta123/article/details/43795643

1

龙生 28 Jul 2015

2015 年最棒的 5 个 HTML5 框架

Aside 2015年7月25日龙生

大多数的 web 开发者一直在用关键点来寻找动态的框架，这样能简化他们的设计和开发工作。

HTML5 框架在所有的 web 浏览器和手机应用上都展现了优秀的性能。它不仅简化了 HTML5 开发中 CSS 开发的沉重负担，还提高了网站的可见性。主要的原因是 HTML5 提供了独有的特征，例如特殊的架构标签，动画，浏览器支持等。

最近，大量的 HTML5 框架在行业内可免费获得，这使得 HTML5 开发者们不知道到底哪一个框架才是最好的。为了避免上述问题，本文在下面会列出 2015 年最流行的 5 个框架，让我们一起以一个简单的方式来开始讨论吧。

如果你是 web 设计者并准备用 HTML5 进行设计工作，现在是时候开始阅读了。

Ionic 是一个神奇的框架和强大前端开源系统，使用先进的 web 技术比如 CSS、HTML 和 JS 来创建令人惊叹的手机应用。它已经定制了在所有手机设备上的快速操作，并且确保简单的功能和大量的手机组件。

您可以通过一个命令创建来测试和使用基于任何平台上的 ionic 应用。此外，该框架为它自己的组件提供了一套 Angular 指令（自定义的 HTML 元素），从而使它可以简单的编写一行 HTML 代码。类似指令，它使用视图动画逻辑，异步通信，Angular 的触摸识别和 HTML 清洁处理。

Siimpler

Siimpler 是一个简单的 HTML 开发框架，他可以通过选择你自己喜欢的部分，来帮助你快速又简单的创建 HTML5 开发结构。根据你的项目需求，你可运用 Siimpler 开发你自己熟悉的前端结构。网络设计者们也可以通过使用 Siimpler 框架类的文件和文件夹来无缝的开始一个 web 项目。

Foundation

Foundation 是世界上最精妙的前端响应框架，同时，它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口，并且获得了许多的原件来帮助你快速又完美的建立一个响应站点。Foundation 设置了许多关键的特性，例如 HTML，CSS UI 原件，模板，小代码块，含有按钮，表单，字体，导航等功能的响应组件。

针对于所有的最新的桌面浏览器和触屏设备，LimeJS 对于有用户经验的游戏开发者而言是最好的和最强大的开发框架。LimeJS 对于在线游戏开发而言能够带来更好的功能和更快的开发过程，而且适合所有的浏览器和触屏设备。

Enyo 是一个开源的 JavaScript 框架，该框架能够让你创建顶级的 HTML5 应用程序，该应用程序能够运行在各种各样的电子设备上，比如说手机，台式机，笔记本，电视，以及 web 应用。对于很多流行的手机公司开发的重要应用都是采用该框架实现的。

最后：

这篇文章谈论的是对于一个 HTML 开发公司的独特的功能，操作，需求，以及 HTML5 框架的最好的表现。

from:http://www.oschina.net/translate/top-html5-frameworks-in-2015

JavaScript超轻量级框架——Nuclear

Nuclear 是腾讯 AlloyTeam 团队开发的一款形似 React 的超轻量级框架(大小16k，gzip后6k)。纯粹的javascript Nuclear不需要jsx，你只需要使用纯粹的javascript就可以使用面向对象的方式去编写各式各样的组件。Nuclear的目标是让布局、样式、数据、事件、行为完全独立，让程序更加易维护、可扩展。 HTML+CSS Nuclear没有虚拟Dom的概念，完整支持HTML和CSS所有功能，你完全可以使用HTML+CSS进行页面布局排版，放心使用HTML5和CSS3大量的酷炫特性吧！ observejs Nuclear使用observejs进行数据变更监听通知视图全部刷新或者局部刷新，以空间换取时间的方式提高应用程序的性能。简单的示例

1

2

3

4

5

6

var HelloMessage = Nuclear.create({

render: function () {

return '<div>Hello , {{name}} !</div>';

}

})

new HelloMessage("#helloContainer", { name: "Nuclear" });

Nuclear通过Nuclear.create方法创建结构型组件和非结构型组件，这个例子就是结构型组件。创建结构型必须包含render()方法，该方法返回渲染的模板，Nuclear使用mustache.js作为模板渲染引擎，创建组件new HelloMessage的第一个参数是组件的容器，第二个参数就是提供给模板引擎的数据，并且可以任何方法都可通过this.option访问该数据。感谢： observe.js react.js mustache.js class.js 首页：http://alloyteam.github.io/Nuclear/

龙生 09 Jun 2015

20 款超棒免费的 Bootstrap 管理和前端模板

1. SB Admin 2 Details & Download 2. Admin Lite Details & Download 3. Director Responsive Admin Template Free Details & Download 4. Free Bootstrap Admin Template Dream Details & Download 5. Dashgum – Free Dashboard Details & Download 6. Free Responsive Admin Template – Zontal Admin Details & Download 7. Free Download Bootstrap Admin Template Details & Download 8. Janux – Free Responsive Admin Dashboard Template Details & Download 9. Joli – Free Responsive Bootstrap Admin Dashboard Template Details & Download 10. KAdmin – Free Responsive Admin […]

龙生 18 May 2015

10 款免费的 jQuery 图像缩放插件

设计电子商务网站必知的十款免费 jQuery 图像缩放插件 Jquery 图像缩放插件不仅简单易用，而且还能够给予用户更好的体验。你只需要在图像或产品上移动鼠标，你将看到图片或产品的详细信息。今天，我们来分享一些 jQuery 图像缩放插件。事实上，图像缩放是很多在线购物网站最基本的组成部分。如果你是开发人员，你想在网站中使用图像缩放功能的话，推荐你使用下面十款 jquery 图像缩放插件。你可以根据需要，选择任意你想要的图像缩放插件，而且还免费哦。 EasyZoom Demo | Download EasyZoom 是一个 jQuery 图像缩放和平移插件。它支持触摸屏设备，且能用 CSS 来设计你想要的效果。 zoom.js Demo | Download zoom.js 是一款灵巧的 jQuery 图像缩放插件。点击图片，即可放大／缩小你的图片。更有趣的是，只要你滚动图片即可查看过去浏览过的图片。 picZoomer Demo | Download picZoomer 是一个非常小的 jQuery 插件，通过鼠标悬停放大图像，同时支持缩略图实现导航。你可以在电子商务网站使用该插件创建一个产品浏览页面，它允许访问者通过缩略图查看产品的的不同照片，且支持单独放大照片。 jQuery Zoom Demo | Download jQuery Zoom 是一个易于使用的 jQuery 图像缩放插件，你可以通过点击鼠标、抓取动作和切换动作来实现缩放图像。 WM Zoom Demo | Download WM Zoom 能够在图像中创建一个放大镜，并在旁边显示其高清晰度的图像。此外，它内置一个变焦功能，当你的鼠标悬停在图像上，能够放大图像。 BZoom Demo | Download BZoom 支持创建缩略图导航，并支持鼠标悬停时，在旁边显示特定区域的高清晰度图像。 elevateZoom Demo | Download Elevate Zoom 提供了两种图像缩放模式，一个低分辨率的可见光图像和一个高分辨率缩放的图像。且它支持缩略图导航，同时支持鼠标悬停时放大图像。 magnificent.js Demo | Download magnificent.js 是一个简单的响应式插件，能够提供两种缩放模式：模式 1: 内部缩放。悬停时在图像内部显示放大后的图像。模式 2: 外部缩放。显示放大镜玻璃效果，以展示图像的特定部分。也支持鼠标滚动来缩放图片。 zoom.js Demo | Download zoom.js […]

龙生 12 May 2015

为 Web 开发者准备的 15 最棒 AngularJS 工具

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好。目前越来越多的网站会采用 AngularJS 来开发 Web 交互应用（包括：team.oschina.net），本文收集了 15 个使用非常棒的 AngularJS 相关的工具供你参考。 Karma AngularUI Angular fire Angular Deckgrid Yeoman Generator Angular Code Orchestra SublimeText LUMX NG Table Angular GetText Code Orchestra Videogular WebStorm Angular Kickstart Jasmine via developersfeed from:http://www.oschina.net/news/62235/15-best-used-angularjs-tools-for-web-developers

龙生 08 May 2015

为新项目添彩的 10+ 超有用 JavaScript 库

JavaScript 库是一种基础地预写入脚本语言，可以减轻基于应用的 JavaScript 开发，比如 AJAX 和其他以 web 为中心的技术。这些 JavaScript 库常常被称作 JavaScript 框架。比较流行的 JavaScript 库比如 Jquery，MooTools, Prototype, Dojo 和 YUI 都可以很好的完成常见的 JavaScript 任务。这些库的主要用途是编写函数来嵌入或者合并从 HTML 页面和与 DOM 页面的交互。所有的这些框架都有常见的 JavaScript 任务函数，如动画，DOM 操作和 Ajax 处理。JavaScript 编程使得工作更加简单，安全和更加令人振奋。 JavaScript库的特点是能够成为最好的，面向结果的高级特性，如多点触控手势，Js小部件，鼠标捕捉等特性。所以让我们来开一下我们今天列举在 “为新项目添彩的10+超有用JavaScript库”中的所有特性。 Angular.js AngularJS能够让你编写基于客户端的web应用程序犹如你有个智能的浏览器。它可以让你使用旧HTML（或者HAML，Jada和friends!）作为你的模板语言，而且可以让你拓展HTML的语法来简单清晰的表现应用程序的组件。它能够通过双向数据绑定使用JavaScript对象自动同步来自UI上的数据。为了帮你更好的构建你的应用程序，使其容易测试，AngularJS告诉浏览器如何做依赖注入和控制反转。 React React一个构建用户接口的JavaScript库。 Foundation Foundation 是世界上最先进的响应式前端框架。你可以快速地原型和搭建站点或者app在任何带有Foundation 的设备上工作，包括布局构建（如完全响应式的网格），元素和最佳实践。 Meteor Meteor 是一个搭建现代化 web 应用的极为简单环境。 Three.js 此项目的目标在于创建一个轻量级的低复杂性的 3D 库-- 换句话说，就是仿制品。这个库提供<canvas>，<svg>，CSS3D和WebGL渲染器。 Pdf.js PDF.js 是一个便携式文档格式（PDF）查看器，由 HTML5 构建而成。PDF.js 是社区主导的并且由 Mozilla 实验室支持。我们的目标是创建一个一般用途，基于web标准的平台来解析和渲染 PDF。 Backbone Backbone.js 为 web 应用提供了架构，通过提供模型，带有键值对绑定和自定义事件，具有丰富的枚举函数 API 连接，声明事件处理视图，和通过 RESTful JSON 接口连接所有到已存在的 API。 Select2 Select2是select boxes基于jQuery的替代品。它支持搜索，远程数据集和结果分页。 Leaflet Leaflet是一个专为移动友好交互地图设计的开源JavaScript库。它是由来自拥有一个专用贡献者团队MapBox的Vladimir Agafonkin开发的。只有大概30KB的gzip JS代码，它拥有所有许多开发者曾经为在线地图开发的所有特性。 Ionic Ionic是HTML5开源移动框架，用来构建惊人的跨平台混合带有HTML，JavaScript和CSS的原生app。 Vis.js 一个动态的，基于浏览器可视化的库。这个库被设计成易于使用，来处理大量的动态数据，能够处理交互数据。这个库由数据集，时间线，网络Graph2D和Graph3D等组件构成。 Blast.js Blast.js 分隔文本是为了方便排版操作。它有四个内建定界符：字符，单词，句子和元素。另外，Blast也能够匹配自定义的正则表达式和语法。 […]

龙生 07 May 2015

AES（Rijndael）算法的 JavaScript 源代码

下面的内容来自 Rijndael in JavaScript。下面的代码是 Rijndael 算法的 JavaScript 实现。它可以在 IE4+、NS4+ 以及任何兼容 ECMAScript 第一版的浏览器中运行。这个实现没有进行优化，也就是说它不适合处理大量的数据（比如多于几 KB）和需要高速运行的应用程序中。下载: rijndael.js /* rijndael.js Rijndael Reference Implementation Copyright (c) 2001 Fritz Schneider This software is provided as-is, without express or implied warranty. Permission to use, copy, modify, distribute or sell this software, with or without fee, for any purpose and by any individual or organization, is hereby granted, provided that the above copyright notice and this paragraph appear in all copies. Distribution as a part of an application or binary must […]

龙生 18 Apr 2015

Ext.grid.Panel表格分页

Ext.grid.Panel表格分页示例代码： cshtml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Ext.grid.Panel动态加载分页数据</title>

<link href="@Url.Content("~/Scripts/ext-4.0.7-gpl/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/ext-4.0.7-gpl/bootstrap.js")" type="text/javascript"></script>

<script type="text/javascript">

Ext.require([

'Ext.grid.*',

'Ext.toolbar.Paging',

'Ext.data.*'

]);

Ext.onReady(function () {

Ext.define("Province", {

extend: "Ext.data.Model",

fields: [

{ name: "ProvinceID" },

{ name: "ProvinceNo" },

{ name: "ProvinceName" }

]

});

var store = Ext.create("Ext.data.JsonStore", {

pageSize: 10, // 分页大小

model: "Province",

proxy: {

type: "ajax",

url: "/Province/List",

reader: {

type: "json",

root:"root",

totalProperty: 'totalProperty'

}

}

});

store.loadPage(1);

Ext.create("Ext.grid.Panel", {

title: "Ext.grid.Panel",

renderTo: Ext.getBody(),

frame: true,

height: 310,

width: 400,

store: store,

columns: [

{ header: "ID", width: 50, dataIndex: "ProvinceID", sortable: true },

{ header: "编号", width: 100, dataIndex: "ProvinceNo", sortable: true },

{ header: "名称", width: 135, dataIndex: "ProvinceName", sortable: true }

],

bbar: Ext.create('Ext.PagingToolbar', {

store: store,

displayInfo: true,

displayMsg: '显示{0}-{1}条，共{2}条',

emptyMsg: "没有数据"

})

});

});

</script>

</head>

<body>

</body>

</html>

controller

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Northwind.Domain.Entities;

using Northwind.Data;

using Northwind.Service;

namespace Northwind.Web.Controllers

{

public class ProvinceController : Controller

{

private IProvinceService provinceService;

public ProvinceController(IProvinceService provinceService)

{

this.provinceService = provinceService;

}

public ActionResult Grid()

{

return View();

}

/// <summary>

/// 省份分页数据

/// </summary>

/// <param name="page">当前页</param>

/// <param name="limit">分页大小</param>

/// <returns></returns>

public JsonResult List(int page, int limit)

{

int totalRecords;

return Json(new { root = provinceService.GetPaged(page, limit, out totalRecords), totalProperty = totalRecords }, JsonRequestBehavior.AllowGet);

}

}

}

效果图： from:http://www.cnblogs.com/libingql/archive/2012/04/22/2464994.html

龙生 13 Apr 2015

10套超漂亮的Bootstrap UI KIT(已转Html格式)

Aside 2015年3月30日龙生

我们平时分享过不少的精品UI KIT PSD素材，这些组件虽然很漂亮，但是要转换成HTML网页格式时却不是一件容易的事情，因为UI组件元素很多，如果要转HTML需要不少的时间，而且要精通前端技术。

今天设计达人网整理自pixelkit上的免费UI KIT素材，这些PSD已经转成DIV+CSS格式，可以直接快速的应用在网页上，更棒的是它使用Bootstrap框架编写，最新的HTML5+CSS3技术都有了，所以你绝对不怕过时！

这次分享的组件带有帮助文档，让你使用的时候更得心应手，如果免费版不满足你，可以购买高级版（Premium Version）而且价格十分便宜！好吧，赶快下载和分享给你的朋友们，免费的哦！（打包下载链接在文章底部）

Funky Tunes

这个Funky Tunes组件设计有梦幻般的美丽，适合用在音乐、视频类的APP或网站。

free-bootstrap-ui-kit-1

在线DEMO | 使用文档 | 高级版(付费)

Skinny Frames

这个Skinny Frames使用了扁平化风格设计，适合于网站平台，如果想跟紧潮流，玩玩扁平化，这个组件可以选择哦，而且配色很容易修改，通过在线网页配色工具来换个颜色主题或许会有另一番风景哦！

free-bootstrap-ui-kit-2

在线DEMO | 使用文档 | 高级版(付费)

City Break

这个City Break使用蓝色Web配色，适合用于旅游、酒店、机票等服务类型网站。

free-bootstrap-ui-kit-3

在线DEMO | 使用文档 | 高级版(付费)

Chubby Stacks

前面介绍平面的设计太多了，再回来看看带质感的UI也很不错的，这套绿色风格的Chubby Stacks组件包设计很漂亮，好在已经写好HTML，节省了我们N多时间哇！

free-bootstrap-ui-kit-4

在线DEMO | 使用文档 | 高级版(付费)

Sweet Candy

精美而又可爱的UI设计组件，用在个人博客、网站很不错呢。

free-bootstrap-ui-kit-5

在线DEMO | 使用文档 | 高级版(付费)

Arctic Sunset

free-bootstrap-ui-kit-6

在线DEMO | 使用文档 | 高级版(付费)

Dark Velvet

暗调的UI KIT，就像黑色一样，看上去很有感觉，如果用在网站上，不知道视觉效果会怎样呢？欢迎尝试。

free-bootstrap-ui-kit-7

在线DEMO | 使用文档 | 高级版(付费)

Vanilla Cream

质感和平面，到底哪个最好，其实没有最好，只有更好。（废话）

free-bootstrap-ui-kit-8

在线DEMO | 使用文档 | 高级版(付费)

Metro Vibes

这个UIKIT最早是在Dribbble上看到的，现在已经有HTML版本，实在太棒了！

在线DEMO | 使用文档 | 高级版(付费)

Modern Touch

时尚的扁平化设计风格，这个设计除了桌面平台，也十分适合手持设备，另外配色也很赞！Nice!

free-bootstrap-ui-kit-10

在线DEMO | 使用文档 | 高级版(付费)

from:http://www.shejidaren.com/free-bootstrap-ui-kits.html

« Previous 1 … 34 35 36 … 58 Next »

Copyright © 2025 Longsheng All rights reserved