jQuery實現B2B網站后臺管理系統側導航_jquery

來源:腳本之家  責任編輯:小易  

/這個要看具體網站的設計了.例如有的網站是做的API來讓編輯人員之間編輯,選擇效果有的是直接所見即所得的,例如ecshop的首頁編輯效果其他的就是有HTML代碼功底的人員,編輯的網頁直接上傳代碼還有其他未能想到的方式www.anxorj.tw防采集請勿采集本網。

效果圖

1.html部分

我是做java的,java里有fastjson等jar文件,你應該是.NET的吧,后臺的json數據你已經傳到前臺了, NET我記得應該可以引用DataContractJsonSerializer類,或者你可以去json.org這個網站找到.NET

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" rel="external nofollow" > <link rel="stylesheet" href="css/style.css" rel="external nofollow" ></head><body><div class="account-l fl"> <a class="list-title">賬戶概覽</a> <ul id="accordion" class="accordion"> <li> <div class="link"><i class="fa fa-leaf"></i>產品管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="shop"><a>查看店鋪</a></li> <li id="publicproducts"><a>發布產品</a></li> <li id="productlists"><a>查看產品</a></li> <li id="mysaled"><a>已賣出產品</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-shopping-cart"></i>采購管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="publishpurchase"><a>發布采購</a></li> <li id="postneeds"><a>查看采購</a></li> <li id="getneeds"><a>已收到的報價單</a></li> <li id="mypricesheet"><a>我的報價單</a></li> <li id="concernshop"><a>已關注的店鋪</a></li> <li id="concerngood"><a>已關注的商品</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-pencil-square-o"></i>詢盤管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="buyerxunpanlist"><a>收到的詢盤</a></li> <li id="publishrequire"><a>我的詢盤</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-file-text"></i>訂單管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="myorder"><a>我的訂單</a></li> <li id="myrefund"><a>退款申請</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-globe"></i>金融管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="myloan"><a>我的借貸</a></li> <li id="financialmanage"><a>需求申請</a></li> <li id="myapplication"><a>我的申請</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-unlock-alt"></i>安全管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="basecomInfo"><a>基本信息</a></li> <li id="authenchange"><a>認證信息</a></li> <li id="phoneAuth"><a>手機認證</a></li> <li id="bankCardAuth"><a>銀行卡認證</a></li> <li id="emailAuth"><a>郵箱認證</a></li> <li id="passwordmodify"><a>密碼修改</a></li> <li id="paymentpsdmodify"><a>支付密碼</a></li> <li id="address"><a>收貨地址</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-star"></i>評價管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="usercomments"><a>我的評價</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-bell"></i>消息管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="mymsg"><a>我的消息</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-signal"></i>統計管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="censusmanager"><a>月貿易量</a></li> <li id="statisticmanager"><a>月訂單量</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-credit-card"></i>白條管理<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li id="oweindex"><a>開通白條</a></li> <li id="myIous"><a>我的白條</a></li> <li id="louorderlist"><a>訂單列表</a></li> </ul> </li> </ul></div><script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script><script src='js/script.js'></script></body></html>

前臺用jQuery,后臺用C#,前臺通過ajax技術與后臺交互,不知樓主想問什么,樓主先看看jQuery吧

2.css部分

你在上傳圖片的地方寫個方法upload(url),在js中用ajax來傳值(url)到后臺,后臺獲取到圖片上傳的url就行了啊

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}body { background:#fff; font:12px Microsoft YaHei,arial,sans-serif}ul { list-style-type:none}a { color:#f39800; text-decoration:none}.list-title { display:inline-block; width:100%; max-width:200px; border-top:solid 1px #ccc; border-left:solid 1px #ccc; border-right:solid 1px #ccc; background:#fff; text-align:center; height:60px; line-height:60px; font-size:20px; color:#f39800; font-weight:700; cursor:pointer}h1 { color:#fff; font-size:24px; font-weight:400; text-align:center; margin-top:80px}h1 a { color:#f39800; font-size:16px}.accordion { width:100%; max-width:200px; border:solid 1px #ccc; background:#fff}.accordion .link { cursor:pointer; display:block; padding:15px 15px 15px 42px; color:#4d4d4d; font-size:14px; font-weight:700; border-bottom:1px solid #ccc; position:relative; -webkit-transition:all .4s ease; -o-transition:all .4s ease; transition:all .4s ease}.accordion li:last-child .link { border-bottom:0}.accordion li { cursor:pointer}.accordion li i { position:absolute; top:16px; left:12px; font-size:18px; color:#595959; -webkit-transition:all .4s ease; -o-transition:all .4s ease; transition:all .4s ease}.accordion li i.fa-chevron-down { right:12px; left:auto; font-size:16px}.accordion li.open .link { color:#f39800}.accordion li.open i { color:#f39800}.accordion li.open i.fa-chevron-down { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg)}.submenu { display:none; background:#f5f5f5; font-size:14px}.submenu li { border-bottom:1px solid #d6d7dc}.submenu a { display:block; text-decoration:none; color:#666; padding:12px; padding-left:42px; -webkit-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease}.submenu a:hover,.submenu li.current a { background:#f39800; color:#fff}

這樣設計的系統只能這樣做了,jquery用的js代碼應該是bai最少的,擴展應該問題也du不大,引入新的JS文件就可以擴展,不過維護確實麻煩,換了一批人以后后zhi來的人可能就能難看懂寫的daoJS代碼。

3.js部分

1.新建demo.aspx頁面。2.首先在該頁面的后臺文件demos.aspx.cs中添加引用。using System.Web.Services;3.無參數的方法調用. 大家注意了,這個版本不能低于.net framework 2.0。2.0已下不支持的。

$(function() { var Accordion = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; var links = this.el.find('.link'); links.on('click', { el: this.el, multiple: this.multiple }, this.dropdown) }; Accordion.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this); $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); } }; var accordion = new Accordion($('#accordion'), false); $('.submenu li').click(function() { $(this).addClass('current').siblings('li').removeClass('current'); });});

以上就是jQuery實現B2B網站后臺管理系統側導航的詳細內容,更多關于jQuery 實現側導航的資料請關注真格學網其它相關文章!

后臺數據(通常是用后端語言下去跟資料庫取得的)可以使用 Ajax 下去做非同步的資料取得如果數據跟 jQuery 是來自不同站的,通常會有 cross domain 的問題不過只要有設置好 cross domain,剩下就是怎么去抓資料的問題通常我會從后端生成 json,最后用 ajax 讀該網址并取的資料來操作呈現不懂可以私信問我詳細內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • jquery實現左側導航模塊的顯示與隱藏效果
  • 基于jquery實現仿百度百科右側導航代碼附源碼下載
  • jquery實現的仿天貓側導航tab切換效果
  • 簡單的jquery左側導航欄和頁面選中效果
  • jquery實戰之仿淘寶商城左側導航效果
  • jquery實現div跟隨鼠標移動
  • jquery拖動元素并對元素進行重新排序
  • jquery實現圖片平滑滾動詳解
  • jquery ajax,ashx,json的用法總結
  • jquery判斷checkbox(復選框)是否被選中以及全選、反選實現代碼
  • jquery解析xml的方法小結
  • 基于jquery的web頁面日期格式化插件
  • jquery解決圖片路徑不存在執行替換路徑
  • 打造基于jquery的高性能treeview(asp.net)
  • jquery中:input選擇器用法實例
  • 如何讓后臺的數據用Jquery實現
  • “網站后臺如何管理jQuery設計的網頁"
  • jquery是怎么實現后臺的
  • jquery 調用 Java 后臺方法
  • 使用jQuery獲取后臺數據
  • jquery 前臺 c# 實現后臺功能 基本步驟是什么 如何實現
  • jquery ajax實現jsp頁面圖片上傳與后臺獲取。
  • j2ee網站后臺管理系統(所有功能均用ajax實現)可以用哪些技術?除jquery還有什么呢?
  • jquery調用后臺方法?
  • php jquery多條件無刷新查詢。后臺程序實現了,就是前端jquery如何寫,把選項送給search.php?謝謝啦
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全yui.ext相關prototypejqueryangularjsjsonlib_jsjs面向對象extjsmootoolsseajsdojovue.jsbackbone.js其它首頁javascriptjavascript類庫jquery實現左側導航模塊的顯示與隱藏效果基于jquery實現仿百度百科右側導航代碼附源碼下載jquery實現的仿天貓側導航tab切換效果簡單的jquery左側導航欄和頁面選中效果jquery實戰之仿淘寶商城左側導航效果jquery實現div跟隨鼠標移動jquery拖動元素并對元素進行重新排序jquery實現圖片平滑滾動詳解jquery ajax,ashx,json的用法總結jquery判斷checkbox(復選框)是否被選中以及全選、反選實現代碼jquery解析xml的方法小結基于jquery的web頁面日期格式化插件jquery解決圖片路徑不存在執行替換路徑打造基于jquery的高性能treeview(asp.net)jquery中:input選擇器用法實例jquery加載頁面的方法(頁面加載完jquery判斷checkbox是否選中的3種jquery獲取和修改img的src值的方jquery 綁定select標簽的onchangjquery獲取復選框被選中的值jquery $(document).ready() 與wjquery判斷radio(單選框)是否選jquery 將disabled的元素置為enajquery中獲取id值方法小結jquery判斷元素是否隱藏的多種方jquery對象和dom對象之間相互轉換的方法介jquery easyui validatebox remote的使用詳解jquery中的dom操作jquery chosen通用初始化jquery插件fusioncharts繪制的2d帕累托圖jquery簡單實現日歷的方法基于jquery實現的向下滑動二級菜單效果代hover的用法及live的用法介紹(鼠標懸停效詳解jquery中的事件利用浮層使select不可選的實現方法
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载