基于jQuery實現(xiàn)仿淘寶套餐選擇插件
更新時間：2015年03月04日 16:20:14 投稿：hebedich
本文給大家介紹的是一款基于jQuery實現(xiàn)放淘寶套餐選擇的插件，主要是基于本地json數(shù)據(jù)的選擇列創(chuàng)建，有需要的小伙伴參考下。
首先是頁面HTML代碼
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
<!-- lang: js -->
<script>
/************************************
* 基于本地json數(shù)據(jù)的選項列創(chuàng)建
****************************************/
var datanodes=[
{text:"官方標(biāo)配",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);
/************************************
* 基于遠程服務(wù)器的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 返回當(dāng)前選中的項的相關(guān)參數(shù)
*/
var mycall=function(result){
alert("您選中了： "+result.text+":"+result.value);
}
以上就是本文的全部內(nèi)容了，希望大家能夠喜歡
相關(guān)文章
下面小編就為大家?guī)硪黄猨query實現(xiàn)用戶登陸界面(示例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
jquery實現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項卡
這篇文章主要介紹了jquery實現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項卡的特效，效果十分不錯，而且非常實用，有需要的小伙伴參考下吧。2015-03-03
jquery事件與函數(shù)在使用中很頻繁，在本文為大家介紹下事件綁定及函數(shù)聲明和命名函數(shù)表達式，感興趣的朋友可以參考下2013-09-09
jQuery Validate表單驗證插件 添加class屬性形式的校驗
這篇文章主要介紹了jQuery Validate表單驗證插件，在class屬性中添加校驗規(guī)則進行簡單的校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了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鼠標(biāo)事件及字符操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
jquerymobile checkbox及時刷新才能獲取其準(zhǔn)確值
一般登錄的時候 都有個記住用戶名 記住密碼 的兩個checkbox 多選框用jquerymobile 做頁面 ，當(dāng)勾選checkbox 時總是不能獲取它正確的值2012-04-04
這篇文章主要為大家詳細介紹了JQuery validate插件驗證用戶注冊信息的具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
Json2Template.js 基于jquery的插件 綁定JavaScript對象到Html模板中
Json2Template.js是一個Jquery插件, 用來綁定JavaScript對象到Html模板中2011-10-10