我正在将Drupal 6主題轉換為Drupal 7,并且無法将此部分轉換出來。我有以下HTML:如何自動調整此HTML菜單的大小以适應父寬度?
- Design
- Inspiration
- Nature
- Photography
- Technology
- Travel
- Tutorials
- Urban
- Video Games
在Drupal的6這個主題是使用jQuery V1.3.2,但在Drupal 7的jQuery 1.4.4是内置的,是以功能似乎并不奏效。下面是jQuery函數:
$(function(){
clearFormFields({
clearInputs: true,
clearTextareas: false,
passwordFieldText: true,
addClassFocus: "focus",
filterClass: "form-text"
});
initAutoScalingNav({
menuId: "nav",
sideClasses: true
});
ieHover('#nav li');
$('div.gallery-block').fadeGallery({
slideElements:'ul.gallery > li',
pagerLinks:'ul.switcher li'
});
$('div.pictures-box').fadeGallery({
slideElements:'ul.fade-gallery > li',
pagerLinks:'ul.pictures-list li',
title: true
});
});
function initAutoScalingNav(o) {
if (!o.menuId) o.menuId = "nav";
if (!o.tag) o.tag = "a";
if (!o.spacing) o.spacing = 0;
if (!o.constant) o.constant = 0;
if (!o.minPaddings) o.minPaddings = 0;
if (!o.liHovering) o.liHovering = false;
if (!o.sideClasses) o.sideClasses = false;
if (!o.equalLinks) o.equalLinks = false;
if (!o.flexible) o.flexible = false;
var nav = document.getElementById(o.menuId);
if(nav) {
nav.className += " scaling-active";
var lis = nav.getElementsByTagName("li");
var asFl = [];
var lisFl = [];
var width = 0;
for (var i=0, j=0; i
if(lis[i].parentNode == nav) {
var t = lis[i].getElementsByTagName(o.tag).item(0);
asFl.push(t);
asFl[j++].width = t.offsetWidth;
lisFl.push(lis[i]);
if(width < t.offsetWidth) width = t.offsetWidth;
}
if(o.liHovering) {
lis[i].onmouseover = function() {
this.className += " hover";
}
lis[i].onmouseout = function() {
this.className = this.className.replace("hover", "");
}
}
}
var menuWidth = nav.clientWidth - asFl.length*o.spacing - o.constant;
if(o.equalLinks && width * asFl.length < menuWidth) {
for (var i=0; i
asFl[i].width = width;
}
}
width = getItemsWidth(asFl);
if(width < menuWidth) {
var version = navigator.userAgent.toLowerCase();
for (var i=0; getItemsWidth(asFl) < menuWidth; i++) {
asFl[i].width++;
if(!o.flexible) {
asFl[i].style.width = asFl[i].width + "px";
}
if(i >= asFl.length-1) i=-1;
}
if(o.flexible) {
for (var i=0; i
width = (asFl[i].width - o.spacing - o.constant/asFl.length)/menuWidth*100;
if(i != asFl.length-1) {
lisFl[i].style.width = width + "%";
}
else {
if(navigator.appName.indexOf("Microsoft Internet Explorer") == -1 || version.indexOf("msie 8") != -1 || version.indexOf("msie 9") != -1)
lisFl[i].style.width = width + "%";
}
}
}
}
else if(o.minPaddings > 0) {
for (var i=0; i
asFl[i].style.paddingLeft = o.minPaddings + "px";
asFl[i].style.paddingRight = o.minPaddings + "px";
}
}
if(o.sideClasses) {
lisFl[0].className += " first-child";
lisFl[0].getElementsByTagName(o.tag).item(0).className += " first-child-a";
lisFl[lisFl.length-1].className += " last-child";
lisFl[lisFl.length-1].getElementsByTagName(o.tag).item(0).className += " last-child-a";
}
nav.className += " scaling-ready";
}
function getItemsWidth(a) {
var w = 0;
for(var q=0; q
w += a[q].width;
}
return w;
}
}
在Drupal的版本6上面的代碼自動添加風格=“寬度:XX”标記的超連結,這使得菜單中生長的菜單按鈕,以填補的寬度它的容器。
謝謝。
+1
我看到一個使用jQuery的零相關代碼,除了( )(檔案準備簡寫)。 –
2011-03-02 04:05:14