基于jQuery实现仿淘宝套餐选择插件
首先是页面HTML代码
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="./option-jquery-dc.js"></script>
<link rel="stylesheet" href="css/option-jquery-dc.css"/>
<!-- lang: html -->
<div><dt>本地调用</dt><dd class="tb-prop testlocal"></dd><br/></div><div><dt>ajax调用</dt><dd class="tb-prop testajax"></dd></div>
然后调用的js
<!-- lang: js -->
<script>
/************************************
* 基于本地json数据的选项列创建
****************************************/
var datanodes=[
{text:"官方标配",value:"1",selected:true},
{text:"套餐一",value:"2"},
{text:"套餐二",value:"3"},
{text:"套餐三",value:"4"},
{text:"套餐四",value:"5"},
{text:"套餐五",value:"6"},
{text:"套餐六",value:"7"},
{text:"套餐七",value:"8"},
{text:"套餐八",value:"9"},
{text:"套餐九",value:"10"}
];
/**
* @type {mylist}
* @param className 容器支撑层的css名称
* @param 用户点击后调用的回调函数 由开发者自定义
*/
var mylistobjLocal=new OptionList("testlocal","mycall");
mylistobjLocal.createListHtml(datanodes);
/************************************
* 基于远程服务器的json数据的选项列创建
* @type {mylist}
* @param className 容器支撑层的css名称
* @param 用户点击后调用的回调函数 由开发者自定义
*/
var mylistobjAjax=new OptionList("testajax","mycall");
var url="http://127.0.0.1/option-jquery-dc/testJson.php";
/**
* 基于url创建一个选项列表
*/
mylistobjAjax.createListHtmlForAjax(url);
/***
* 用户选中某一个选项的回调函数
* @param result 返回当前选中的项的相关参数
*/
var mycall=function(result){
alert("您选中了: "+result.text+":"+result.value);
}
以上就是本文的全部内容了,希望大家能够喜欢
相关推荐
-
jQuery选择id属性带有点符号元素的方法
本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: $("#address\\.street").text("Enter this field"); 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-typ
-
JQuery球队选择实例
本文实例讲述了JQuery球队选择.分享给大家供大家参考.具体如下: <!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>
-
jQuery选择器之基本选择器与层次选择器
基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名等来查找DOM元素.在网页中,每个id名称只能使用一次,class允许重复使用. 选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素 e
-
JQuery实现带排序功能的权限选择实例
本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: <!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">
-
jquery实现鼠标拖拽滑动效果来选择数字的方法
本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
-
jQuery实现在下拉列表选择时获取json数据的方法
本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e
-
基于jQuery实现仿淘宝套餐选择插件
首先是页面HTML代码 复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript&qu
-
基于jQuery模拟实现淘宝购物车模块
这是网页版淘宝中购物车的页面 注意给checkbox添加事件就是用change() 给button添加事件就是用click() 1.每次点击+号,根据文本框的值乘以当前商品的价格就是商品的小计 2.只能增加本商品的小计,就是当前商品的小计模块 3.修改普通元素的内容是text方法 4.当前商品的价格要把¥符号去掉再相乘 截取字符串substr() 5.parents(‘选择器’)可以返回指定祖先元素4 6.最后计算的结果如果想要保留两位小数通过toFixed(2)方法 7.用户也可以直接修改表单
-
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
本文实例讲述了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery仿淘宝带有指示条的图片转动切换结果</title> <style type="text/css"> * { padd
-
jQuery UI仿淘宝搜索下拉列表功能
jquery仿淘宝搜索下拉列表实现效果如下: 网上搜索教程: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href=
-
基于Bootstrap仿淘宝分页控件实现代码
大家都应该上过淘宝的吧,没有上过淘宝的同学估计也没几个了,但是我相信大多数的人都是在淘宝上面买完东西就下线,很少有人会关注淘宝上的设计这类的,但是对于普通人这样还行,但是对于一个程序员这样就可不行了,因为博主本人是从事前端方面的工作,所以就通过仿照淘宝的设计样式,以求在技能上面能够有一个大的突破 一.淘宝分页控件了解 先上一张淘宝的分页图片: 根据上图中对淘宝分页控件的分析,我们大致上可以将淘宝分页控件分成两部分,一部分是核心部分,这一部分主要就是一个分页的核心功能,这个功能同时也是也是不可或缺
-
jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)
效果图 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
-
jQuery仿淘宝网产品品牌隐藏与显示效果
本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果.分享给大家供大家参考.具体如下: 这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-taobao-product-hidden-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
基于JS分页控件实现简单美观仿淘宝分页按钮效果
最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码: Js代码 var kkpager = {
-
Android仿淘宝头条基于TextView实现上下滚动通知效果
最近有个项目需要实现通知栏的上下滚动效果,仿淘宝头条的那种. 我从网上看了一些代码,把完整的效果做了出来.如图所示: 具体代码片段如下: 1.在res文件夹下新建anmin文件夹,在这个文件夹里创建两个文件 (1).anim_marquee_in.xml进入时动画 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/ap
-
vue仿淘宝订单状态的tab切换效果
前几天刚开始使用vue 做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换. HTML 代码: <div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 <span v-for="(item, i
随机推荐
- jQuery判断div随滚动条滚动到一定位置后停止
- php用户注册页面利用js进行表单验证具体实例
- 把英语踩在脚下的10条黄金准则
- 在 DOS 下也能访问网上邻居
- iOS App中调用iPhone各种感应器的方法总结
- ASP.NET DataTable去掉重复行的2种方法
- 在Framework4.0中实现延迟加载的实现方法
- php随机显示图片的简单示例
- 浅析c语言中的内存
- vue自定义过滤器创建和使用方法详解
- MySQL 删除大表的性能问题解决方案
- JavaScript 冒泡排序和选择排序的实现代码
- php简单实现屏蔽指定ip段用户的访问
- Ruby on Rails所构建的应用程序基本目录结构总结
- jquery表单插件Autotab使用方法详解
- URL编码转换,escape() encodeURI() encodeURIComponent()
- 史上最牛的WINDOWS系统文件详解第1/3页
- C语言解线性方程的四种方法
- java 中复合机制的实例详解
- 如何基于vue-cli3.0构建功能完善的移动端架子
其他
- 易语言用标签制作进度条
- MybatisPlus 教程
- jquery点击按钮表单增加一行
- php调用exe可执行程序
- vux调用mutations
- cygwin生成apk
- idea项目可以在eclipse上运行吗
- js 匿名frame
- asp.netvs求阶乘之和
- javafx service 更新ui
- python做俄罗斯方块
- springboot 转 spring native
- wpf expander header 背景
- 求函数极值的方法牛顿法 python
- pandas设置多层索引
- python 接收特定端口的http
- razor Areas 路由设置
- android string转double
- spring接口的 header怎么设置
- tkinter选择文件夹进行保存图片