怎么用jquery在页面上动态创建一个button按钮?

html-css011

怎么用jquery在页面上动态创建一个button按钮?,第1张

创建按钮 data-role=button

给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery

Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery

Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。

样式链接按钮

在一个网页的主要内容块,你可以样式的任何锚链接为按钮添加 data-role="button"

属性。该框架将加强与标记和类的链接方式链接按钮。例如,这个标记:

图标样式列表

jQuery Mobile 自带很多按钮小图标,如下图所示:

左箭头:data-icon="arrow-l"

右箭头:data-icon="arrow-r"

上箭头:data-icon="arrow-u"

下箭头:data-icon="arrow-d"

删除:data-icon="delete"

添加:data-icon="Plus"

减少:data-icon="minus"

检查:data-icon="Check"

齿轮:data-icon="gear"

前进:data-icon="Forward"

后退:data-icon="Back"

网格:data-icon="Grid"

五角:data-icon="Star"

警告:data-icon="Alert"

信息:data-icon="info"

首页:data-icon="home"

默认情况下,所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos

属性来设置图标的右上方(top)、底部(bottom)、右侧(right)、左侧(left)的文本。例如,标记:

隐藏图片上的文字 data-iconpos="notext"

你也可以创建一个图标按钮,设置

data-iconpos="notext"。按钮插件将隐藏的文字在屏幕上,但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如,data-iconpos="right",data-iconpos="notext":

使用自定义图标,需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类,它的前缀是ui-icon-

,后面的是data-icon值。假如:有一个按钮 data-icon 属性的值为 myapp-email,即 data-icon=“

myapp-email”。那么生产的CSS类是:ui-icon-myapp-email。

然后你可以在你的样式表写一个CSS规则来定义

ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性,请创建一个白色18x18像素的PNG-8图标,并且保存为Alpha透明度。

这将创建标准分辨率的图标,但许多设备都有非常高的分辨率的显示器,就像iPhone

4的视网膜显示器。添加一个高清图标,创建一个图标,36X36像素(18像素大小完全相同的两倍),并添加第二个规则使用WebKit分钟装置像素比例:2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18x18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>手写html</title>

<script type="text/javascript" src="jquery-1.7.js"></script><!--换成自己的Jquery引用-->

<!-- 写javascript -->

<script type="text/javascript">

$(function(){

$("#1").mouseenter(function(){$(this).css("background","red")})//鼠标在按钮上,设置red

$("#1").mousedown(function(){$(this).css("background","yellow")}).mouseup(function(){$(this).css("background","black")})//mousedown数遍按下时 设置为yellow,mouseup点击后变black

})

</script>

</head>

<body>

<input type="button" value="点击" id="1"/>

</body>

</html>

不太懂你的意思,你看看是这个效果吗? 颜色随便设置的

我的JQuery是1.7的,你把1.7JS的引用换成你自己的就可以了

这些点击事件之类的东西你可以百度一下JQueryAPI,里面基本上事件的方法都有,而且很详细。

是的,jQuery使用 CSS 选择器来选取元素。

jQuery 使用 CSS 选择器来选取 HTML 元素。例如:

$("p") 选取 <p>元素。

$("p.intro") 选取所有 class="intro" 的 <p>元素。

$("p#demo") 选取所有 id="demo" 的 <p>元素。

jQuery css()选择器是jquery中的一个功能。