本类周下载排行
本类月下载排行
热门关键词
jQM代码助手 V0.1 绿色版
jquery代码生成器|软件简介 Soft Introduction
jQM代码助手是一款绿色免费的jquery mobile自动生成代码工具，jquery代码生成器非常适合jquery mobile中文学习的新手程序员们使用，可以非常快速的生成代码，提高效率。【功能介绍】将常用的组件分类成page页面、content内容、Form表单，其中page页面包括header头部、navbar导航、footer底部、grid网格、panel面析、collapsible折叠层，content内容image图片、audio音频、video视频、button按钮、link链接、listview...等等，通过简单设置组件的属性自动生成代码片段，默认使用的是最新版的jquery mobile 1.4.3版本。jquery mobile代码助手包含了对JQuery Mobile中的所有组件属性的详细介绍。对于JQuery Mobile的初学者，可以通过生成代码片段进行练习，学习JQuery Mobile所有组件的属性和接口，对于JQuery Mobile开发人员，jQM代码助手可以快速生成代码，提高效率。 【JQM(jquery mobile)】jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。
如果您觉得此软件好，请
如果您觉得此软件差，请
依次点击下面广告进入 →jQM代码助手 V0.1 绿色版
← 下载列表 Soft Download URL
jQM代码助手 V0.1 绿色版电信下载： 联通下载： 移动下载： 专用下载：
相关软件 Related Software
注意事项 Attentions
如果您发现该软件不能下载,请.
为了保证您快速的下载,推荐使用[]等专业工具下
为确保所下软件能正常使用,请使用[]或以上版
本解压本站软件.
站内软件包含破解及注册码均由网上搜集,若无意中侵犯到您的权利,敬请来信
如果下载回来的部分压缩包需要解压密码的话，解压密码就是：
本站设有电信网通多台服务器负载均衡,如果出现无法下载请稍后再试一下!
服务器赞助商 Server Provider现在已经进入了移动互联网时代，因此将你的网站迁移到移动设备上就显得比较重要的。问题是，如何在移动设备的小屏幕中呈现你的网站中的所有内容呢？
本文介绍13款基于jQuery Mobile的布局插件和示例，可以帮助你创建多视图或者分割视图布局的移动web页面，并会根据移动设备的方向和屏幕大小来动态调整所显示的内容。
1.& Three Column iPad Layout
三列分割视图布局效果，为手机和平板电脑上的移动网页布局提供了一个良好的平台。
2.& JQM Multiview Plugin
JQM Multiview Plugin是一个基于jQuery mobile开发的多视图页面导航插件，帮助你创建各种类型的页面视图，并且提供菜单。
3.&& jQuery Mobile SplitView
SplitView会根据平板电脑的方向以及屏幕尺寸动态调整页面。调整浏览器大小、旋转平板电脑来体验浏览效果！
4.& Multiview Plugin
此页面是一个多视图页面，包含4个面板和16个页面，当加载页面时，这些全部会被加载到DOM中。
5.& Multi-page (boiler) Template
这是一个多页面的样板页面，你可以复制并建立自己的jQuery Mobile页面。此样板包含多个页面容器。
6.& Multi-Page Template
这个插件用来在加载子页面时预读取前面的多个页面，实现更快的响应时间。
7.& jQuery Mobile Multiple Pages
在这个示例中，介绍如何用多个页面建立一个简单的移动网站。多个页面可以嵌入一个文档或单独的文件中。
8.& 960 Grid on jQuery-Mobile
960 Gird是一个用于移动Web开发的网格框架，综合了960.gs的灵活性和jQuery Mobile的方便性。它的目的是让jQuery Mobile布局更加的灵活。
9.& Creating A Tablet Split View For jQuery Mobile
在此示例中，可以看到使用了CSS创建的分割视图。
10.& jQuery Mobile and Dynamic Page Generation
该插件可以在服务器端生成HTML页面/片段，也可以根据JSON或其他格式内容在客户端中动态生成页面内容。
11.& Fixed toolbars
使用“fixedtoolbar”插件，工具栏会固定显示在页面顶部或底部，页面内容可以在中间自由的滚动。在不支持固定定位的浏览器中，当页面滚动时，工具栏会在页面的顶部或底部隐藏或显示。
12.& App-UI
App-UI是一个UI组件集合，可以帮助Web或移动开发者使用HTML和JavaScript来创建交互式应用程序，尤其是针对移动设备创建应用程序。
13.& jQuery-Mobile – Plugin: Multiview
分屏模式
全屏模式
popover形式：主面板全屏，其余为弹出窗口
允许网站有分屏显示和正常显示两种模式
英文原文：&!DOCTYPE html&
&html lang=”zh-CN”&
&title&&/title&
&script src=”/jquery/1.9.0/jquery.js”&&/script&
&div class=”box&#1&/div&
&script type=”text/javascript”&
$(function () {
$(“.box”).click( function () {
var ele = $._data($(“.box”)[0], “events”);
console.log(ele);
console.log(ele["click"]);
if (ele && ele["click"]) {
alert(“有绑定事件！”);
alert(“无绑定事件！”);
This entry was posted in .
js、juqery
天、时、分、秒倒计时
&div class=”seckill”&
&span class=”status”&&/span&
&em&：&/em&
&span class=”day”&–&/span&天
&span class=”hour”&–&/span&小时
&span class=”minute”&–&/span&分
&span class=”second”&–&/span&秒
$.fn.seckill = function (startTimePara, endTimePara) {
var startTime = startTimePara,
endTime = endTimePara,
$this = $(this),
// 开始时间
startTime = startTime.replace(/-/g,”/”);
startTime = new Date(startTime).getTime();
// 结束时间
endTime = endTime.replace(/-/g,”/”);
endTime = new Date(endTime).getTime();
// 当前时间
function wr() {
nowTime = new Date();
nowTime = nowTime.getFullYear() + “-” +
(+ + (nowTime.getMonth() + 1)).slice(-2) + “-” +
(+ + nowTime.getDate()).slice(-2) + ” ” +
(+ + nowTime.getHours()).slice(-2) + “:” +
(+ + nowTime.getMinutes()).slice(-2) + “:” +
(+ + nowTime.getSeconds()).slice(-2);
nowTime = nowTime.replace(/-/g,”/”);
nowTime= new Date(nowTime).getTime();
compareTime(startTime, nowTime, endTime);
//console.log(flag);
// 比较时间
function compareTime(startTime, nowTime, endTime) {
if (startTime & nowTime) {
resTime = startTime – nowT
resTimes(resTime);
$this.find(“.status”).html(“距活动开始”);
} else if (startTime &= nowTime && endTime & nowTime ) {
resTime = endTime – nowT
resTimes(resTime);
$this.find(“.status”).html(“距活动结束”);
//alert(1);
$this.find(“.status”).html(“活动已结束”);
$this.find(“p”).hide();
$this.find(“.day”).html(days);
$this.find(“.hour”).html(hours);
$this.find(“.minute”).html(minutes);
$this.find(“.second”).html(seconds);
function resTimes(resTime) {
//相差的天数
days = Math.floor(resTime / (24 * 3600 * 1000));
//相差的小时数
temp1 = resTime % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
hours = Math.floor(temp1 / (3600 * 1000));
//相差分钟数
temp2 = temp1 % () //计算小时数后剩余的毫秒数
minutes = Math.floor(temp2 / (60 * 1000));
//相差的秒数
temp3 = temp2 % (60 * 1000); //计算分钟数后剩余的毫秒数
seconds = Math.round(temp3 / 1000);
setInterval(wr, 1000);
执行方法：
$(“.seckill”).seckill(&#-21 9:20:00″, &#-21 17:50:00″);
实例地址：
欢迎大家，一起学习，交流。
This entry was posted in , .
响应式网页由伊桑.马科特提出，他在发表了一篇开创性的文章，将三种已有的开发技巧整合起来，并名为响应式网页设计。响应式网页（英语：Responsive web design，通常缩写为RWD），又称为自适应网页设计、回应式网页设计。 是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。响应式的设计应该秉承「内容优先，移动优先」的设计原则。想要实现响应式设计，要注意以下：
媒体查询：
1、阻止浏览器缩放页面
在使用智能手机浏览PC端网站时，一般会自动缩放到合适的宽度使视口能够显示整个页面，但是这样会使文字变得很小，浏览内容不方便。可以通过设置meta标签的viewport属性，设定加载网页时以原始的比例显示网页，将这个meta标签加到head标签里。下面是将页面放大设备实际尺寸两倍显示的meta标签的示例：
&meta name=”viewport” content=”width=device-width,initial-scale=2.0″ /&
当按住屏幕2点向外拉伸可放大2倍时效果。
其中initial-scale=2.0的意思是将页面初始的缩放比例放大2倍，width=device-width的意思是浏览页面的宽度应该等于设备宽度。还可以通过user-scalacle=”no”设置禁止手动缩放，height=height-viewport浏览页面的高度应该等于设备高度，minimum-scale允许用户缩放到的最小比例，maximum-scale允许用户缩放到的最大比例。下面是我最终使用的meta标签：
&meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1″ /&
当按住屏幕2点向外拉伸可放大1倍时效果。
2、媒体查询
实现响应式设计的关键技术是CSS3的媒体查询模块，可以根据设备显示器的特性为其设定CSS样式。创建媒体查询时，较常用的是设备的视口检测，如：width视口宽度、height视口高度、device-width渲染表面的宽度（设备的宽度）、device-height渲染表面的高度（设备的高度），还有更多的媒体查询检测特征，这里不就一一列举，如果想查看请，除了scan、grid之外，都可以使用min、max前缀来创建一个查询，所以可以这样创建一段代码：
&link rel=”stylesheet” type=”text/css” media=”screen and (min-width: 200px) and (max-device-width: 360px)” href=”smallScreen.css” /&
@import url(“phone.css”) screen and (min-width: 200px) and (max-width :360px);
以上2段代码，使其在视口在200像素和360像素之间才会引用的代码。
该图显示为使用link标签引用
该图显示使用@import时引用
虽然不匹配的文件会被自动忽略，但是不确定文件不被下载，因此，将可能造成页面渲染的HTTP请求，从而导致访问速度变慢，所以建议使用在CSS样式表中使用媒体查询，如下：
@media screen and (max-width: 320px) {
/* 设备宽度小于320px */
@media screen and (min-width: 320px) and (max-width: 480px) {
/* 设备宽度小于480px大于320px */
@media screen and (min-width: 480px) and (max-width: 640px) {
/* 设备宽度小于640px大于480px */
@media screen and (min-width: 640px) and (max-width: 768px) {
/* 设备宽度小于768px大于640px */
@media screen and (min-width: 768px) and (max-width: 1280px) {
/* 设备宽度小于1280px大于768px */
@media screen and (min-width: 1280px) {
/* 设备宽度大于1280px */
以上的代码区分了几个比较常见的视口宽度下显示样式，这个可以根据自己项目需求做适当的修改。
3、百分比布局（流体式布局）
媒体查询有其优越性，但也存在一定的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者之间没有任何平滑渐变。为了实现更灵活的设计，能在所有视口中完美显示需要使用灵活的百分比布局，这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。Ethan Marcotte提供了一个简易可行的公式口即：
目标元素宽度÷上下文元素宽度=百分比宽度
只要明确了上下文元素，就可以很方便地将固定像素宽度转换对应的百分比宽度，实现百分比布局。假设上下文宽度为200px，如果想设置目标的宽度是20px，可以这样设置：
width: 200
height: 50
border: 1px solid #f00;
width: 10%;
height: 50
background: #0f0;
&div class=”box”&
&div class=”pox”&&/div&
该图显示了pox的实际宽度为20px
网页中指定固定像素的字体大小是经常使用的文字大小单位是 px(Pixels)，但如果你想字体大小更具弹性的话，最好还是使用相对大小，CSS中比较常用的指定字体相对大小的单位有百分比，em以及CSS3新增的。
之前在网页设计中使用em代替px主要是为了文字缩放，因为老版本的IE无法缩放px单位的文字，实际上em是相对其上下文的字体大小而确定的，同样可以使用“目标元素宽度÷上下文元素宽度=百分比宽度”这个公式转换为相对单位。唯一值得欣慰的是，现代浏览器的默认字号都是16px，也就是body的默认font-size为16px，假设设置html的font-size为10px，可以这样设置：
body{ font-size : .625 } /* 10/16=0.625 */（小数点前面的0可以省略）
由于chrome不支持小于12px的字体，可以在FFbug中查看设置后的字号实际大小。
chrome查看如上
ff bug查看如上
这样定义了body的默认字号为10px，当想设置h1的字体为32px的时候，可以这样设置了：
h1 { font-size : 3.2 }
使用了em做为字体单位，可以很方便的全局修改字体大小，只要修改了body的fonn-size大小即可。这样在配合媒体查询可以在不同视口下显示不同的字体大小，em唯一不够完美的是基于父元素的字体大小，加入有很深的结构可能计算起来会很麻烦，but，css3的rem拯救了我们，再也不用担心父级元素的字体大小了，因为它始终是基于根元素的。通常在标题，正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景，rem 可能会导致布局错位。
网页上除了文字就是图片，实现图片的流动布局非常简单，如下：
img { width : 100%;}
这样就可以使用图片自动缩放与其容器100%匹配。
推荐使用chrome浏览器模拟，既有手势，还有 mouse touch事件，同事也可以附加一个chrome插件《 》
响应式设计，也就是在一般设计的基础上加了媒体查询特性，使其能根据不同的视口加载不同的css样式，从而显示不同的效果。这里介绍的只是一些基础的知识，例如浏览器的兼容问题，当使用css精灵时候背景图片的问题，这些我会在后面的文章中再做介绍。这里提供一下我工作的案例供大家查考，《》《》！欢迎大家，一起学习，交流。处女男处女文章！
This entry was posted in , .
JOSN的语法可以便是以下三种类型的值
1、简单值：使用与javascript相同，但JSON不支持undefined。
2、对象：对象作为一种复杂数据类型，表示的是一组无序的键值对。
3、数组：数组是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。
“hello word”
“name”:”epan”,
["epan", 28, true]
JSON对象：
早期的JSON解析器基本是使用eval()函数，因为可能会执行一些恶意代码，不安全，ECMAScript5对解析JSON进行了规范，定义了全局对象JASON，支持的浏览器IE8+，JSON对象有2个方法：stringify()和parse()，这2个方法分别用于把javascript对象序列化为JSON字符串和把JOSN字符串解析为原生javascript值，如下：
var book = {
title: “js”,
authors : [
edition: 3,
year: 2014
var jsontext = JSON.stringify(book);
console.log(jsontext);//{“title”:”js”,”authors”:["epan"],”edition”:3,”year&#}
将JSON字符串直接传递给JSON.parse()借可以得到相应的javascript值。
序列化选项：
JSON.stringify()可以接收2个参数，第一个是一个过滤器，第二个是一个选项，保留缩进。
如果过滤器传入的是数组，那么在结果中只将包含数组中列出的属性，如下：
var book = {
title: “js”,
authors : [
edition: 3,
year: 2014
var jsontext = JSON.stringify(book,["title", "year"]);
console.log(jsontext);//{“title”:”js”,”year&#}
如果第2个参数是函数，函数接收2个参数，属性名和属性值，如下：
var book = {
title: “js”,
authors : [
edition: 3,
year: 2014
var jsontext = JSON.stringify(book, function (key, value) {
switch (key){
case “authors”:
return value.join(“|”);
case “year”:
return 5000;
case “edition”:
console.log(jsontext);//”title”:”js”,”authors”:”epan|ken”,”year&#}
JOSN.stringify()方法的第3个参数用于控制结果中的缩进和空白符，这个参数是一个数值，它表示每个级别缩进的空格数，如下：
var book = {
title: “js”,
authors : [
edition: 3,
year: 2014
var jsontext = JSON.stringify(book, null, 4);
console.log(jsontext);
// “title”: “js”,
// “authors”: [
// "epan",
// “edition”: 3,
// “year”: 2014
最大缩进空格为10，如果超过了10的值都自动转换为10，如果传入的不是数字，而是字符串，则这个字符串将在JSON字符串中被用作缩进字符。
可以通过给对象定义toJSON()方法返回自身JSON数据格式，如下：
var book = {
title: “js”,
authors : [
edition: 3,
year: 2014,
toJSON: function () {
return this.
var jsontext = JSON.stringify(book);
console.log(jsontext); //”js”
解析选项：
JSON.prase()方法可以接收一个函数为参数，将在每个键值对上调用，如下：
var book = {
title: “js”,
authors : [
edition: 3,
year: 2014,
releaseDate: new Date()
var jsontext = JSON.stringify(book);
var bookcopy = JSON.parse(jsontext, function (key, value) {
if(key == “releaseDate”) {
return new Date(value);
console.log(bookcopy.releaseDate.getFullYear()); //2014
This entry was posted in .
Retina描述摘至基维百科：
Retina显示屏（英文：Retina Display）是一种由苹果公司设计和委托制造的显示屏，具备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏，最初采用该种屏幕的产品iPhone 4由执行长史蒂夫·乔布斯于WWDC2010发布，其屏幕分辨率为960×640（每英寸像素数326ppi）。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。[1]如今苹果正逐步将其推广到全线产品之上。
在Webkit内核”safari6″和“chrome21”支持CSS4的background-image新规范草案image-set。通过Webkit内核的浏览器私有属性“-webkit”，image-set为Web前端人员提供了一种解决高分辨率图像的显示，用来解决苹果公司提出的Retian屏幕显示图片的技术问题。简而言之：这个属性用来支持Web前端人员解决不同分辨率下图片的显示，特别的（Retina屏幕）。 qq.com就是采用了这种方法，对Logo图片进行了处理，在普通分辨率下，将调用“qqlogo_1x.png”图片，而在Retina屏幕下（比如iPhone4s,iPhone5，New iPad等IOS设备）下会调用“qqlogo_2x.png”图像，从而避免了Logo在Retina屏幕下显示不清晰的问题。
当图片作为背景的时候我们可以这样使用:
selector {
background-image: url(1.png);
background: image-set(1.png) 1x,url(2.png) 2x)
我们现在开始使用了这个技术：、、、、
类似于不同的文本，图像也会显示成不同的：
不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像；
支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；
Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。
CSS image-set 解决了背景图片的响应式问题，但是 HTML中的 img 元素怎么办呢？正当我一筹莫展的时候，2011年11月 @brucel 提出了HTML5 的一个草案：
&picture width=+ height=+&
&source media=”(min-width: 45em)” srcset=”large-1.jpg 1x, large-2.jpg 2x”&
&source media=”(min-width: 18em)” srcset=”med-1.jpg 1x, med-2.jpg 2x”&
&source srcset=”small-1.jpg 1x, small-2.jpg 2x”&
&img src=”small-1.jpg” alt=”"&
&p&Accessible text&/p&
&/picture&
可以看到这里的「srcset」属性类似 image-set，通常情况下，srcset 里面的资源是具有 fallback 特性的，也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。 但是 Apple 的
提出的方案是这样的：
&img src=”foo-lores.jpg” srcset=”foo-hires.jpg 2x,
foo-superduperhires.jpg 6.5x”
alt=”decent alt text for foo.”&
This entry was posted in .
2015 年三月
91011131415
16171819202122
23242526272829