分类目录归档：WEB

翻译：Knockout 快速上手 – 2: 安装 knockoutJS – 冠军

发表回复

只需要五个简单的步骤，就可以做好使用 Knockout 开发的准备！

第一步 我们需要什么？

最低限度，为了完成后面的教程，你需要如下的准备

  • Web 浏览器
  • 文本编辑器
  • 你的电脑上大约 2M 的磁盘空间
  • 基本的 Web 服务器

Knockout 的开发可以在大多数你可以安装上面软件的操作系统上进行。

为了完成这个教程，我将会使用 Chrome 浏览器。这个浏览器是免费的，并且可以安装在多个操作系统上，包括 Windows操作系统和Mac 操作系统。你可以在这里 http://www.google.com/chrome 下载这个软件。我选择的文本编辑器也会同时兼顾到文本编辑工作和 web 服务器。我将会使用微软的 WebMatrix 开发工具。这个免费的工具工作在 Windows 操作系统之上。可以从这里下载 http://www.microsoft.com/web/webmatrix/ 这个软件。我会使用 IIS Express 作为基本的 Web 服务器。它可以从这里下载：http://www.microsoft.com/en-us/download/details.aspx?id=1038。如果你使用的是 Mac 系统或者 Linux 系统，这些系统中也有大量很棒的文本编辑器和 Web 服务器可

阅读全文

本条目发布于。属于.Net、WEB分类。作者是。
分享到：

翻译：Knockout 轻松上手 – 1 Knockout 是什么？ – 冠军

发表回复

原文名称：KnockoutJS Starter

Knockout 是一个非常棒的脚本库，可是我发现许多人并不了解它，所以，思胜翻译了这本著作。

这一节，我们将会讨论 Knockout 可以做什么，又如何使用它的功能。

Knockout 是一个 JavaScript 脚本库

Knockout ，从本质上讲，是一个 JavaScript 脚本库，可以用在网站或者网页的开发中。用来增强脚本的功能以便提供更好的客户体验。默认情况下，除非你调用 Knockout ，否则它什么都不会做。这是区别其他的脚本库或者框架很重要的一点。你可以从这里下载它。

Knockout 是一个 MVVM ( Model-View-ViewModel ) 库

创建 Knockout 的一个重要原因是在 Web 开发中可以应用 MVVM 模式。MVVM 是一种与面向对象不同的开发方式，通过将界面的逻辑与业务逻辑进行分离，达到可测试的目的。

有很多的原因值得我们写可测试的代码 ( 这可以用整本的书来讲 )，但是最重要的原因是代码的可维护性和质量的保证。写可测试的代码，代码会变得更加容易维护。不管怎么说，使用 MVVM 模式创建 Javascript 程序，比直接使用 DOM 的事件来编写程序，要花费更短的时间。

 

上面的图表说

阅读全文

本条目发布于。属于.Net、WEB分类。作者是。
分享到：

使用 Bootstrap Typeahead 组件 – 冠军

发表回复

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete，功能很强大，但是，使用上并不太方便。这里我们将介绍一下这个组件的使用。

第一，简单使用

首先，最简单的使用方式，就是直接在标记中声明，通过 data-provide=”typeahead”　来声明这是一个 typeahead 组件，通过 data-source= 来提供数据。当然了，你还必须提供 bootstrap-typeahead.js 脚本。

<html>
<head>
<link href=”bootstrap.min.css” rel=”stylesheet” type=”text/css” />
</head>
<body>

<div style=”margin: 50px 50px”>
<label for=”product_search”>Product Search: </label>
<input id=”product_search” type=”text” data-provide=”typeahead”
data-source='[“Deluxe Bicycle”, “

阅读全文

本条目发布于。属于.Net、WEB分类。作者是。
分享到：

翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 – 6 – 业务逻辑 – 冠军

发表回复

Part 3: 设计逻辑层：核心开发

 如前所述，我们的解决方案如下所示:
34.png

下面我们讨论整个应用的结构，根据应用中不同组件的逻辑相关性，分离到不同的层中，层与层之间的通讯通过或者不通过限制。分层属于架构风格，在应用的长时间生命周期中，解决维护和扩展问题。
所以，让我们在解决方案中添加一个类库项目，命名为 Application.Common.

Application.Common :

这是一个类库项目, 提供公共功能，可以被不同的业务逻辑层使用。例如：安全，日志，跟踪，验证等等. 定义在这个层中的组件，不仅可以被不同的层使用，还可以在不同的应用中使用。为了未来容易使用，我们使用依赖注入和抽象，在应用中实现最小化的修改。

例如，在我们马上用到的，验证组件用来验证数据，定制的日志器来记录错误或者警告。

 在添加了 Common 类库之后，解决方案的文件夹如下所示：
35.png

Application.Core:

这个层实现系统的核心处理逻辑，封装相关的所有业务逻辑。从基本上说，这个层通常实现领域处理的逻辑。这个层还经常通过核心层的工作单元，以便完成 PI 特性，主要的目标是明确区分和分离核心领域的逻辑与基础架构的具体细节，例如，数据访问和数据仓储的具体技术，像 ORM ，或者简单的数据访问库，或者

阅读全文

本条目发布于。属于.Net、WEB分类。作者是。
分享到：

Bootstrap 3 How-To #3 布局 – 冠军

发表回复

对于 Web 开发来说，一个永远的话题是如何创建一个跨浏览器兼容的布局。许多年来，各种框架使用各种技术来解决这个问题。Bootstrap 使用了一个不同的方式来解决这个问题。基于 960 像素的布局 http://960.gs，bootstrap 提供了更为简单的语法，它还支持响应式布局，布局可以根据设备的不同尺寸进行调整，从桌面计算机到平板和手持设备。

以前版本的 bootstrap 在没有使用响应式布局的时候，使用了 940px 布局使用 span* 和 offset* 布局。在使用响应式布局的时候，网格系统使用 724px 或者 1170px 的宽度。

如果希望使用百分比的布局，可以将容器的类从 .row 替换为 row-fluid。

3.0 版本对这一部分有比较大的变动，可以区分特小型设备 xs ( Extra small devices, 小于 768px 比如手机 ), 小型设备 sm ( Small devices, 小于 992px, 比如平板 )， 中型设备 md ( Medium devices, 小于 1200px, 比如桌面计算机),  大型设备 lg ( Large devices, 比如宽屏显示器 )。

而 row-flui

阅读全文

本条目发布于。属于.Net、WEB分类。作者是。
分享到：

Bootstrap 3 How-To #2 标题，链接与按钮 – 冠军

发表回复

这个系列的要点来自一本名为 Twitter Bootstrap Web Development How-to 的书，但是，这本书的内容是基于以前版本的，与最新的 3.0 并不一致。

为了方便学习和使用 BootStrap 3， 这里将内容替换为了当前的 3.0 版。原书可以在 Amazon 买到，$17.99. 原书的内容比较简单，我会尽量补充一些内容。

 

 

如果你很熟悉 HTML，你就可以很快地填充网页的内容，但是，bootstrap 拥有一些需要你注意的特性。

开始

如果你是一个 HTML 的新手，最好的 HTML 学习和参考的站点是 http://htmldog.com, 这里的 HTML 新手教程可以帮助你学习基础的知识，我强烈建议你学习这里的 CSS 教程，这样你可以更好地学习 Bootstrap。

在 bootstrap 3.0 文件夹下创建一个名为 study 的文件夹，在其中创建一个名为 2 的工作文件夹。

将 starter-template 中的两个文件复制到你的工作文件夹中，开始我们的学习。

1. 编辑网页的标题，将 index.html 文件的第 50 行，更新为如下内容，其中添加了 small 标记。

<h1>Welcome to my si

阅读全文

本条目发布于。属于.Net、WEB分类。作者是。
分享到：

Bootstrap 3 How-To #1 下载与配置 – 冠军

发表回复

Bootstrap 3 发布了，通过简单的几步，我们就可以使用 Bootstrap 的样式表，图标，以及 javascript 来配置一个简单的站点。

准备

Bootstrap 不仅仅是一个代码集，还是一个在线社区。作为开始，你需要从熟悉 bootstrap 网站开始：http://getbootstrap.com。

目前版本是 3.0 ，你应该看到如上的页面。

在这里，你可以找到如下内容：

文档

如果这是你第一次访问这个站点，冲一杯热茶，细心地阅读这个网站的页面，查看每个组件，阅读详细的说明，沉浸在其中，你会发现非常的有趣。

下载

你可以获取最新版本的 bootstrap：样式表，脚本，插件，以及图标。已经完全处理好，可以直接使用，并且封装在一个压缩包内，我们将从这里开始。

如何完成

不管你现在水平如何，我都会带你完成全部的步骤。

1. 访问 bootstrap 的首页：http://getbootstrap.com

2. 点击 Download Bootstrap 按钮，你会下载一个名为 bootstrap-3.0.0.zip 的文件。

3. 找到下载的文件，然后解压。你会看到一个名为 bootstrap-3.0.0 的文件夹，在其中你会看到如下的文件结构。

其中 dist 文件夹中包含了我们主要

阅读全文

本条目发布于。属于.Net、WEB分类。作者是。
分享到：

使用 Razor 生成 HTML5 中的 data- 属性 – 冠军

发表回复

在 HTML5 中, 可以使用 data- 属性来表示用户数据，这些数据甚至可以是 JSON 格式的数据，对 Web 前端开发带来很大的方便。

在 MVC 的 Razor 中，可以使用匿名对象来生成定制的属性，不过，这样的属性可不能通过 Razor  的语法检查。

new{ data-id= 1 }

编译器会直接报告错误。  The name ‘data’ does not exist in the current context   ，原因很简单，把 – 号当作运算符了。
其实，HtmlHelper 提供的方法 AnonymousObjectToHtmlAttributes 已经可以解决这个问题，方法的说明如下所示。

Replaces underscore characters (_) with hyphens (-) in the specified HTML attributes.

我们可以在匿名对象中直接使用下划线 (_) 来代替减号 (-) ，HtmlHelper 会在呈现中，将下划线替换为减号的。

例如，下面的写法

@Html.TextBox(“username“, “noname“, new{ data_name=“tom“ })

会生成如下的 H

阅读全文

本条目发布于。属于.Net、WEB分类。作者是。
分享到：

让Nginx支持PHP CI框架

发表回复

只需在相应Nginx的配置文件加入如下代码即可

location /ci目录/
{
index index.php;
if (!-e $request_filename) {
rewrite ^/(.*)$ /ci目录/index.php?$1 last;
break;
}
}

本条目发布于。属于Linux、WEB分类。作者是。
分享到：

jBox 弹出窗口中焦点设置问题 – 冠军

发表回复

jBox  是一个不错的组件库，可以用来比较简单地弹出窗口。

我希望在 jBox 弹出窗口之后，自动将焦点设置到子窗口的某个输入框中，可是发现并不容易。  

在 jBox 2.3 中，提供了如下的增强。

[调整] loaded 选项增加了个参数h，参数h表示窗口内容的jQuery对象，方便用户在窗口加载后对内容进行初始化处理。

示例中并没有说明 h 的使用方式。

那么，这个 h 是什么呢？

在使用 jBox 的时候，每个弹出的窗口，会创建一个 id 为 jbox-content 的 div 元素包裹所有的窗口内容。在 loaded 中，jBox 传递给函数的参数就是这个元素。这个元素的结构如下：

<div style=”height: auto; overflow-x: hidden; overflow-y: auto; position: static; left: -10000px;” class=”jbox-content” id=”jbox-content”>
<iframe scrolling=”auto” width=”100%” height=”100%” frameborder=”0″ marginwidth=”0″ margin

阅读全文

本条目发布于。属于.Net、WEB分类。作者是。
分享到：