基于jQuery实现仿淘宝套餐选择插件


Posted in Javascript onMarch 04, 2015

基于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);

}

以上就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
javascript 回调函数详解
Nov 11 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 #Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 #Javascript
JavaScript常用脚本汇总(三)
Mar 04 #Javascript
JavaScript常用脚本汇总(二)
Mar 04 #Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 #Javascript
JavaScript常用脚本汇总(一)
Mar 04 #Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 #Javascript
You might like
回帖脱衣服的图片实现代码
2014/02/15 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
Node.js Domain 模块实例详解
2020/03/18 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Python命令行解析模块详解
2018/02/01 Python
python实现自动解数独小程序
2019/01/21 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
购房意向书范本
2014/04/01 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
五好家庭申报材料
2014/12/20 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
浅析Django接口版本控制
2021/06/26 Python
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
在Docker容器中部署SQL Server
2022/04/11 Servers