0

17 crucial web design trends for 2015

Posted by Alan on December 18, 2014 in HTML5&CSS3, 电商经验 |

全文转载一下这篇Econsultancy上的有关2015年网页设计趋势的文章,留待周末拜读

Please do not mistake me for some kind digital prognosticator, soothsayer guru, evangelist, swami, samurai or whatever risible term is currently popular in digital marketing circles.

I am but one writer who has spent the last year immersed (and only occasionally floundering) in previously unchartered waters in my first 12 months of writing for Econsultancy.

This isn’t just a list of trends that I’ve noticed during my own research, but also ones discovered by my many venerable colleagues, various friends of the blog and passed on to me by Dan Barker or compiled throughout the year by Chris Lake.

All of whose contributions to the following have been invaluable. (You can therefore read the above as, “if you pick on me I’ll get my older brothers on you.”)

Some of these predictions will be more obvious than others, but I’ve decided to err on the side of ‘likely’ rather than ‘wildly fanciful’.

Some of these predictions will also be more about what I’d like to see, rather than what we’ll definitely see.

Anyway, with that massive list of caveats out of the way, let’s begin.

Parallax scrolling for everybody

Now that mesmerising parallax scrolling templates are readily available on WordPress and other platforms for very little expense, expect to see a lot more highly innovative, narratively driven web pages.

Card design

As Chris Lake states in his round-up of card-based web design, cards are ideal for the TL;DR generation, perfect for mobile devices and responsive design.

We’ll certainly be seeing a lot more of them in the years ahead.

Pinterest

Coca-Cola

Material design

The meeting point between skeuomorphism and entirely flat design. Google invented it apparently, here’s a quote directly from its manifesto:

The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

Ghost buttons

Much like an eerie spectre hovering in the corner, ghost buttons aren’t meant to distract you, just attract your attention in a subtle way.

They are transparent but have a recognisable shape, are bordered with a very thin line and contain light sans-serif fonts.

They’re not quite a call-to-action. Perfect for designers not wishing to clutter their sites with albeit necessary navigation.

Examples from WebsitesWithGhostButtons.Tumblr

Speed

“It’s always talked about, but people don’t always do anything about it,” according to Dan Barker. He continues:

These things come and go in waves. There was a period where everyone would try for minimal graphics to speed things up, then desktop connections got faster and nobody worried.

Then mobile came along and everyone worried again. Then 3G got faster and lots of sites let it slip. Now with things like the Black Friday queuing debacle, I think people will probably start to look at this again more broadly.

Micro UX

Micro UX design is all about delighting the user by using simple innovative design that not only makes a task easier but also creates an engaging, humane experience that’s a pleasure to repeat.

Hopefully the trend for larger experiences built on these little touches will really shine in 2015.

The Threadless shopping cart pop-out that bounces up and down with happiness

The simple way to switch between Twitter accounts in the iPhone apps with just a drag of the finger

More joyful examples can be found here.

Hidden menus

It’s becoming more popular for websites to hide left-navigation off screen until you interact with an element towards the top left of the screen, which is occasionally in the form of another 2014 trend – the hamburger menu.

Gmail Inbox

Pinned elements

Over to Dan Barker for this one:

Pinned elements have caught on over the last couple of years but never gone entirely mainstream. Whenever I do user tests on tablets and the header is *not* pinned on long pages, users complain about it.

I therefore half-hope, and expect that this will spread a little more.

Scrolling not clicking

Scrolling through webpages is far quicker than clicking. It helps convey masses of information without slowing down the experience for the user, it’s mobile and touch friendly, it’s a non-committal action that requires little thought and it’s perfect for webpages where the purpose is storytelling.

World’s Highest Website

Nike Air Jordan

Upwardly responsive

Although there are plenty of brands adapting their websites for smartphone and tablet users, responsive design should work for bigger screens too.

Quoting Chris Lake from his article on websites designed for big screens earlier in the year…

It goes without saying that a growing proportion of your website’s visitors will be using handheld devices with little screens, but you may be surprised by how many people use bigger screens.

Ecommerce brands will hopefully recognise this going into 2015 and adapt the experience for our giant screens in the office and at home.

Firebox 

Pull & Bear

Motion design

Chris Lake rounded-up 14 motion design trends for web and mobile interfaces back in July and many of these we will hopefully see more of next year…

Infinite scroll fade ins

More content! More!

Dynamic/animated charts

Why bother with static images when you can render a chart on the fly?

Modular scrolling

It is possible to scroll individual columns, as well as whole pages. If you scroll down this very blog post, you can see it in action too.

BIG FONTS

Dan Barker really hopes that big fonts will make a comeback.

You see them on some blogs and publisher sites, and they work really well on mobile, but they have yet to resurge on ecommerce sites.

Perhaps 2015 will be the time.

Shades of colour

By choosing one vibrant colour, and various shades thereof, then offsetting it against a neutral background you can create a rather elegant looking interface.

Select Device

Qatar Airways

There are more examples in Chris Lake’s beautiful designs based around shades of colour.

Super-navigation

You may see more thin permanent menus across the very top of larger websites. These bring unity, allow consistent navigation across multiple pages and are a handy place to present alerts.

Mobile first, but not only

‘Mobile first’ well and truly took hold in 2014. Unfortunately sometimes that means that things look great on mobile and dreadful on desktop and tablet.

As Dan Barker states:

I’m not sure that will end fully, but if you are reading this sentence and you have anything to do with a design project, please do remember that ‘mobile first’ shouldn’t mean ‘mobile only.

We’re still in that period where people carry out their most important tasks on desktops and tablets (booking holidays, buying from a site for the very first time, online banking) so it’s vital that the desktop audience is still catered for.

Credits

Again a huge thanks to Dan Barker, who can be find over at barker.co.uk and Chris Lake, who you can hound on Twitter.

Finally a massive thanks to the awesome gang here at Team Editorial, Mothy, Ben, Matt and Graham.

Tags: , ,

0

jQuery 工具类函数

Posted by Alan on December 10, 2014 in Coding |

获取浏览器的名称与版本信息

在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browser.mozilla为true,表示当前为火狐浏览器,还可以通过$.browser.version方式获取浏览器版本信息。

例如,调用$.browser对象,获取浏览器名称并显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过调用$.browser对象,检测当前浏览器的所属类型,并根据类型不同,将浏览器名称保存至变量中,最后将变量的内容显示在页面中。

检测浏览器是否属于W3C盒子模型

浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模型则包含,而在jQuery 中,可以通过$.support.boxModel对象返回的值,检测浏览器是否属于标准的w3c盒子模型。

例如,根据页面的特征,并通过$.support.boxModel属性的返回值,显示当前浏览器是否属于标准的w3c盒子模型,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于打开的页面属于标准的w3c盒子模型,因此,在调用$.support.boxModel属性时,返回true值。

检测对象是否为空

在jQuery中,可以调用名为$.isEmptyObject的工具函数,检测一个对象的内容是否为空,如果为空,则该函数返回true,否则,返回false值,调用格式如下:

$.isEmptyObject(obj);

其中,参数obj表示需要检测的对象名称。

例如,通过$.isEmptyObject()函数,检测某个指定的对象是否为空,并将结果显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于对象obj的内容为空,因此,$.isEmptyObject()函数检测obj时,返回true,并根据返回的true值在页面中显示对应的文字内容。

检测对象是否为原始对象

调用名为$.isPlainObject的工具函数,能检测对象是否为通过{}new Object()关键字创建的原始对象,如果是,返回true,否则,返回false值,调用格式为:

$.isPlainObject (obj);

其中,参数obj表示需要检测的对象名称。

例如,通过$.isPlainObject()函数,检测某个指定的对象是否为原始,并将结果显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于自定义的obj_a和obj_b都是属于原始对象,因此,当调用$.isPlainObject()函数检测这两个对象时,都返回true值。

检测两个节点的包含关系

调用名为$.contains的工具函数,能检测在一个DOM节点中是否包含另外一个DOM节点,如果包含,返回true,否则,返回false值,调用格式为:

$.contains (container, contained);

参数container表示一个DOM对象节点元素,用于包含其他节点的容器,contained是另一个DOM对象节点元素,用于被其他容器所包含。

例如,通过$.contains()函数,检测两个节点对象间是否存在包含关系,并将检测的结果显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,documentElement是DOM根结点,而body只是根结点下的子节点之一,它们之间存在包含关系,因此,返回true值,并显示“包含”字样。

字符串操作函数

调用名为$.trim的工具函数,能删除字符串中左右两边的空格符,但该函数不能删除字符串中间的空格,调用格式为:

$.trim (str);

参数str表示需要删除左右两边空格符的字符串。

例如,通过$.trim()函数,除掉一个两边均有空格符的字符串,并将其执行前后的字符长度都显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于文本框中的字符串前后分别有一个空格字符,因此,它的字符长度为13,调用trim()函数删除字符串前后空格之后,字符串长度则变为11。

URL操作函数

调用名为$.param的工具函数,能使对象或数组按照key/value格式进行序列化编码,该编码后的值常用于向服务端发送URL请求,调用格式为:

$.param (obj);

参数obj表示需要进行序列化的对象,该对象也可以是一个数组,整个函数返回一个经过序列化编码后的字符串。

例如,通过$.param()函数,对指定的对象进行序列化编码,使其成为可执行传值的URL地址,并将该地址显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过调用工具函数$.param()可以将一个对象进行序列化并编码成可以在地址栏中直接执行的URL字符串。

param和serialize的区别是什么?前者是对任意的参数进行URL地址格式的转换,而后者仅属于form提交的数据转换。

使用$.extend()扩展工具函数

调用名为$.extend的工具函数,可以对原有的工具函数进行扩展,自定义类级别的jQuery插件,调用格式为:

$.extend ({options});

参数options表示自定义插件的函数内容。

例如,调用$.extend()函数,自定义一个用于返回两个数中最大值的插件,并在页面中将插件返回的最大值显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“计算”按钮时,先调用自定义插件中名为“MaxNum”的方法,计算并返回两个数值中的最大值,然后,将该值显示在页面中。

使用$.extend()扩展Object对象

除使用$.extend扩展工具函数外,还可以扩展原有的Object对象,在扩展对象时,两个对象将进行合并,当存在相同属性名时,后者将覆盖前者,调用格式为:

$. extend (obj1,obj2,…objN);

参数obj1至objN表示需要合并的各个原有对象。

例如,调用$.extend()函数对两个已有的对象进行合并,并将合并后的新对象元素内容显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当两个对象通过$.extend()函数扩展合并后,返回一个包含两个对象中全部属性元素的新对象,相同名称的“name”属性,前者被后者覆盖。

Tags: ,

0

jQuery UI插件

Posted by Alan on December 10, 2014 in Coding |

拖曳插件——draggable

拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:

$(selector). draggable({options})

options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。

例如,在页面中的<div>元素中添加两个子类<div>,通过与拖曳插件绑定,这两个子类<div>元素只能在外层的父<div>元素中任意拖曳,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于使用jQuery UI插件draggable绑定了两个子类<div>元素,并将配置对象的“containment”属性值设为“parent”,因此,这两个子类<div>元素只能在外层的父框中实现任意拖曳。

放置插件——droppable

除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:

$(selector).droppable({options})

selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。

例如,在页面中,通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中,同时改变“购物车”的背景色和数量值,如下图所示:

在浏览器中显示的效果:

从图中可以看出,先调用draggable插件任意拖曳“产品区”的元素,然后,调用droppable插件绑定“购物车”中接收元素,当“产品区”元素完全拖曳至“购物车”时,触发定义的drop函数,改变“购物车”中背景色和总数量值。

拖曳排序插件——sortable

拖曳排序插件的功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:

$(selector).sortable({options});

selector参数为进行拖曳排序的元素,options为调用方法时的配置对象,

例如,在页面中,通过加载sortable插件将<ul>元素中的各个<li>表项实现拖曳排序的功能,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于使用sortable插件绑定了<ul>元素,并设置了拖曳时的透明度,因此,<ul>中的各个<li>元素则能指定的透明度进行任意的拖曳排序。

面板折叠插件——accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:

$(selector).accordion({options});

其中,参数selector为整个面板元素,options参数为方法对应的配置对象。

例如,通过accordion插件展示几个相同区域面板的折叠效果,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于绑定了折叠面板插件,默认为第一个面板的内容为展示状态,点击第二个面板主题时,展示主题对应内容,同时关闭上一个面板内容。

选项卡插件——tabs

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:

$(selector).tabs({options});

selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。

例如,在页面中,添加选项卡的标题和内容元素,并绑定tabs插件,当点击标题时,以选项卡的方式切内容,如下图所示:

在浏览器中显示的效果:

从图中可以看出,在tabs()方法的配置对象中,通过“fx”属性设置了选项卡切换时的效果,“event”属性设置鼠标也可以切换选项卡,因此,当鼠标在移动至两个选项卡标题时,对应内容以动画的效果自动切换。

对话框插件——dialog

对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()confirm()函数的功能,它的调用格式为:

$(selector).dialog({options});

selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

例如,当点击“提交”按钮时,如果文本框中的内容为空,则通过dialog插件弹出提示框,提示输入内容不能为空,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当文本框的内容为空时,调用自定义的sys_Alert函数,在该函数中再调用dialog插件的dialog()方法,弹出带模式的显示信息对话框。

菜单工具插件——menu

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下:

$(selector).menu({options});

selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。

例如,在页面中,通过<ul>元素内联的方式构建一个三层结构的导航菜单,并将最外层<ul>元素通过menu()方法绑定插件,实现导航菜单的功能,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过<ul>内嵌的方式,构建一个三层结构的导航菜单,将<li>元素的class属性值设为“ui-state-disabled”,可将菜单选项置为不可用状态。

微调按钮插件——spinner

微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:

$(selector).spinner({options});

selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。

例如,将页面中的三个输入文本框都与微调插件相绑定,当改变三个文本框值时,对应的<div>元素的背景色也将随之发生变化,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于三个文本框输入元素都绑定微调插件,因此,无论是点击右侧的上下按钮,还是直接在文本框中输入值,都可以改变<div>元素的背景色。

工具提示插件——tooltip

工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:

$(selector).tooltip({options});

其中selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。

例如,将三个<a>元素与工具提示插件相绑定,当把鼠标移动在<a>元素内容时,以动画效果弹出对应的提示图片,移出时,图片自动隐藏,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于各个<a>元素都绑定了工具提示插件,因此,将在指定的位置并以动画效果展示各个<a>元素中title属性所对应的内容。

Tags: , , ,

0

三百六十行大全

Posted by Alan on November 22, 2014 in 个人随笔 |

常听人说三百六十行,行行出状元,那究竟这三百六行指的是什么呢?以下来自民国早期资料,按分类列举如下:

一、农林牧渔行业

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.卖夫妻肺片、66.卖涮羊肉、67.烤羊肉、68.卖狗肉、69.卖白果烧鸡、70.卖叫花鸡、71.卖茶叶蛋、72.卖烤鸭、73.卖鹌鹑、74.卖清水大闸蟹、75.豆腐挑、76.炸豆腐、77.炸臭干、78.卖乳腐、79.卖榨菜、80.盐商、81.卖醋、82.换馍做酱、83.卖小磨香油、84.葱姜摊、85.卖西瓜、86.卖啥密瓜、87.卖葡萄
88.卖白果、89.卖橄榄、90.卖糖炒栗子、91.卖冰糖葫芦、92.卖甘蔗、93.卖梨膏糖、94.卖水、95.老虎灶、96.卖豆浆、97.卖马奶、98.卖冷饮、99.卖雪花酪、100.茶馆业、101.卖酒业、102.卖甜酒酿、103.卖西凤酒、104.卖茅台酒、105.卖烟袋嘴、106.卖香烟、107.鼻烟铺

[转载]三百六十行大全(您知晓吗?)
三、纺织服饰行业
108.轧棉花、109.纺纱、110.蓝印花布、111.蜡染、112.染工、113.漂工、114.缂丝工、115.织锦、116.蜀锦业、117.绸缎庄、118.刺绣、119.卖绒线、120.地毯织、121.裁缝、卖布、122.张小泉剪刀、123.制造熨斗、124.卖缝针、125.卖纽扣、126.制作中山装、127.制作旗袍、128.卖估衣、129.缝穷婆、130.鞋铺、131.卖三寸金莲、132.卖包脚布、133.修鞋匠、134.修阳伞、补套鞋、135.打草鞋、136.缝袜子、137.卖虎头鞋、帽、138.卖毡帽、139.卖缠腰

[转载]三百六十行大全(您知晓吗?)
四、手工业行业
140.木匠、141.车匠、142.雕花匠、143.瓦匠、144.石匠、145.造园业、146.打井、147.卖门铃、148.煤矿工、149.烧炭工、150.炭铺、151.卖灯草、152.烛坊、153.香烛摊、154.卖筷子、155.制作屏风、156.修棕绷、157.弹棉花、158.卖枕头、159.卖胭脂、160.淘金、161.金箔工匠、162.卖戒指、163.制作长命锁、164.修钟表、165.铁匠、166.削刀磨剪刀、167.铜匠、168.秤匠、169.制伞匠、170.卖伞、171.卖竹竿、172.篾匠、173.绳匠

[转载]三百六十行大全(您知晓吗?)
五、交通运输行业
174.抬轿子、175.拉黄包车、176.赶脚、177.邮差、178.制作信牌、179.更夫、180.窝脖儿、181.制造车、182.修马路、183.摆渡、184.放筏、185.纤夫、186.码头挑夫、187.造船匠
188.制作灯塔

[转载]三百六十行大全(您知晓吗?)
六、医药卫生行业
189.游医、190.拔火罐、191.拔牙、192.绞脸、193.接生婆、194.中药堂、195.草药摊、196.卖三七、197.卖蒲艾、198.卖枸杞子、199.卖杭白菊、200.卖蒲公英、201.卖百合、202.销售云南白药、203.卖狗皮膏药、204.卖蛇酒、205.卖凉烟、206.卖耗子药、207.卖香包、208.卖眼镜、209.理发、210.卖假发套、211.卖木梳、212.卖耳勺、213.“穿”牙刷、214.卖手杖、215.卖蒲扇、216.卖羽扇、217.制团扇、218.卖折扇、219.卖冰、220.卖鸡毛掸子、221.卖夜壶、222.粪夫、223.澡堂、224.修脚

[转载]三百六十行大全(您知晓吗?)
七、文化教育行业
225.私塾师、226.绍兴师爷、227.办学校、228.书贩、229.卖报、230.卖碑帖、231.卖贺年卡、232.照相馆、233.卖相片、234.小书摊、235.装订制书、236.雕版、237.造纸匠、238.制毛笔、239.制砚、240.制墨、241.卖八宝印泥、242.卖算盘、243.代写书信、244.写春联、245.卖“福”字、246.制牌匾、247.作家

[转载]三百六十行大全(您知晓吗?)
八、休闲娱乐行业
248.卖毽子、249.套圈圈、250.转糖博彩、251.卖花炮、252.卖象棋、253.围棋手、254.摆棋局、255.卖麻将牌、256.卖响铃、257.旅游业、258.养鸟、259.斗鸡、260.斗蟋蟀、261.跑狗场、262.猴子耍把戏、263.马戏、264.顶技、265.蹬技、266.变戏法、267.卖武艺、268.掼跤、269.舞狮子、270.舞龙灯、271.打花鼓、跑马灯、272.跑旱船、273.踩高跷、274.卖乐器、275.班鼓匠、276.小堂茗、277.放话匣子、278.歌女、279.扭秧歌、280.舞蹈者、281.舞女、282.唱鼓书、283.打连厢、284.宣卷、285.说相声、286.串双簧、287.唱戏、288.京剧、289.看西洋景、290.木偶戏、291.皮影戏、292.电影

1216 010.jpg
九、工艺美术行业
293.印年画、29,1.杨柳青年画、295.卖春画、296.指画、297.漆画、298.画肖像、299.卖烟画、300.卖月份牌、301.铸铁画、302.裱画、303.内画鼻烟壶、304.卖泥人“大阿福”、305.卖不倒翁玩具、306.做面塑、307.制作戏曲脸谱、308.吹糖人、309.陶瓷工、310.卖唐三彩、311.刻瓷、312.龙眼木雕业、313.砖雕、314.石狮子雕刻、315.琢玉成器、316.象牙雕、317.制作景泰蓝、318.剪纸花样、319.卖“嚣”字、320.糊风筝、321.灯笼作、322.制作灯彩、323.卖中国结

[转载]三百六十行大全(您知晓吗?)
十、其他社会行业
324.会计、325.经纪人、326.跨国经商、327.铸钱币、328.钱庄、329.当铺、330.卖彩票、331.跑堂倌、332.鸡毛换糖、333.换取灯、334.打鼓的、335.收破烂、336.捡烂纸、337.奶妈、338.媒婆、339.乞丐、340.殡葬业、341.棺材铺、342.卖“长锭”、锡箔、343.算命先生、344.测字先生、345.仙姑、346.巫师、347.妓女、348.拉皮条、349.相公、350.小偷、351.强盗、352.卖蒙汗药、353.制作洛阳铲、354.卖烟枪、355.卖白粉、356.宦官、357.保镖、358.刽子手、359.狱警、360.巡警

[转载]三百六十行大全(您知晓吗?)

[转载]三百六十行大全(您知晓吗?)

[转载]三百六十行大全(您知晓吗?)

[转载]三百六十行大全(您知晓吗?)

[转载]三百六十行大全(您知晓吗?)

[转载]三百六十行大全(您知晓吗?)

1216 006.jpg

1216 007.jpg

[转载]三百六十行大全(您知晓吗?)

注:另外还可参见首都博物馆的老北京三百六十行系列http://bjsc2008.cn/gjbj/lbjsblsh.htm

 

Tags:

0

WordPress模板集合

Posted by Alan on November 22, 2014 in 模板专区 |

Alterna – Ultra Multi-Purpose WordPress Theme

Alterna is an retina-ready, fully responsive Multi-Purpose WordPress Theme.Alterna gives you an awesome premium theme to create your website for any type of website; business, corporate, portfolio, blog, products, magazine, shop etc…Alterna also Integrate WooCommerce, WPML, Facebook Page etc…

Alterna includes Drag & Drop Visual Composer Page Builder value 25$; 2 Premium WP Slider : Layer Slider (3D & 2D transitions Slider new features) value 15$ , Revolution Slider value $15 ; premium isotope value 25$; Amazing fancyBox lightbox value 89$ and has a lot of awesome features, check them out below!

Wordpress 主题 Alterna

预览地址:http://themeforest.net/item/alterna-ultra-multipurpose-wordpress-theme/3946450

下载地址:http://pan.baidu.com/s/1nt9h6Lr

Book Store Responsive WooCommerce Theme

Bookstore is a clean responsive WooCommerce powered WordPress store theme suitable for book stores, libraries, book shops, digital products, ebooks, software apps or can be used to create affiliate sites linking to store like Amazon and B&N. It is compatible with all modern mobile devices. Other then being an eCommerce, it also has portfolio included.

Wordpress主题 Book Store

预览地址:http://themeforest.net/item/book-store-responsive-woocommerce-theme/5243193

下载地址:http://pan.baidu.com/s/1gdEJ21P

Directory v2.0.1 + Childthemes, Plugins, Payments & Guides

Create, manage and monetize a local or global directory site using this most popular, responsive directory theme.

Wordpress主题Directory

预览地址:http://templatic.com/app-themes/directory-theme

下载地址:http://pan.baidu.com/s/1o6OEAhW

 GoodStore v1.5 – WooCommerce Responsive Theme

SEO optimized multipurpose online store responsive, flat, retina ready design with unlimited colors, skins and layouts Look Book slider & Catalog Mode WooCommerce plugin & all shortcodes included easy to manage and customizable, WPML ready improvements in layout manager – drag & drop page builder.

Wordpress主题Good Store

预览地址:http://themeforest.net/item/goodstore-woocommerce-responsive-theme/7314327

下载地址:http://pan.baidu.com/s/1qWAxwaK

Grovepixels Full Theme Pack – November 2014

Our collection features premium WordPress themes for bloggers, designers, startups, businesses and freelancers. Browse our wide selection of WordPress themes to find the right one for you.

Wordpress模板Grovepixels

预览地址:http://www.grovepixels.com/themes/

下载地址:http://pan.baidu.com/s/1qWDLlOo

Law Business WordPress Theme is an ideal solution for a private attorney website as well as for larger law office websites. It includes all the neccesary functionality to present legal services online. Custom Services post type lets you provide a gallery of services in an attractive and handy way, describing legal solutions your office offers. If there is a team of lawyers working for your office, Law Business theme provides a great way to showcase attorney personal profiles.

One of the greatest benefits of LawBusiness theme by cmsmasters is a fantastic simplicity of website management it offers. Custom visual composer provides an easy content formatting within drag-and-drop interface. A collection of great shortcodes allows you create diverse and attractive pages.

To make sure your law office gets more clients, Law Business theme has sophisticated SEO options for each of the pages and posts. You can add custom meta for each of them. Valid and optimized HTML5 and CSS3 code help to make sure your Law Offices site is well crawled and indexed by search engine to improve your search performance.

Wordpress主题Law Business

预览地址:http://themeforest.net/item/lawbusiness-attorney-lawyer-wordpress-theme/7581460

下载地址:http://pan.baidu.com/s/1hqzivuW

Office Responsive Business Theme

Office is the ultimate WordPress theme for any corporate business. Featuring a very professional design, 7 custom post types, drag and drop homepage modules, unlimited highlight color option, optional navigation icons, 3 menu regions, an optional responsive layout…Office has everything you’ll want for your business website.

Wordpress模板Office

预览地址:http://themeforest.net/item/office-responsive-business-theme/1718861

下载地址:http://pan.baidu.com/s/1eQoxe4E

Oxygen – WooCommerce WordPress Theme

Oxygen – is a WooCommerce theme, built exclusively for online shopping and offers great variety of options to customize the look and feel of the theme via theme options panel.

You can choose between 4 header types, change typography, toggle shop and blog settings and create unique page layouts with Visual Composer premium plugin, which comes free with this theme.

Slider revolution its also included as a free component for the theme and you can create great presentations for your shop.

Wordpress主题Oxygen

预览地址:http://themeforest.net/item/oxygen-woocommerce-wordpress-theme/7851484

下载地址:http://pan.baidu.com/s/1mgIDbBE

Trend – Photography WordPress Theme

Trend is excellent for portfolio, article, photography, creative, gallery sites. Powerful theme options, thousands of color combinations, easy use, fast build, amazing look! Trend comes with a category slider, and quick view more that allows you to navigate realy fast and have a look at your last photos.

Wordpress主题Trend

预览地址:http://themeforest.net/item/trend-photography-wordpress-theme/7116292

下载地址:http://pan.baidu.com/s/1o6LWLOe

Meganews v1.5 – Magazine Responsive WordPress Theme

WordPress Theme Meganews is a Responsive Magazine WordPress Theme with many features: easy to use Layout Builder (Visual Composer), on-click Theme Options, Resposnive design, unlimited layouts, unlimited colors, different post layouts, many useful shortcodes integrated into the Visual Composer and much more. The main feature is a strong Layout Builder (Visual Composer) which offers you to create wonderful, unique layouts with just clicks. Theme is also SEO friendly.

Wordpress主题模板Meganews

预览地址:http://themeforest.net/item/meganews-magazine-responsive-wordpress-theme/7216941

下载地址:http://pan.baidu.com/s/1jGmTbAQ

Tags: , , , , , ,

0

jQuery常用插件

Posted by Alan on November 18, 2014 in Coding |

表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:

$(form).validate({options})

其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。

例如,当点击表单中的“提交”按钮时,调用validate插件验证用户名输入是否符合规则,并将异常信息显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,在页面中导入了validate插件,当用户在输入框中录入用户名时,自动根据规则进入验证,并显示提示信息,验证成功后,表单才能提交。

表单插件——form

通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:

$(form). ajaxForm ({options})

其中form参数表示表单元素名称,options参数表示调用方法是的配置对象。

例如,在页面中点击“提交”按钮,调用form插件的ajaxForm()方法向服务器发送录入的用户名和密码数据,服务器接收后返回并显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“提交”按钮时,调用form表单插件中的ajaxForm()方法向指定的服务器以ajax方式发送数据,服务器接收后返回并将数据显示。

图片灯箱插件——notesforlightbox

该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,以列表的方式在页面中展示全部的图片,当用户单击其中某张图片时,通过引入的图片插件,采用“灯箱”的方式显示所选的图片,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当用户点击“我的相册”中某一张图片时,则采用“灯箱”的方式显示选中图片,在显示图片时,还可以切换上下张和自动播放及关闭图片。

图片放大镜插件——jqzoom

在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,在页面中,添加一个被<a>元素包含的图片元素,当在图片元素中移动鼠标时,在图片的右边,将显示放大后的所选区域效果,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当在小图片中移动鼠标时,将调用放大镜插件的jqzoom()方法,在图片的右侧显示与小图片所选区域相同的放大区域,实现放大镜的效果。

cookie插件——cookie

使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为:

保存:$.cookie(keyvalue);读取:$.cookie(key),删除:$.cookie(keynull)

其中参数key为保存cookie对象的名称,value为名称对应的cookie值。

例如,当点击“设置”按钮时,如果是“否保存用户名”的复选框为选中状态时,则使用cookie对象保存用户名,否则,删除保存的cookie用户名,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于在点击“设置”按钮时,选择了保存用户名,因此,输入框中的值被cookie保存,下次打开浏览器时,直接获取并显示保存的cookie值。

搜索插件——autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下:

$(textbox).autocomplete(urlData,[options]);

其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。

例如,当用户在文本框输入内容时,调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据,显示在文本框下,提示选择,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当文本框与搜索插件相绑定后,输入任意字符时,都将返回与之相匹配的字符串,提示用户选择,文本框在空白双击时,显示全部提示信息。

右键菜单插件——contextmenu

右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:

$(selector).contextmenu(menuId,{options});

Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。

例如,选中页面<textarea>元素,点击右键,弹出插件绑定的快捷菜单,点击菜单中的各个选项,便在页面中显示操作的对应名称。如下图所示:

在浏览器中显示的效果:

从图中可以看出,当文本框与右键菜单通过插件contextmenu()方法绑定后,选中文本框,点击右键时,弹出快捷菜单,点击“新建”选项时,显示操作对应内容。

自定义对象级插件——lifocuscolor插件

自定义的lifocuscolor插件可以在<ul>元素中,鼠标在表项<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色,调用格式为:

$(Id).focusColor(color)

其中,参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。

例如,在页面中,调用自定义的lifocuscolor插件,自定义<li>元素选中时的背景色,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当<ul>元素调用focusColor()方法绑定自定义的插件之后,当鼠标在<li>元素间移动时,显示自定义的背景色。

自定义类级别插件—— twoaddresult

通过调用自定义插件twoaddresult中的不同方法,可以实现对两个数值进行相加和相减的运算,导入插件后,调用格式分别为:

$.addNum(p1,p2) $.subNum(p1,p2)

上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。

例如,在页面的两个文本框中输入任意数值,点击“计算”按钮调用自定义插件中$.addNum()方法,计算两数值的和并将结果显示在另一文本框中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“计算”按钮时,调用了自定义插件中的$.addNum()方法计算两个文本框中输入数值的和,并将该值显示在另一文本框中。

Tags: , ,

0

CSS3实现照片墙效果

Posted by Alan on November 16, 2014 in HTML5&CSS3 |

HTML5和CSS3已经被谈论很久了,关于W3C等既得利益体的争论这里按下不表,下面通过简单的CSS3代码来实现一个酷炫的照片墙效果,可以用于制作家庭的生活照相册,也可以在追女孩子时适时小秀一把:)

整个代码中用到的主要有CSS3中的transform中的旋转(rotate),过渡(transition),阴影(box-shadow),同时通过position来进行位置的定位,z-index来控制显示的层次。

相关示例代码如下:

	img{
		padding:10px 10px 15px;
		background:#fff;
		border:1px solid #ddd;
		position:absolute;
		transition:0.5s;
		-webkit-transition:0.5s;
		-moz-transition:0.5s;
		z-index:0;
		top:50px;
		left:100px;
		-webkit-transform:rotate(20deg);
		-moz-transform:rotate(20deg);
		transform:rotate(20deg);
	}

	img:hover{
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		transform:rotate(0deg);
		box-shadow:5px 5px 10px #ccc;
		z-index:1;
		-webkit-transform:scale(1.2);
		-moz-transform:scale(1.2);
		transform:scale(1.2);
	}

Tags: ,

0

PPC CTR, QS, CPC的对应关系

Posted by Alan on November 13, 2014 in 电商经验 |

Google 广告排名与CTR(Click Through Rate)对应关系

Google 广告排名与CTR对应关系

案例账户的广告排名与CTR对应关系

案例账户的广告排名与CTR对应关系

质量得分(Quality Score)与CTR的对应关系

质量得分与CTR的对应关系

质量得分与CPC的对应关系

质量得分与CPC的对应关系

以上数字来源于SEMRUSH分享上的PPT,有兴趣的朋友可以点击下面的超链接进行下载

Semrush WordStream Webinar PPT

Tags: , ,

0

Magento圣诞雪花插件

Posted by Alan on November 11, 2014 in Magento |

雪花圣诞节

一年一度的圣诞购物季即将来临,各个商家都在运筹帷幄,布局这一年中最重要的销售计划。除了精心设计促销、加强各渠道的推广、开发新渠道之外,不管是实体店还是网站都需要添加一些应景的设计,今天就为大家推荐一款针对Magento的雪花插件,可在网站上出现缓缓飘落雪花的效果,配合应景的背景更换和站内设计将更好地突出圣诞节的节日氛围。

演示地址:http://inchoo.net/wp-content/uploads/2011/12/InchooSnowflakes/snow.html

下载地址:Magento圣诞节雪花插件

Tags: , ,

0

jQuery实现Ajax

Posted by Alan on November 3, 2014 in Coding |

使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:

load(url,[data],[callback])

参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

例如,点击“加载”按钮时,向服务器请求加载一个指定页面的内容,加载成功后,将数据内容显示在<div>元素中,并将加载按钮变为不可用。如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“加载”按钮时,通过调用load()方法向服务器请求加载fruit.html文件中的内容,当加载成功后,先显示数据,并将按钮变为不可用。

使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为:

jQuery.getJSON(url,[data],[callback])$.getJSON(url,[data],[callback])

其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

例如,点击页面中的“加载”按钮,调用getJSON()方法获取服务器中JSON格式文件中的数据,并遍历数据,将指定的字段名内容显示在页面中。如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“加载”按钮时,通过getJSON()方法调用服务器中的sport.json文件,获取返回的data文件数据,并遍历该数据对象,以data[“name”]取出数据中指定的内容,显示在页面中。

使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:

jQuery.getScript(url,[callback])$.getScript(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

例如,点击“加载”按钮,调用getScript()加载并执行服务器中指定名称的JavaScript格式的文件,并在页面中显示加载后的数据内容,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“加载”按钮调用getScript()方法加载服务器中的JavaScript格式文件后,自动执行文件代码,将数据内容显示在<ul>元素中。

使用get()方法以GET方式从服务器获取数据

使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:

$.get(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

例如,当点击“加载”按钮时,调用get()方法向服务器中的一个.php文件以GET方式请求数据,并将返回的数据内容显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过$.get()方法向服务器成功请求数据后,在回调函数中通过data参数传回请求的数据,并以data.name格式访问数据中各项的内容。

使用post()方法以POST方式从服务器发送数据

get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:

$.post(url,[data],[callback])

参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。

例如,在输入框中录入一个数字,点击“检测”按钮,调用post()方法向服务器以POST方式发送请求,检测输入值的奇偶性,并显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“检测”按钮时,获取输入框中的值,并将该值使用$.post()方法一起发送给服务器,服务器接收该值后并进行处理,最后返回处理结果。

使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:

$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身。

例如,在表单中添加多个元素,点击“序列化”按钮后,调用serialize()方法,将表单元素序列化后的标准URL编码文本字符串显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“序列化”按钮后,调用表单元素本身的serialize()方法,将表单中元素全部序列化,生成标准URL编码,各元素间通过&号相联。

使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:

jQuery.ajax([settings])$.ajax([settings])

其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。

例如,点击页面中的“加载”按钮,调用ajax()方法向服务器请求加载一个txt文件,并将返回的文件中的内容显示在页面,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“加载”按钮时,调用$.ajax()方法请求服务器中txt文件,当请求成功时调用success回调函数,获取传回的数据,并显示在页面中。

使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:

jQuery.ajaxSetup([options])$.ajaxSetup([options])

可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。

例如,先调用ajaxSetup()方法设置全局的Ajax选项值,再点击两个按钮,分别使用ajax()方法请求不同的服务器数据,并将数据内容显示在页面,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用ajaxSetup()方法设置了Ajax请求时的一些全局性的配置选项后,在两次调用ajax请求服务器txt文件时,只需要设置url地址即可。

使用ajaxStart()和ajaxStop()方法

ajaxStart()ajaxStop()方法是一个绑定Ajax事件的方法,当Ajax请求发出前触发ajaxStart()方法,请求完成后触发ajaxStop ()方法,它们的调用格式为:

$(selector).ajaxStart(function())$(selector).ajaxStop(function())

其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。

例如,在调用ajax()方法请求服务器数据前,使用动画显示正在加载中,当请求成功后,该动画自动隐藏,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于使用ajaxStart()ajaxStop()方法绑定了动画元素,因此,在开始发送Ajax请求时,元素显示,请求完成时,动画元素自动隐藏。

Tags: ,

Copyright © 2012-2014 Alan Hou All rights reserved.