基于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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
Vue实现多标签选择器
Nov 28 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关闭warning问题的解决方法
2016/05/17 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
使用JS动态显示文本
2017/09/09 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
python实现手机销售管理系统
2019/03/19 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
Django URL参数Template反向解析
2020/11/24 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Java的五个基础面试题
2016/02/26 面试题
SQL SERVER面试资料
2013/03/30 面试题
财务部出纳岗位职责
2013/12/22 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
讲文明倡议书
2015/04/29 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP