首先说明: 你可以到 https://git.oschina.net/hongweizhiyuan/assets.git 下载相关的js文件,比如本站的 jquery和 layer 文件夹!!当然本例的案例都比较简单,直接查看源代码就可以使用,我就不打包进行下载了。
一:描述
最近在做一个项目,里边涉及到一个模块。就是“若干个checkbox,当选中状态时,单击,弹出提示;当不选中状态,单击,没有任何反应”。但界面还必须好看一些呢!
其实这是一个普遍选择性的问题。下面我们来讲解一下。
二:思路分析
在使用时,我们先进行分解动作!当然我们先要越简单越好,由简入深!在使用过程中相关函数的使用,可以在《jquery1.10在线手册》进行查看!
1、选中checbox相应的id值,这里我们叫 id=books ,将 books 时行单击 click 操作。 $("#books").click 2、在books回调函数进行判断,如果选中状态就 弹出 a> 判断,用if 操作 b> 选中 $("#books").prop(checked) c> 不选中弹出,加感叹号 !$("#books").prop(checked) d> 弹出 alert 3、美化弹出框,采用 layer.js 进行弹出美化操作。
三:最简操作方法(步骤1和2)
先看案例 http://www.ijquery.cn/study/demojs/0007-prop/demo1.html
HTML代码:
很简单,一句代码
<input type="checkbox" id="books" checked="checked"/>
JS代码:
上边已经分析了,单击、判断属性、弹出
<script> $(function() { $("#books").click(function() { if (!$("#books").prop("checked")) { alert("弹出信息!"); } }); }) </script>
四:进阶操作(步骤3)
先看案例 http://www.ijquery.cn/study/demojs/0007-prop/demo2.html
开题我们已经说过,这样简单的弹出一个界面,很难看,我们怎么让他变的漂亮一些呢?在这里,我们借助于 layer.js 一款插件,官方网址是 http://sentsin.com/jquery/layer/ 。作者是贤心,他的作品大都非常让人佩服!!起码我是非常佩服的!有兴趣的人可以认真研究一下他的作品。
我们书归正传,来讲一下美化过程,分为两步:
第一步:引入 layer.js 这款插件;
<script src="/assets/layer/layer.js"></script>
第二步:编写代码运行这款插件。
当然了,还有很多其他样式!我只选择了其中一中。相关说明可以去 《layer的帮助手册》去查看,网址是 http://sentsin.com/jquery/layer/api.html#method 。我只简要把 alert 的参数,截图下来,以供参考!
<script> $(function(){ $("#books").on('click',function() { if (!$("#books").prop("checked")) { layer.alert('爱上JQuery', 11,!1); } }); }) </script>
以下是1-12所有的图标,
有心的人发现,后边是!1(感叹号1),它表示呢:没有标题。如果加个标题是这样子的,或者加个回调函数,如图所示:
五:再进阶操作
客户说:我不要关闭按钮,我要加两个按钮,一个确定,一个取消,确定的时候不选 checkbox ,取消的时候选中 checkbox 。以下是详细步骤
1、单击弹出框 2、点击确定,回调函数显示内容:不选中 3、点击取消,回调函数,判断没有选中,则强制选中。
案例地址 http://www.ijquery.cn/study/demojs/0007-prop/demo3.html
以下是代码
$(function(){ var check_box = $('#books'); check_box.on('click',function() { if (!check_box.prop("checked")) { layer.confirm('爱上JQuery',function(index){ layer.msg('书籍没有被选中!'); },function(){ if(!check_box.is(':checked')){ check_box.prop('checked','true'); } }); } }); })
相关API的说明文档详见 http://sentsin.com/jquery/layer/api.html#method