基于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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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
php addslashes和mysql_real_escape_string
2010/01/24 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
vant 中van-list的用法说明
2020/11/11 Javascript
Python 自动化表单提交实例代码
2017/06/08 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
numpy 声明空数组详解
2019/12/05 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
开业庆典答谢词
2014/01/18 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
企业2014年度工作总结
2014/12/10 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
中学生自我评价2015
2015/03/03 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python