添加button按钮(button按钮的用法)

http://www.itjxue.com  2023-01-30 01:57  来源:未知  点击次数: 

按钮button怎么添加符号

首先得先解构一个按钮,把按钮中各个元素都提取出来。按钮的绘制过程:先设一个网格基数(一般为4px) - 绘制一个宽与高存在比例关系的矩形(固定宽度的情况下) - 添加字符(中英文) - 添加按钮(功能) - 调整距离(字符/按钮与矩形之间的距离) -完成。下图就是一个按钮的线稿与正常按钮的对比图。

2.网格基数

绘制一个按钮的第一步,就是设置网格基数。如果网格基数不设置4px而设置3px,那当我们画一个高度为45px的时间选择器时,得知右面“上”的图标高度就是45/2=22.5px,这里出了小数点,22.5px中包含7个网格位,并多出了1.5个px,即22.5-21(3x7网格位)=1.5px的空位,1.5px3px。所以网格基数设置为3px它是不规范的。在下图中也做出了相应的解释。

我把图上按钮中为“上”的这个图标拆解出来,再来分析它。图标宽高为22.5px,多出了1.5px的。如果宽高为21px,就刚好是7个网格位。所以说把网格的基数设为3px,在绘制模块时会出现小数位,小数位不满一个网格位,则网格基数设为3px就是不规范的。

button按钮(icon)

? ? 上一节,我们已经基本实现了按钮组件,但是还不够完善,因为我们的组件并未内置图标,像antd就可以通过icon属性显示一个图标按钮。这一节就来实现它

需求分析

? ? 添加icon属性,用来显示不同的icon图标,并且支持传递字符串或对象,对象形式将用来进行更多控制

? ?? ?添加loading属性,标识按钮加载中

基本实现

? ?? ?增加类型定义

? ?? ?增加类名标识

? ? ? ? ? ? ? ? 当icon或loading属性存在时,增加su-btn-icon标识,对应的css如下

? ?? ?处理icon渲染

? ? ? ? ? ? ? ? 该函数将在按钮文本前被调用,即

? ?? ?使用

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

创建按钮 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像素的空间。传媒查询块可以用多个图标规则:

如何利用c语言添加button按钮

Windows 窗体程序是基于消息机制的,所有控件,它的本质都是一个窗体,都是使用 CreateWindows 函数来创建,不过类名,则需要指定为系统预先注册的控件类,比如,你要创建一个按钮控件,就要这样子 CreateWindows( "BUTTON", "按钮标题" ),CreateWindows 这个函数你应该用了不少了吧,其余的参数可以参考 MSDN,但是类名我们指定了 “BUTTON”,说明我们要创建一个按钮,每个按钮都有一个唯一的 ID,通过你的消息处理函数,可以知道哪个按钮发生了什么事件,详细讲的话,非常多,你可以参考 MSDN,或者《Windows 程序设计》这本书 。

javascript 怎么添加按钮?

借助JQuery更简单实现,这里是一个用原生javascript实现的示例:

html

head

title/title

scripttype="text/javascript"

functionaddButton(){

varhtml="inputtype=\"button\"value=\"新加\"onclick=\"newButton();\"";

document.getElementById("add").innerHTML=html;

}

functionnewButton(){

alert("我是新加的按钮");

}

/script

/head

body

div

p点击该按钮增加一个新按钮/p

inputtype="button"value="点击增加"onclick="addButton();"

p新增的按钮在这显示/p

divid="add"/div

/div

/body

/html

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。

它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

java Jtable 如何动态添加button按钮

有时候我们需要在JTable中嵌入JButton,使得点击某个JTable单元格时,用户感觉通过JButton触发了响应事件。下面我们看看为JTable单元格添加按钮效果和响应事件的方法。以下示例实现的效果为:点击jtable中的button,button上的数字自动加1,并将加1后得到的数字正确显示在button上。

一、添加按钮显示效果

JTable中,单元格的数据显示默认是JTable的效果。如果我们想要按钮显示的效果的话,需要实现swing接口:javax.swing.table.TableCellRenderer,来改变单元格默认的渲染方法。

package?TableButton;

import?java.awt.BorderLayout;

import?java.awt.Component;

import?javax.swing.JButton;

import?javax.swing.JPanel;

import?javax.swing.JTable;

import?javax.swing.table.TableCellRenderer;

public?class?MyButtonRenderer?implements?TableCellRenderer?{

????private?JPanel?panel;

????private?JButton?button;

????

????private?int?num;

????public?MyButtonRenderer()?{

????????initButton();

????????initPanel();

????????panel.add(button,?BorderLayout.CENTER);

????}

????private?void?initButton()?{

????????button?=?new?JButton();

????}

????private?void?initPanel()?{

????????panel?=?new?JPanel();

????????panel.setLayout(new?BorderLayout());

????}

????public?Component?getTableCellRendererComponent(JTable?table,?Object?value,

????????????boolean?isSelected,?boolean?hasFocus,?int?row,?int?column)?{

????????num?=?(Integer)?value;

????????

????????button.setText(value?==?null???""?:?String.valueOf(value));

????????return?panel;

????}

}

二、添加按钮响应事件

第1步中我们为表格添加了渲染器,但是渲染器只负责显示效果,要想点击”按钮“之后有响应,还得跟单元格的编辑器有关。点击表格是会触发表格的编辑时间,所以我们按钮的响应事件可以写在编辑器中,我们需要修改表格的默认编辑器实现。

swing中有个类javax.swing.DefaultCellEditor提供对单元格内插入JTextField/JComboBox/JCheckbox这3种控件,但是不提供对JButton的支持(1.7里不支持,不代表以后不会支持),所以我们得用到另外一个类自己写TableCellEditor,这个类是avax.swing.AbstractCellEditor。

package?TableButton;

import?java.awt.BorderLayout;

import?java.awt.Component;

import?java.awt.event.ActionEvent;

import?java.awt.event.ActionListener;

import?javax.swing.AbstractCellEditor;

import?javax.swing.JButton;

import?javax.swing.JOptionPane;

import?javax.swing.JPanel;

import?javax.swing.JTable;

import?javax.swing.table.TableCellEditor;

public?class?MyButtonEditor?extends?AbstractCellEditor?implements

????????TableCellEditor?{

????/**

?????*?serialVersionUID

?????*/

????private?static?final?long?serialVersionUID?=?-6546334664166791132L;

????private?JPanel?panel;

????private?JButton?button;

????private?int?num;

????public?MyButtonEditor()?{

????????initButton();

????????initPanel();

????????panel.add(this.button,?BorderLayout.CENTER);

????}

????private?void?initButton()?{

????????button?=?new?JButton();

????????button.addActionListener(new?ActionListener()?{

????????????public?void?actionPerformed(ActionEvent?e)?{

????????????????int?res?=?JOptionPane.showConfirmDialog(null,

????????????????????????"Do?you?want?to?add?1?to?it?",?"choose?one",

????????????????????????JOptionPane.YES_NO_OPTION);

????????????????

????????????????if(res?==??JOptionPane.YES_OPTION){

????????????????????num++;

????????????????}

????????????????//stopped!!!!

????????????????fireEditingStopped();

????????????}

????????});

????}

????private?void?initPanel()?{

????????panel?=?new?JPanel();

????????panel.setLayout(new?BorderLayout());

????}

????@Override

????public?Component?getTableCellEditorComponent(JTable?table,?Object?value,

????????????boolean?isSelected,?int?row,?int?column)?{

????????num?=?(Integer)?value;

????????

????????button.setText(value?==?null???""?:?String.valueOf(value));

????????return?panel;

????}

????@Override

????public?Object?getCellEditorValue()?{

????????return?num;

????}

}

需要注意的是得重写TableModel的isCellEditable方法,因为只有为重写Editor的列开启了可编辑功能,单元格才能被编辑,也就才能出发按钮单击事件。在下一段代码中有体现。

另外要注意得禁止掉JTable的行选中功能。否则我们再点击按钮时,JTable不知道是响应为”行选中“还是”按钮单击事件“。

三、测试代码

package?TableButton;

import?java.awt.Color;

import?java.awt.EventQueue;

import?javax.swing.JFrame;

import?javax.swing.JPanel;

import?javax.swing.JScrollPane;

import?javax.swing.JTable;

import?javax.swing.table.DefaultTableModel;

public?class?TestTable?{

????private?JFrame?frame;

????private?JTable?table;

????

????private?Object[][]?data?=?{

????????????{1,?2,?3},

????????????{4,?5,?6},

????????????{7,?8,?9}};

????public?static?void?main(String[]?args)?{

????????EventQueue.invokeLater(new?Runnable()?{

????????????public?void?run()?{

????????????????try?{

????????????????????TestTable?window?=?new?TestTable();

????????????????????window.frame.setVisible(true);

????????????????}?catch?(Exception?e)?{

????????????????????e.printStackTrace();

????????????????}

????????????}

????????});

????}

????public?TestTable()?{

????????frame?=?new?JFrame();

????????frame.setBounds(100,?100,?450,?300);

????????frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

????????frame.getContentPane().setLayout(null);

????????JPanel?panel?=?new?JPanel();

????????panel.setBounds(10,?10,?414,?242);

????????frame.getContentPane().add(panel);

????????panel.setLayout(null);

????????JScrollPane?scrollPane?=?new?JScrollPane();

????????scrollPane.setBounds(10,?10,?394,?222);

????????panel.add(scrollPane);

????????table?=?new?JTable();

????????scrollPane.setViewportView(table);

????????table.setModel(new?DefaultTableModel()?{

????????????@Override

????????????public?Object?getValueAt(int?row,?int?column)?{

????????????????return?data[row][column];

????????????}

????????????@Override

????????????public?int?getRowCount()?{

????????????????return?3;

????????????}

????????????@Override

????????????public?int?getColumnCount()?{

????????????????return?3;

????????????}

????????????@Override

????????????public?void?setValueAt(Object?aValue,?int?row,?int?column){

????????????????data[row][column]?=?aValue;

????????????????fireTableCellUpdated(row,?column);

????????????}

????????????

????????????@Override

????????????public?boolean?isCellEditable(int?row,?int?column)?{

????????????????if?(column?==?2)?{

????????????????????return?true;

????????????????}?else?{

????????????????????return?false;

????????????????}

????????????}

????????});

????????table.getColumnModel().getColumn(2).setCellEditor(

????????????????new?MyButtonEditor());

????????table.getColumnModel().getColumn(2).setCellRenderer(

????????????????new?MyButtonRenderer());

????????table.setRowSelectionAllowed(false);

????}

}

(责任编辑:IT教学网)

更多

推荐HTML/Xhtml文章