Bits of .NET

📊 Data Attributes = Interactive Power

Static HTML is limited. Data attributes add interactive functionality without cluttering code.

📝 Data Attribute Basics

<div id="user-123" 
     data-user-id="123" 
     data-role="admin" 
     data-status="active"
     data-settings='{"theme":"dark","language":"en"}'
>
    User Content
</div>

<button class="action-btn" 
        data-action="delete" 
        data-id="456"
        data-confirm-message="Are you sure?"
>
    Delete
</button>

// Access Data Attributes
const element = document.getElementById('user-123');
const userId = element.dataset.userId; // '123'
const role = element.dataset.role;     // 'admin'
const settings = JSON.parse(element.dataset.settings);

🎯 Interactive Components

// Modal Controller
document.querySelectorAll('[data-modal-target]').forEach(button => {
    button.addEventListener('click', function() {
        const modalId = this.dataset.modalTarget;
        const modal = document.getElementById(modalId);
        modal.classList.add('active');
    });
});

// Accordion
document.querySelectorAll('[data-accordion]').forEach(header => {
    header.addEventListener('click', function() {
        const target = this.dataset.accordion;
        const panel = document.querySelector(`[data-panel="${target}"]`);
        panel.classList.toggle('open');
    });
});

// Tooltip
document.querySelectorAll('[data-tooltip]').forEach(element => {
    element.addEventListener('mouseenter', function(e) {
        const tooltipText = this.dataset.tooltip;
        showTooltip(e, tooltipText);
    });
});

// Confirmation
document.querySelectorAll('[data-confirm]').forEach(element => {
    element.addEventListener('click', function(e) {
        const message = this.dataset.confirm;
        if (!confirm(message)) {
            e.preventDefault();
        }
    });
});

// State Management
const appState = {
    count: 0,
    items: []
};

function updateState() {
    document.querySelectorAll('[data-state]').forEach(element => {
        const statePath = element.dataset.state;
        const value = statePath.split('.').reduce((obj, key) => obj[key], appState);
        element.textContent = value;
    });
}

💡 Data Attribute Tips

• Use for configuration data
• Use for component state
• Store JSON for complex data
• Use namespacing for clarity
• Access via dataset property