前端及开发文章及欣赏

关于placeholder();

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

搜索框有一些提示信息比如“关键字”之类,不写吧用户可能不知道这个搜索框是用来做什么的,写了吧点击搜索之后默认就把这些提示信息提交给数据处理页面处理去了,有点麻烦,而且也没有必要再去数据库查一次这个提示信息。

  可以用jquery 的插件 placeholder来解决这个问题,这个插件使用也很简单,在页面引入这个插件,    <script type="text/javascript" src="<%=basePath %>resources/scripts/jquery/jquery.placeholder.min.js"></script>(本人用的是miniui做的,所以引入的是jquery.placeholder.min.js)。

 在html中的输入框中如此设置

<div class="inputs">
         <input id="u_id" name="u_id" type="text" placeholder="请输入帐号"/>
 </div>
<div class="inputs">
     <input id="u_pass" name="u_pass" type="password" placeholder="请输入密码"/>
</div>

 js代码:

$(function(){
    $("input").placeholder();
    
    $("input").keydown(function(event) {  
        //alert(event.keyCode);
        if(event.keyCode==13){  
            login();  //转到登录的js方法
        }
    });
});

 但是问题来了,firefox,IE下都能实这个效果,chrome和safari点击后不会消失,得输入东西之后才会消失。本人在CSS方面菜鸟一只,后来让公司一位前段的同事去调试这个,最后在CSS里面加了一段:

input:focus::-webkit-input-placeholder,textarea:focus::

-webkit-input-placeholder{color:transparent;} 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


学习解析XML(1)

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

什么是xml, xml有什么作用?
XML 是独立于软件和硬件的信息传输工具
  • XML 指可扩展标记语言(EXtensible Markup Language)。
  • XML 是一种很像HTML的标记语言。
  • XML 的设计宗旨是传输数据,而不是显示数据。
  • XML 标签没有被预定义。您需要自行定义标签。
  • XML 被设计为具有自我描述性。
  • XML 是 W3C 的推荐标准。


XML 和 HTML 之间的差异

XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计:

  • XML 被设计用来传输和存储数据,其焦点是数据的内容。
  • HTML 被设计用来显示数据,其焦点是数据的外观。

HTML 旨在显示信息,而 XML 旨在传输信息



xml的用途:

    

XML 把数据从 HTML 分离

XML 简化数据共享

XML 简化数据传输

XML 简化平台变更

XML 使您的数据更有用

XML 用于创建新的互联网语言


<?xml version="1.0" encoding="UTF-8"?> 声明

以及根元素 子元素 以及定义根元素结尾

如例

声明

<?xml version="1.0" encoding="UTF-8"?>

根元素

<note>

子元素

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

定义根元素结尾

命名的规范

所有的 XML 元素都必须有一个关闭标签

XML 标签对大小写敏感、

XML 必须正确嵌套

XML 属性值必须加引号

实体引用




XML 以 LF 存储换行

在 Windows 应用程序中,换行通常以一对字符来存储:回车符(CR)和换行符(LF)。

在 Unix 和 Mac OSX 中,使用 LF 来存储新行。

在旧的 Mac 系统中,使用 CR 来存储新行。

XML 以 LF 存储换行。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

暑期干货!2017年8月前端开发者超实用干货大合集

雪涛

在过去的几年当中,网络上所流传的各种设计和开发资源,在素质上有明显的提升。其中有一些已经几乎成为了设计师和开发者必备的工具,但是其中绝大多数由于其应用范畴的局限,或者传播不够广,导致它们大多并广为人知。将这些素材集中到一起,很大程度上是希望它们的目标用户能够明白,需要这些工具的时候,上哪儿找。

这次的前端干货合集内容也很齐全,仔细看看,总能找到几款你所需要的。

MuzzleApp

暑期干货!2017年8月前端开发者超实用干货大合集

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在过去的几年当中,网络上所流传的各种设计和开发资源,在素质上有明显的提升。其中有一些已经几乎成为了设计师和开发者必备的工具,但是其中绝大多数由于其应用范畴的局限,或者传播不够广,导致它们大多并广为人知。将这些素材集中到一起,很大程度上是希望它们的目标用户能够明白,需要这些工具的时候,上哪儿找。

这次的前端干货合集内容也很齐全,仔细看看,总能找到几款你所需要的。

MuzzleApp

Muzzle 是之前 CodeKit 的开发者的新产品,是一款应用在macOS 平台的应用,当你和别人共享屏幕的时候,它可以帮你关闭通知和其他的私密信息,避免尴尬。无论你共享屏幕时候的平台是Skype、Google Hangouts 还是 Slack,它都能让macOS 进入“免打扰”模式。

Fractures

Fractures 是一个CSS类 合集,可以帮你快速创建网页原型。Fractures 是基于原子设计模式来构建的,样式表被分割为小段。

CSS DB

CSS DB 能为你列举出还在不断开发中的CSS特性列表以及目前的状态,让你可以更好地使用CSS选择器。

Preact

Apache 最近宣布禁止将 BSD+专利许可证分发给 ReactJS 和类似的项目,如果你的产品受到类似的专利许可证的影响,可以考虑 Preact 这样的 ReactJS替代品。

Pell

Pell 是一款用来构建所见即所得编辑器的JavaScript 库,默认情况下,它会带有常见的富文本编辑器的按钮。Pell 是使用ES6来构建,它不会像jQuery 那样需要大量的依赖库,体积小巧,可维护性强,还兼容 IE9。

Markvis

Markdown 在语法和功能上是有限制的,而Markvis 在它的基础上增加了图表的功能。

Moment PHP

Moment 是一款 PHP 库,用来处理日期和时间,类似于 Moment.js 之于 JavaScript。这个库的使用也很简单,可以快速设置时区、时间和显示方式。

Tonik

这是一款使用现代PHP来构建的Wordpress 新手主题,它充分利用了命名空间,自定义模板,自动加载器,WebPack 以及一大堆现代Web开发的优点。

Awesome Guidelines

这是一个包含了许多编程语言标准的列表,其中包含了C语言,JS,PHP,Ruby,甚至包括Visual Basic。这些标准能够帮你的代码保持简洁、干净。

BotUI

聊天机器人已经逐渐成为主流。这款 JS 库能够帮你构建对话式UI,这个库比起传统的“表单”体验更加优秀。

Reaction Commerce

开源的内容管理系统这些年变化并不大,其中绝大多数都是基于PHP来构建的。

TinyReset

这是一款非常小巧的 CSS resetter,它可以作为 Eric Meyer 所创建的reset.css的替代品。

Martinet

Martinet 是一款用来构建静态网站的命令行工具,其中包含了诸如 Webpack、TypeScript、Pug for templating、LESS和 NPM 这样的现代工具。它的存在让设计者不用担心网站配置,只需要正常使用 Martinet 就能对网站进行调整。

Billboard

BillboardJS 是一款基于 D3.js 来构建的交互式数据可视化数据库工具,它可以用来创建可视化的柱状图,饼图,折线图等。

SVGI

SVGI 是一款用来查找SVG元素和文件的命令行工具,安装它之后,你可以采用svgi 命令来检索 SVG 文档的大小、元素、层次结构和节点列表。

TimeStrap

TimeStrap 是另外一个非常实用的开源平台,它可以像 WordPress 一样可以在任何地方运行和访问的发票系统。对于喜欢自己控制而不希望使用外部服务来管理发票的用户而言,这是一个很好的选择。

Slate

Slate 是一款为API 文档创建静态网页的工具,诸如 WooCommerce、Travis-、CoinBase甚至 NASA 都采用了这一工具。

FontJoy

FontJoy 是一款能够生成大量有效字体组合的工具,点击“Generate”按钮就能生成许多新的字体组合。有趣的地方在于,这款工具还有具备深度学习的功能。

CoolHue

毫无疑问渐变色再一次回归主流,而CoolHue 是另外一款非常优秀的渐变色生成工具。

FrontPress

FrontPress 是一款前端框架,可用来控制 WP-API 和 AngularJS。如果你想创建一款用于 WordPress 的内容管理系统,可以从 FrontPress 着手。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

面向未来的 CSS Variable

雪涛

CSS Variable 即CSS变量,聊CSS变量之前,我想先来说说Sass和Less,还有Stylus,它们都是目前使用较为普遍的三款CSS预处理框架,我们为什么要使用它们呢,因为它们都可以让你在CSS中方便的使用变量、简单的程序逻辑、函数等在编程时使用的一些基本技巧,这些框架对于这种CSS预处理的技术已经非常成熟,可以让你的CSS代码变的更加简洁、便于维护、在编写的时候也无需考虑代码的兼容性。

用这个方法,轻松提高H5动画的开发效率!

雪涛

Janilychen:以往做一些H5的运营项目,都是动画设计师使用Animate cc(原来的Flash)先设计好动画原型,然后交给我们UI开发来实现。做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的,而且还要高质量的还原动画设计师设计好的动画,来回沟通成本也非常高。

那有没有一种的方法来改善这种流程,提高开发效率的同时还能完成高品质的动画呢?

经过一段时间的摸索,发现AnimateCC(就是原来的Flash)可以导出canvas动画,而且是基于createjs这个开发轻量级游戏的js库的,非常适合用来做移动端的一些h5动画。不仅缩短制作动画所需要的时间。同时它也是一个可视化的IDE,不需要编写代码就可以完成高品质的动画效果;还可以通过Javascript,为动画效果添加交互性。

跟着电台动起来 如何设计跑步的垂直场景

雪涛

用户真的有通过电台App来跑步的需求吗?

这是我们在规划这个产品功能时的第一个问题。即使在音乐类软件都已经上线了跑步相关功能的当下,我们依然发问——真的有人,通过电台App来跑步吗?

如果仅仅是针对现在电台类App,那需求一定是微乎其微,不同于音乐统一的内容属性,电台类内容属性太丰富——音乐时间短,小说时间长;相声很搞笑,新闻很严肃······这些内容决定了他们天然就不能像音乐一样随机重组。

有时候我们需要退一步来思考需求。

如何打造有温度的H5动画

雪涛

2016年末,各路APP也纷纷展开一轮轮的数据厮杀,从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间,在这个既难忘又不舍的2016年,用户的故事将会被如何演绎,在寒冬带给用户怎样的温暖回忆呢?

[ISUX译]我为css变量狂

雪涛

几个星期前,CSS Variables ——CSS 变量草案发布在了W3C官方 ,更准确的应该叫CSS 自定义属性,目前在Chrome Canary 版里面已经支持,开启该功能见附[1]

当Chrome浏览器工程师Addy Osmani第一时间把这消息发布在twitter后,遭到了数万人的否定敌视怀疑。于我而言,更多的感到是一个惊喜,因为这个功能实在让人太兴奋了。

快速的扫了一遍之后,发现99%人抱怨的无外乎这两点:

  • 语法太丑和不够简洁
  • Sass 、Less早就有这些玩意了,不太care

虽然我承认我也对这语法很反感,更重要的是理解语法不只是反复无常的在选择。CSS工作组讨论很久语法的长度,他们提取了一些点,考虑到CSS的语法兼容不会与未来增加的其他语言冲突。

实现下划线的N个姿势

雪涛

下划线 一般在文档中常被用作增强注意,在过去打字机时代,下划线成为了唯一的一种文字强调方式,具体的操作方法是在已经打出来的文字上面退格,再在同样的地方打出下划线。

而在网页中,可以链接的文字(超链接)下面一般都有下划线。在制作页面的时候,当链接需要下划线的时候,UI开发很自然的会想到使用text-decoration属性来显示,例如这样:

1479825410_16_w650_h150

以上显示的是设计稿和浏览器渲染的实际效果,我们会发现浏览器渲染的效果和设计稿有出入,主要表现在下划线的位置,这时候细心的设计师会要求你想办法实现他们本来想要实现的效果。可惜的是,在这几年的网页排版技术发展中,并没有更好的css属性出现来支持下划线的个性化设置,所以这个问题常常会被忽略。

这个一般在UI开发看来,可能觉得并没有什么问题,难道说不应该使用text-decoration这个属性吗?

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档