获取焦点失去焦点

htmledit_views">

获取焦点失去焦点

关于tfatp.com(About tfatp.com)

The Focus and The Pocus (a.k.a. tfatp.com) is a toy project of mine, started a couple of days ago in a moment when I had so much work on my plate, that the only way to stay relatively sane was to take a break, doing something different ;). So it goes.

Focus and The Pocus(aka tfatp.com )是我的一个玩具项目，它是在几天前开始的，当时我正忙着做很多事情，因此保持相对理智的唯一方法是休息一下，做点不同的事情；)。这样吧。

用户指南/功能列表 (User guide / feature list)

Go to the site, move your mouse around and admire how colors are changing.
转到该站点，四处移动鼠标，欣赏颜色的变化。
Click a square to "freeze" a color. Click again to un-freeze.
单击一个正方形以“冻结”颜色。再次单击以取消冻结。
Point you mouse to the upper right corner to see the color definitions and a link to this page.
将鼠标指向右上角以查看颜色定义和此页面的链接。

If you freeze a nice color combination, fell free to mail me a screenshot, I'd appreciate it.

如果您冻结了一个不错的配色，请随意发给我一张屏幕截图，我将不胜感激。

好为什么/历史 (OK, why? / History)

Sometimes when I think about something (or just convincingly look as if I am), I find myself staring blindly into my monitor and clicking here and there. A usual place for this activity (due to the lack of a more appropriate word, let's say we'll call it activity) is the desktop where I single-click icons and watch them getting highlighted. Another fave is any average phpMyAdmin table, where colors change as you hover over a row and change again when you click.

有时，当我想到某件事(或令人信服地看起来好像是我)时，我发现自己盲目地盯着显示器，然后四处点击。进行此活动的通常位置(由于缺少一个更合适的词，我们称其为活动)是在桌面上单击图标并看着它们突出显示的地方。另一个最喜欢的是任何平均的phpMyAdmin表，当您将鼠标悬停在一行上时，颜色会发生变化，单击时会再次发生变化。

In one such occasion a few days ago, that tfatp idea came to me and I thought it would be a nice CSS/JS exercise. So it goes.

几天前，在这种情况下，这个tfatp想法浮现在我脑海，我认为这将是一个不错CSS / JS练习。这样吧。

The name is kind of influenced by Vonnegut's Hocus-Pocus, I'm currently re-reading some of the Vonnegut's books for the n-th time. How Hocus-Pocus became tfatp - well, if you've tried registering a domain name recently, you know it ain't so easy to get what you want. (But, as the old Stones' song goes, sometimes you might just get what you need 🙂 )

这个名称受Vonnegut的Hocus-Pocus的影响，我目前是第n次阅读Vonnegut的一些书。 Hocus-Pocus如何成为tfatp的-好吧，如果您最近尝试过注册域名，您就会知道获取想要的东西并不容易。 (但是，随着古老的Stones歌曲的流行，有时您可能会得到所需的声音🙂)

In case you're wondering, "so it goes" is an often-repeating phrase from Slaughterhouse-5. So it goes.

如果您想知道，“ Solterhouse-5 ”中的“ so so go”是一个经常重复的短语。这样吧。

托多斯 (Todos)

You might not notice it, but every time you click to freeze a color, it's saved to a database. So a to-do is to produce a report, once there is enough data, of which colors are considered freeze-worthy by people that come to the site. Maybe it can be useful the next time you design a site and you're lacking color ideas.
您可能没有注意到它，但是每次单击以冻结颜色时，它都会保存到数据库中。因此，要做的就是一旦有足够的数据就生成报告，来现场的人认为其中的颜色值得冻结。下次您设计网站时，可能会很有用，但您缺乏色彩创意。
More interesting reports such as color of the day, of the week, by location... (Thanks, Brian!)
更有趣的报告，例如按位置，星期几，星期几的颜色...(谢谢，Brian！)
"Your color combination on your blog" sort of thing
“您博客上的颜色组合”之类的东西
Static URLs. If you freeze one or several nice colors, you should be able to get a static URL to send friends and family and they could reproduce the same thing.
静态网址。如果冻结一种或几种漂亮的颜色，则应该能够获得一个静态URL来发送朋友和家人，并且他们可以复制相同的内容。

If you think of a nice new feature - let me know.

如果您想到了一项不错的新功能，请告诉我。

编码 (Coding)

In terms of coding it's all best practices. No, I mean, seriously. Well, front-end best practices at least. On the backend it's not the case, because the backend is just a few lines of PHP code.

就编码而言，这是所有最佳实践。不，我是说，认真。好吧，至少是前端最佳实践。在后端则不是这种情况，因为后端只是几行PHP代码。

Best practices, because there is a clean separation between:

最佳做法，因为以下两者之间存在清晰的分隔：

content (a.k.a. markup or HTML),
内容(又名标记或HTML)，
visualization (a.k.a. styles, formatting or CSS), and
可视化(又名样式，格式或CSS)，以及
behaviour (JavaScript).
行为(JavaScript)。

This means no font tags, no tables, no style attributes, no onclick-s or onmouseover-s. Needless to say it's XHTML-strict compliant.

这意味着没有字体标签，没有表，没有样式属性，没有onclick-s或onmouseover-s。不用说它符合XHTML-strict。

实作 (Implementation)

HTML(HTML)

Nothing interesting here, just 4 divs placed in a container. That may explain why the markup is so beautiful and XHTML-strict. It would be actually harder to make it non-standards compliant 😉 Check the source out.

这里没什么有趣的，只有4个div放在一个容器中。这可以解释为什么标记如此精美且XHTML严格。使其不符合标准实际上会更加困难😉检查源。

CSS (CSS)

Here's the stylesheet. I'm using float to move the squares to the left and to the right and position: absolute to make setting the positioning and the heights possible. For example the fourth square (bottom right) has top: 50% and left: 50%

这是样式表。我正在使用float将正方形向左和向右移动以及position: absolute以便可以设置位置和高度。例如，第四个正方形(右下)的top: 50% ， left: 50%

行为-事件 (Behaviour - events)

I'm using Yahoo! UI library scripts to attach events to different elements on the page. (Check my previous post for more Yahoo! UI). So I attach a mouseover listener to the container div. It's lazier than attaching 4 listeners to the 4 squares. Then I check the event to see what was clicked. If a square was clicked, I call a method to change its background.

我正在使用Yahoo! UI库脚本，用于将事件附加到页面上的不同元素。 (查看我以前的文章以获取更多Yahoo! UI)。因此，我将mouseover侦听器附加到容器div。这比将4个侦听器附加到4个正方形上要懒惰。然后，我检查事件以查看单击了什么。如果单击一个正方形，我将调用一种方法来更改其背景。

BTW, all JS code is in behaviour.html" title=js>js

顺便说一句，所有的JS代码都在behaviour.html" title=js>js中

Similarly I attach a click event to the container div to do the freezing.

同样，我将click事件附加到容器div进行冻结。

And two more listeners to handle mouseover/mouseout on the little "About" div.

还有两个侦听器可以在“关于” div上处理鼠标悬停/鼠标悬停。

JSON格式 (JSON)

Using the JavaScript Object Notation, I'm defining a variable focuspocus which is a class instance that contains all methods and properties I need, thus keeping the global namespace clean of any functions.

使用JavaScript对象表示法，我定义了一个变量focuspocus ，它是一个类实例，它包含我需要的所有方法和属性，从而使全局名称空间不包含任何函数。

色彩 (Colors)

Generating random colors is easy, just use Math.random() to generate a random red value, a random green and a random blue. Use them to set the background by using the rgb(r, g, b) form.

生成随机颜色很容易，只需使用Math.random()生成随机红色值，随机绿色和随机蓝色即可。使用它们通过rgb(r, g, b)形式设置背景。

Then getting the color value back is the tricky part (as I'm writing this I just thought I could simply store it once it's generated, duh!). So I'm using my little RGBColor library (described here) in its lightweight version (also used here) to parse the value returned by getComputedStyle() a.k.a. currentStyle in IE.

然后取回颜色值是棘手的部分(在写这篇文章时，我以为我可以在它生成后直接存储它，du！)。因此，我使用轻量级版本(也在此处使用)的小RGBColor库(在此处描述)来解析IE中getComputedStyle() currentStyle返回的值。

AJAX (AJAX)

I just couldn't launch anything without using AJAX, could I? So once you click to freeze a color, there is a tiny AJAX request to send the color you've just frozen and the square where you clicked. The aim is to store those and at some point try to make a noble use of them.

我只是不使用AJAX就无法启动任何东西，对吗？因此，一旦单击冻结颜色，就会有一个很小的AJAX请求将刚冻结的颜色和单击的正方形发送出去。目的是存储这些内容，并在某些时候尝试对其进行高贵使用。

To make the AJAX request, I'm using the Yahoo!s UI connection lib.

为了发出AJAX请求，我使用了Yahoo！s UI连接库。

YAHOO.util.Connect.asyncRequest(
    'POST',
    'frozo.php',
    {success: function(){}}, // callback
    'color=' + thecolor + '&sq=' + theid
);

Easy, isn't it? There is no response from the AJAX request and none is actually needed. So the success callback is an empty function. Just POST-ing two variables to frozo.php

很简单，不是吗？没有来自AJAX请求的响应，并且实际上不需要任何响应。因此，成功回调是一个空函数。只需将两个变量发布到frozo.php

服务器端 (Server-side)

"Server side" is too big a name for the few lines in frozo.php. There is just DB connection and an INSERT. The interesting thing is that there's no DB abstraction, config, none of that. Just the good old mysql_query() call, which (don't tell anyone, but) I actually had to lookup on php.net, since I've used abstraction layers for years now and I've kinda forgotten... So it goes.

对于frozo.php中的几行，“服务器端”太大了。只有数据库连接和INSERT。有趣的是，没有数据库抽象，配置，也没有。只是很好的旧mysql_query()调用，(不告诉任何人，但是)我实际上不得不在php.net上进行查找，因为我已经使用抽象层很多年了，而我已经被遗忘了……所以去。

<?php
// error reporting - none in production
error_reporting(E_NONE);
// sanity check
if (empty($_POST['color']) || empty($_POST['sq'])) {
    die();
}
// session init
session_start();
// db connection
$db = mysql_connect('host', 'username', 'pass');
mysql_select_db('database', $db);
 
// insert
$sql = sprintf(
    'INSERT INTO frozo VALUES("","%d","%s","%s","%s",UNIX_TIMESTAMP())',
    intval(str_replace('sq','',$_POST['sq'])),
    mysql_real_escape_string($_POST['color']),
    mysql_real_escape_string(session_id()),
    mysql_real_escape_string($_SERVER['REMOTE_ADDR'])
);
$result = mysql_query($sql);
?>

谢谢阅读！ (Thanks for reading!)

And have fun - tfatp.com. Hope you enjoy it. I surely enjoyed coding it 😉

并获得乐趣-tfatp.com 。希望你喜欢它。我当然喜欢编码coding

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/the-focus-and-the-pocus/

获取焦点失去焦点