按钮

个人信息卡片列表样式切换页面详解

早过忘川 提交于 2019-12-06 05:33:31
#先随便说说 先来看看长什么样子(动态图可能加载会慢一点): 先看怎么写,源码放在了github上本文最后会有链接可以做个参考。 #HTML结构 还是简单的HTML结构(我写的HTML结构都很简单哈哈) //注意看图片中的文字。具体的样式自己随意发挥就好。 这里有一个CSS的知识,就是background添加图片并且可以设置坐标,具体可以看看这篇文章 CSS中背景图片定位方法 ,这个页面的右上角两个按钮就是用这个方法在一张图片上提取出来的。 #简单的思路 其实JavaScript的思路很简单,就是获取右上角的两个按钮,然后给按钮添加点击事件,当按钮点击后根据不同的按钮再结合当前信息展示形式的判断,对方框里的所有li重新定义一个样式就好辣~四不四很简单哈哈 OK 获取这两个按钮: 编写了一个getByClassName的一个函数可以用通过类名来获取元素,这个函数的编写可以参考前一篇文章 《用原生JS写getByClassName方法》 遵循一个原则最好不用id所以我没有用id去定义这两个按钮,这个建议也给所有共同学习前端的同学。PS:但是我在判断当前的时候用了id所以别喷我哈哈所以我还是渣渣 ** 题外话,步入正题。** #正题-获取元素绑定事件 var switchBar=document.getElementById('switch');//获取父元素 var list

HTML5中form的新增属性或元素

╄→尐↘猪︶ㄣ 提交于 2019-12-06 05:16:19
1.新增的表单元素 1.1 progress 表示任务的完成情况,常用于进度条。 max 定义进度元素所要求的任务的工作量,默认值为1 value 定义已经完成的工作量,如果max值为1,该值必须是介于0~1之间的小数。 <progress value="70",max="100">70%</progress> 1.2 output 表示用户动作产生的结果. name 定义元素的名称 for 其他元素的id列表,表明这些元素为计算提供了输入值(或其他影响)。 1.3 meter 刻度条,表示规定范围内的数量值。 value:在元素中特地表示出来的实际值,该值在min与max之间,如果未指定,该值默认为1 min :指定规定范围时允许使用的最小值,默认为0 max :指定规定范围时允许使用的最大值,默认为1 low :规定范围的下限值必须小于或等于high属性的值 high:规定范围的上限值(表示较高危险的意思) optimum :最佳值 <p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p> 1.4 datalist 下拉列表,表示其他控件可用的值,其值通过<option>作为datalist的子元素存在 ![图片描述][3] 2. input的type属性值

点击按钮后切换图片

随声附和 提交于 2019-12-06 05:15:54
点击按钮,在下面2个图片中切换: //只需要更改m文件代码。 typedef enum { kButtonStart = 1, // 按钮tag=1 kButtonStop, // 按钮tag=2 }kButtonStatus; @implementation ViewController // other codes // ... // 通过按钮的tag进行图片切换 - (IBAction)startBtnDidClick:(UIButton *)sender { if (sender.tag == kButtonStart) { [sender setImage:[UIImage imageNamed:@"pause"] forState:UIControlStateNormal]; sender.tag = kButtonStop; } else { [sender setImage:[UIImage imageNamed:@"start"] forState:UIControlStateNormal]; sender.tag = kButtonStart; } } @end 来源: CSDN 作者: 阿米尔C 链接: https://blog.csdn.net/m_052148/article/details/48580871

JAVA Eclipse如何设置点击按钮切换图片

梦想的初衷 提交于 2019-12-06 05:14:21
右击图片文件夹,新建一个Android XML文件 设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为selector之后,添加下面黄色的两行,按钮常规和按下的时候对应的图片,这里注意都是对应的前面放进去的图片 <? xml version = "1.0" encoding = "utf-8" ?> < selector xmlns:android = "http://schemas.android.com/apk/res/android" > < item android:drawable = "@drawable/rotateleft" android:state_pressed = "false" ></ item > < item android:drawable = "@drawable/rotateleft_click" android:state_pressed = "true" ></ item > </ selector > 添加一个ImageButton,注意删掉src属性,添加background属性即可,这种做法比在主程序中点击按钮之后根据ID查找按钮然后替换图片要更简洁方便 来源: CSDN 作者: gary_tao 链接: https://blog.csdn.net

原生js点击按钮切换图片

瘦欲@ 提交于 2019-12-06 04:58:01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态切换图片</title> </head> <style> ul{ padding:0;margin:0; } li{ list-style: none; } #pic{ position: relative; width: 400px; height: 400px; background-color:red; margin:100px auto; background:url('image/1.jpg') no-repeat center; } #pic img{ width: 400px; height: 400px; } #pic ul{ width: 50px; position: absolute; top: 0; right: -70px; } li{ width: 40px; height: 40px; margin-bottom:10px; background-color: pink; float: left; } #pic span{ position: absolute; bottom: 10px; left: 0; } #pic p,#pic span{ width: 400px; height: 20px; }

HTML5前期学习准备(一)

守給你的承諾、 提交于 2019-12-06 04:51:35
HTML简介 1、html的基本概念 HTML:HyperTextMarket language,超文本标记语言(所谓“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。)是用来描述网页语言,html使用标记标签来描述网页,所以说html是一种标记语言,而不是编程语言。 -----html先知知识----- 在学习HTML之前最先应该了解的就是html环境的搭建,那么必须从编辑器和解析器等方面做一个深入的了解。现在为大部分开发者青睐的编程软件有sublime及visual studio code,当然现如今还有很多的集成开发软件如Dreamweaver等。 而主流的选择器内核及代表浏览器“Chrome、Safari、Firefox、Opera、IE(IEtest);Firefox是开源的Presto(迅速的)代表作品Opera,Prefox是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。Webkit Safari内核,Chrome内核原型,他是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核Blink由Google和Opera Software开发的浏览器排版引擎。” 2、html文档的组成 完整的HTML文档是有多个HTML元素按照一定的方式组成的(此处为html5文档),如下图:

点击按钮切换背景

允我心安 提交于 2019-12-06 04:48:01
解释:按钮的时候按钮变色,移开手指,恢复原样 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 获得焦点但未按下时的背景图片 --> <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/head_nitify_selecta" /> <!-- 按下时的背景图片 --> <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/head_nitify_selectaa" /> <!-- 按下时的背景图片 --> <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/head_nitify_selectaa" /> <!-- 默认时的背景图片 --> <item

jquery切换按钮背景图片

本小妞迷上赌 提交于 2019-12-06 04:47:06
有三个按钮,默认背景图片浅色的,当点击任意一个按钮更换其背景图片颜色加深,其它两个不变。 第一步:引入jquery包 第二步:HTML页面 第三步:style样式 第四步:jquery事件 第五步:效果展示 来源: CSDN 作者: xiao_jam 链接: https://blog.csdn.net/xiao_jam/article/details/53505634

Android Button 点击时替换背景颜色和替换当前图标

爷,独闯天下 提交于 2019-12-06 04:45:21
<Button android:id="@+id/btn_home" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/main_bottom_item_bg" android:drawableTop="@drawable/tab_home_bg" android:onClick="onTabClicked" android:paddingBottom="2dip" android:paddingTop="7dip" android:scaleType="matrix" android:text="@string/home" android:textColor="@color/button_text" android:textSize="12sp" /> 修改button背景:background 背景颜色的文件名:main_bottom_item_bg <selector xmlns:android="http://schemas.android.com/apk/res/android"> //android:state_selected="true"为选中时显示 <item android:drawable="@color

button设置点击更改背景图片

こ雲淡風輕ζ 提交于 2019-12-06 04:43:37
给button设置背景图片很简单,设置点击时的背景也简单,做一个selector选择器就好了。当我想在点击时和松开后背景不再改变回去时遇到了麻烦,无论怎么设置selector都不起作用。无奈上网求救,遇一好心人解答,感谢他,现将解决方法记录下来。 第一种方法:给按钮添加监听事件,并做标志。这个貌似要在xml文件给按钮加上背景。 button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if(btstate==0){ // button.setBackgroundColor(0xff000000); //改变背景色 button.setBackgroundResource(R.drawable.radio_btn); //改变背景图片 btstate=1; }else if (btstate==1) { // button.setBackgroundColor(0xff2bb8aa); button.setBackgroundResource(R.drawable.radio_btn_none); btstate=0; } } }); 第二种方法:用checkbox xml文件中给设置android:button="@null",不显示方框+对号。监听事件