基于jQuery實現(xiàn)仿淘寶套餐選擇插件

更新時間：2015年03月04日 16:20:14 投稿：hebedich

本文給大家介紹的是一款基于jQuery實現(xiàn)放淘寶套餐選擇的插件，主要是基于本地json數(shù)據(jù)的選擇列創(chuàng)建，有需要的小伙伴參考下。

仿淘寶套餐選擇插件

首先是頁面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>本地調(diào)用</dt><dd class="tb-prop testlocal"></dd><br/></div><div><dt>ajax調(diào)用</dt><dd class="tb-prop testajax"></dd></div>

然后調(diào)用的js

復制代碼代碼如下:

<script>
/************************************
* 基于本地json數(shù)據(jù)的選項列創(chuàng)建
****************************************/
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 用戶點擊后調(diào)用的回調(diào)函數(shù) 由開發(fā)者自定義
*/
var mylistobjLocal=new OptionList("testlocal","mycall");
mylistobjLocal.createListHtml(datanodes);
/************************************
* 基于遠程服務器的json數(shù)據(jù)的選項列創(chuàng)建
* @type {mylist}
* @param className 容器支撐層的css名稱
* @param 用戶點擊后調(diào)用的回調(diào)函數(shù) 由開發(fā)者自定義
*/
var mylistobjAjax=new OptionList("testajax","mycall");
var url=" /**
* 基于url創(chuàng)建一個選項列表
*/
mylistobjAjax.createListHtmlForAjax(url);
/***
* 用戶選中某一個選項的回調(diào)函數(shù)
* @param result 返回當前選中的項的相關(guān)參數(shù)
*/
var mycall=function(result){
    alert("您選中了： "+result.text+":"+result.value);
}

以上就是本文的全部內(nèi)容了，希望大家能夠喜歡

您可能感興趣的文章:

相關(guān)文章

jquery實現(xiàn)用戶登陸界面(示例講解)
下面小編就為大家?guī)硪黄猨query實現(xiàn)用戶登陸界面(示例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jquery實現(xiàn)標簽支持圖文排列帶上下箭頭按鈕的選項卡
這篇文章主要介紹了jquery實現(xiàn)標簽支持圖文排列帶上下箭頭按鈕的選項卡的特效，效果十分不錯，而且非常實用，有需要的小伙伴參考下吧。
2015-03-03
jquery事件與函數(shù)的使用介紹
jquery事件與函數(shù)在使用中很頻繁，在本文為大家介紹下事件綁定及函數(shù)聲明和命名函數(shù)表達式，感興趣的朋友可以參考下
2013-09-09
jQuery Validate表單驗證插件添加class屬性形式的校驗
這篇文章主要介紹了jQuery Validate表單驗證插件，在class屬性中添加校驗規(guī)則進行簡單的校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery實現(xiàn)類似老虎機滾動抽獎效果
這篇文章主要介紹了jQuery實現(xiàn)類似老虎機滾動抽獎效果的方法,實例分析了jquery隨機數(shù)及Ajax調(diào)用的相關(guān)技巧,需要的朋友可以參考下
2015-08-08
jQuery向后臺傳入json格式數(shù)據(jù)的方法
這篇文章主要介紹了jQuery向后臺傳入json格式數(shù)據(jù)的方法,實例分析了傳遞json格式數(shù)據(jù)的原理與具體實現(xiàn)技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2015-02-02
jQuery實現(xiàn)Email郵箱地址自動補全功能代碼
這篇文章主要介紹了jQuery實現(xiàn)Email郵箱地址自動補全功能代碼,涉及jQuery鼠標事件及字符操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11
jquerymobile checkbox及時刷新才能獲取其準確值
一般登錄的時候都有個記住用戶名記住密碼的兩個checkbox 多選框用jquerymobile 做頁面，當勾選checkbox 時總是不能獲取它正確的值
2012-04-04
JQuery validate插件驗證用戶注冊信息
這篇文章主要為大家詳細介紹了JQuery validate插件驗證用戶注冊信息的具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
Json2Template.js 基于jquery的插件綁定JavaScript對象到Html模板中
Json2Template.js是一個Jquery插件, 用來綁定JavaScript對象到Html模板中
2011-10-10